/* ============================================
   1. CSS Variables
   ============================================ */

/* Dark theme (default) */
:root {
    /* Backgrounds */
    --bg-body: #1a1a1a;
    --bg-card: #222;
    --bg-elevated: #262626;
    --bg-hover: #242424;
    --bg-nav: #111;

    /* Borders */
    --border-strong: #333;
    --border-subtle: #2a2a2a;
    --border-faint: #444;

    /* Text */
    --text-bright: #e0e0e0;
    --text-normal: #ccc;
    --text-muted: #999;
    --text-faint: #777;
    --text-dim: #555;
    --text-white: #fff;

    /* Buttons */
    --border-button-outline: var(--border-faint);

    /* Accents */
    --accent-link: rgb(139, 149, 155);
    --accent-link-hover: rgb(170, 180, 186);
    --accent-success: #2d8a4e;
    --accent-error: #d98a8a;
    --accent-warning: #d9b968;
    --accent-info: #7aa8d4;

    /* Accent backgrounds (for pills, badges, status boxes) */
    --accent-success-bg: rgba(45, 138, 78, 0.1);
    --accent-success-border: rgba(45, 138, 78, 0.6);
    --accent-error-bg: rgba(217, 138, 138, 0.15);
    --accent-error-border: rgba(217, 138, 138, 0.3);
    --accent-warning-bg: rgba(217, 185, 104, 0.15);
    --accent-warning-border: rgba(217, 185, 104, 0.3);
    --accent-warning-text: #1a1a1a;
    --accent-info-bg: rgba(138, 180, 248, 0.15);
    --accent-info-border: rgba(138, 180, 248, 0.3);

    /* Charts */
    --chart-bar-start: #8b9dc3;
    --chart-bar-end: #a8b5d1;

    /* Pico overrides */
    --pico-primary: var(--accent-link);
    --pico-primary-hover: var(--accent-link-hover);
    --pico-background-color: var(--bg-body);
    --pico-card-background-color: var(--bg-card);
    --pico-font-size: 15px;
    --pico-spacing: 0;
    --pico-accordion-close-summary-color: var(--accent-link);
    --pico-accordion-open-summary-color: var(--accent-link);
    --pico-h1-color: var(--text-bright);
    --pico-h2-color: var(--text-normal);
    --pico-h3-color: var(--text-normal);
    --pico-h4-color: var(--text-normal);
    --pico-h5-color: var(--text-normal);
    --pico-h6-color: var(--text-normal);
    --pico-form-element-background-color: var(--bg-card) !important;
    --pico-form-element-focus-color: var(--border-faint) !important;
    --pico-color-placeholder: var(--text-faint) !important;

    /* Layout */
    --nav-height: 3.5rem;

    /* Border radius */
    --radius-sm: 0.1875rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;

    /* Sizing - inputs & controls */
    --input-height: 2.25rem;
    --input-width: 11.25rem;
    --input-width-sm: 5rem;
    --input-width-lg: 31.25rem;

    /* Sizing - icons */
    --icon-xs: 0.75rem;
    --icon-sm: 1rem;
    --icon-md: 1.5rem;
    --icon-lg: 2rem;
    --icon-xl: 3rem;

    /* Sizing - misc */
    --avatar-sm: 2rem;
    --chart-height: 12.5rem;
    --modal-width: 31.25rem;

    /* Images */
    --bg-landing: url('/images/bg-landing.svg');
}

/* Light theme - narayana.ee inspired */
[data-theme="light"] {
    /* Backgrounds */
    --bg-body: #f5f5f5;
    --bg-card: #fefefe;
    --bg-elevated: #f8f8f8;
    --bg-hover: #f0f0f0;
    --bg-nav: #fefefe;

    /* Borders */
    --border-strong: #ddd;
    --border-subtle: #eee;
    --border-faint: #e1e1e8;

    /* Text */
    --text-bright: #000;
    --text-normal: #222;
    --text-muted: #666;
    --text-faint: #999;
    --text-dim: #888;

    /* Buttons */
    --border-button-outline: #666;

    /* Accents */
    --accent-link: #0d6efd;
    --accent-link-hover: #0a58ca;
    --accent-success: #157347;
    --accent-error: #c82333;
    --accent-warning: #d96a0b;
    --accent-info: #0b7dda;

    /* Accent backgrounds (for pills, badges, status boxes) */
    --accent-success-bg: rgba(21, 115, 71, 0.12);
    --accent-success-border: rgba(21, 115, 71, 0.4);
    --accent-error-bg: rgba(200, 35, 51, 0.1);
    --accent-error-border: rgba(200, 35, 51, 0.35);
    --accent-warning-bg: rgba(217, 106, 11, 0.1);
    --accent-warning-border: rgba(217, 106, 11, 0.35);
    --accent-warning-text: #1a1a1a;
    --accent-info-bg: rgba(11, 125, 218, 0.1);
    --accent-info-border: rgba(11, 125, 218, 0.35);

    /* Charts */
    --chart-bar-start: #6b8cbe;
    --chart-bar-end: #8ba5d1;
}

/* Light theme - invert hero background map */
[data-theme="light"] .landing-hero {
    background: var(--bg-body);
}
[data-theme="light"] .landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(200, 200, 200, 0.3) 0%, transparent 60%),
        var(--bg-landing) center/contain no-repeat;
    filter: invert(1);
    opacity: 0.6;
    z-index: 0;
}
[data-theme="light"] .landing-hero > * {
    position: relative;
    z-index: 1;
}

/* Placeholder color override (Pico fallback) */
::placeholder {
    color: var(--text-faint) !important;
    opacity: 1 !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--text-faint) !important;
    opacity: 1 !important;
}

/* Invert logo in dark theme */
.news-article__image[src*="logo"] {
    filter: invert(1);
}
[data-theme="light"] .news-article__image[src*="logo"] {
    filter: none;
}

/* ============================================
   Narayana - Unified Theme
   ============================================

   Table of Contents:
   1. Base
   2. Utilities
   3. Components
      3.1 Buttons
      3.2 Badges
      3.3 Cards
      3.4 Alerts
      3.5 Tabs
      3.6 Tables
      3.7 Collapsible Sections
      3.8 Icons
      3.9 Charts
      3.10 Devices list
   4. Page-Specific
      4.1 Dashboard
      4.2 Auth (Login/Register shared)
      4.3 Login
      4.4 Register
      4.5 Info Page (Contacts, Pricing)
      4.6 News
      4.7 Pagination
      4.8 Broadcasts
      4.9 Payments
   5. Modal
   6. Error page
   7. Landing page
   8. Admin Dashboard (Keeluala)
   ============================================ */

/* ============================================
   1. Base & Reset
   ============================================ */
body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    margin: 0;
    background: var(--bg-body);
    color: var(--text-normal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Login page needs flex to center content */
main:has(.login-section) {
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent-link);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent-link-hover);
    text-decoration: underline;
}

code {
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    color: var(--text-bright);
}

.container-wide {
    width: 97%;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-content {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* margin-top only for logged-in app pages, not landing */
main.container-wide:has(.page-header) { margin-top: 1.5rem; }

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.page-header h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
}
.page-header__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
}
.page-header:has(.page-subtitle) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}
.page-header:has(.page-subtitle) h1 {
    width: 100%;
}
.page-header:has(.page-subtitle) .page-header__meta {
    width: 100%;
}
.page-header__meta .page-subtitle {
    flex: 1;
}
.page-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Page toolbar */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    opacity: 0.9;
}
.page-toolbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem !important;
    text-decoration: none;
}
.page-toolbar__link:hover { color: var(--accent-link); }
.page-toolbar__form { display: contents; }
button.page-toolbar__link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.page-toolbar__link--disabled,
.page-toolbar__link--disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-muted);
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.back-link:hover { color: var(--accent-link); }

/* Icon button */
.btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.btn--icon:hover {
    color: var(--accent-link);
    border-color: var(--accent-link);
}

/* Detail/Show view content */
.page-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-normal);
}
.page-content a { color: var(--accent-link); }
.page-content a:hover { color: var(--accent-link-hover); }

.section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}
.section-title--no-border {
    border-bottom: none !important;
    padding: 1rem !important;
}

.section-title--large {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--text-bright);
    text-align: center;
    margin: 0 0 0.75rem;
}

.section-empty {
    padding: 1rem 1.25rem;
    margin: 0;
    color: var(--text-faint);
    font-size: 0.95rem;
    text-align: center;
}

.section-footer {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-strong);
    font-size: 0.85rem;
}
.section-footer--center {
    margin-top: 1rem;
    padding: 0 1rem 1rem;
    background: transparent;
    border: none;
}
.section-footer--center .btn {
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
}

hr.divider {
    border: none;
    border-top: 1px solid var(--border-strong);
    margin: 1.5rem 0 1rem;
}

/* ============================================
   2. Utilities
   ============================================ */
.text-success, .text-green { color: var(--accent-success) !important; }
.text-error, .text-red { color: var(--accent-error) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-info { color: var(--accent-info) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-bold { font-weight: 600; }
.text-sm { font-size: 0.85em; line-height: 1.2; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* Invert images only in dark mode */
:root:not([data-theme="light"]) .invert { filter: invert(1); opacity: 0.85; }

/* Invert images only in light mode */
[data-theme="light"] .invert-light { filter: invert(1); opacity: 0.85; }


/* Visually hidden (accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.accent-muted {
    background: var(--bg-elevated);
    color: var(--text-muted);
}
.accent-success {
    background: var(--accent-success-bg) !important;
    color: var(--accent-success) !important;
}
.accent-error {
    background: var(--accent-error-bg) !important;
    color: var(--accent-error) !important;
}
.accent-warning {
    background: var(--accent-warning-bg) !important;
    color: var(--accent-warning) !important;
}
.accent-info {
    background: var(--accent-info-bg) !important;
    color: var(--accent-info) !important;
}

/* Bordered variants */
.accent-muted-bordered { 
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border-faint);
}
.accent-success-bordered {
    background: var(--accent-success-bg) !important;
    border: 1px solid var(--accent-success) !important;
    color: var(--accent-success) !important;
}
.accent-error-bordered {
    background: var(--accent-error-bg) !important;
    border: 1px solid var(--accent-error) !important;
    color: var(--accent-error) !important;
}
.accent-warning-bordered {
    background: var(--accent-warning-bg) !important;
    border: 1px solid var(--accent-warning) !important;
    color: var(--accent-warning) !important;
}
.accent-info-bordered {
    background: var(--accent-info-bg) !important;
    border: 1px solid var(--accent-info) !important;
    color: var(--accent-info) !important;
}

/* ============================================
   3. Components
   ============================================ */

/* --- 3.1 Buttons --- */
.btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }

.btn--primary {
    background: var(--text-normal);
    color: var(--bg-body);
}
.btn--primary:hover {
    background: var(--text-bright);
    color: var(--bg-body);
}

.btn--outline {
    background: transparent;
    border-color: var(--border-button-outline);
    color: var(--text-normal);
}
.btn--outline:hover {
    border-color: var(--text-muted);
    color: var(--text-bright);
}
.btn--outline.btn--active {
    background: var(--accent-warning-bg);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
}

.btn--small {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.btn--large {
    padding: 0.85rem 2rem;
    font-size: 1.1rem;
}

.btn--success {
    background: var(--accent-success-bg);
    color: var(--accent-success);
    border-color: var(--accent-success-border);
}
.btn--success:hover {
    background: var(--accent-success-bg);
    color: var(--accent-success);
    border-color: var(--accent-success);
}

.btn--error {
    background: var(--accent-error);
    color: var(--text-white);
    border-color: var(--accent-error);
}
.btn--error:hover {
    background: var(--accent-error);
    color: var(--text-white);
    filter: brightness(1.1);
}
a.btn--error, a.btn--error:hover { color: var(--text-white); }

.btn--warning {
    background: var(--accent-warning);
    color: var(--text-white);
    border-color: var(--accent-warning);
}
.btn--warning:hover {
    background: var(--accent-warning);
    color: var(--text-white);
    filter: brightness(1.1);
}

.btn--info {
    background: var(--accent-info-bg);
    color: var(--accent-info);
    border-color: var(--accent-info-border);
}
.btn--info:hover {
    background: var(--accent-info-bg);
    color: var(--accent-info);
    border-color: var(--accent-info);
}
a.btn--info, a.btn--info:hover { color: var(--accent-info); }

/* --- 3.2 Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    width: auto;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.badge--clickable {
    cursor: pointer;
    border: none;
    font-family: inherit;
    gap: 0.3em !important;
    width: auto !important;
    padding: 0.25rem 0.6rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}
button.badge:not(.badge--clickable) {
    border: none;
    font-family: inherit;
    cursor: default;
}
.badge--clickable:hover {
    opacity: 0.8;
}
.badge--wide {
    min-width: 5rem;
    text-align: center;
}
.badge--auto {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    background: var(--accent-success-bg);
    color: var(--accent-success);
    border: 1px solid var(--accent-success-border);
    vertical-align: middle;
}

/* --- Password reveal (CSS-only) --- */
.password-reveal {
    cursor: pointer;
    display: inline-block;
}
.password-reveal__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.password-reveal__hidden {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.password-reveal__value {
    display: none;
}
.password-reveal__toggle:checked ~ .password-reveal__hidden {
    display: none;
}
.password-reveal__toggle:checked ~ .password-reveal__value {
    display: inline;
}

/* Priority rows for rates table */
.rates-table .priority-row {
    display: none;
}
#show-all-priorities:checked ~ .category-tabs .rates-table .priority-row {
    display: table-row;
}
.rates-table .priority-row td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-top: none;
}

/* --- 3.3 Cards --- */
.card {
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}

/* --- 3.4 Alerts --- */
.alert-box {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    max-width: 100%;
    box-sizing: border-box;
}
.alert-box strong { display: block; }
.alert-box span { font-size: 0.9rem; }

/* Alert in guest pages (no container-wide) needs horizontal padding */
main:not(.container-wide) > .alert-box {
    margin-left: 2%;
    margin-right: 2%;
}

/* --- 3.5 Info Box --- */
.info-box {
    background: var(--bg-card);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    margin-bottom: 1.25rem;
}
.info-box p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0.3rem;
}
.info-box p:last-child {
    margin-bottom: 0;
}
.info-box--warning {
    border-color: var(--accent-warning-border);
    background: var(--accent-warning-bg);
}
.info-box--warning p {
    color: var(--accent-warning);
}

/* --- 3.5 Tabs (link-based, styled like category-tabs) --- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}
.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tab:hover {
    border-color: var(--border-faint);
    color: var(--text-normal);
    text-decoration: none;
}
.tab.active {
    border-color: var(--text-muted);
    background: var(--bg-card);
    color: var(--text-bright);
}
.tab--action {
    margin-left: auto;
    background: var(--accent-info-bg);
    color: var(--accent-info);
    border-color: var(--accent-info-border);
    gap: 0.35rem;
}
.tab--action:hover {
    background: var(--accent-info-bg);
    color: var(--accent-info);
    border-color: var(--accent-info);
}
.tab--inactive {
    opacity: 0.5;
    pointer-events: none;
}
/* Category tabs (unified CSS-only tabs for rates, filters, etc.) */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}
.category-tabs__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.category-tabs__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.category-tabs__label:hover {
    border-color: var(--border-faint);
    color: var(--text-normal);
}
.category-tabs__input:checked + .category-tabs__label {
    border-color: var(--text-muted);
    background: var(--bg-card);
    color: var(--text-bright);
}
.category-tabs__panel {
    display: none;
    width: 100%;
    margin-top: 1rem;
    order: 99;
}
/* Category tabs toggle button */
.category-tabs__toggle {
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}
.category-tabs [type="radio"] ~ .category-tabs__label {
    margin-inline-end: 0.35rem !important;
}
.category-tabs__toggle:hover {
    border-color: var(--border-strong);
    color: var(--text-normal);
}

/* GSM rates: show panel when corresponding radio is checked */
#gsm-incoming:checked ~ #panel-incoming,
#gsm-outgoing:checked ~ #panel-outgoing,
#gsm-sms:checked ~ #panel-sms,
#gsm-data:checked ~ #panel-data,
#gsm-volte:checked ~ #panel-volte {
    display: block;
}

/* VoIP rates: show panel when corresponding radio is checked */
#voip-outgoing:checked ~ #panel-voip-outgoing,
#voip-sms:checked ~ #panel-voip-sms,
#voip-inbound:checked ~ #panel-voip-inbound {
    display: block;
}

/* Voice rates: show panel when corresponding radio is checked */
#voice-outgoing:checked ~ #panel-voice-outgoing,
#voice-inbound:checked ~ #panel-voice-inbound {
    display: block;
}

/* Messages rates: show panel when corresponding radio is checked */
#msg-sms:checked ~ #panel-msg-sms,
#msg-hlr:checked ~ #panel-msg-hlr {
    display: block;
}

/* Combined rates view (view_option mode): show panel when corresponding radio is checked */
#rate-outgoing:checked ~ #panel-rate-outgoing,
#rate-inbound:checked ~ #panel-rate-inbound,
#rate-voip-sms:checked ~ #panel-rate-voip-sms,
#rate-hlr:checked ~ #panel-rate-hlr,
#rate-gsm-incoming:checked ~ #panel-rate-gsm-incoming,
#rate-gsm-outgoing:checked ~ #panel-rate-gsm-outgoing,
#rate-gsm-sms:checked ~ #panel-rate-gsm-sms,
#rate-gsm-data:checked ~ #panel-rate-gsm-data,
#rate-gsm-volte:checked ~ #panel-rate-gsm-volte {
    display: block;
}

/* Plans view: show panel when corresponding radio is checked */
#plan-options:checked ~ #panel-plan-options,
#plan-plans:checked ~ #panel-plan-plans {
    display: block;
}

