/* ==============================================
   Responsive Design System
   Mobile-first, consistent, and theme-aware
   ============================================== */

/* ---- Global Box Sizing ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---- Smooth transitions for theme switching ---- */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.no-transition,
html.no-transition * {
    transition: none !important;
}

/* ---- Auto theme: respect OS preference ---- */
html[data-theme="auto"] {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] {
        --bg: #f8fafc;
        --surface: #ffffff;
        --surface-2: #ffffff;
        --text: #0f172a;
        --text-2: #334155;
        --muted: #64748b;
        --border: rgba(15,23,42,0.10);
        --border-2: rgba(15,23,42,0.14);
        --shadow: 0 10px 30px rgba(2,6,23,0.10);
        --btn-bg: rgba(2,6,23,0.04);
        --btn-bg-hover: rgba(2,6,23,0.07);
        --primary: #2563eb;
        --primary-light: rgba(37,99,235,0.07);
        --bg-2: #f1f5f9;
        --danger: #dc2626;
        --success: #059669;
        --success-hover: #047857;
        --warning: #d97706;
        --notif-icon-invoice: #2563eb;
        --notif-icon-proposal: #7c3aed;
        --notif-icon-contract: #059669;
        --notif-icon-project: #d97706;
        --notif-icon-client: #db2777;
        --notif-icon-lead: #dc2626;
        --notif-icon-milestone: #7c3aed;
        --notif-icon-default: #475569;
        --notif-icon-bg-opacity: 0.12;
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --bg: #0f1724;
        --surface: #111827;
        --surface-2: #0b1320;
        --text: #e5e7eb;
        --text-2: #cbd5e1;
        --muted: #94a3b8;
        --border: rgba(255,255,255,0.06);
        --border-2: rgba(255,255,255,0.08);
        --shadow: 0 10px 30px rgba(0,0,0,0.35);
        --btn-bg: rgba(255,255,255,0.04);
        --btn-bg-hover: rgba(255,255,255,0.06);
        --primary: #2563eb;
        --primary-light: rgba(37,99,235,0.07);
        --bg-2: #1e293b;
        --danger: #ef4444;
        --success: #34d399;
        --success-hover: #2cc08e;
        --warning: #f59e0b;
        --notif-icon-invoice: #3b82f6;
        --notif-icon-proposal: #8b5cf6;
        --notif-icon-contract: #10b981;
        --notif-icon-project: #f59e0b;
        --notif-icon-client: #ec4899;
        --notif-icon-lead: #ef4444;
        --notif-icon-milestone: #8b5cf6;
        --notif-icon-default: #64748b;
        --notif-icon-bg-opacity: 0.15;
    }
}

/* ---- Sticky Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- Theme Switcher ---- */
.theme-switcher-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.theme-switcher-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.15rem;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    min-width: 40px;
    min-height: 40px;
}

.theme-switcher-btn:hover {
    background: var(--btn-bg-hover);
    color: var(--text);
}

.theme-switcher-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 1001;
    min-width: 140px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.theme-switcher-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.theme-option:hover {
    background: var(--btn-bg-hover);
    color: var(--text);
}

.theme-option.active {
    color: var(--text);
    font-weight: 600;
    background: var(--btn-bg);
}