/* MB/GB toggle for data rates - only shown when Data or VoLTE tab selected */
.category-tabs:has(#gsm-incoming:checked) .category-tabs__toggle,
.category-tabs:has(#gsm-outgoing:checked) .category-tabs__toggle,
.category-tabs:has(#gsm-sms:checked) .category-tabs__toggle {
    display: none;
}
/* MB/GB toggle text states - show "per GB" label by default, "per MB" when checked */
.category-tabs__toggle .toggle-gb { display: inline; }
.category-tabs__toggle .toggle-mb { display: none; }
#show-per-gb:checked ~ .category-tabs .category-tabs__toggle .toggle-gb { display: none; }
#show-per-gb:checked ~ .category-tabs .category-tabs__toggle .toggle-mb { display: inline; }

/* Data rates table - show MB by default, GB when checked */
.data-rates-table .rate-mb,
.data-rates-table .rate-header-mb { display: inline; }
.data-rates-table .rate-gb,
.data-rates-table .rate-header-gb { display: none; }
#show-per-gb:checked ~ .category-tabs .data-rates-table .rate-mb,
#show-per-gb:checked ~ .category-tabs .data-rates-table .rate-header-mb { display: none; }
#show-per-gb:checked ~ .category-tabs .data-rates-table .rate-gb,
#show-per-gb:checked ~ .category-tabs .data-rates-table .rate-header-gb { display: inline; }

/* Rates table unit toggle (MB/GB) - for browse.erb pages */
.rates-table .rate-mb,
.rates-table .rate-header-mb { display: inline; }
.rates-table .rate-gb,
.rates-table .rate-header-gb { display: none; }
#rates-unit-toggle:checked ~ .table-responsive .rates-table .rate-mb,
#rates-unit-toggle:checked ~ .table-responsive .rates-table .rate-header-mb { display: none; }
#rates-unit-toggle:checked ~ .table-responsive .rates-table .rate-gb,
#rates-unit-toggle:checked ~ .table-responsive .rates-table .rate-header-gb { display: inline; }

/* Clickable rate header toggle */
.rate-header-toggle {
    cursor: pointer;
    user-select: none;
}
.rate-header-toggle:hover {
    text-decoration: underline;
}

/* Priorities toggle text states */
.category-tabs__toggle .toggle-show { display: inline; }
.category-tabs__toggle .toggle-hide { display: none; }
#show-all-priorities:checked ~ .category-tabs .category-tabs__toggle .toggle-show { display: none; }
#show-all-priorities:checked ~ .category-tabs .category-tabs__toggle .toggle-hide { display: inline; }

/* --- 3.6 Tables --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}
/* Remove card styling when table is inside a card or section-toggle (avoid double borders) */
.card .table-responsive,
.section-toggle .table-responsive,
.section-box .table-responsive {
    background: transparent;
    border: none;
    border-radius: 0;
}
/* Table with more items indicator */
.table-responsive--has-more {
    position: relative;
}
.table-responsive--has-more::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.table-responsive--has-more:hover::after {
    opacity: 0;
}

.data-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0;
}
.data-table th,
details.section-toggle .data-table th {
    background: var(--bg-card) !important;
    color: var(--text-faint) !important;
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    text-align: left;
    border: none !important;
    border-bottom: 1px solid var(--border-strong) !important;
    white-space: nowrap;
}
.data-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-normal);
    vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td > .text-muted.text-sm { margin: 1px 0 0 1px; }

/* Sortable table headers */
.data-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}
.data-table th.sortable-header:hover {
    color: var(--text-bright);
}
.data-table th.sortable-header::after {
    content: "⇅";
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
    font-size: 0.7em;
}
.data-table th.sortable-header.sort-asc::after {
    content: "↑";
    opacity: 1;
}
.data-table th.sortable-header.sort-desc::after {
    content: "↓";
    opacity: 1;
}
.data-table .table-action {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
}
.data-table .table-action:hover {
    color: var(--accent-link);
    background: var(--bg-elevated);
}
/* Actions column - push to right edge */
.data-table th:last-child,
.data-table td:last-child {
    width: 1%;
    white-space: nowrap;
}
/* Table action buttons group */
.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}
.table-actions .table-action {
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated) !important;
}
button.table-action,
select.table-action {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background: none;
    border: none;
}
.table-actions .table-action.active {
    border-color: var(--border-faint);
    color: var(--text-muted) !important;
}
.table-actions .table-action.active:hover {
    color: var(--text-normal) !important;
}

/* Inline form (for button actions in tables) */
.inline-form {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.inline-form button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    position: relative;
    top: -3px;
}

/* Input row in tables (for adding new items) */
.input-row__input {
    height: 1.75rem !important;
    padding: 0.25rem 0 !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-normal);
    margin: 0 !important;
}
.input-row__input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Period selector for purchase */
.period-select {
    padding: 0.4rem 2.5rem 0.4rem 0.7rem !important;
    font-size: 0.8rem;
    min-width: 7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    cursor: pointer;
}

/* Dot separator for links */
.separator {
    color: var(--text-dim) !important;
    margin: 0 0.25rem;
}

/* --- 3.7 Collapsible Sections --- */
details.section-toggle,
.section-box {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
}
details.section-toggle:last-of-type,
.section-box:last-of-type { margin-bottom: 0; }

.section-box--compact {
    padding: 0.5rem 1rem;
}

/* Tables inside section-box - remove double borders */
.section-box .data-table { border: none; }

/* Non-collapsible section header */
.section-box > h3.section-title {
    padding: 0.65rem 1rem;
    margin: 0;
    font-weight: 600;
    /* font-size: 0.9rem; */
    color: var(--text-muted);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}
.section-title__action {
    color: var(--text-dim);
    line-height: 1;
}
.section-title__action:hover {
    color: var(--accent-link);
}

/* Section header with tabs */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    gap: 1rem;
}
.section-header .section-title {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.section-header .device-tabs__nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

details.section-toggle > summary {
    padding: 0.65rem 1rem;
    background: var(--bg-card);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    color: var(--text-muted) !important;
}
details.section-toggle > summary::-webkit-details-marker,
details.section-toggle > summary::marker { display: none; content: ""; }

details.section-toggle > summary::after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s ease;
}
details.section-toggle[open] > summary::after { transform: rotate(180deg); }
details.section-toggle > summary:hover { background: var(--bg-hover); }

/* Section toggle content padding (for non-table content) */
details.section-toggle > .info-box,
details.section-toggle > form,
details.section-toggle > .section-content,
details.section-toggle > .finance-list {
    margin: 0 1rem;
}
details.section-toggle > .info-box:first-of-type {
    margin-top: 0.75rem;
}
details.section-toggle > .info-box + form {
    margin-top: 1.25rem;
}
details.section-toggle > .info-box + .finance-list {
    margin-top: 0.5rem;
}
details.section-toggle > form {
    margin-bottom: 0.75rem;
}

/* Section box content padding (for non-table content) */
.section-box > form {
    padding: 0 1rem 1rem;
}

/* --- 3.8 Icons --- */
svg.icon {
    display: inline-block;
    width: var(--icon-md);
    height: var(--icon-md);
    fill: currentColor;
    stroke: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}
svg.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
svg.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
svg.icon--md { width: var(--icon-md); height: var(--icon-md); }
svg.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
svg.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
svg.icon--xxl { width: 1.125rem; height: 1.125rem; }

/* --- 3.9 Charts --- */

/* Chart Container & Layout */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    align-items: stretch;
}

.stats-grid--vertical {
    grid-template-columns: 1fr;
}

.chart-container {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    min-width: 0;
    overflow: hidden;
}

.chart-container .bar-chart,
.chart-container .chart-ranking {
    flex: 1;
    min-height: 0;
}

.chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Chart Header & Legend */
#topCarousel .chart-header {
    margin-top: -0.2rem;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}
.chart-header .chart-title {
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: 1rem;
}

.chart-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chart-legend__item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.chart-legend__item--spent::before { background: var(--accent-error); }
.chart-legend__item--payments::before { background: var(--accent-success); }
.chart-legend__item--calls::before { background: var(--accent-info); }
.chart-legend__item--data::before { background: var(--accent-warning); }

/* Chart Carousel */
.chart-carousel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-carousel__arrow {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-weight: 300;
    text-decoration: none;
}

.chart-carousel__arrow:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
}

.chart-carousel__title-text {
    display: none;
}

.chart-carousel__title-text.active {
    display: inline;
    margin-top: 0.3rem;
}

.chart-carousel__content {
    display: none;
}

.chart-carousel__content.active {
    display: block;
}

/* Single Bar Chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem;
    padding-bottom: 0.25rem;
    padding-top: 1.5rem;
    height: var(--chart-height);
}

.bar-chart__column {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding-bottom: 1.5rem;
}

.bar-chart__value,
.bar-chart__hover-value {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-bottom: 0.25rem;
}
.bar-chart__hover-value { display: none; }

.bar-chart__column:hover .bar-chart__value { display: none; }
.bar-chart__column:hover .bar-chart__hover-value { display: block; }

.bar-chart__bar {
    width: 70%;
    max-width: 50px;
    background: linear-gradient(to top, var(--chart-bar-start), var(--chart-bar-end));
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    transition: height 0.3s ease;
}

.bar-chart__label {
    position: absolute;
    bottom: 0;
    font-size: 0.7rem;
    color: var(--text-faint);
    white-space: nowrap;
}

/* Dual Bar Chart */
.chart-container .chart-dual {
    flex: 1;
    min-height: 0;
}

.chart-dual {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.chart-dual__column {
    flex: 1 1 0;
    min-width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-dual__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 280px;
}

.chart-dual__bar {
    width: 45%;
    max-width: 14px;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease, opacity 0.2s;
}

.chart-dual__bar--spent { background: var(--accent-error); }
.chart-dual__bar--payments { background: var(--accent-success); }

.chart-dual__column:hover .chart-dual__bar { opacity: 0.8; }

.chart-dual__values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.6rem;
    margin-bottom: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.chart-dual__column:hover .chart-dual__values { opacity: 1; }

.chart-dual__value { white-space: nowrap; }
.chart-dual__value--spent { color: var(--accent-error); }
.chart-dual__value--payments { color: var(--accent-success); }

.chart-dual__label {
    font-size: 0.65rem;
    color: var(--text-faint);
    margin-top: 0.25rem;
}

/* Monthly chart modifier */
.chart-dual--monthly {
    justify-content: flex-start;
    gap: 1rem;
}
.chart-dual--monthly .chart-dual__bar { max-width: 40px; }
.chart-dual--monthly .chart-dual__column { flex: 0 0 auto; width: 80px; }
.chart-dual--monthly .chart-dual__label { font-size: 0.75rem; white-space: nowrap; }

/* Ranking Chart (Top Destinations/Users/Routes) */
.chart-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.chart-ranking__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    margin-bottom: -0.4rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.chart-ranking__header-col {
    display: flex;
    gap: 1rem;
}

.chart-ranking__header-col--stats {
    gap: 1rem;
}

.chart-ranking__header-col--stats span {
    min-width: 70px;
    text-align: right;
}

.chart-ranking__header-col--stats span:last-child {
    min-width: 80px;
}

.chart-ranking__header [data-sort] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.chart-ranking__header [data-sort]:hover {
    color: var(--text-bright);
}

.chart-ranking__header [data-sort]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.chart-ranking__header [data-sort].sort-asc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}

.chart-ranking__header [data-sort].sort-desc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.chart-ranking__row {
    display: flex;
    flex-direction: column;
    gap: -0.05rem;
}

.chart-ranking__info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.chart-ranking__name {
    font-size: 0.7rem;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

a.chart-ranking__name {
    text-decoration: none;
    color: var(--text-normal);
}
a.chart-ranking__name:hover {
    color: var(--accent-link);
}

.chart-ranking__stats {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.chart-ranking__volume {
    font-size: 0.75rem;
    color: var(--text-faint);
    min-width: 70px;
    text-align: right;
}

.chart-ranking__amount {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 80px;
    text-align: right;
}

.chart-ranking__bar-wrapper {
    height: 4px;
    background: var(--bg-hover);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1px;
}

.chart-ranking__bar {
    height: 100%;
    background: var(--accent-info);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.chart-ranking__bar--users { background: var(--accent-success); }
.chart-ranking__bar--data { background: var(--accent-warning); }
.chart-ranking__bar--routes { background: var(--accent-error); }

/* --- 3.10 Devices selecto --- */
.phone-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}
.phone-devices__label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.phone-devices__check { display: none; }
.phone-devices__item {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.phone-devices__item:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
    text-decoration: none;
}
.phone-devices__item.active,
.phone-devices__item--active {
    border-color: var(--accent-link);
    background: var(--accent-link-bg);
    color: var(--accent-link);
}
.phone-devices--expandable .phone-devices__item:nth-of-type(n+6) { display: none; }
.phone-devices--expandable .phone-devices__check:checked ~ .phone-devices__item { display: inline-block; }
.phone-devices__toggle { font-size: 0.85rem; color: var(--accent-link); cursor: pointer; }
.phone-devices__toggle:hover { color: var(--accent-link-hover); }
.phone-devices__less { display: none; }
.phone-devices__check:checked ~ .phone-devices__toggle .phone-devices__more { display: none; }
.phone-devices__check:checked ~ .phone-devices__toggle .phone-devices__less { display: inline; }
.phone-devices-wrapper { display: none; }
#devices-toggle:checked ~ .phone-devices-wrapper { display: block; }
#realms-toggle:checked ~ .phone-devices-wrapper { display: block; }


/* ============================================
   4. Page-Specific
   ============================================ */

/* --- Dashboard --- */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-grid__left {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}
.dashboard-grid__right {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}
.dashboard-grid .data-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}
.dashboard-grid .table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

/* Service type label */
.service-type-label {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg-elevated);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    vertical-align: middle;
}

/* Make both columns stretch to same height */
.dashboard-grid__left .section-toggle,
.dashboard-grid__right .section-toggle,
.dashboard-grid__left .section-box,
.dashboard-grid__right .section-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dashboard-grid__left .section-toggle > .section-footer,
.dashboard-grid__right .section-toggle > .section-footer,
.dashboard-grid__left .section-box > .section-footer,
.dashboard-grid__right .section-box > .section-footer {
    margin-top: auto;
}

/* Dashboard services grid - 3 columns on desktop */
.dashboard-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-services-grid > .section-box {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Dashboard card header */
.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
}

/* Dashboard card list */
.dashboard-card-list {
    display: flex;
    flex-direction: column;
    /* gap: 0.25rem; */
    flex: 1;
    overflow-y: auto;
}
.dashboard-card + .dashboard-card {
    position: relative;
}
.dashboard-card + .dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
}
.dashboard-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    /* margin-left: 0.25rem; */
    min-height: 3.3rem !important;
}
.dashboard-card:hover {
    background: var(--bg-hover);
}
.dashboard-card--placeholder {
    visibility: hidden;
    min-height: 4rem !important;
    pointer-events: none;
}
.dashboard-card--disabled {
    opacity: 0.5;
}
.dashboard-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard-card__content {
    flex: 1;
    min-width: 0;
    margin-left: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-card__content > .badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    min-width: 2.5rem;
    text-align: center;
    margin-right: 2px;
}
.dashboard-card__text {
    flex: 1;
    min-width: 0;
}
.dashboard-card__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-card__title a {
    color: inherit;
    text-decoration: none;
}
.dashboard-card__title a:hover {
    color: var(--accent-link);
}
.dashboard-card__title .badge {
    margin-right: 0.3rem;
}
.dashboard-card__subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
}
.dashboard-card__type {
    display: none; /* Shown only on mobile */
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}
/* Device type badge colors */
.dashboard-card[data-type="sip"] .dashboard-card__type {
    color: var(--accent-info);
    background: var(--accent-info-bg);
}
.dashboard-card[data-type="did"] .dashboard-card__type {
    color: var(--accent-success);
    background: var(--accent-success-bg);
}
.dashboard-card[data-type="sim"] .dashboard-card__type {
    color: var(--accent-warning);
    background: var(--accent-warning-bg);
}
.dashboard-card[data-type="vpn"] .dashboard-card__type {
    color: var(--accent-error);
    background: var(--accent-error-bg);
}
/* Notification type badge colors */
.dashboard-card[data-type="message"] .dashboard-card__type {
    color: var(--accent-success);
    background: var(--accent-success-bg);
}
.dashboard-card[data-type="ticket"] .dashboard-card__type {
    color: var(--accent-info);
    background: var(--accent-info-bg);
}
.dashboard-card[data-type="invoice"] .dashboard-card__type {
    color: var(--accent-error);
    background: var(--accent-error-bg);
}
.dashboard-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    /* margin-top: 0.1rem; */
}
.dashboard-card__cost {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
}
a.dashboard-card__cost {
    text-decoration: none;
}
a.dashboard-card__cost:hover {
    color: var(--accent-link);
}
.dashboard-card__badges {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    min-width: 13rem;
    justify-content: flex-end;
}
.dashboard-card__actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.375rem;
    /* min-width: 10rem; */
    justify-content: flex-end;
}
/* Clickable card with toggle actions */
.dashboard-card--clickable {
    position: relative;
    cursor: pointer;
}
.dashboard-card__click-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}
.dashboard-card--clickable .dashboard-card__content {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.dashboard-card--clickable .dashboard-card__content a {
    pointer-events: auto;
}
.dashboard-card--clickable .dashboard-card__actions {
    display: none;
    position: relative;
    z-index: 2;
}
.dashboard-card__toggle:checked ~ .dashboard-card__actions {
    display: flex;
}
/* Dashboard grid: actions on new line when expanded (narrow columns) */
.dashboard-services-grid .dashboard-card--clickable {
    flex-wrap: wrap;
}
.dashboard-services-grid .dashboard-card--clickable .dashboard-card__actions {
    order: 99;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-subtle);
}
/* Inline-form inside card actions - keep children on one line */
.dashboard-card__actions > .inline-form {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
/* Enable/Disable button in dashboard card actions - push to right */
.dashboard-card__actions > .inline-form:has(.badge-action--error, .badge-action--success) {
    order: 99;
    margin-left: auto;
}
/* Link card - badge+title on left, date+cost stacked on right */
a.dashboard-card--link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 0.5rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
a.dashboard-card--link .dashboard-card__type {
    display: inline-block;
}
a.dashboard-card--link .dashboard-card__content {
    min-width: 0;
}
a.dashboard-card--link .dashboard-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}
a.dashboard-card--link .dashboard-card__meta .separator {
    display: none;
}
a.dashboard-card--link .dashboard-card__meta [data-responsive="date"] {
    font-size: 0.75rem;
    color: var(--text-muted);
}
/* Clickable card - same stacked meta layout */
.dashboard-card--clickable .dashboard-card__type {
    display: inline-block;
}
.dashboard-card--clickable .dashboard-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}
.dashboard-card--clickable .dashboard-card__meta .separator {
    display: none;
}
.dashboard-card--clickable .dashboard-card__meta [data-responsive="date"] {
    font-size: 0.75rem;
    color: var(--text-muted);
}
a.dashboard-card--link .dashboard-card__title {
    color: var(--text-bright);
}
a.dashboard-card--link:hover .dashboard-card__title {
    color: var(--accent-link);
}
/* Message card layout */
.dashboard-card--message {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}
.dashboard-card--message .dashboard-card__content {
    width: 100%;
}
.dashboard-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}
.dashboard-card__sender {
    font-weight: 500;
}
.dashboard-card__date {
    color: var(--text-faint);
}
.dashboard-card--unread .dashboard-card__title a {
    font-weight: 600;
}
/* .dashboard-card__title .badge {
    margin-left: 0.5rem;
} */

/* Consistent card heights within dashboard */
/* .dashboard-grid .dashboard-card {
    min-height: 4.5rem;
}
.dashboard-grid .dashboard-card--message {
    min-height: 4.5rem;
    justify-content: center;
} */

/* Cell with badge aligned to right */
.cell-with-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}
.cell-with-badge .badge {
    flex-shrink: 0;
}

/* --- Profile Grid --- */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

/* Full width single column */
.profile-grid--full {
    grid-template-columns: 1fr;
}

.profile-grid .section-toggle {
    margin-bottom: 0;
    min-width: 0;
}

.profile-grid details.section-toggle {
    overflow: visible;
}

.profile-grid .section-toggle .table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

.profile-grid .dashboard-card-list .dashboard-card:nth-child(n+6) {
    display: none;
}

.profile-grid .chart-container {
    overflow-x: auto;
    overflow-y: hidden;
}

/* --- Profile Info (responsive grid) --- */
.profile-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}
.profile-info__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.profile-info__item--actions {
    grid-column: 1 / -1;
}
.profile-info__item--actions .profile-info__value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.profile-info__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.profile-info__value {
    font-size: 0.9rem;
    color: var(--text-normal);
}

/* --- Device Tabs (CSS-only) --- */
.device-tabs {
    display: flex;
    flex-direction: column;
}
.device-tabs__nav {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-bottom: 0rem; 
}
.device-tabs__nav .separator {
    margin: 0 0.5rem;
}
.device-tabs__panel {
    order: 1;
    display: none;
}
.device-tabs__label {
    cursor: pointer;
    color: var(--accent-link);
    transition: color 0.2s;
}
.device-tabs__label:hover {
    color: var(--accent-link-hover);
}
.device-tabs__label--disabled {
    color: var(--text-faint);
    cursor: default;
}
.device-tabs__label--disabled:hover {
    color: var(--text-faint);
}
/* Dashboard section title with tabs */
.section-title.device-tabs__nav {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.device-tabs__title {
    color: var(--text-normal);
    text-transform: none;
}
.device-tabs__tabs {
    display: flex;
    align-items: center;
    gap: 0;
}
.device-tabs__tabs .separator {
    margin: 0 0.5rem;
    color: var(--text-faint);
}
.section-title.device-tabs__nav .device-tabs__label {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}
.section-title.device-tabs__nav .device-tabs__label:hover {
    color: var(--text-muted);
}
.section-title.device-tabs__nav .device-tabs__label--disabled {
    color: var(--text-dim);
    opacity: 0.5;
    pointer-events: none;
}

/* Show active panel based on radio selection */
#device-tab-sip:checked ~ .device-tabs__panel--sip,
#device-tab-did:checked ~ .device-tabs__panel--did,
#device-tab-sim:checked ~ .device-tabs__panel--sim,
#device-tab-vpn:checked ~ .device-tabs__panel--vpn {
    display: block;
}

/* Style active tab label */
#device-tab-sip:checked ~ .device-tabs__nav label[for="device-tab-sip"],
#device-tab-did:checked ~ .device-tabs__nav label[for="device-tab-did"],
#device-tab-sim:checked ~ .device-tabs__nav label[for="device-tab-sim"],
#device-tab-vpn:checked ~ .device-tabs__nav label[for="device-tab-vpn"] {
    font-weight: 600;
    color: var(--text-bright);
    cursor: default;
}

/* Dashboard device tabs - checkbox filter mode */
/* Style filter mode tabs */
.device-tabs--filter .device-tabs__label {
    cursor: pointer;
}
.device-tabs--filter .device-tabs__label + .device-tabs__label::before {
    content: '·';
    margin: 0 0.4rem;
    color: var(--text-dim);
}
/* Strikethrough unchecked filters */
#dashboard-tab-sip:not(:checked) ~ .section-title.device-tabs__nav label[for="dashboard-tab-sip"],
#dashboard-tab-did:not(:checked) ~ .section-title.device-tabs__nav label[for="dashboard-tab-did"],
#dashboard-tab-sim:not(:checked) ~ .section-title.device-tabs__nav label[for="dashboard-tab-sim"],
#dashboard-tab-vpn:not(:checked) ~ .section-title.device-tabs__nav label[for="dashboard-tab-vpn"] {
    color: var(--text-dim);
    text-decoration: line-through;
}
/* Filter cards by type - hide unchecked types */
#dashboard-tab-sip:not(:checked) ~ .dashboard-card-list .dashboard-card[data-type="sip"],
#dashboard-tab-did:not(:checked) ~ .dashboard-card-list .dashboard-card[data-type="did"],
#dashboard-tab-sim:not(:checked) ~ .dashboard-card-list .dashboard-card[data-type="sim"],
#dashboard-tab-vpn:not(:checked) ~ .dashboard-card-list .dashboard-card[data-type="vpn"],
#dashboard-tab-sip:not(:checked) ~ .dashboard-card-list--expandable .dashboard-card[data-type="sip"],
#dashboard-tab-did:not(:checked) ~ .dashboard-card-list--expandable .dashboard-card[data-type="did"],
#dashboard-tab-sim:not(:checked) ~ .dashboard-card-list--expandable .dashboard-card[data-type="sim"],
#dashboard-tab-vpn:not(:checked) ~ .dashboard-card-list--expandable .dashboard-card[data-type="vpn"] {
    display: none !important;
}

/* Dashboard notifications filter tabs */
/* Strikethrough unchecked notification filters */
#notif-tab-message:not(:checked) ~ .section-title.device-tabs__nav label[for="notif-tab-message"],
#notif-tab-ticket:not(:checked) ~ .section-title.device-tabs__nav label[for="notif-tab-ticket"],
#notif-tab-invoice:not(:checked) ~ .section-title.device-tabs__nav label[for="notif-tab-invoice"] {
    color: var(--text-dim);
    text-decoration: line-through;
}
/* Filter notification cards by type - hide unchecked types */
#notif-tab-message:not(:checked) ~ .dashboard-card-list--notifications .dashboard-card[data-type="message"],
#notif-tab-ticket:not(:checked) ~ .dashboard-card-list--notifications .dashboard-card[data-type="ticket"],
#notif-tab-invoice:not(:checked) ~ .dashboard-card-list--notifications .dashboard-card[data-type="invoice"],
#notif-tab-message:not(:checked) ~ .dashboard-card-list--expandable.dashboard-card-list--notifications .dashboard-card[data-type="message"],
#notif-tab-ticket:not(:checked) ~ .dashboard-card-list--expandable.dashboard-card-list--notifications .dashboard-card[data-type="ticket"],
#notif-tab-invoice:not(:checked) ~ .dashboard-card-list--expandable.dashboard-card-list--notifications .dashboard-card[data-type="invoice"] {
    display: none !important;
}
/* Filtered empty message - hidden by default, shown when all filters unchecked */
.filter-empty-message {
    display: none;
    text-align: center;
    color: var(--text-faint);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    margin: 0;
}
/* Show notification filtered empty when ALL filters unchecked */
#notif-tab-message:not(:checked) + #notif-tab-ticket:not(:checked) + #notif-tab-invoice:not(:checked) ~ .filter-empty-message--notifications {
    display: block;
}
/* Show services filtered empty when ALL filters unchecked */
#dashboard-tab-sip:not(:checked) + #dashboard-tab-did:not(:checked) + #dashboard-tab-sim:not(:checked) + #dashboard-tab-vpn:not(:checked) ~ .filter-empty-message--services {
    display: block;
}
/* Notification expand toggle */
#notif-expand:checked ~ .dashboard-card-list--expandable .dashboard-card:nth-child(n+9) {
    display: flex;
}

/* Support tickets filter tabs */
#filter-all:checked ~ .section-title.device-tabs__nav label[for="filter-all"],
#filter-waiting:checked ~ .section-title.device-tabs__nav label[for="filter-waiting"],
#filter-open:checked ~ .section-title.device-tabs__nav label[for="filter-open"],
#filter-resolved:checked ~ .section-title.device-tabs__nav label[for="filter-resolved"] {
    color: var(--text-muted);
    cursor: default;
}

.cell-with-badge a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* New notification row styling */
.data-table tr.row--new td {
    font-weight: 600;
}
.data-table tr.row--new td a {
    color: var(--text-bright);
}

/* Inactive/dimmed rows */
.data-table tr.row-inactive > td {
    opacity: 0.4;
}
.data-table tr.row-inactive:hover > td {
    opacity: 0.7;
}

/* --- 8.2.1 Support Page --- */
.support-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}
.support-faq {
    margin: 0;
}
.faq-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.65rem 1rem;
    margin: 0;
}
.faq-toggle:hover {
    color: var(--text-bright);
}
svg.faq-toggle__icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    stroke: currentColor;
    fill: none;
}
#faq-toggle:checked + .support-faq .faq-toggle__icon,
#new-ticket-toggle:checked + .support-faq .faq-toggle__icon {
    transform: rotate(180deg);
}
.faq-list {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
}
#faq-toggle:checked + .support-faq .faq-list,
#new-ticket-toggle:checked + .support-faq .faq-list {
    display: flex;
}
.faq-list li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.9rem;
}
.faq-list li::before,
.faq-list li::marker {
    content: none !important;
    display: none !important;
}
.faq-list a {
    color: var(--accent-link);
    text-decoration: none;
}
.faq-list a:hover {
    text-decoration: underline;
}
.faq-details {
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
}
.faq-details:last-child {
    border-bottom: none;
}
.faq-details > summary {
    cursor: pointer;
    color: var(--text-normal);
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
.faq-details > summary::-webkit-details-marker,
.faq-details > summary::marker {
    display: none !important;
    content: none !important;
}
.faq-details > summary::after {
    display: none !important;
    content: none !important;
}
.faq-details > summary:hover {
    color: var(--text-bright);
}
.faq-details .faq-chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    stroke: var(--text-faint);
    fill: none;
    transition: transform 0.2s ease;
}
.faq-details[open] .faq-chevron {
    transform: rotate(90deg);
}
.faq-details p {
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    color: var(--text-muted);
}
.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-right: 0.35rem;
    vertical-align: middle;
    text-transform: uppercase;
    margin-right: -2px;
}
.ticket-status .icon {
    stroke: currentColor;
    fill: none;
}
.ticket-pin {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    margin-right: 0.35rem;
    vertical-align: middle;
}
.ticket-pin .icon {
    stroke: currentColor;
    fill: none;
}
.ticket-badges {
    display: inline; /* Shown on desktop */
}
.ticket-sender-row {
    display: none; /* Hidden on desktop, shown on mobile */
}
.ticket-sender {
    color: inherit;
    text-decoration: none;
}
.ticket-sender:hover {
    text-decoration: underline;
}
.ticket-subject {
    color: inherit;
    text-decoration: none;
}
.ticket-subject:hover {
    text-decoration: underline;
}
.ticket-status-mobile {
    display: none; /* Hidden on desktop, shown on mobile */
}
.ticket-assignees-mobile {
    display: none; /* Hidden on desktop, shown on mobile expanded */
}
.ticket-assignees-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-right: 0.25rem;
}
.ticket-unread td {
    font-weight: 600;
}
.text-link {
    color: var(--accent-link);
    text-decoration: none;
}
.text-link:hover {
    text-decoration: underline;
}
.badge-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    min-width: 4.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 0.25rem;
    transition: background 0.15s ease, color 0.15s ease;
    border: 1px solid var(--border-faint);
}
.badge-action:hover {
    background: var(--bg-hover);
    color: var(--text-normal);
}
.badge-action .icon {
    stroke: currentColor;
    fill: none;
}
/* Badge action inside inline-form */
.inline-form button.badge-action,
.inline-form label.badge-action {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 4.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    transition: background 0.15s ease, color 0.15s ease;
    position: static;
    top: auto;
}
/* Badge action color variants */
.badge-action--error {
    border-color: var(--accent-error) !important;
    background: var(--accent-error-bg) !important;
    color: var(--accent-error) !important;
}
.badge-action--error:hover {
    background: var(--accent-error-bg) !important;
    color: var(--accent-error) !important;
}
.badge-action--info {
    border-color: var(--accent-info) !important;
    background: var(--accent-info-bg) !important;
    color: var(--accent-info) !important;
}
.badge-action--info:hover {
    background: var(--accent-info-bg) !important;
    color: var(--accent-info) !important;
}
.badge-action--success {
    border-color: var(--accent-success) !important;
    background: var(--accent-success-bg) !important;
    color: var(--accent-success) !important;
}
.badge-action--success:hover {
    background: var(--accent-success-bg) !important;
    color: var(--accent-success) !important;
}

/* --- 8.2.2 Ticket View (Chat-style) --- */
.ticket-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.ticket-message {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
}
.ticket-message--theirs {
    align-self: flex-start;
    border-left: 3px solid var(--accent-warning);
}
.ticket-message--ours {
    align-self: flex-end;
    border-right: 3px solid var(--accent-info);
    background: var(--bg-elevated);
}
.ticket-message__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
}
.ticket-message__content {
    color: var(--text-normal);
    line-height: 1.6;
    font-size: 0.9rem;
    word-wrap: break-word;
}
.ticket-message__comment {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-faint);
    color: var(--text-faint);
    font-size: 0.8rem;
}
.ticket-message--system {
    align-self: center;
    background: none;
    border: none;
    padding: 0.5rem;
}

/* Reply form */
.ticket-reply {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}
#new-message-form {
    display: none;
}
#new-message-toggle:checked ~ #new-message-form,
#new-message-toggle:checked ~ .purchase-categories ~ #new-message-form {
    display: block;
}
.ticket-reply__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.ticket-reply__header h3 {
    margin: 0;
    font-size: 1rem;
}
.ticket-reply__assign {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.ticket-assign__form {
    display: none;
    gap: 0.5rem;
    align-items: center;
}
.ticket-assign__form input[type="text"] {
    width: 120px;
    height: 2rem;
    padding: 0 0.5rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-size: 0.85rem;
}
.ticket-assign__form input[type="text"]::placeholder {
    color: var(--text-muted);
}
#ticket-assign-toggle:checked ~ .ticket-reply .ticket-assign__form {
    display: inline-flex;
}
.ticket-reply__textarea {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
.ticket-reply__textarea::placeholder {
    color: var(--text-muted);
}
.ticket-reply__textarea:focus {
    border-color: var(--accent-link);
    outline: none;
}
.ticket-reply__comment-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.ticket-reply__comment-row label {
    white-space: nowrap;
}
.ticket-reply__comment {
    flex: 1;
    display: none;
    height: 2rem;
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.85rem;
    box-sizing: border-box;
}
.ticket-reply__comment::placeholder {
    color: var(--text-muted);
}
#ticket-comment-toggle:checked ~ .ticket-reply .ticket-reply__comment {
    display: block;
}
.ticket-reply__comment:focus {
    border-color: var(--accent-link);
    outline: none;
}

/* New ticket form */
.ticket-reply .form-row {
    margin-bottom: 1rem;
}
.ticket-reply .btn {
    width: 100%;
}

/* --- 8.2.2b Chat View (Conversation) --- */
.chat-container {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding-bottom: 5rem; /* Space for fixed input */
}
/* Extra space when comment row is visible */
body:has(#ticket-comment-toggle:checked) .chat-container {
    padding-bottom: 8rem;
}
.chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.chat-message--theirs {
    align-self: flex-start;
}
.chat-message--ours {
    align-self: flex-end;
}
.chat-message--system {
    align-self: center;
    max-width: none;
}
.chat-bubble {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
}
.chat-message--theirs .chat-bubble {
    border-left: 1px solid var(--accent-warning);
    border-top-left-radius: var(--radius-sm);
}
.chat-message--ours .chat-bubble {
    border-right: 1px solid var(--accent-info);
    border-top-right-radius: var(--radius-sm);
    background: var(--bg-elevated);
}
.chat-bubble__content {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.85rem;
    word-wrap: break-word;
}
.chat-bubble__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding: 0.25rem 0 0rem;
}
.chat-bubble__sender {
    color: var(--text-muted);
    font-weight: 600;
}
.chat-bubble__sender a {
    color: var(--text-muted);
}
.chat-bubble__time {
    color: var(--text-faint);
    margin-left: auto;
    display: flex;
    align-items: center;
}
.chat-bubble__actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}
.chat-bubble__actions .inline-form {
    display: contents;
}
.chat-bubble__actions a,
.chat-bubble__actions button {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    cursor: pointer;
}
.chat-bubble__actions svg.icon {
    width: 12px !important;
    height: 12px !important;
    vertical-align: baseline !important;
}
.chat-bubble__actions a:hover,
.chat-bubble__actions button:hover {
    color: var(--text-muted);
}
.chat-bubble__comment {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Inline editing */
.chat-bubble--editing .chat-bubble__content {
    display: none;
}
.chat-bubble__edit-form {
    display: none;
}
.chat-bubble--editing .chat-bubble__edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.chat-bubble__edit-textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
.chat-bubble__edit-textarea:focus {
    border-color: var(--accent-link);
    outline: none;
}
.chat-bubble__edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.chat-bubble__edit-actions .btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

/* Chat input - fixed at bottom */
.chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-body);
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem 1rem;
    z-index: 100;
    box-sizing: border-box;
}
.chat-input__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-faint);
    font-size: 0.8rem;
}
.chat-input__edit-mode {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
}
.chat-input__edit-mode a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.chat-input__assign {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#ticket-assign-toggle:checked ~ .chat-input-container .ticket-assign__form,
#ticket-assign-toggle:checked ~ .chat-input__toolbar .ticket-assign__form {
    display: inline-flex;
}
.chat-input__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 1400px;
    margin: 0 auto;
}
.chat-input__comment-row {
    display: none;
    align-items: center;
    gap: 0.5rem;
}
#ticket-comment-toggle:checked ~ .chat-input__form .chat-input__comment-row {
    display: flex;
}
.chat-input__comment {
    flex: 1;
    height: 2rem;
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.85rem;
}
.chat-input__row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0.75rem;
    width: 100%;
}
.chat-input__textarea {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-normal);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    min-height: 2.5rem;
    max-height: 6rem; /* ~4 lines */
    box-sizing: border-box;
}
.chat-input__textarea::placeholder {
    color: var(--text-muted);
}
.chat-input__textarea:focus {
    border-color: var(--accent-link);
    outline: none;
}
.chat-input__send {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 2.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--accent-info-bg) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex: 0 0 2.5rem !important;
    box-sizing: border-box !important;
}
.chat-input__send:hover {
    background: var(--accent-info-bg) !important;
}
.chat-input__send:active {
    transform: scale(0.95);
}
.chat-input__send svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
/* Toolbar buttons (attachment, comment) */
.chat-input__tools {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.chat-input__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}
.chat-input__tool:hover {
    color: var(--text-bright);
    background: var(--bg-hover);
}
.chat-input__tool svg {
    width: 0.9rem;
    height: 0.9rem;
}
.chat-input__tool--disabled,
.chat-input__tool--disabled:hover {
    color: var(--text-dim);
    cursor: not-allowed;
    background: none;
}
/* Active state for comment toggle */
#ticket-comment-toggle:checked ~ .chat-input__form .chat-input__tool[for="ticket-comment-toggle"] {
    color: var(--accent-info);
    background: var(--accent-info-bg);
}

/* Prevent body scroll when chat is active */
body:has(.chat-input-container) {
    overflow-x: hidden;
}

/* --- 8.2.3 Search Box (reusable) --- */
.search-box-wrapper {
    display: none;
    margin-bottom: 1rem;
}
#search-toggle:checked ~ .search-box-wrapper {
    display: block;
}

/* --- 8.2.4 Date Filter Toggle --- */
.datefilter-wrapper {
    display: none;
    margin-bottom: 1rem;
}
#datefilter-toggle:checked ~ .datefilter-wrapper {
    display: block;
}

/* --- 8.2.5 Assign Box Toggle --- */
.assign-box-wrapper {
    display: none;
    margin-bottom: 1rem;
}
#assign-toggle:checked ~ .assign-box-wrapper {
    display: block;
}

.search-box {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    margin: 0;
}
.search-box__input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: 2.5rem;
    padding: 0 0.75rem;
    margin: 0 !important;
    margin-bottom: 0 !important;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.search-box__input:focus {
    border-color: var(--accent-link);
    outline: none;
}
.search-box .btn {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}