.theme-option i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* ---- Touch targets: minimum 44x44px ---- */
@media (pointer: coarse) {
    .btn, .nav-icon-button, .notification-bell,
    .theme-switcher-btn, .admin-nav-link, a.nav-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==============================================
   TABLET breakpoint: 769px - 1024px
   ============================================== */
@media (max-width: 1024px) {
    .content {
        padding: 12px;
    }

    .home-landing-hero {
        padding: 32px 24px;
    }

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

    .dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

    .icon-bar {
        flex-wrap: wrap;
        padding: 24px;
        gap: 12px;
    }

    .icon-bar__item {
        flex: 1 1 calc(33% - 12px);
        min-width: auto;
    }

    .page-header {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==============================================
   MOBILE breakpoint: max-width 768px
   ============================================== */
@media (max-width: 768px) {

    /* ---- Layout ---- */
    .content {
        padding: 10px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---- Header & Navigation ---- */
    .site-header {
        padding: 0 16px !important;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: flex !important;
        order: -1;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .brand {
        order: 0;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .site-header .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        box-sizing: border-box;
        display: none;
        flex-direction: column;
        gap: 8px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 99;
        order: 10;
    }

    .site-header.nav-open .site-nav {
        display: flex;
    }

    .site-nav .nav-group {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    .site-nav .nav-group-primary {
        margin: 0;
    }

    /* All nav links shown in mobile hamburger menu */

    /* ---- Inline search on mobile ---- */
    .nav-search-inline {
        width: 100%;
        padding: 10px 12px;
    }

    .nav-search-kbd {
        display: none;
    }

    .site-nav .nav-group-secondary {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        margin-top: 8px;
        padding-top: 12px;
    }

    .site-header .site-nav a {
        width: 100%;
        padding: 10px 12px;
        display: block;
        border-radius: 8px;
        font-size: 0.95rem;
    }

    .site-header .site-nav a:hover {
        background: var(--btn-bg-hover);
    }

    .site-header .site-nav .nav-icon-button {
        width: 100%;
        height: auto;
        padding: 10px 12px;
        font-size: 1rem;
        justify-content: flex-start;
        gap: 10px;
    }

    .site-header .site-nav .nav-button-text {
        display: inline-block;
    }

    /* ---- Notification bell mobile ---- */
    .site-header .site-nav .notification-bell {
        width: 100%;
        padding: 10px 12px !important;
        justify-content: flex-start !important;
        gap: 10px;
    }

    .site-header .site-nav .notification-bell .nav-button-text {
        display: inline-block;
        font-size: 1rem;
        font-weight: normal;
    }

    .notification-dropdown {
        width: calc(100vw - 32px);
        right: -16px;
    }

    /* ---- Nav dropdown on mobile ---- */
    .nav-dropdown {
        position: static;
        margin-top: 0;
        margin-left: 16px;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .nav-dropdown a {
        padding: 10px 0;
    }

    /* ---- Theme switcher on mobile ---- */
    .theme-switcher-wrapper {
        width: 100%;
    }

    .theme-switcher-btn {
        width: 100%;
        padding: 10px 12px;
        justify-content: flex-start;
        gap: 10px;
        border-radius: 8px;
        font-size: 1rem;
    }

    .theme-switcher-dropdown {
        position: static;
        width: 100%;
        margin-top: 4px;
        box-shadow: none;
        border: 1px solid var(--border);
        transform: none;
    }

    .theme-switcher-dropdown.show {
        transform: none;
    }

    /* ---- Typography ---- */
    h1 {
        font-size: 1.5rem !important;
        word-break: break-word;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3 {
        font-size: 1.05rem !important;
    }

    /* ---- Cards ---- */
    .card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    section.card {
        margin-left: 0;
        margin-right: 0;
    }

    /* ---- Tables ---- */
    .table-container,
    div[style*="overflow:auto"],
    .page-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100vw;
    }

    table {
        font-size: 0.8rem;
        display: table;
        width: 100%;
        table-layout: auto;
    }

    /* Override inline fixed widths on th elements */
    .page-table th[style*="width"],
    .page-table td[style*="width"] {
        width: auto !important;
    }

    table th,
    table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    .page-table th,
    .page-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .page-table th {
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }

    table td:not(:first-child):not(:last-child) {
        white-space: normal;
        word-break: break-word;
    }

    table td:first-child,
    table td:last-child {
        white-space: nowrap;
    }

    /* Let tables compress naturally — no forced min-width */
    .page-table {
        min-width: 0;
        width: 100%;
    }

    /* Hide bulk-select checkbox column on mobile to save space */
    .page-table th:first-child:has(input[type="checkbox"]),
    .page-table td:first-child:has(input[type="checkbox"]) {
        display: none;
    }

    /* Compact item meta */
    .item-meta {
        font-size: 0.7rem;
    }

    .item-secondary {
        font-size: 0.78rem;
    }

    .status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* Compact action buttons in tables */
    .item-actions .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        min-height: 32px;
    }

    /* Override inline min-width on tables at 768px */
    table[style*="min-width:720px"],
    table[style*="min-width:760px"],
    table[style*="min-width:700px"],
    table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Override inline width on columns */
    th[style*="width"],
    td[style*="width"] {
        width: auto !important;
    }

    /* Inline overflow:auto wrappers — constrain to viewport */
    div[style*="overflow:auto"] {
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Buttons ---- */
    .btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    /* Small action buttons keep compact sizing */
    .btn-sm {
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    .btn-xs {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Table/card row action buttons stay compact */
    .item-actions .btn,
    .list-card-actions .btn {
        min-height: 36px;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    /* ---- Forms ---- */
    .auth-card {
        padding: 20px;
        margin: 16px auto;
        max-width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    form [style*="display:grid"],
    form [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Also catch display:grid on standalone divs with gap */
    [style*="display: grid"][style*="gap: 16px"],
    [style*="display: grid"][style*="gap: 20px"],
    [style*="display:grid"][style*="gap: 16px"],
    [style*="display:grid"][style*="gap: 20px"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Grid layouts ---- */
    [style*="grid-template-columns:repeat(auto-fill"],
    [style*="grid-template-columns: repeat(auto-fill"],
    [style*="grid-template-columns:repeat(auto-fit"],
    [style*="grid-template-columns: repeat(auto-fit"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 2fr"],
    [style*="grid-template-columns: 2fr 2fr"],
    [style*="grid-template-columns:3fr"],
    [style*="grid-template-columns: 3fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Line-item grids (invoice/credit note items) — scroll horizontally */
    .line-item[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .line-item input,
    .line-item select,
    .line-item textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

    [style*="display:grid"][style*="gap:16px"],
    [style*="display:grid"][style*="gap: 16px"],
    [style*="display: grid"][style*="gap:16px"],
    [style*="display: grid"][style*="gap: 16px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ---- Flex layouts ---- */
    [style*="display:flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]),
    [style*="display: flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]),
    [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-wrap"]) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    [style*="display:flex"][style*="flex-wrap:wrap"],
    [style*="display: flex"][style*="flex-wrap:wrap"],
    [style*="display: flex"][style*="flex-wrap: wrap"],
    [style*="display:flex"][style*="flex-wrap: wrap"] {
        flex-direction: row !important;
    }

    [style*="display:flex"][style*="gap:8px"],
    [style*="display:flex"][style*="gap:10px"],
    [style*="display:flex"][style*="gap:12px"],
    [style*="display: flex"][style*="gap: 8px"],
    [style*="display: flex"][style*="gap: 10px"],
    [style*="display: flex"][style*="gap: 12px"],
    [style*="display: flex"][style*="gap:8px"],
    [style*="display:flex"][style*="gap: 8px"],
    [style*="display:flex"][style*="gap: 10px"],
    [style*="display:flex"][style*="gap: 12px"] {
        flex-wrap: wrap !important;
    }

    [style*="display:flex"] .btn,
    [style*="display: flex"] .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* ---- Show/View Page Headers ---- */
    /* Header row: title left, buttons right → stack on mobile */
    div[style*="justify-content:space-between"][style*="flex-wrap:wrap"],
    div[style*="justify-content:space-between"][style*="flex-wrap: wrap"],
    div[style*="justify-content: space-between"][style*="flex-wrap:wrap"],
    div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:last-child,
    div[style*="justify-content:space-between"][style*="flex-wrap: wrap"] > div:last-child,
    div[style*="justify-content: space-between"][style*="flex-wrap:wrap"] > div:last-child,
    div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Action button rows on show pages → full width, wrapped */
    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"],
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"],
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"],
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"],
    div[style*="display: flex"][style*="gap:8px"][style*="flex-wrap:wrap"],
    div[style*="display:flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] {
        width: 100% !important;
    }

    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn,
    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form,
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn,
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form,
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn,
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form,
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn,
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
    }

    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form .btn,
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form .btn,
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form .btn,
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form .btn {
        width: 100%;
    }

    /* ---- Show Page Detail Sections ---- */
    /* Card sections with max-width → allow full width */
    section[style*="max-width"],
    div[style*="max-width:300px"],
    div[style*="max-width: 300px"],
    div[style*="max-width:420px"],
    div[style*="max-width: 420px"],
    div[style*="max-width:500px"],
    div[style*="max-width: 500px"],
    div[style*="max-width:600px"],
    div[style*="max-width: 600px"],
    div[style*="max-width:800px"],
    div[style*="max-width: 800px"],
    div[style*="max-width:900px"],
    div[style*="max-width: 900px"],
    div[style*="max-width:1000px"],
    div[style*="max-width: 1000px"] {
        max-width: 100% !important;
    }

    /* Forms with max-width → allow full width */
    form[style*="max-width"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Show page info cards that use auto-fit/auto-fill grid */
    div[style*="repeat(auto-fit, minmax(300px"],
    div[style*="repeat(auto-fit, minmax(200px"],
    div[style*="repeat(auto-fill, minmax(300px"],
    div[style*="repeat(auto-fill, minmax(200px"] {
        grid-template-columns: 1fr !important;
    }

    /* Detail row items — cover spaced and unspaced gap */
    div[style*="display:grid"][style*="gap:24px"],
    div[style*="display:grid"][style*="gap: 24px"],
    div[style*="display: grid"][style*="gap:24px"],
    div[style*="display: grid"][style*="gap: 24px"],
    div[style*="display:grid"][style*="gap:20px"],
    div[style*="display:grid"][style*="gap: 20px"],
    div[style*="display: grid"][style*="gap:20px"],
    div[style*="display: grid"][style*="gap: 20px"] {
        gap: 16px !important;
    }

    /* ---- Invoice/Proposal Tables Inside Show Pages ---- */
    /* Line-item tables in show pages */
    div[style*="overflow-x:auto"],
    div[style*="overflow-x: auto"],
    div[style*="overflow:auto"] {
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ---- Edit/Create Form Improvements ---- */
    /* Ensure form labels are visible */
    label {
        font-size: 0.85rem;
        word-break: break-word;
    }

    /* Form fieldsets and groups */
    fieldset {
        padding: 12px !important;
        margin: 0 0 16px 0 !important;
    }

    /* Textarea responsiveness */
    textarea {
        min-height: 80px;
        resize: vertical;
    }

    /* ---- Status Update Forms on Show Pages ---- */
    form[style*="display:flex"][style*="gap"],
    form[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

    form[style*="display:flex"][style*="gap"] select,
    form[style*="display: flex"][style*="gap"] select {
        flex: 1 1 100% !important;
    }

    form[style*="display:flex"][style*="gap"] .btn,
    form[style*="display: flex"][style*="gap"] .btn {
        flex: 1 1 auto;
    }

    /* ---- Sidebar Info Cards on Show Pages ---- */
    /* Contract show sidebar, invoice sidebar etc */
    div[style*="border-left:"],
    div[style*="border-left :"],
    aside[style*="border-left:"] {
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-left: 0 !important;
        padding-top: 16px !important;
    }

    /* ---- Money/Amount Display ---- */
    .money-value,
    [style*="font-weight:600"][style*="text-align:right"] {
        text-align: left !important;
    }

    /* ---- Compact spacing for cards inside show pages ---- */
    div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 14px !important;
    }

    /* ---- Tab navigation on show pages ---- */
    div[style*="border-bottom:"][style*="display:flex"][style*="gap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    div[style*="border-bottom:"][style*="display:flex"][style*="gap"]::-webkit-scrollbar {
        display: none;
    }

    div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > a,
    div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > button {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ---- Page Header ---- */
    .page-header {
        flex-direction: column;
        gap: 12px;
    }

    .page-header-content h1 {
        font-size: 1.5rem;
    }

    /* ---- Stats ---- */
    .page-stats {
        width: 100%;
    }

    .stat-card {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }

    /* ---- Search & Filter Bar ---- */
    .search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-filter-bar .search-input-wrapper,
    .search-filter-bar .filter-select-wrapper {
        width: 100%;
        min-width: 100%;
    }

    .search-filter-bar .clear-filters {
        width: 100%;
        text-align: center;
    }

    /* ---- Status buttons ---- */
    .btn-status-draft,
    .btn-status-available,
    .btn-status-sent,
    .btn-status-paid,
    .btn-status-overdue,
    .btn-status-void {
        width: 100%;
        margin-bottom: 8px;
    }

    [style*="display:flex"][style*="gap:10px"] {
        flex-direction: column;
    }

    /* ---- Footer ---- */
    .footer-nav {
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

    .footer-nav a {
        font-size: 0.85rem;
    }

    .site-footer {
        padding: 24px 16px;
    }

    /* ---- Profile ---- */
    .profile-header h1 {
        font-size: 1.5rem;
    }

    .profile-tabs {
        display: none;
    }

    .profile-tabs-mobile {
        display: block;
    }

    .profile-section {
        padding: 16px;
    }

    /* ---- Dashboard ---- */
    .dashboard-billing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .dashboard-billing-card {
        padding: 14px;
        border-radius: 8px;
    }

    .dashboard-billing-card-value {
        font-size: 1.5em;
    }

    .dashboard-status-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Portal ---- */
    .portal-secure-text {
        display: none;
    }

    .portal .card,
    #portal .card {
        margin: 0;
        width: 100%;
    }

    /* ---- Admin menu ---- */
    .admin-menu {
        position: relative !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .admin-menu-toggle {
        width: 100% !important;
        padding: 12px 16px !important;
        background: var(--btn-bg) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        color: var(--text) !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        margin-bottom: 8px !important;
    }

    .admin-menu-toggle i {
        transition: transform 0.2s ease;
    }

    .admin-menu-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    .admin-menu-items {
        width: 100% !important;
        display: none !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        margin-top: -4px !important;
    }

    .admin-menu-toggle[aria-expanded="true"] + .admin-menu-items {
        display: flex !important;
    }

    .admin-nav-link {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .admin-nav-link:hover {
        background: var(--btn-bg) !important;
    }

    .admin-nav-link.active {
        background: var(--btn-bg-hover) !important;
        color: var(--text) !important;
        font-weight: 600 !important;
        border-bottom: none !important;
    }

    .admin-nav-label {
        max-width: 200px !important;
        opacity: 1 !important;
        margin-left: 0 !important;
        overflow: visible !important;
    }

    /* ---- Ticket styles ---- */
    .ticket-header {
        flex-direction: column;
    }

    .ticket-header-actions {
        width: 100%;
    }

    .ticket-header-actions .btn {
        width: 100%;
    }

    .ticket-message {
        gap: 8px;
    }

    .ticket-message-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .ticket-info-grid,
    .ticket-settings-form {
        grid-template-columns: 1fr;
    }

    /* ---- Button groups ---- */
    .btn-group,
    .action-buttons {
        flex-direction: column !important;
    }

    .btn-group .btn,
    .action-buttons .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* ---- Home page ---- */
    .home-landing-hero {
        grid-template-columns: 1fr;
        padding: 24px 16px 36px;
        border-radius: 14px;
    }

    .home-landing-hero__actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: 16px;
    }

    .home-landing-hero__image {
        position: static;
        width: 100%;
        margin-top: 20px;
        border-radius: 10px;
    }

    .home-landing-title {
        font-size: 1.75rem;
    }

    .home-landing-hero__pricing {
        max-width: 100%;
    }

    .icon-bar {
        flex-wrap: wrap;
        padding: 20px 16px;
        gap: 12px;
    }

    .icon-bar__item {
        min-width: auto;
        flex: 1 1 calc(50% - 8px);
    }

    .cta-section {
        padding: 32px 16px;
        margin: 32px 0 24px;
    }

    .cta-section h2 {
        font-size: 1.4rem;
    }

    .home-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .home-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==============================================
   SMALL MOBILE breakpoint: max-width 480px
   ============================================== */
@media (max-width: 480px) {
    .content {
        padding: 8px;
    }

    .site-header {
        padding: 0 10px !important;
    }

    .brand-logo {
        width: 120px;
        height: 40px;
    }

    h1 {
        font-size: 1.35rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    .card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    table {
        font-size: 0.75rem;
    }

    table th,
    table td {
        padding: 6px 4px;
        font-size: 0.72rem;
    }

    .page-table th,
    .page-table td {
        padding: 6px 4px;
        font-size: 0.72rem;
    }

    .page-table th {
        font-size: 0.65rem;
    }

    /* Override inline min-width on tables */
    table[style*="min-width:720px"],
    table[style*="min-width:760px"],
    table[style*="min-width:700px"],
    table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Override inline width on th/td for very small screens */
    th[style*="width"],
    td[style*="width"] {
        width: auto !important;
    }

    .item-actions .btn {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
        min-height: 28px;
    }

    .btn {
        padding: 10px 12px;
        font-size: 0.875rem;
        width: 100%;
    }

    .btn:not([style*="width"]):not(.btn-sm):not(.btn-xs) {
        width: 100% !important;
    }

    /* Small buttons stay inline on small screens */
    .btn-sm,
    .btn-xs,
    .item-actions .btn,
    .list-card-actions .btn {
        width: auto !important;
    }

    /* Prevent iOS zoom on input focus */
    input, textarea, select {
        font-size: 16px !important;
    }

    .auth-card {
        margin: 8px auto;
        padding: 14px;
    }

    .admin-menu {
        gap: 6px !important;
    }

    .admin-nav-link {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }

    .dashboard-billing-card-value {
        font-size: 1.35em;
    }

    .dashboard-billing-card-title {
        font-size: 0.8rem;
    }

    .pricing-options__amount {
        font-size: 2.25rem;
    }

    .cta-btn {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }

    /* ---- View/Edit page improvements at 480px ---- */
    /* All action buttons stack fully */
    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn,
    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form,
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn,
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form,
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn,
    div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form,
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn,
    div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 100% !important;
    }

    /* Status badges smaller */
    .status-badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

    /* Compact detail cards */
    div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 10px !important;
    }

    /* Line items in edit forms — stack labels above inputs */
    .line-item label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

    /* Show page meta info */
    div[style*="color:var(--text-2)"][style*="display:flex"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
}

/* ==============================================
   DESKTOP optimizations: min-width 769px
   ============================================== */
@media (min-width: 769px) {
    .nav-toggle {
        display: none !important;
    }

    .site-header .site-nav {
        display: flex !important;
    }

    .admin-menu-toggle {
        display: none !important;
    }

    .admin-menu-items {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        margin-top: 0 !important;
    }

    .admin-nav-link {
        width: auto !important;
        padding: 8px 12px !important;
        font-size: 1.15rem !important;
        border-radius: 4px 4px 0 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -2px !important;
    }

    .admin-nav-link.active {
        background: transparent !important;
        border-bottom: 2px solid #2563eb !important;
    }

    .card {
        padding: 24px;
    }

    .content {
        padding: 10px;
    }

    table {
        table-layout: auto;
    }
}

/* ==============================================
   LARGE DESKTOP: min-width 1200px
   ============================================== */
@media (min-width: 1200px) {
    .content {
        max-width: 1200px;
    }
}

/* ==============================================
   Print styles
   ============================================== */
@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .breadcrumbs,
    .admin-menu,
    .notification-wrapper,
    .theme-switcher-wrapper {
        display: none !important;
    }

    .content {
        max-width: 100%;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* ==============================================
   Accessibility: Reduced motion
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}