/* --- Auth (Login/Register shared) --- */
.auth-title {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--text-bright);
    margin: 0;
}
.auth-form {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}
.auth-form > .btn {
    width: 100%;
    height: 60px;
    margin-top: 1.75rem;
}
.auth-input {
    width: 100%;
    height: 60px;
    font-size: 1.1rem;
    color: var(--text-bright);
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 0 1.75rem;
    margin-top: 1.75rem;
    transition: border-color 0.2s;
}
.auth-input::placeholder { color: var(--text-muted); }
.auth-input:focus {
    outline: none;
    border-color: var(--text-muted);
}

/* --- 8.3 Login --- */
.login-section {
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.login-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
}
.login-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.login-link {
    font-size: 0.95rem;
    color: var(--text-faint);
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.login-link:hover {
    text-decoration: underline;
    color: var(--text-normal);
}

/* --- Register --- */
main:has(.register-section) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.register-section {
    padding: 60px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.register-section > .container-content {
    width: 100%;
}
.register-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}
.register-invite-toggle {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-faint);
    cursor: pointer;
}
.register-invite-toggle:hover {
    color: var(--text-normal);
}
#invite-toggle:not(:checked) ~ #invite-field {
    display: none;
}
.register-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: calc(1.6rem + 1.75rem);
}
.register-info__title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-bright);
    margin: 0 0 1rem;
}
.register-info__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-normal);
    margin: 0;
}
.register-info__link {
    text-decoration: underline;
}

/* --- Info Page (Contacts, Pricing, etc.) --- */
.info-page { padding: 5rem 0; }
.info-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.info-page__content { max-width: none; }
.info-page__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-bright);
    margin: 0 0 1.5rem;
}
.info-page__subtitle {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-normal);
    margin: 0 0 1rem;
}
.info-page__intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.info-page__cta {
    font-style: italic;
    color: var(--text-muted);
    margin: 1.5rem 0 2rem;
}
.info-page__heading {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-bright);
    margin: 0 0 0.75rem;
}
.info-page__text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.info-page__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.info-page__image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-page__image img,
.info-page__image svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    opacity: 0.9;
}

/* --- News --- */
.news-article {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}
.news-article__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}
.news-article__header:hover {
    background: var(--bg-elevated);
}
.news-article__header-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.news-article__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.news-meta {
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}
.news-meta__author,
.news-meta__date {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}
.news-meta .separator {
    margin: 0 0.4rem;
    color: var(--text-dim);
}
.news-dismiss {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    padding: 0rem;
    margin-top: -0.25rem;
    margin-left: 0.5rem;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}
.news-dismiss:hover {
    opacity: 1;
    color: var(--accent-error);
}

/* Content with show more */
.news-article__content,
.broadcast-content__wrapper {
    position: relative;
    max-height: calc(1.7em * 15);
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.news-article__content::after,
.broadcast-content__wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4em;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.news-article__body {
    padding: 1rem;
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-normal);
}
.news-article__body a { color: var(--accent-link); }
.news-article__body a:hover { color: var(--accent-link-hover); }

/* Show more label */
.news-article__more {
    display: block;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: fit-content;
    border-radius: 4px;
}
.news-article__more::before {
    content: "Show more";
}
.news-article__more:hover {
    color: var(--accent-link-hover);
}

/* Expanded state */
.news-article > input:checked ~ .news-article__content,
.news-article > input:checked ~ .broadcast-content__wrapper {
    max-height: none;
}
.news-article > input:checked ~ .news-article__content::after,
.news-article > input:checked ~ .broadcast-content__wrapper::after {
    opacity: 0;
}
.news-article > input:checked ~ .news-article__more::before {
    content: "Show less";
}

/* Hide show more for short content */
.news-article--short .news-article__more {
    display: none;
}
.news-article--short .news-article__content::after,
.news-article--short .broadcast-content__wrapper::after {
    display: none;
}

/* --- Table Show More Toggle --- */
.table-expandable tbody tr:nth-child(n+6) {
    display: none;
}
.table-expandable-toggle:checked + .table-expandable-wrapper .table-expandable tbody tr:nth-child(n+6),
.table-expandable-toggle:checked ~ .table-responsive .table-expandable tbody tr:nth-child(n+6),
.table-expandable-toggle:checked ~ .table-expandable-wrapper .table-expandable tbody tr:nth-child(n+6) {
    display: table-row;
}

/* SIM table: show only 4 rows */
.device-tabs__panel--sim .table-expandable tbody tr:nth-child(n+5) {
    display: none;
}
#sim-expand:checked + .table-expandable-wrapper .table-expandable tbody tr:nth-child(n+5),
#sim-expand:checked ~ .table-expandable-wrapper .table-expandable tbody tr:nth-child(n+5) {
    display: table-row;
}

/* Shadow gradient on collapsed table */
.table-expandable-wrapper {
    position: relative;
}
.table-expandable-wrapper::after {
    content: '';
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 0.7;
}
.table-expandable-toggle:checked + .table-expandable-wrapper::after,
.table-expandable-toggle:checked ~ .table-expandable-wrapper::after {
    opacity: 0;
}

/* Show more label */
.table-expandable-label {
    display: block;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: fit-content;
    border-radius: 4px;
}
.table-expandable-label::before {
    content: attr(data-show-more);
}
.table-expandable-toggle:checked + .table-expandable-wrapper .table-expandable-label::before,
.table-expandable-toggle:checked ~ .table-expandable-wrapper .table-expandable-label::before {
    content: attr(data-show-less);
}
.table-expandable-label:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* --- Dashboard Card Expandable --- */
.dashboard-card-list--expandable .dashboard-card:nth-child(n+9) {
    display: none;
}
.card-expandable-toggle:checked + .card-expandable-wrapper .dashboard-card-list--expandable .dashboard-card:nth-child(n+9),
.card-expandable-toggle:checked ~ .card-expandable-wrapper .dashboard-card-list--expandable .dashboard-card:nth-child(n+9) {
    display: flex;
}
.card-expandable-toggle:checked + .card-expandable-wrapper .dashboard-card-list--expandable .dashboard-card--placeholder,
.card-expandable-toggle:checked ~ .card-expandable-wrapper .dashboard-card-list--expandable .dashboard-card--placeholder {
    display: none;
}
/* Shadow gradient on collapsed card list */
.card-expandable-wrapper {
    position: relative;
}
.card-expandable-wrapper::after {
    content: '';
    position: absolute;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    height: 4rem;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.card-expandable-toggle:checked + .card-expandable-wrapper::after,
.card-expandable-toggle:checked ~ .card-expandable-wrapper::after {
    opacity: 0;
}
/* Card expandable label */
.card-expandable-label {
    display: block;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: fit-content;
    border-radius: 4px;
}
.card-expandable-label::before {
    content: attr(data-show-more);
}
.card-expandable-toggle:checked + .card-expandable-wrapper .card-expandable-label::before,
.card-expandable-toggle:checked ~ .card-expandable-wrapper .card-expandable-label::before {
    content: attr(data-show-less);
}
.card-expandable-label:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* Filter mode: hide placeholders */
.device-tabs--filter .dashboard-card--placeholder {
    display: none;
}

/* Global services expand toggle */
.services-expand-wrapper {
    position: relative;
}
.services-expand-wrapper--active::after {
    content: '';
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    height: 4rem;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.services-expand-toggle:checked ~ .services-expand-wrapper::after {
    opacity: 0;
}
.services-expand-label {
    display: block;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto;
    border-radius: 4px;
}
.services-expand-label::before {
    content: attr(data-show-more);
}
.services-expand-toggle:checked ~ .services-expand-wrapper .services-expand-label::before {
    content: attr(data-show-less);
}
.services-expand-label:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}
/* When global expand is checked, show all hidden cards */
.services-expand-toggle:checked ~ .services-expand-wrapper .dashboard-card-list--expandable .dashboard-card:nth-child(n+9) {
    display: flex;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}
.pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}
.pagination__link:hover {
    color: var(--text-bright);
    background: var(--bg-elevated);
    text-decoration: none;
}
.pagination__link--current {
    color: var(--text-bright);
    background: var(--bg-elevated);
    border-color: var(--border-faint);
}
.pagination__link--disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
}
.pagination__link--disabled:hover {
    background: transparent;
}
.pagination__prev,
.pagination__next {
    padding: 0 1rem;
}
.pagination__prev .icon,
.pagination__next .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    fill: none;
}
.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2.25rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* --- Broadcasts (news-article variant) --- */
.news-article--broadcast {
    /* border-left: 1px solid var(--accent-info); */
}
.news-article--info { border-left-color: var(--accent-info); }
.news-article--success { border-left-color: var(--accent-success); }
.news-article--warning { border-left-color: var(--accent-warning); }
.news-article--error { border-left-color: var(--accent-error); }

/* Broadcast with image (like canary) */
.news-article__body--with-image {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.news-article__image {
    width: 5rem;
    min-width: var(--avatar-sm);
    height: auto;
    flex-shrink: 0;
}
.news-article__image--sm {
    width: 3rem;
    min-width: 3rem;
}

/* Article with background image */
.news-article--with-image {
    position: relative;
    overflow: hidden;
}
.news-article--with-image .news-article__content,
.news-article--with-image .news-article__body {
    position: static;
}
.news-article--with-image .news-article__image {
    position: absolute;
    right: 0;
    top: 50%;
    width: auto;
    height: 130%;
    transform: translateY(-50%) scaleX(-1);
    clip-path: inset(15% 0);
    opacity: 0.05;
    cursor: pointer;
    transition: opacity 0.2s;
    z-index: 0;
}

.news-article__text {
    flex: 1;
    min-width: 0;
    line-height: 1.6;
}
.news-article__text p {
    color: var(--text-muted) !important;
    margin: 0;
}
.news-article__text p + p {
    margin-top: 0;
}

/* Short content variant (no expand needed) */
.news-article__content--short {
    max-height: none;
}
.news-article__content--short::after {
    display: none;
}

/* Mark as read button */
.news-mark-read {
    position: relative;
    z-index: 1;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-faint);
    text-decoration: none;
}
.news-mark-read:hover {
    color: var(--accent-link);
}


/* --- Cards Grid (reusable layout) --- */
.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.cards-grid__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.cards-grid__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cards-grid__full {
    width: 100%;
}

/* Card modifiers */
.card--equal {
    display: flex;
    flex-direction: column;
}
.card--equal .section-footer {
    margin-top: auto;
    margin: auto -1rem -1rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.card--muted {
    background: var(--bg-elevated);
}
.card__title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-normal);
    margin: 0 0 1rem;
}
.card__subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

/* Key-Value List (definition list for forms/details) */
.kv-list {
    margin: 0;
}
.kv-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
/* kv-list inside section-box needs horizontal padding to match section-title */
.section-box .kv-list__row {
    padding: 0.6rem 1rem;
}
.kv-list__row:last-child {
    border-bottom: none;
}
.kv-list dt {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}
.kv-list dd {
    font-size: 0.9rem;
    color: var(--text-normal);
    margin: 0;
    text-align: right;
}
/* Wide modifier - inputs take 70% width */
.kv-list--wide dt {
    flex: 0 0 30%;
    max-width: 200px;
}
.kv-list--wide dd {
    flex: 1;
    text-align: left;
}
.kv-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.kv-list--inline .kv-list__row {
    padding: 0;
    border-bottom: none;
    gap: 0.35rem;
}

/* Finance List (service-card style layout) */
.finance-list {
    display: flex;
    flex-direction: column;
}
.finance-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.finance-item:last-child {
    border-bottom: none;
}

/* Card-style variant for plans/options lists */
.finance-list--cards {
    gap: 0.75rem;
}
.finance-list--cards .finance-item {
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.finance-list--cards .finance-item:last-child {
    border-bottom: 1px solid var(--border-subtle);
}
.finance-item__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.finance-item__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-normal);
}
.finance-item__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}
.finance-item__sub {
    margin-top: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.finance-item__account,
.finance-item__method,
.finance-item__date {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.finance-item__actions {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
}
.finance-item--link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    margin: 0 -0.5rem;
    padding: 0.75rem 0.5rem;
    border-bottom: none;
}
.finance-item--link:hover {
    background: var(--bg-elevated);
}
.finance-item--link + .finance-item--link {
    border-top: 1px solid var(--border-subtle);
}
.finance-item--billing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.finance-item__billing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.finance-item__billing-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.finance-item__billing-value {
    font-size: 0.8rem;
    color: var(--text-normal);
    text-align: right;
}

/* Top-up Form */
.topup-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.topup-form .btn {
    width: 100%;
}
/* Payment fee display - inline style with subtle background */
.topup-form .info-box {
    margin: 0;
}
#payment-fee {
    display: inline-block;
    background: var(--bg-elevated);
    border: none;
    padding: 0.5rem 1rem;
}
#payment-fee p {
    margin: 0;
}
/* Match input height to payment method buttons */
.topup-form .input-with-suffix input {
    height: auto !important;
    padding: 0.75rem 4rem 0.75rem 0.75rem !important;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}
.form-group__title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    height: var(--input-height);
    padding: 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-bright);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    -moz-appearance: textfield;
    appearance: textfield;
}
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
    outline: none;
    border-color: var(--text-muted);
}
.form-group input::placeholder {
    color: var(--text-faint);
}
/* Hide number input spinner arrows */
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.form-group select {
    width: 100%;
    height: var(--input-height);
    padding: 0 2.25rem 0 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
.form-group select:focus {
    outline: none;
    border-color: var(--text-muted);
}
.form-group select option {
    background: var(--bg-card);
    color: var(--text-normal);
}
/* Transfer Form */
.transfer-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.transfer-form__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.transfer-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}
label.transfer-option,
label.transfer-option:has([type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.transfer-option:hover {
    border-color: var(--text-faint);
}
.transfer-option:has(input:checked) {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}
.transfer-option:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}
.transfer-option:has(input:disabled):hover {
    border-color: var(--border-subtle);
}
/* Custom monochrome radio button */
.transfer-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    border: 2px solid var(--text-faint);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.transfer-option input[type="radio"]:checked {
    border-color: var(--text-bright);
    background: var(--text-bright);
    box-shadow: inset 0 0 0 3px var(--bg-card);
}
.transfer-option__label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}
.transfer-option__label strong {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-bright);
}
.transfer-option__label small {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.transfer-form__source-field,
.transfer-form__dest-field {
    margin-top: 0.5rem;
}
.transfer-form__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.transfer-form__footer .btn {
    grid-column: 1 / -1;
}
/* Input with suffix (currency) */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-suffix input {
    padding-right: 4rem;
}
.input-suffix {
    position: absolute;
    right: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    pointer-events: none;
}
/* Settings variant - fixed width matching selects */
.input-with-suffix--settings {
    width: var(--input-width) !important;
}
.input-with-suffix--settings .settings-input {
    width: 100%;
    text-align: right;
    padding-right: 2rem !important;
}
.input-with-suffix--settings .input-suffix {
    right: 0.5rem;
}

/* Payment Methods Grid */
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.payment-methods--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
/* Style the label element directly like transfer-option */
label.payment-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-method__label {
    display: contents;
}
/* Hover and checked states - same colors as transfer-option */
.payment-method:hover {
    border-color: var(--text-faint);
}
.payment-method:has(input:checked) {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}
.payment-methods__separator {
    flex-basis: 100%;
    height: 0;
    margin: 0.25rem 0;
}
.payment-methods__divider {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    color: var(--text-faint);
    font-size: 0.8rem;
}
.payment-methods__divider--first {
    margin-top: 0;
}
.payment-methods__divider::before,
.payment-methods__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}
.payment-methods__divider span {
    padding: 0 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}
/* Disabled payment method */
.payment-method--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
/* Selected payment method (non-interactive) */
.payment-method--selected {
    border-color: var(--text-muted);
    background: var(--bg-hover);
    cursor: default;
}

/* Amount row - label above, buttons in grid like payment methods */
.amount-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.amount-row__label {
    font-size: 0.8rem;
    color: var(--text-faint);
}
.amount-row__options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.amount-row__custom {
    display: none;
}
.amount-row--custom .amount-row__options {
    display: none;
}
.amount-row--custom .amount-row__custom {
    display: block;
}

/* Payment Links */
.payment-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
}
.payment-links li {
    list-style: none !important;
    margin-bottom: 0.5rem;
}
.payment-links li::before,
.payment-links li::marker {
    content: none !important;
    display: none !important;
}
.payment-links a {
    font-size: 0.9rem;
    color: var(--accent-link);
}
.payment-links a:hover {
    text-decoration: underline;
}

/* Card Divider */
.card__divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5rem 0;
}

/* Payment Info Section */
.payment-info-section {
    padding-top: 0;
}

/* Settings Input & Select - unified sizing */
.kv-list:not(.kv-list--wide) .settings-input,
.kv-list:not(.kv-list--wide) .settings-select,
.kv-list:not(.kv-list--wide) .input-with-suffix--settings {
    width: var(--input-width) !important;
}
.settings-input,
.settings-select {
    width: 100% !important;
    height: var(--input-height) !important;
    padding: 0 0.75rem !important;
    margin-bottom: 0 !important;
    font-size: 0.875rem;
    line-height: calc(var(--input-height) - 2px);
    color: var(--text-bright);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--text-muted);
}
.settings-input::placeholder {
    color: var(--text-faint);
}
.settings-input[readonly] {
    color: var(--text-muted);
    cursor: default;
}

/* Settings Textarea */
.settings-textarea {
    width: 100% !important;
    min-height: 120px;
    padding: 0.75rem !important;
    margin-bottom: 0 !important;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text-bright);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s;
}
.settings-textarea:focus {
    outline: none;
    border-color: var(--text-muted);
}
.settings-textarea::placeholder {
    color: var(--text-faint);
}
.settings-textarea[readonly] {
    color: var(--text-muted);
    cursor: default;
}

/* Settings Select - dropdown arrow */
.settings-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}
.settings-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Number input spinner styling */
.settings-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
    text-align: right;
}
.settings-input[type="number"]::-webkit-inner-spin-button,
.settings-input[type="number"]::-webkit-outer-spin-button {
    height: calc(var(--input-height) - 4px);
    opacity: 0.5;
}
.settings-input[type="number"]:hover::-webkit-inner-spin-button,
.settings-input[type="number"]:hover::-webkit-outer-spin-button {
    opacity: 1;
}

/* Settings sections - spacing between multiple forms */
.settings-section + .settings-section {
    margin-top: 1.25rem;
}

/* Settings form footer with save button */
.settings-form-footer {
    padding-top: 0.5rem;
}

/* Custom File Input */
.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.file-input-wrapper input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.file-input-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--input-height);
    padding: 0 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
}
.file-input-btn:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}
.file-input-btn .icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
}
.file-input-name {
    flex: 1;
    color: var(--text-muted);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --- Import Diff --- */
.import-diff {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.import-diff__section {
    border-radius: var(--radius-md);
    padding: 1rem;
}

.import-diff__section--deleted {
    background-color: var(--accent-error-bg);
    border: 1px solid var(--accent-error-border);
}

.import-diff__section--added {
    background-color: var(--accent-success-bg);
    border: 1px solid var(--accent-success-border);
}

.import-diff__section--updated {
    background-color: var(--accent-warning-bg);
    border: 1px solid var(--accent-warning-border);
}

.import-diff__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.import-summary {
    margin-bottom: 1rem;
}

.import-confirm-form .settings-form-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
}

/* --- Purchase --- */
.purchase-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.purchase-breadcrumb a {
    color: var(--text-normal);
    text-decoration: none;
}
.purchase-breadcrumb a:hover {
    color: var(--text-bright);
}

.purchase-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

.purchase-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.purchase-category-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-elevated);
}
.purchase-category-card__icon {
    margin-bottom: 1rem;
    color: var(--text-muted);
}
.purchase-category-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-bright);
    text-align: center;
}
.purchase-category-card__count {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.purchase-category-card__date {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--text-faint);
}
.purchase-category-card--outline {
    background: transparent;
    border-style: dashed;
    justify-content: center;
}
.purchase-category-card--outline:hover {
    background: var(--bg-card);
}
.purchase-category-card--inactive {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.purchase-category-card--unread {
    position: relative;
}
.purchase-category-card__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.purchase-country-header {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 2rem 0 0.75rem;
}
.purchase-country-header:first-child {
    margin-top: 0;
}
.purchase-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 1rem;
}

.purchase-item-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.4rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.purchase-item-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-elevated);
}
.purchase-item-card__flag {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
}
.purchase-item-card__text {
    flex: 1;
    min-width: 0;
}
.purchase-item-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-bright);
}
.purchase-item-card__detail {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.purchase-item-card__badges {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}
.purchase-item-card--stacked {
    flex-wrap: wrap;
}
.purchase-item-card--stacked .purchase-item-card__badges {
    flex-direction: row;
    width: 100%;
    margin-left: 0;
    padding-left: 2.5rem;
    padding-top: 0.25rem;
}

/* --- Unified Confirmation Page (reusable for purchase, telegram, etc.) --- */
.confirm-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
}
.confirm-card {
    max-width: 768px;
    width: 100%;
    text-align: center;
}
.confirm-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.confirm-card__subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
.confirm-card__section {
    margin-bottom: 1.5rem;
}
.confirm-card__section-title {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-bright);
}
.confirm-card__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.confirm-card__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.confirm-card .info-box {
    text-align: left;
}
.confirm-details {
    text-align: left;
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
}
.confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.confirm-row:last-child {
    border-bottom: none;
}
.confirm-row span {
    color: var(--text-muted);
}
.confirm-row strong {
    color: var(--text-bright);
}

/* ================================================
   5. Modal
   ================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.modal__content {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}
.modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-bright);
}
.modal__close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.modal__close:hover {
    background: var(--bg-card);
    color: var(--text-bright);
    border-color: var(--border-strong);
}
.modal__body {
    padding: 1.5rem;
    overflow-y: auto;
}
.modal__subtitle {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-bright);
}
.modal__subtitle:first-child {
    margin-top: 0;
}
.modal__description {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* VPN Modal Specific */
.vpn-copy-status {
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--accent-success);
}
.vpn-key-input {
    width: 100%;
    padding: 0.2rem 0.5rem !important;
    height: auto !important;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: text;
}
.vpn-key-input:focus {
    outline: none;
    border-color: var(--accent-link);
}
.vpn-bundle-section {
    margin-top: 1rem;
}
.vpn-bundle-wrap {
    margin-top: 0.75rem;
}
.vpn-bundle {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    resize: vertical;
}
.vpn-bundle:focus {
    outline: none;
    border-color: var(--accent-link);
}
.vpn-clients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.vpn-client {
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.vpn-client h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}
.vpn-client p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
}
.vpn-client a {
    color: var(--accent-link);
}
.vpn-connection {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    white-space: nowrap;
}
/* SIP credentials fields */
.sip-field {
    margin-bottom: 0.75rem;
}
.sip-field__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}
.sip-field__row {
    display: flex;
    gap: 0.5rem;
}
.sip-field__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.sip-field__input:focus {
    outline: none;
    border-color: var(--accent-info);
}
.sip-field__copy {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.sip-field__copy:hover {
    border-color: var(--accent-info);
    color: var(--text-bright);
}

/* Small button variant - matches badge-action sizing */
.btn--sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* --- eSIM Modal Styles --- */
.modal__content--sm {
    max-width: 480px;
}
.esim-qr-container {
    text-align: center;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.esim-qr-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.esim-smdp-section {
    margin-bottom: 1.5rem;
}
.esim-smdp-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.esim-smdp-row {
    display: flex;
    gap: 0.5rem;
}
.esim-smdp-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.esim-smdp-input:focus {
    outline: none;
    border-color: var(--accent-info);
}
.esim-download-section {
    text-align: center;
}


/* ============================================
   6. Error Page
   ============================================ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 50vh;
}
.error-page__code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-faint);
    letter-spacing: -0.05em;
}
.error-page__title {
    margin: 1rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-bright);
}
.error-page__message {
    margin: 0 0 2rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 640px;
}
.error-page__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.error-page__debug {
    margin-top: 3rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 800px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-error);
    border-radius: var(--radius-md);
    text-align: left;
}
.error-page__exception {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    color: var(--accent-error);
    word-break: break-word;
}
.error-page__exception strong {
    color: var(--text-bright);
}
.error-page__stacktrace {
    margin: 0;
    padding: 1rem;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-muted);
    overflow-x: auto;
    white-space: pre;
}

/* ============================================
   7. Landing Page
   ============================================ */

/* --- 7.1 Hero --- */
.landing-hero {
    position: relative;
    padding: 6rem 0 5rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60, 60, 60, 0.25) 0%, transparent 60%),
        var(--bg-landing) center/contain no-repeat,
        var(--bg-body);
}
.landing-hero__content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.landing-hero__title {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text-bright);
    margin: 0 0 1rem;
}
.landing-hero__subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 2rem;
}
.landing-hero__buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.landing-hero__buttons .btn {
    padding: 0.6rem 1.1rem;
    font-size: 1.05rem;
}
.landing-hero__tagline {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-dim);
}

/* --- 7.2 Sections --- */
.landing-section { padding: 4rem 0; }
.landing-section--alt { background: var(--bg-card); }
.landing-section--dark { background: var(--bg-elevated); }
.landing-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.landing-section__subtitle {
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.95rem;
}

/* --- 7.3 Services Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.service-card {
    padding: 1.75rem 1.5rem;
    background: var(--bg-body);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}
.service-card:hover {
    border-color: var(--border-faint);
    transform: translateY(-2px);
}
.service-card__icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    color: var(--text-muted);
    fill: none;
    stroke: currentColor;
}
.service-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.service-card__text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- 7.4 Slider --- */
.slider {
    padding: 4rem 0 5rem;
    overflow: hidden;
}
.slider__outer {
    position: relative;
}
.slider__inner {
    display: flex;
    overflow: hidden;
}
.slider__slide {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
    width: 100%;
    min-height: 20rem;
    transition: transform 0.5s ease;
    overflow: hidden;
}
.slider__content {
    max-width: none;
}
.slider__title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--text-bright);
    margin: 0 0 1.25rem;
}
.slider__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.slider__list li {
    list-style: none !important;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    position: relative;
    padding-left: 1.25rem;
}
.slider__list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--text-muted);
}
.slider__list li::marker {
    content: none !important;
    display: none !important;
}
.slider__list li strong {
    color: var(--accent-warning);
    font-weight: 600;
}
.slider__list li p {
    margin: 0;
    display: inline;
    color: var(--text-muted);
}
.slider__image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider__image img,
.slider__image svg {
    width: 100%;
    height: 20rem;
    opacity: 0.9;
}

/* Slider arrows */
.slider__arrows-wrap {
    position: absolute;
    left: -50px;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    overflow: hidden;
}
.slider__arrows {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    transition: transform 0.5s ease;
}
.slider__arrow {
    width: 40px;
    height: 40px;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-faint);
    border-radius: 50%;
    color: var(--text-muted);
    transition: border-color 0.2s, color 0.2s;
}
.slider__arrow:hover {
    border-color: var(--text-bright);
    color: var(--text-bright);
}
.slider__arrow--empty {
    visibility: hidden;
    pointer-events: none;
}
.slider__arrow svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.slider__arrow--prev svg {
    transform: rotate(180deg);
}

/* Slider state transitions */
#slide2:checked ~ .slider__inner .slider__slide,
#slide2:checked ~ .slider__arrows-wrap .slider__arrows {
    transform: translateX(-100%);
}
#slide3:checked ~ .slider__inner .slider__slide,
#slide3:checked ~ .slider__arrows-wrap .slider__arrows {
    transform: translateX(-200%);
}
#slide4:checked ~ .slider__inner .slider__slide,
#slide4:checked ~ .slider__arrows-wrap .slider__arrows {
    transform: translateX(-300%);
}


/* --- 7.5 Payment Icons --- */
.payment-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}
.payment-icons svg.icon {
    width: 4rem !important;
    height: 4rem !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    fill: var(--text-muted);
    transition: fill 0.2s;
}
.payment-icons svg.icon:hover {
    fill: var(--text-bright);
}

/* --- 7.6 Footer --- */
.site-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-strong);
    padding: 2rem 0 1.5rem;
}
.footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.footer__left {
    display: flex;
    gap: 4rem;
}
.footer__section { min-width: 150px; }
.footer__heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0 0 1rem;
}
.footer__links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer__links li {
    list-style: none !important;
    margin-bottom: 0.5rem;
}
.footer__links li::before,
.footer__links li::marker {
    content: none !important;
    display: none !important;
}
.footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.footer__links a:hover {
    color: var(--text-bright);
    text-decoration: none;
}
.footer__links .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.footer__social {
    display: flex;
    gap: 1rem;
}
.footer__social a { color: var(--text-muted); }
.footer__social a:hover { color: var(--text-bright); }
.footer__social .icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.footer__bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}
.footer__copyright {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0;
}

/* Latency indicator */
.latency {
    padding: 0rem; 
    margin: 1rem 0 0 0;
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* --- 7.7 FAQ --- */
.faq-section { padding: 4rem 0; }
.faq-section__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-bright);
    text-align: center;
    margin: 0 0 2.5rem;
}

/* FAQ Item - pure CSS accordion */
.faq-item {
    /* max-width: 900px; */
    margin: 0 auto;
    border-bottom: 1px solid var(--border-strong);
    position: relative;
}
.faq-item__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-normal);
    line-height: 1.4;
}
.faq-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--text-muted);
    fill: none;
    transition: transform 0.3s ease;
}
.faq-item__label {
    position: absolute;
    inset: 0;
    cursor: pointer;
}
.faq-item:hover .faq-item__title { opacity: 0.8; }
.faq-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item__text {
    padding: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Open state */
.faq-item > input:checked ~ .faq-item__title .faq-item__icon {
    transform: rotate(90deg);
}
.faq-item > input:checked ~ .faq-item__content {
    max-height: 500px;
}

/* ============================================
   8. Admin Dashboard (Keeluala)
   ============================================ */

/* --- 8.1 Stats Grid --- */
.keeluala-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.keeluala-stat {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    color: inherit;
}

.keeluala-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.keeluala-stat--users::before { background: var(--accent-success); }
.keeluala-stat--devices::before { background: var(--accent-warning); }
.keeluala-stat--payments::before { background: var(--accent-error); }
.keeluala-stat--system::before { background: var(--accent-info); }

.keeluala-stat__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.keeluala-stat--users .keeluala-stat__icon { background: var(--accent-success-bg); color: var(--accent-success); }
.keeluala-stat--devices .keeluala-stat__icon { background: var(--accent-warning-bg); color: var(--accent-warning); }
.keeluala-stat--payments .keeluala-stat__icon { background: var(--accent-error-bg); color: var(--accent-error); }
.keeluala-stat--system .keeluala-stat__icon { background: var(--accent-info-bg); color: var(--accent-info); }

.keeluala-stat__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.keeluala-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.1;
}

.keeluala-stat__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.keeluala-stat__details {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.keeluala-stat__detail {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.keeluala-stat__detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-normal);
}

.keeluala-stat__detail-label {
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
}

/* Clickable stat links */
.keeluala-stat__links {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.keeluala-stat__link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.keeluala-stat__link:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.keeluala-stat__link-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keeluala-stat__link-label {
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
}

.keeluala-stat__link:hover .keeluala-stat__link-value {
    color: var(--text-bright);
}

/* --- 8.2 Summary Section --- */
.keeluala-summary {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.keeluala-summary__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.keeluala-summary__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.2;
}

.keeluala-summary__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.keeluala-summary__item--highlight .keeluala-summary__value {
    color: var(--accent-success);
    font-size: 1.75rem;
}

.keeluala-summary__item--payments .keeluala-summary__value {
    color: var(--accent-success);
}

.keeluala-summary__item--spent .keeluala-summary__value {
    color: var(--accent-error);
}

.keeluala-summary__item--forecast .keeluala-summary__value {
    color: var(--accent-warning);
    font-size: 1.75rem;
}

/* ============================================
   9. Plan Cards (cards.erb)
   ============================================ */
.cards-page {
    padding: 0;
}
.cards-page__header {
    text-align: center;
    margin-bottom: 3rem;
}
.cards-page__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.cards-page__subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.cards-page__note {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}
/* --- Plan Cards: nested subgrid for cross-card alignment --- */
/* Parent: 4-column grid, cards share row tracks via subgrid */
.cards-page .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
}
/* Card: subgrid spanning 7 rows (name + pricing + 5 features) */
.plan-card {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    position: relative;
    transition: border-color 0.2s;
}
.plan-card:hover {
    border-color: var(--text-muted);
}
.plan-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.plan-card__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
    border-radius: var(--radius-lg);
}
.plan-card:has(.plan-card__radio:checked) {
    border-color: var(--accent-info);
    box-shadow: 0 0 0 1px var(--accent-info);
}
.plan-card:has(.plan-card__radio:checked):hover {
    border-color: var(--accent-info);
}
.plan-card--inactive {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    opacity: 0.7;
    cursor: default;
}
.plan-card--inactive:hover {
    border-color: var(--border-strong);
    opacity: 0.85;
}
.plan-card__badge {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-info);
    color: var(--text-white, #fff);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
/* Row 1: card name */
.plan-card__name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-bright);
    text-align: center;
    margin: 0;
    padding-bottom: 1.25rem;
}
/* Row 2: pricing section */
.plan-card__pricing {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.5rem;
}
.plan-card__price {
    text-align: center;
    margin-bottom: 0.25rem;
}
.plan-card__price-prefix {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.plan-card__amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.1;
}
.plan-card__period {
    font-size: 1rem;
    color: var(--text-muted);
}
.plan-card__price-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-faint);
    font-weight: 600;
    margin: 0.25rem 0 0;
}
.plan-card__description {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}
/* Rows 3-7: features list — nested subgrid so each feature aligns across cards */
.plan-card__features {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    list-style: none;
    padding: 0;
    margin: 0;
}
.plan-card__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--text-normal);
    line-height: 1.4;
}
.plan-card__check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--accent-success);
    margin-top: 0.15rem;
}

.cards-page__continue {
    text-align: center;
    margin-top: 2.5rem;
}
.cards-page__continue-btn {
    min-width: 20rem;
    padding: 0.9rem 3rem;
    font-size: 1.1rem;
}
.cards-page__footnotes {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: var(--text-faint);
}
.cards-page__footnotes p {
    margin: 0.25rem 0;
}


/* ============================================
   Navigation
   ============================================ */
.nav-header {
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-header--compact .nav-brand a { font-size: 1rem; }

.nav-container {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 1.5rem;
    max-width: 100%;
    margin: 0 auto;
    gap: 1rem;
}

/* Brand */
.nav-brand {
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    flex-shrink: 0;
}
.nav-brand a {
    color: var(--text-bright);
    text-decoration: none;
    letter-spacing: 0;
    font-size: 1.1rem;
}

/* Hidden checkbox toggles */
input.nav-toggle,
input.nav-dropdown__check {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Hamburger button */
label.nav-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    flex-shrink: 0;
    gap: 5px;
}
label.nav-toggle-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: background 0.2s;
}
label.nav-toggle-btn:hover span { background: var(--text-bright); }

/* Identity section - first one pushes to right */
.nav-identity b { color: var(--text-bright); }

/* Balance pill */
.nav-balance,
a.nav-balance {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.35rem 0.75rem !important;
    background: var(--accent-success-bg) !important;
    border: 1px solid var(--accent-success-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--accent-success) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.nav-balance:hover,
a.nav-balance:hover {
    background: var(--accent-success-bg) !important;
    border-color: var(--accent-success-border) !important;
    color: var(--accent-success) !important;
}
.nav-balance .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    fill: none;
}
.nav-balance.warning,
a.nav-balance.warning {
    background: var(--accent-warning-bg) !important;
    border-color: var(--accent-warning-border) !important;
    color: var(--accent-warning) !important;
}
.nav-balance.warning:hover,
a.nav-balance.warning:hover {
    background: var(--accent-warning-bg) !important;
    border-color: var(--accent-warning-border) !important;
    color: var(--accent-warning) !important;
}
.nav-balance.negative,
a.nav-balance.negative {
    background: var(--accent-error-bg) !important;
    border-color: var(--accent-error-border) !important;
    color: var(--accent-error) !important;
}
.nav-balance.negative:hover,
a.nav-balance.negative:hover {
    background: var(--accent-error-bg) !important;
    border-color: var(--accent-error-border) !important;
    color: var(--accent-error) !important;
}
/* Unread tickets badge */
a.nav-unread-badge,
.nav-unread-badge,
.nav-menu a.nav-unread-badge {
    position: relative !important;
    width: var(--avatar-sm) !important;
    height: var(--avatar-sm) !important;
    padding: 0 !important;
    border: 1px solid var(--border-faint) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s !important;
    background: transparent !important;
}
.nav-unread-badge .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    fill: none;
}
.nav-unread-badge span,
.nav-unread-badge__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-card);
    border-radius: 9px;
    color: var(--accent-warning);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.nav-unread-badge span:empty {
    display: none;
}
a.nav-unread-badge:hover,
.nav-unread-badge:hover,
.nav-menu a.nav-unread-badge:hover {
    border-color: var(--text-bright) !important;
    color: var(--text-bright) !important;
    background: transparent !important;
}
/* Remove underline pseudo-element on unread badge */
.nav-menu a.nav-unread-badge::after {
    display: none !important;
}

/* User icon */
.nav-user-icon {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border: 1px solid var(--border-faint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.2s, color 0.2s;
}
.nav-user-icon:hover {
    border-color: var(--text-bright);
    color: var(--text-bright);
}
.nav-user-icon .icon {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

/* Identity items - text styling */
.nav-identity {
    font-weight: 800;
    font-size: 1rem;
}

/* Identity dropdown - clean toggle */
.nav-dropdown.nav-identity .nav-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    padding-bottom: 6px;
    margin-bottom: -6px;
    border: none;
    background: none;
    font-weight: 800;
    font-size: 1rem;
}

/* Auth dropdown - circle around user icon */
.nav-auth-dropdown .nav-dropdown__toggle .icon:first-child {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    padding-right: calc(0.4rem + 1px);
    padding-left: calc(0.4rem + 1px);
    border: 1px solid var(--border-faint);
    border-radius: 50%;
    stroke: currentColor;
    fill: none;
    transition: border-color 0.2s;
}
.nav-auth-dropdown:hover .nav-dropdown__toggle .icon:first-child {
    border-color: var(--text-bright);
}
/* Auth dropdown text position adjustment */
.nav-auth-dropdown .nav-dropdown__toggle > span {
    position: relative;
    top: 1px;
    margin-left: 0.15rem;
}

/* Impersonation indicator - yellow/warning color */
.nav-auth-dropdown.nav-imposter-active .nav-dropdown__toggle {
    color: var(--accent-error) !important;
}
.nav-auth-dropdown.nav-imposter-active .nav-dropdown__toggle .icon:first-child {
    border-color: var(--accent-error) !important;
}
.nav-auth-dropdown.nav-imposter-active .nav-dropdown__chevron {
    color: var(--accent-error);
    opacity: 1;
}

/* Overlay */
label.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
}

/* Slide-out menu */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 17.5rem;
    height: 100dvh;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    padding-top: var(--nav-height);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    border-right: 1px solid var(--border-strong);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.nav-menu::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Close button */
label.nav-close {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-strong);
    cursor: pointer;
}
label.nav-close::before {
    content: "✕";
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-muted);
    transition: color 0.2s;
}
label.nav-close:hover::before { color: var(--text-bright); }

/* Menu links */
.nav-menu a.nav-link {
    display: block;
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.2s, background 0.2s;
}
.nav-menu a.nav-link:hover {
    color: var(--text-bright);
    background: var(--bg-elevated);
    text-decoration: none;
}
.nav-menu a.nav-link.current {
    color: var(--text-bright);
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-link);
    padding-left: calc(1.5rem - 3px);
}

/* Expander - hidden on mobile, visible on desktop */
.nav-expander {
    display: none;
}

/* Separator - horizontal line in menus */
.nav-separator {
    height: 0;
    border-top: 1px solid var(--border-subtle);
    margin: 0.5rem 1rem;
}

/* Mobile identity section - hidden on desktop, shown at bottom on mobile */
.nav-mobile-identity {
    display: none;
}

/* Menu open state */
.nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
.nav-toggle:checked ~ label.nav-overlay {
    opacity: 1;
    visibility: visible;
}

/* Nav Dropdown (generic menu dropdown) */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-dropdown__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    color: var(--text-muted) !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 0;
    margin-bottom: 0;
    transition: color 0.2s;
}
.nav-dropdown__toggle:hover,
.nav-dropdown:focus-within .nav-dropdown__toggle {
    color: var(--text-bright);
}
.nav-dropdown.active .nav-dropdown__toggle {
    color: var(--text-bright);
}
.nav-dropdown__toggle .icon {
    width: var(--icon-xs);
    height: var(--icon-xs);
    fill: currentColor;
    transition: transform 0.2s;
}
/* Dropdown with separate link and chevron toggle */
.nav-dropdown__link {
    text-decoration: none;
    color: inherit;
}
.nav-dropdown__link:hover {
    color: var(--text-bright);
}
.nav-dropdown__chevron {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    margin-left: -0.25rem;
    color: var(--text-muted);
    transition: color 0.2s;
}
.nav-dropdown__chevron:hover {
    color: var(--text-bright);
}
.nav-dropdown__chevron .icon {
    width: var(--icon-xs);
    height: var(--icon-xs);
    fill: currentColor;
    transition: transform 0.2s;
}
/* .nav-dropdown__check:checked ~ .nav-dropdown__chevron .icon {
    transform: rotate(180deg);
} */
.nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 10rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 0.5rem 0 0.5rem 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
}
/* Back button - hidden by default on desktop */
.nav-dropdown__back {
    display: none;
}
/* Invisible bridge to prevent hover gap issues */
/* .nav-dropdown__menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
} */
/* Hover trigger for dropdowns - desktop only, added in media query */
.nav-dropdown__menu a {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
}
.nav-dropdown__menu a:hover {
    background: var(--bg-elevated);
    color: var(--text-bright);
}
.nav-dropdown__menu a.active {
    color: var(--accent-link);
}
.nav-dropdown__separator {
    margin: 0.5rem 0;
    border: none;
    border-top: 1px solid var(--bg-elevated);
}
.nav-dropdown__separator:first-child {
    display: none;
}

/* Language Dropdown (desktop) */
.nav-lang-dropdown {
    display: none;
    align-items: center;
    position: relative;
}
.nav-lang-dropdown::before {
    content: "";
    width: 1px;
    height: 20px;
    background: var(--border-faint);
    margin-right: 0.5rem;
}
.nav-lang-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-muted);
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
}
.nav-lang-dropdown__toggle:hover { color: var(--text-bright); }
.nav-lang-dropdown__toggle::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s;
}
.nav-lang-dropdown:hover .nav-lang-dropdown__toggle::after,
.nav-lang-dropdown:focus-within .nav-lang-dropdown__toggle::after {
    transform: rotate(180deg);
}
.nav-lang-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
}
.nav-lang-dropdown:hover .nav-lang-dropdown__menu,
.nav-lang-dropdown:focus-within .nav-lang-dropdown__menu {
    opacity: 1;
    visibility: visible;
}
.nav-lang-dropdown__menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    text-align: center;
}
.nav-lang-dropdown__menu a:hover {
    background: var(--bg-elevated);
    color: var(--text-bright);
}
.nav-lang-dropdown__menu a.active {
    background: var(--bg-elevated);
    color: var(--accent-normal);
    font-weight: 800;
}

/* Close other dropdown when one is open */
.nav-identity:has(.nav-user-dropdown:hover) .nav-lang-dropdown__menu,
.nav-identity:has(.nav-user-dropdown:focus-within) .nav-lang-dropdown__menu {
    opacity: 0 !important;
    visibility: hidden !important;
}
.nav-identity:has(.nav-lang-dropdown:hover) .nav-user-dropdown__menu,
.nav-identity:has(.nav-lang-dropdown:focus-within) .nav-user-dropdown__menu {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Language selector (mobile) */
.nav-lang-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.nav-lang-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
}
.nav-lang-btn:hover {
    border-color: var(--text-bright);
    color: var(--text-bright);
    text-decoration: none;
}
.nav-lang-btn.active {
    border-color: var(--accent-link);
    color: var(--accent-link);
}

/* Theme Toggle */
button.nav-theme-toggle,
.nav-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-faint);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
button.nav-theme-toggle:hover,
.nav-theme-toggle:hover {
    border-color: var(--text-bright);
    color: var(--text-bright);
}
.nav-theme-toggle .icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}
/* Show sun in dark mode, moon in light mode */
.nav-theme-toggle__icon--light { display: block; }
.nav-theme-toggle__icon--dark { display: none; }
[data-theme="light"] .nav-theme-toggle__icon--light { display: none; }
[data-theme="light"] .nav-theme-toggle__icon--dark { display: block; }

/* User Dropdown */
.nav-user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-user-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-user-dropdown__toggle:hover,
.nav-user-dropdown:focus-within .nav-user-dropdown__toggle {
    color: var(--text-bright);
    text-decoration: none;
}
.nav-user-dropdown__toggle:focus,
.nav-user-dropdown__toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.nav-user-dropdown__name {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 800;
}
.nav-user-dropdown__toggle .nav-user-icon {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-faint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.nav-user-dropdown__toggle:hover .nav-user-icon { border-color: var(--text-bright); }
.nav-user-dropdown__toggle .nav-user-icon .icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.nav-user-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    padding-top: 0.5rem;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
}
.nav-user-dropdown__menu::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: -1;
}
.nav-user-dropdown:hover .nav-user-dropdown__menu,
.nav-user-dropdown:focus-within .nav-user-dropdown__menu {
    opacity: 1;
    visibility: visible;
}
.nav-user-dropdown__menu a {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.nav-user-dropdown__menu a:hover {
    background: var(--bg-elevated);
    color: var(--text-bright);
}


/* Statusbar (right side of header - balance, unread, user dropdown, etc.) */
.nav-statusbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}
/* Tighter gap between unread badge and auth dropdown */
.nav-statusbar .nav-unread-badge + .nav-dropdown {
    margin-left: -0.6rem;
}
/* Statusbar dropdown toggles - bold text */
.nav-statusbar .nav-dropdown__toggle {
    color: var(--text-muted) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}
/* Statusbar dropdowns align to right edge */
.nav-statusbar .nav-dropdown__menu {
    left: auto;
    right: 0;
}

/* Expander pushes subsequent items to the right */
.nav-menu .nav-expander {
    display: block !important;
    flex-grow: 1 !important;
    min-width: 0;
}

/* Identity items gap */
.nav-menu .nav-identity {
    margin-left: 0.5rem;
}

/* Identity dropdowns align to right edge */
.nav-identity .nav-dropdown__menu {
    left: auto;
    right: 0;
}

/* ============================================
   Media Queries
   ============================================ */

/* Desktop (min-width: 1271px) */
@media (min-width: 1271px) {
    label.nav-toggle-btn { display: none; }

    /* Hover trigger for dropdowns on desktop */
    .nav-dropdown:hover > .nav-dropdown__menu,
    .nav-dropdown:focus-within > .nav-dropdown__menu {
        opacity: 1;
        visibility: visible;
    }

    /* Chevron rotation on hover */
    /* .nav-dropdown:hover > .nav-dropdown__toggle .icon:last-child,
    .nav-dropdown:focus-within > .nav-dropdown__toggle .icon:last-child,
    .nav-dropdown:hover > .nav-dropdown__chevron .icon,
    .nav-dropdown:focus-within > .nav-dropdown__chevron .icon {
        transform: rotate(180deg);
    } */

    .nav-dropdown__menu {
        max-height: none;
        overflow: visible;
    }

    .nav-header--compact .nav-menu a.nav-link,
    .nav-header--compact .nav-dropdown__toggle {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
        font-weight: 400;
    }

    .nav-menu {
        position: static;
        transform: none;
        flex: 0 0 auto;
        height: auto;
        width: auto;
        flex-direction: row;
        align-items: center;
        padding: 0;
        background: transparent;
        border: none;
        overflow: visible;
    }

    .nav-menu a.nav-link {
        padding: 0.5rem 1rem;
        border: none;
        font-size: 1.1rem;
        position: relative;
    }
    .nav-menu a.nav-link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--text-muted);
        border-radius: 1px;
        transition: width 0.2s ease;
    }
    .nav-menu a.nav-link:hover {
        color: var(--text-bright);
        background: transparent;
    }
    .nav-menu a.nav-link:hover::after {
        width: 20px;
    }
    .nav-menu a.nav-link.active {
        color: var(--text-bright);
        font-weight: 600;
    }
    .nav-menu a.nav-link.active::after {
        width: 20px;
        background: var(--accent-link);
    }

    /* Nav dropdown desktop styling */
    .nav-dropdown__toggle {
        padding: 0.5rem 1rem;
        font-size: 1.1rem;
        position: relative;
    }
    .nav-dropdown__toggle::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--text-muted);
        border-radius: 1px;
        transition: width 0.2s ease;
    }
    .nav-dropdown:hover .nav-dropdown__toggle::after {
        width: 20px;
    }
    .nav-dropdown.active .nav-dropdown__toggle {
        font-weight: 600;
    }
    .nav-dropdown.active .nav-dropdown__toggle::after {
        width: 50%;
        background: var(--accent-link);
    }
    .nav-dropdown.active.nav-imposter-active .nav-dropdown__toggle::after {
        background: var(--accent-error);
    }

    label.nav-close,
    .nav-mobile-identity,
    label.nav-overlay { display: none; }

    .nav-lang-dropdown { display: flex; }

    /* Vertical separator on desktop */
    .nav-separator {
        display: block;
        width: 1px;
        height: 20px;
        background: var(--border-subtle);
        margin: 0;
    }
}

/* Tablet/Mobile (max-width: 1270px) */
@media (max-width: 1270px) {
    /* Show mobile identity section */
    .nav-mobile-identity {
        display: block;
        margin-top: auto;
        border-top: 1px solid var(--border-strong);
        background: var(--bg-elevated);
    }

    /* Mobile identity dropdowns - always expanded */
    .nav-mobile-identity .nav-dropdown__menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Language dropdown - hide toggle label, show pills */
    .nav-mobile-identity .nav-dropdown:not(.nav-auth-dropdown) .nav-dropdown__toggle {
        display: none !important;
    }
    .nav-mobile-identity .nav-dropdown:not(.nav-auth-dropdown) .nav-dropdown__menu {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav-mobile-identity .nav-dropdown:not(.nav-auth-dropdown) .nav-dropdown__menu a {
        display: inline-block;
        padding: 0.35rem 0.7rem;
        border: 1px solid var(--border-faint);
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        transition: all 0.2s;
    }
    .nav-mobile-identity .nav-dropdown:not(.nav-auth-dropdown) .nav-dropdown__menu a:hover {
        border-color: var(--text-bright);
        color: var(--text-bright);
        background: transparent;
    }
    .nav-mobile-identity .nav-dropdown:not(.nav-auth-dropdown) .nav-dropdown__menu a.active {
        border-color: var(--accent-link);
        color: var(--accent-link);
    }

    /* Auth dropdown - show username as header, expand menu */
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__toggle {
        display: flex !important;
        align-items: center;
        width: 100%;
        padding: 0.65rem 1.5rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-bright);
        border-bottom: 1px solid var(--border-subtle);
        pointer-events: none;
        cursor: default;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__toggle > .icon:last-of-type,
    .nav-mobile-identity .nav-dropdown__chevron {
        display: none !important;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__toggle > .icon:first-of-type {
        width: 18px;
        height: 18px;
        padding: 0;
        border: none;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__toggle > span {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__menu {
        display: block !important;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__menu a {
        display: block;
        padding: 0.65rem 1.5rem 0.65rem 1.5rem;
        font-size: 0.85rem;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__menu a:last-child {
        border-bottom: none;
    }
    .nav-mobile-identity .nav-auth-dropdown .nav-dropdown__menu a:hover {
        color: var(--text-bright);
        background: var(--bg-hover);
    }

    /* Balance link - use desktop pill style */
    .nav-mobile-identity a.nav-balance {
        margin: 0.75rem 1.5rem;
        border-radius: var(--radius-sm) !important;
    }

    /* Hide separator and locale dropdown on mobile */
    .nav-statusbar > .nav-separator {
        display: none;
    }
    .nav-statusbar > .nav-dropdown:not(.nav-auth-dropdown) {
        display: none;
    }
    .nav-statusbar .nav-unread-badge + .nav-dropdown {
        margin-left: 0;
    }

    /* Slide-out menu dropdowns */
    .nav-menu .nav-dropdown {
        display: block;
    }
    .nav-menu .nav-dropdown__check {
        display: inline-block;
    }
    .nav-menu .nav-dropdown__toggle {
        display: flex;
        width: 100%;
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
        justify-content: space-between;
    }
    .nav-menu .nav-dropdown__toggle:hover {
        color: var(--text-bright);
        background: var(--bg-elevated);
    }
    .nav-menu .nav-dropdown.active .nav-dropdown__toggle {
        color: var(--text-bright);
    }
    .nav-menu .nav-dropdown__toggle .icon {
        transition: transform 0.2s;
    }
    .nav-menu .nav-dropdown__chevron {
        display: none;
    }
    /* .nav-menu .nav-dropdown__check:checked ~ .nav-dropdown__toggle .icon:last-child {
        transform: rotate(180deg);
    } */
    .nav-statusbar .nav-dropdown__check:checked ~ .nav-dropdown__menu {
        visibility: visible;
        opacity: 1;
    }
    .nav-menu .nav-dropdown__menu {
        position: static;
        display: none;
        transform: none;
        background: transparent;
        border: none !important;
        border-radius: 0;
        box-shadow: none;
        padding: 0 !important;
        min-width: 0;
        opacity: 1;
        visibility: visible;
    }
    .nav-menu .nav-dropdown__check:checked ~ .nav-dropdown__menu {
        display: block;
    }
    .nav-menu .nav-dropdown__menu a {
        display: block;
        padding: 0.75rem 1.5rem 0.75rem 2.5rem;
        font-size: 0.9rem;
        font-weight: 400;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav-menu .nav-dropdown__menu a:last-child {
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav-menu .nav-dropdown__menu a:hover {
        color: var(--text-bright);
        background: var(--bg-hover);
    }
    .nav-menu .nav-dropdown__menu a.active {
        color: var(--text-bright);
        border-left: 3px solid var(--accent-link);
        padding-left: calc(2.5rem - 3px);
    }
    .nav-menu .nav-dropdown__separator {
        display: none;
    }

    /* Drill-down navigation: Back button */
    .nav-menu .nav-dropdown__back {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-muted);
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border-strong);
        cursor: pointer;
    }
    .nav-menu .nav-dropdown__back:hover {
        color: var(--text-bright);
        background: var(--bg-hover);
    }
    .nav-menu .nav-dropdown__back .icon {
        width: 14px;
        height: 14px;
    }
    /* Hide back button in mobile-identity (no drill-down there) */
    .nav-mobile-identity .nav-dropdown__back {
        display: none;
    }

    /* Drill-down navigation: Hide other items when a top-level dropdown is open */
    /* Only applies to direct child dropdowns, not dropdowns inside mobile-identity */
    .nav-menu:has(> .nav-dropdown > .nav-dropdown__check:checked) > .nav-link,
    .nav-menu:has(> .nav-dropdown > .nav-dropdown__check:checked) > .nav-separator,
    .nav-menu:has(> .nav-dropdown > .nav-dropdown__check:checked) > .nav-dropdown:not(:has(> .nav-dropdown__check:checked)),
    .nav-menu:has(> .nav-dropdown > .nav-dropdown__check:checked) > .nav-mobile-identity {
        display: none;
    }

    /* Show the expanded dropdown's toggle as header */
    .nav-menu > .nav-dropdown:has(> .nav-dropdown__check:checked) > .nav-dropdown__toggle {
        background: var(--bg-elevated);
        color: var(--text-bright);
        pointer-events: none;
    }
    .nav-menu > .nav-dropdown:has(> .nav-dropdown__check:checked) > .nav-dropdown__toggle .icon:last-child {
        display: none;
    }
}

/* Small screens (max-width: 480px) */
@media (max-width: 480px) {
    .nav-container { padding: 0 0.75rem; gap: 0.5rem; }
    .nav-brand { font-size: 0.9rem; }
    .nav-statusbar .nav-balance { display: none; }
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Mobile-only utility - hidden by default on desktop, shown on mobile */
.mobile-only {
    display: none;
}
td.mobile-only {
    display: none;
}
/* Desktop-only utility - shown by default, hidden on mobile */
/* Use revert to preserve natural display (table-cell for td, inline for span, etc) */
td.desktop-only {
    display: table-cell;
}
th.desktop-only {
    display: table-cell;
}
span.desktop-only {
    display: inline;
}
/* Hide inline status badge on desktop (shown on mobile) */
.history-status-badge {
    display: none;
}

/* ============================================
   Media Queries
   ============================================ */

/* Large desktop (min-width: 1601px) */
@media (min-width: 1601px) {
    .dashboard-grid .data-table {
        min-width: 0;
    }
}

/* Desktop (max-width: 1200px) */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-grid__left,
    .dashboard-grid__right {
        grid-column: 1;
    }
    .dashboard-card--placeholder {
        display: none;
    }
    /* Dashboard services grid - single column on smaller screens */
    .dashboard-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile grid (max-width: 1100px) */
@media (max-width: 1100px) {
    /* Profile grid - single column layout */
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* Support table & Browse table (max-width: 1400px) */
@media (max-width: 1400px) {

    /* Browse table - mobile card layout */
    .browse-table.data-table {
        min-width: 0;
    }
    .browse-table.data-table thead {
        display: none;
    }
    .browse-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .browse-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .browse-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .browse-table.data-table tbody tr td {
        background: transparent;
    }
    .browse-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }

    /* Hide columns without responsive marker */
    .browse-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Hide input row on mobile */
    .browse-table.data-table .input-row {
        display: none;
    }

    /* Row 1: [id] [owner] */
    /* Row 2: [date] [status] */
    /* Row 3: [actions - full width] */
    .browse-table.data-table td[data-responsive="id"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .browse-table.data-table td[data-responsive="owner"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .browse-table.data-table td[data-responsive="date"] {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    .browse-table.data-table td[data-responsive="status"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
    }
    .browse-table.data-table td[data-responsive="actions"] {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        display: none;
    }
    .browse-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }

    /* Users table - mobile card layout */
    /* Row 1: [username] [saabumise_aeg] */
    /* Row 2: [sip_extension] [balance] */
    /* Row 3: [actions] [status + accesslevel] - expanded only */
    .users-table.data-table {
        min-width: 0;
    }
    .users-table.data-table thead {
        display: none;
    }
    .users-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .users-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .users-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .users-table.data-table tbody tr td {
        background: transparent;
    }
    .users-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .users-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1: [username] [date] */
    .users-table.data-table td[data-responsive="id"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .users-table.data-table td[data-responsive="date"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    /* Row 2: [extension] [balance] */
    .users-table.data-table td[data-responsive="extension"] {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .users-table.data-table td[data-responsive="balance"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
        font-weight: 600;
    }
    /* Row 3: [actions] [status + accesslevel] - hidden by default */
    .users-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
    }
    .users-table.data-table td[data-responsive="status"],
    .users-table.data-table td[data-responsive="accesslevel"] {
        display: none;
    }
    /* Expanded: show actions and status/accesslevel */
    .users-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
        grid-row: 3 / 5;
    }
    .users-table.data-table tbody tr.expanded td[data-responsive="status"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        justify-content: flex-end;
    }
    .users-table.data-table tbody tr.expanded td[data-responsive="accesslevel"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 4;
        justify-content: flex-end;
    }

    /* Devices table - mobile card layout */
    /* Row 1: [device] [expiration] */
    /* Row 2: [owner] [cost] */
    /* Row 3: [actions] [status + autorenew] - expanded only */
    .devices-table.data-table {
        min-width: 0;
    }
    .devices-table.data-table thead {
        display: none;
    }
    .devices-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .devices-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .devices-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .devices-table.data-table tbody tr td {
        background: transparent;
    }
    .devices-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .devices-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1: [device id] [expiration] */
    .devices-table.data-table td[data-responsive="id"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .devices-table.data-table td[data-responsive="expiration"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    /* Row 2: [owner] [cost] */
    .devices-table.data-table td[data-responsive="owner"] {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .devices-table.data-table td[data-responsive="cost"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
        font-weight: 600;
    }
    /* Row 3: [actions] [status + autorenew] - hidden by default */
    .devices-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
    }
    .devices-table.data-table td[data-responsive="status"],
    .devices-table.data-table td[data-responsive="autorenew"] {
        display: none;
    }
    /* Expanded: show actions and status/autorenew */
    .devices-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
        grid-row: 3 / 5;
    }
    .devices-table.data-table tbody tr.expanded td[data-responsive="status"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        justify-content: flex-end;
    }
    .devices-table.data-table tbody tr.expanded td[data-responsive="autorenew"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 4;
        justify-content: flex-end;
    }

    /* API table - mobile card layout */
    /* Row 1: [name] [key] */
    /* Row 2: [owner] [source] */
    /* Row 3: [actions] [status] - expanded only */
    .api-table.data-table {
        min-width: 0;
    }
    .api-table.data-table thead {
        display: none;
    }
    .api-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .api-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .api-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .api-table.data-table tbody tr td {
        background: transparent;
    }
    .api-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .api-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1: [name] [key] */
    .api-table.data-table td[data-responsive="id"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .api-table.data-table td[data-responsive="key"] {
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Row 2: [owner] [source] */
    .api-table.data-table td[data-responsive="owner"] {
        grid-column: 1;
        grid-row: 3;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .api-table.data-table td[data-responsive="source"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        font-size: 0.85rem;
    }
    /* Row 3: [actions] [status] - hidden by default */
    .api-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
    }
    .api-table.data-table td[data-responsive="status"] {
        display: none;
    }
    /* Expanded: show actions and status */
    .api-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }
    .api-table.data-table tbody tr.expanded td[data-responsive="status"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        justify-content: flex-end;
    }

    /* Calls table - mobile card layout */
    /* Row 1: [destination] [duration] */
    /* Row 2: [caller] [status] */
    /* Row 3: [empty] [owner] */
    /* Row 4+: [actions] [route + extension] - expanded only */
    .calls-table.data-table {
        min-width: 0;
    }
    .calls-table.data-table thead {
        display: none;
    }
    .calls-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .calls-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .calls-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .calls-table.data-table tbody tr td {
        background: transparent;
    }
    .calls-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .calls-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1: [destination] [duration] */
    .calls-table.data-table td[data-responsive="destination"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .calls-table.data-table td[data-responsive="duration"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    /* Row 2: [empty] [status badge] */
    .calls-table.data-table td[data-responsive="status"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
    }
    /* Row 3: [caller] [owner] */
    .calls-table.data-table td[data-responsive="caller"] {
        grid-column: 1;
        grid-row: 3;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .calls-table.data-table td[data-responsive="owner"] {
        grid-column: 2;
        grid-row: 3;
        text-align: right !important;
        font-size: 0.85rem;
    }
    /* Row 4+: [actions] [route + extension] - hidden by default */
    .calls-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
    }
    .calls-table.data-table td[data-responsive="route"],
    .calls-table.data-table td[data-responsive="extension"] {
        display: none;
    }
    /* Expanded: show actions, route, and extension */
    .calls-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }
    .calls-table.data-table tbody tr.expanded td[data-responsive="route"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        justify-content: flex-end;
        font-size: 0.85rem;
    }
    .calls-table.data-table tbody tr.expanded td[data-responsive="extension"] {
        display: flex;
        align-items: center;
        grid-column: 2;
        grid-row: 5;
        justify-content: flex-end;
        font-size: 0.85rem;
    }

    /* Filters table - mobile card layout */
    /* Row 1: [pattern] [policy] */
    /* Row 2: [source] [action] */
    /* Row 3: [callerid] [condition] */
    /* Row 4: [actions] - click to expand */
    .filters-table.data-table {
        min-width: 0;
    }
    .filters-table.data-table thead {
        display: none;
    }
    .filters-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .filters-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .filters-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .filters-table.data-table tbody tr td {
        background: transparent;
    }
    .filters-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .filters-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1: [pattern] [policy] */
    .filters-table.data-table td[data-responsive="pattern"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .filters-table.data-table td[data-responsive="policy"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
    }
    /* Row 2: [source] [action] */
    .filters-table.data-table td[data-responsive="source"] {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .filters-table.data-table td[data-responsive="action"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    /* Row 3: [callerid] [condition] */
    .filters-table.data-table td[data-responsive="callerid"] {
        grid-column: 1;
        grid-row: 3;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .filters-table.data-table td[data-responsive="condition"] {
        grid-column: 2;
        grid-row: 3;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    /* Row 4: [actions] - click to expand */
    .filters-table.data-table td[data-responsive="actions"] {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        display: none;
    }
    .filters-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }

    /* Plans table - mobile card layout */
    /* Row 1: [service] [status] */
    /* Row 2: [billing] */
    /* Row 3 (expanded): [actions] [cost] */
    .plans-table.data-table {
        min-width: 0;
    }
    .plans-table.data-table thead {
        display: none;
    }
    .plans-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .plans-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .plans-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .plans-table.data-table tbody tr td {
        background: transparent;
    }
    .plans-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide columns without responsive marker */
    .plans-table.data-table td:not([data-responsive]) {
        display: none;
    }
    /* Row 1-2: [service spans both] [status + billing stacked on right] */
    .plans-table.data-table td[data-responsive="service"] {
        grid-column: 1;
        grid-row: 1 / 3;
        font-weight: 600;
    }
    .plans-table.data-table td[data-responsive="status"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
    }
    .plans-table.data-table td[data-responsive="billing"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
    }
    /* Row 3 (expanded): [actions] [cost] */
    .plans-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        display: none;
    }
    .plans-table.data-table td[data-responsive="cost"] {
        grid-column: 2;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        display: none;
        text-align: right !important;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
    }
    .plans-table.data-table tbody tr.expanded td[data-responsive="actions"],
    .plans-table.data-table tbody tr.expanded td[data-responsive="cost"] {
        display: flex;
        align-items: center;
    }

    /* Support table - mobile card layout with click-to-expand actions */
    .support-table.data-table {
        min-width: 0;
    }
    .support-table.data-table {
        border: none;
    }
    .support-table.data-table thead {
        display: block;
    }
    .support-table.data-table thead tr {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .support-table.data-table tbody {
        border: none;
    }
    .support-table.data-table tbody tr:first-child {
        border-top: none;
    }
    .support-table.data-table thead th {
        padding: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: none !important;
    }
    .support-table.data-table thead th[data-responsive="ticket"] {
        text-align: left;
    }
    .support-table.data-table thead th[data-responsive="date-header"] {
        text-align: right;
    }
    /* Sortable header adjustments for mobile */
    .support-table.data-table thead th.sortable-header {
        padding-right: 1rem;
    }
    .support-table.data-table thead th.sortable-header::after {
        right: 0;
        font-size: 0.65rem;
    }
    .support-table.data-table thead th.desktop-only {
        display: none;
    }
    .support-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.2rem 0.75rem;
        padding: 0.6rem 0.75rem;
        position: relative;
    }
    .support-table.data-table tbody tr + tr::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
    }
    .support-table.data-table tbody tr:hover {
        background: var(--bg-hover);
    }
    .support-table.data-table tbody tr td {
        background: transparent;
    }
    .support-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Row 1: [subject] [date] */
    /* Row 2: [author] [status] */
    /* Row 3: [actions] - hidden by default */
    .support-table.data-table td[data-responsive="assignee"] {
        display: none;
    }
    .support-table.data-table td[data-responsive="party"] {
        grid-column: 1;
        grid-row: 2;
        display: block !important;
        font-weight: 400 !important;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    .support-table.data-table td[data-responsive="party"] a {
        color: var(--text-muted);
    }
    .support-table.data-table td[data-responsive="date"],
    .support-table.data-table td[data-responsive="status"] {
        grid-column: 2;
        min-width: 9rem;
        text-align: right !important;
    }
    .support-table.data-table td[data-responsive="date"] {
        grid-row: 1;
        display: block !important;
        color: var(--text-muted);
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .support-table.data-table td[data-responsive="subject"] {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .support-table.data-table td[data-responsive="subject"] .ticket-pin {
        display: inline-flex;
        color: var(--text-muted);
    }
    .support-table.data-table td[data-responsive="subject"] .ticket-subject {
        color: var(--text-normal);
        font-size: 0.9rem;
        font-weight: 400;
    }
    .support-table.data-table tr.ticket-unread td[data-responsive="subject"] .ticket-subject {
        font-weight: 600;
    }
    .support-table.data-table td[data-responsive="status"] {
        grid-row: 2;
        display: block !important;
    }
    .support-table.data-table td[data-responsive="status"] .ticket-status {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
    }
    .support-table.data-table td[data-responsive="actions"] {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
        text-align: left !important;
    }
    .support-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }
    .support-table.data-table td[data-responsive="actions"] .inline-form,
    .support-table.data-table td[data-responsive="actions"] > a {
        display: inline-block;
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
    }

    /* Dashboard tables - mobile card layout */
    .dashboard-grid .data-table {
        min-width: 0;
    }
    .dashboard-grid .data-table thead {
        display: none;
    }
    .dashboard-grid .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg-card);
    }
    .dashboard-grid .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .dashboard-grid .data-table tbody tr td {
        background: transparent;
    }
    .dashboard-grid .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .dashboard-grid .data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }

    /* Services table - mobile */
    /* Row 1: [type+name] [badges + cost] */
    /* Row 2: [expiration] [actions] */
    .dashboard-grid__left .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .dashboard-grid__left .data-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        white-space: nowrap;
    }
    .dashboard-grid__left .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        display: none;
    }
    .dashboard-grid__left .data-table td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .dashboard-grid__left .data-table td:nth-child(4)::before {
        content: "Expires:";
        color: var(--text-faint);
    }
    .dashboard-grid__left .data-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
    }

    /* Messages table - mobile */
    /* Row 1: [sender] [date] */
    /* Row 2: [subject] [badge] */
    .dashboard-grid__right .data-table td:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .dashboard-grid__right .data-table .cell-with-badge a {
        white-space: normal;
    }
    .dashboard-grid__right .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    .dashboard-grid__right .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.75rem;
        color: var(--text-faint);
    }
}

/* Registration breakpoint (max-width: 900px) */
@media (max-width: 900px) {
    .register-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .register-info {
        order: -1;
    }

    /* Rates table - responsive at 900px */
    .table-responsive:has(.rates-table) {
        overflow-x: clip;
        /* padding-right: 1rem; */
    }
    .rates-table.data-table,
    .category-tabs__panel .data-table,
    .data-rates-table {
        min-width: 0 !important;
        width: 100% !important;
    }
    .rates-table.data-table thead,
    .category-tabs__panel .data-rates-table thead {
        display: block;
        overflow: visible;
    }
    .rates-table.data-table thead tr,
    .category-tabs__panel .data-rates-table thead tr {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 1.5rem 0.5rem 1rem;
    }
    .rates-table.data-table thead th,
    .category-tabs__panel .data-rates-table thead th {
        padding: 0;
        background: transparent !important;
        border: none !important;
    }
    .rates-table.data-table thead th:nth-child(1),
    .category-tabs__panel .data-rates-table thead th:nth-child(1) {
        flex: 1;
    }
    .rates-table.data-table thead th:nth-child(2),
    .category-tabs__panel .data-rates-table thead th:nth-child(2) {
        display: none;
    }
    .rates-table.data-table thead th:nth-child(3),
    .category-tabs__panel .data-rates-table thead th:nth-child(3) {
        flex-shrink: 0;
        text-align: right;
    }
    /* Hide sort indicator on mobile for rates table */
    .rates-table.data-table thead th.sortable-header::after {
        display: none;
    }
    .rates-table.data-table tbody tr:not(.priority-row),
    .category-tabs__panel .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .rates-table.data-table tbody tr.priority-row {
        display: none;
    }
    body:has(#show-all-priorities:checked) .rates-table.data-table tbody tr.priority-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .rates-table.data-table tbody tr:last-child,
    .category-tabs__panel .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .rates-table.data-table tbody tr:hover,
    .category-tabs__panel .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .rates-table.data-table tbody tr td,
    .category-tabs__panel .data-table tbody tr td {
        background: transparent;
    }
    .rates-table.data-table td,
    .category-tabs__panel .data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    .rates-table.data-table td:nth-child(1),
    .category-tabs__panel .data-table td:nth-child(1) {
        font-weight: 500;
        color: var(--text-normal);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .rates-table.data-table td:nth-child(2),
    .category-tabs__panel .data-table td:nth-child(2) {
        display: none;
    }
    .rates-table.data-table td:nth-child(3),
    .category-tabs__panel .data-table td:nth-child(3) {
        text-align: right !important;
        white-space: nowrap;
        padding-left: 0.75rem;
    }
    .rates-table .priority-row {
        padding-left: 1.5rem;
        background: var(--bg-elevated);
    }
    .rates-table .priority-row td:nth-child(1),
    .rates-table .priority-row td:nth-child(2) {
        display: none;
    }
    .rates-table .priority-row td:nth-child(3) {
        font-size: 0.85rem;
        margin-left: auto;
    }
    .rates-table.data-table .rate-prefix,
    .category-tabs__panel .data-table .rate-prefix {
        display: none;
    }
    .category-tabs__panel .table-responsive {
        overflow-x: hidden;
    }
    .category-tabs__panel .data-table thead {
        display: none;
    }
    .rates-table .rate-mb, .rates-table .rate-header-mb, .rates-table .rate-header-gb, .rates-table .rate-gb {
        display: inline;
        margin-left: -100px;
    }
}

/* Services mobile/desktop views - hidden by default */
.services-mobile-cards {
    display: none;
}

/* Services table (max-width: 1200px) */
@media (max-width: 1200px) {
    /* Show mobile cards, hide desktop tables */
    .services-mobile-cards {
        display: block;
    }
    .services-desktop-tables {
        display: none;
    }

    .services-table.data-table {
        min-width: 0;
    }
    .services-table.data-table thead {
        display: none;
    }
    .services-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .services-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    .services-table.data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .services-table.data-table tbody tr td {
        background: transparent;
    }
    .services-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }

    /* Services tables - mobile grid layout */
    /* Row 1: [type+name] [cost] */
    /* Row 2: [expiration] [empty] */
    /* Row 3: [actions - full width] */
    .services-table.data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .services-table.data-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        white-space: nowrap;
    }
    .services-table.data-table td:nth-child(3):not(.desktop-only) {
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    /* SIM expiration cell - flexbox for network alignment */
    .services-table.data-table td.sim-expiration-cell {
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* Show "Expires:" prefix for expiration column on mobile */
    .services-table.data-table td:nth-child(3):not(.desktop-only)::before {
        content: attr(data-label) ": ";
        color: var(--text-faint);
    }
    .services-table.data-table .sim-expiration-left::before {
        content: "Expiration: ";
        color: var(--text-faint);
    }
    /* Hide middle columns but NOT last-child (actions) */
    .services-table.data-table td:nth-child(4):not(:last-child):not(.sim-expiration-cell),
    .services-table.data-table td:nth-child(5):not(:last-child),
    .services-table.data-table td:nth-child(6):not(:last-child),
    .services-table.data-table td:nth-child(7):not(:last-child) {
        display: none;
    }
    /* Actions row - full width at bottom */
    .services-table.data-table td:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: left !important;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
    }
    .services-table.data-table .table-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
    .services-table.data-table .table-action {
        font-size: 0.85rem;
    }
    /* Mobile/desktop utilities */
    .mobile-only {
        display: inline;
    }
    .desktop-only {
        display: none;
    }
    .service-type-label.mobile-only {
        display: inline-block;
    }

    /* History table - mobile card layout */
    .history-table.data-table {
        min-width: 0;
        border: none;
    }
    .history-table.data-table thead {
        display: none;
    }
    .history-table.data-table tbody {
        border: none;
    }
    .history-table.data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.6rem 0.75rem;
        position: relative;
    }
    .history-table.data-table tbody tr + tr::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
    }
    .history-table.data-table tbody tr:hover {
        background: var(--bg-hover);
    }
    .history-table.data-table tbody tr td {
        background: transparent;
    }
    .history-table.data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }
    /* Hide route and status columns on mobile */
    .history-table.data-table td[data-responsive="route"],
    .history-table.data-table td[data-responsive="status"] {
        display: none;
    }
    /* Row 1: [destination] [date] */
    .history-table.data-table td[data-responsive="destination"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        color: var(--text-bright);
    }
    .history-table.data-table td[data-responsive="date"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.8rem;
        font-weight: 600;
    }
    /* Row 2: [caller] [time] */
    .history-table.data-table td[data-responsive="caller"] {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-normal);
        font-size: 0.85rem;
    }
    .history-table.data-table td[data-responsive="time"] {
        grid-column: 2;
        grid-row: 2;
        text-align: right !important;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    /* Row 3: [direction + status badge] [cost] */
    .history-table.data-table td[data-responsive="direction"] {
        grid-column: 1;
        grid-row: 3;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .history-table.data-table td[data-responsive="direction"] .history-direction-text {
        display: inline-flex;
        padding: 0.1rem 0.35rem;
        font-size: 0.7rem;
        font-weight: 500;
        border-radius: var(--radius-sm);
        background: var(--accent-muted-bg, rgba(128, 128, 128, 0.15));
        color: var(--text-muted);
    }
    .history-table.data-table td[data-responsive="direction"] .history-status-badge {
        display: inline-flex;
        font-size: 0.8rem;
        padding: 0.1rem 0.35rem;
    }
    .history-table.data-table td[data-responsive="cost"] {
        grid-column: 2;
        grid-row: 3;
        text-align: right !important;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    /* Row 4: [actions] [route] - hidden by default, shown when expanded */
    .history-table.data-table td[data-responsive="actions"] {
        grid-column: 1;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
    }
    .history-table.data-table tbody tr.expanded td[data-responsive="actions"] {
        display: block;
    }
    .history-table.data-table tbody tr.expanded td[data-responsive="route"] {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        grid-column: 2;
        grid-row: 4;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
        background: var(--accent-muted-bg, rgba(128, 128, 128, 0.15));
        border-radius: var(--radius-sm);
        padding: 0.35rem 0.5rem;
        height: fit-content;
    }
    .history-table.data-table td[data-responsive="actions"] .inline-form,
    .history-table.data-table td[data-responsive="actions"] > a {
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
    }

    /* Charts - single column */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Keeluala stats - 2 columns */
    .keeluala-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    /* Container */
    .container-wide {
        width: 98%;
    }
    .container-content { padding: 0 1.5rem; }

    /* Dashboard cards - badge+title on left, date+cost stacked on right */
    .dashboard-card--clickable,
    .dashboard-card--link {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0 0.5rem;
        align-items: center;
        padding: 0.6rem 0.75rem;
        cursor: pointer;
    }
    .dashboard-card--link {
        text-decoration: none;
        color: inherit;
    }
    .dashboard-card__type[data-responsive="type"] {
        display: inline-block;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }
    .dashboard-card__content[data-responsive="content"] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin-left: 0;
        gap: 0.5rem;
    }
    /* Match service badges to notification __type badges */
    .dashboard-card__content > .badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
    .dashboard-card__title[data-responsive="title"] {
        font-size: 0.85rem;
    }
    .dashboard-card__subtitle {
        font-size: 0.7rem;
    }
    .dashboard-card__meta {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.125rem;
    }
    .dashboard-card__meta .separator {
        display: none;
    }
    .dashboard-card__meta [data-responsive="date"] {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    .dashboard-card__meta [data-responsive="cost"] {
        font-weight: 600;
        font-size: 0.7rem;
    }
    .dashboard-card__actions[data-responsive="actions"] {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
        justify-content: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
    }
    .dashboard-card__toggle:checked ~ .dashboard-card__actions[data-responsive="actions"] {
        display: flex;
    }
    /* Auto-renew badge pushed to right on mobile */
    .dashboard-card__actions[data-responsive="actions"] > .badge {
        order: 99;
        margin-left: auto;
    }
    /* Click area spans badge+title row */
    .dashboard-card__click-area {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    /* Override expand show rules to use grid instead of flex on mobile */
    .services-expand-toggle:checked ~ .services-expand-wrapper .dashboard-card-list--expandable .dashboard-card--clickable:nth-child(n+9) {
        display: grid;
    }
    .services-expand-toggle:checked ~ .services-expand-wrapper .dashboard-card-list--expandable .dashboard-card--link:nth-child(n+9) {
        display: grid;
    }

    /* Data tables */
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.5rem;
    }

    /* Modal */
    .modal__content {
        max-height: 95vh;
        margin: 0.5rem;
    }
    .modal__header {
        padding: 1rem;
    }
    .modal__title {
        font-size: 1.1rem;
    }
    .modal__body {
        padding: 1rem;
    }
    .modal__body .info-box {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    .modal__body .info-box p {
        margin-bottom: 0.5rem;
    }
    .modal__subtitle {
        font-size: 0.95rem;
        margin-top: 1rem;
    }
    .modal__description {
        font-size: 0.85rem;
    }

    /* VPN keys table - card layout */
    #vpn-keys-table.data-table {
        min-width: 0;
    }
    #vpn-keys-table.data-table thead {
        display: none;
    }
    #vpn-keys-table.data-table tbody tr {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    #vpn-keys-table.data-table tbody tr:last-child {
        border-bottom: none;
    }
    #vpn-keys-table.data-table td {
        padding: 0;
        border: none;
        background: transparent;
    }
    #vpn-keys-table.data-table .vpn-connection {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-bright);
    }
    #vpn-keys-table.data-table .vpn-key-input {
        width: 100%;
        font-size: 0.75rem;
    }
    #vpn-keys-table.data-table td:last-child {
        align-self: flex-start;
    }

    /* VPN clients */
    .vpn-clients {
        grid-template-columns: 1fr;
    }
    .vpn-client {
        padding: 0.75rem;
    }
    .vpn-client h4 {
        font-size: 0.8rem;
    }
    .vpn-client p {
        font-size: 0.85rem;
    }
    .vpn-bundle-section {
        margin-top: 1rem;
    }
    .vpn-bundle {
        font-size: 0.7rem;
        min-height: 5rem;
    }
    .esim-smdp-row {
        flex-direction: column;
    }

    /* Landing hero */
    .landing-hero {
        padding: 4rem 0 3rem;
        min-height: auto;
    }
    .landing-section { padding: 3rem 0; }
    .landing-hero__buttons {
        flex-direction: column;
        align-items: center;
    }
    .landing-hero__buttons .btn {
        width: 100%;
        max-width: 17.5rem;
    }

    /* Footer */
    .footer__main {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Login */
    .login-section { padding: 3.125rem 0; }
    .login-actions {
        flex-direction: column;
        gap: 1.5rem;
    }
    .login-actions .btn { width: 100%; }
    .login-links {
        flex-direction: row;
        justify-content: space-between;
        gap: 5rem;
    }

    /* Registration */
    .register-section { padding: 3.125rem 0; }

    /* Page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .page-header__meta {
        width: 100%;
        justify-content: flex-start;
    }
    .page-toolbar {
        gap: 0.75rem;
    }
    .page-header h1 {
        font-size: 1.4rem;
    }
    /* Charts */
    .chart-container {
        min-height: 250px;
    }

    /* Keeluala admin stats - single column */
    .keeluala-stats {
        grid-template-columns: 1fr;
    }
    .keeluala-summary {
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 1rem;
    }
    .keeluala-summary__value {
        font-size: 1.25rem;
    }
    .keeluala-summary__item--highlight .keeluala-summary__value,
    .keeluala-summary__item--forecast .keeluala-summary__value {
        font-size: 1.5rem;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .bar-chart {
        min-height: 10rem;
    }
    .bar-chart__bar {
        width: 80%;
    }
    .destination-stats {
        gap: 0.5rem;
    }
    .destination-amount {
        min-width: 4.375rem;
    }

    /* Slider */
    .slider__slide {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .slider__content {
        text-align: left;
    }
    .slider__title {
        text-align: center;
    }
    .slider__image {
        order: 1;
    }
    .slider__image img {
        max-width: 15.625rem;
    }
    .slider__arrows-wrap {
        left: 0;
        right: 0;
    }
    .slider {
        padding-bottom: 6rem;
    }

    /* Info page */
    .info-page__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .info-page__image { order: -1; }
    .info-page__image img,
    .info-page__image svg { max-width: 18.75rem; }

    /* Cards grid */
    .cards-grid__row {
        grid-template-columns: 1fr;
    }
    /* Payment methods - 2 columns on mobile */
    .payment-methods--grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Amount row - 2 columns on mobile */
    .amount-row__options {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Transfer form - stack on mobile */
    .transfer-form__grid {
        grid-template-columns: 1fr;
    }
    .transfer-form__footer {
        grid-template-columns: 1fr;
    }

    /* Tabs - compact inline on mobile */
    .tabs .tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    /* Action tab - inline with other tabs */
    .tabs .tab--action {
        margin-left: auto;
    }

    /* Rates page */

    /* Category tabs - wrap properly */
    .category-tabs {
        gap: 0.25rem;
        flex-wrap: wrap;
    }
    .category-tabs__label {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    /* Toggle - full width on its own row */
    .category-tabs__toggle {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* Hide rate type prefix on mobile */
    .rates-table.data-table .rate-prefix,
    .category-tabs__panel .data-table .rate-prefix {
        display: none;
    }

    /* Rates table - mobile card layout */
    .table-responsive:has(.rates-table),
    .category-tabs__panel .table-responsive {
        overflow-x: clip;
        /* padding-right: 1rem; */
    }
    .rates-table.data-table,
    .category-tabs__panel .data-table,
    .data-rates-table {
        min-width: 0 !important;
        width: 100% !important;
    }
    .category-tabs__panel .data-table thead {
        display: none;
    }
    /* Show header for rates tables on mobile */
    .rates-table.data-table thead,
    .category-tabs__panel .data-rates-table thead {
        display: block;
        overflow: visible;
    }
    .rates-table.data-table thead tr,
    .category-tabs__panel .data-rates-table thead tr {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 1.5rem 0.5rem 1rem;
    }
    .rates-table.data-table thead th,
    .category-tabs__panel .data-rates-table thead th {
        padding: 0;
        background: transparent !important;
        border: none !important;
    }
    .rates-table.data-table thead th:nth-child(1),
    .category-tabs__panel .data-rates-table thead th:nth-child(1) {
        flex: 1;
    }
    .rates-table.data-table thead th:nth-child(2),
    .category-tabs__panel .data-rates-table thead th:nth-child(2) {
        display: none;
    }
    .rates-table.data-table thead th:nth-child(3),
    .category-tabs__panel .data-rates-table thead th:nth-child(3) {
        flex-shrink: 0;
        text-align: right;
    }
    /* Hide sort indicator on mobile for rates table */
    .rates-table.data-table thead th.sortable-header::after {
        display: none;
    }
    .rates-table.data-table tbody tr:not(.priority-row),
    .category-tabs__panel .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    /* Priority rows stay hidden by default on mobile too */
    .rates-table.data-table tbody tr.priority-row {
        display: none;
    }
    /* Show priority rows when checkbox is checked */
    body:has(#show-all-priorities:checked) .rates-table.data-table tbody tr.priority-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .rates-table.data-table tbody tr:last-child,
    .category-tabs__panel .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .rates-table.data-table tbody tr:hover,
    .category-tabs__panel .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .rates-table.data-table tbody tr td,
    .category-tabs__panel .data-table tbody tr td {
        background: transparent;
    }
    .rates-table.data-table td,
    .category-tabs__panel .data-table td {
        padding: 0;
        border: none;
        text-align: left !important;
    }

    /* Only show destination and rate, hide route */
    .rates-table.data-table td:nth-child(1),
    .category-tabs__panel .data-table td:nth-child(1) {
        font-weight: 500;
        color: var(--text-normal);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .rates-table.data-table td:nth-child(2),
    .category-tabs__panel .data-table td:nth-child(2) {
        display: none;
    }
    .rates-table.data-table td:nth-child(3),
    .category-tabs__panel .data-table td:nth-child(3) {
        text-align: right !important;
        white-space: nowrap;
        padding-left: 0.75rem;
    }

    /* Priority rows - simplified for mobile */
    .rates-table .priority-row {
        padding-left: 1.5rem;
        background: var(--bg-elevated);
    }
    .rates-table .priority-row td:nth-child(1),
    .rates-table .priority-row td:nth-child(2) {
        display: none;
    }
    .rates-table .priority-row td:nth-child(3) {
        font-size: 0.85rem;
        margin-left: auto;
    }
}

/* Admin Dashboard (max-width: 1200px) */
@media (max-width: 1200px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .keeluala-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Admin Dashboard (max-width: 768px) */
@media (max-width: 768px) {
    .chart-container {
        min-height: 250px;
    }

    .keeluala-stats {
        grid-template-columns: 1fr;
    }

    .keeluala-summary {
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 1rem;
    }

    .keeluala-summary__value {
        font-size: 1.25rem;
    }

    .keeluala-summary__item--highlight .keeluala-summary__value {
        font-size: 1.5rem;
    }
}

/* Mobile footer (max-width: 640px) */
@media (max-width: 640px) {
    .footer__main { flex-direction: column; }
    .footer__left { flex-direction: column; gap: 1.5rem; }
    .footer__bottom { justify-content: center; }
}

/* Support form (max-width: 600px) */
@media (max-width: 600px) {
    .ticket-reply .form-row { grid-template-columns: 1fr; }

    /* Chat view responsive */
    .chat-container {
        min-height: calc(100vh - var(--nav-height) - 10rem);
        padding-bottom: 6rem; /* More space for fixed input on mobile */
    }
    .chat-message {
        max-width: 90%;
    }
    .chat-bubble__meta {
        flex-wrap: wrap;
    }
    .chat-bubble__actions {
        opacity: 1; /* Always visible on mobile */
    }
    .chat-input__row {
        gap: 0.5rem;
    }
    .chat-input__send {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        max-width: 2.25rem !important;
        min-height: 2.25rem !important;
        max-height: 2.25rem !important;
        flex: 0 0 2.25rem !important;
    }
}

/* Profile page responsive (max-width: 1200px) */
@media (max-width: 1200px) {
    /* User info table - convert to grid layout (first profile-grid--full only) */
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table {
        min-width: 0;
    }
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table thead {
        display: none;
    }
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table tbody tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem 1rem;
        padding: 1rem;
    }
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table td {
        padding: 0;
        border: none;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }
    /* Actions cell - full width */
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table td:last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-subtle);
    }
    .profile-grid--full:first-of-type > .section-toggle > .table-responsive > .data-table td:last-child::before {
        display: none;
    }

    /* Device tabs nav */
    .device-tabs__tabs {
        flex-wrap: wrap;
    }
    .device-tabs__tabs .separator {
        display: inline;
        color: var(--text-faint);
    }

    /* Disable badge-action hover effect on mobile */
    .badge-action:hover {
        background: var(--bg-elevated);
        color: var(--text-muted);
        border-color: var(--border-faint);
    }
    .badge-action--info:hover {
        background: var(--accent-info-bg);
        color: var(--accent-info);
        border-color: var(--accent-info-border);
    }

    /* Device tables - card layout */
    .device-tabs__panel .data-table {
        min-width: 0;
    }
    .device-tabs__panel .data-table thead {
        display: none;
    }
    .device-tabs__panel .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .device-tabs__panel .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .device-tabs__panel .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }
    .device-tabs__panel .data-table td {
        padding: 0;
        border: none;
        background: transparent;
    }

    /* SIP table layout */
    /* Row 1: [login] [encryption badge] */
    /* Row 2: [server] [plan badges] */
    /* Row 3: [actions] */
    .device-tabs__panel--sip .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .device-tabs__panel--sip .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .device-tabs__panel--sip .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .device-tabs__panel--sip .data-table td:nth-child(4),
    .device-tabs__panel--sip .data-table td:nth-child(5) {
        display: none;
    }
    .device-tabs__panel--sip .data-table td:nth-child(6) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        font-size: 0.85rem;
    }
    .device-tabs__panel--sip .data-table td:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
    }

    /* DID table layout */
    /* Row 1: [number] [cost] */
    /* Row 2: [expiration] [status + auto_renew] */
    /* Row 3: [actions] */
    .device-tabs__panel--did .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .device-tabs__panel--did .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .device-tabs__panel--did .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-weight: 600;
    }
    .device-tabs__panel--did .data-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
    .device-tabs__panel--did .data-table td:nth-child(5) {
        display: none;
    }
    .device-tabs__panel--did .data-table td:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        text-align: left;
    }

    /* SIM table layout */
    /* Row 1: [imsi] [network] */
    /* Row 2: [msisdn] [status] */
    /* Row 3: [actions] */
    .device-tabs__panel--sim .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .device-tabs__panel--sim .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .device-tabs__panel--sim .data-table td:nth-child(3),
    .device-tabs__panel--sim .data-table td:nth-child(4),
    .device-tabs__panel--sim .data-table td:nth-child(5) {
        display: none;
    }
    .device-tabs__panel--sim .data-table td:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-size: 0.85rem;
    }
    .device-tabs__panel--sim .data-table td:nth-child(7) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
    .device-tabs__panel--sim .data-table td:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        text-align: left;
    }

    /* VPN table layout */
    /* Row 1: [service] [status] */
    /* Row 2: [expiration] [auto_renew] */
    /* Row 3: [actions] */
    .device-tabs__panel--vpn .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .device-tabs__panel--vpn .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .device-tabs__panel--vpn .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .device-tabs__panel--vpn .data-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
    .device-tabs__panel--vpn .data-table td:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
        text-align: left;
    }

    /* Invoices table - card layout */
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table {
        min-width: 0;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table thead {
        display: none;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td {
        padding: 0;
        border: none;
        background: transparent;
    }
    /* Invoice layout: [id] [amount] / [type] [date] / [status full width] */
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.85rem;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-weight: 600;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        color: var(--text-muted);
        font-size: 0.8rem;
    }
    .profile-grid:not(.profile-grid--full) > .section-toggle .data-table td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.25rem;
    }
}

/* Profile event log responsive (max-width: 1200px) */
@media (max-width: 1200px) {
    /* Event log table - card layout (similar to history) */
    .profile-grid--full:last-of-type > .section-toggle .data-table {
        min-width: 0;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table thead {
        display: none;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.15rem 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table tbody tr:last-child {
        border-bottom: none;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td {
        padding: 0;
        border: none;
        background: transparent;
    }
    /* Event log: [caller] [time] / [destination] [cost] / [date] [status] */
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-weight: 600;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(3),
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(6),
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(9) {
        display: none;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(7) {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
    }
    .profile-grid--full:last-of-type > .section-toggle .data-table td:nth-child(8) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        font-weight: 600;
    }
}

/* Plan cards responsive — 2x2 centered, subgrid with min-content rows */
@media (max-width: 1300px) {
    .cards-page .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.5rem;
        row-gap: 0;
        max-width: 750px;
        margin: 0 auto;
        grid-auto-rows: min-content;
    }
    .plan-card {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 600px) {
    .cards-page .cards-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }
    .plan-card {
        padding: 1.5rem 1.25rem;
    }
}

/* Small screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Pagination */
    .pagination { gap: 0.125rem; padding: 0.75rem; }
    .pagination__link { min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.85rem; }
    .pagination__prev,
    .pagination__next { padding: 0 0.5rem; }

    /* Settings */
    .settings-input {
        width: 100%;
    }
    .settings-select {
        width: 100%;
    }
}