/*
 * Core styles rebuilt (mobile-first, 8px rhythm, layered tokens)
 */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700&family=Cairo:wght@400;600;700&display=swap');

/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--text-body);
    background: var(--bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link-default); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3) 0; color: var(--text-strong); font-weight: 700; line-height: var(--line-height-tight); }
p { margin: 0 0 var(--space-3) 0; color: var(--text-body); }

.trial-badge {
    background: linear-gradient(135deg, #e0f2fe 0%, #eef2ff 100%);
    color: var(--text-inverse);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-info { text-decoration: none; color: inherit; display: inline-flex; gap: var(--space-2); align-items: center; }

/* Layout */
.admin-layout { display: flex; min-height: 100vh; background: var(--bg-page); overflow-x: hidden; }
.sidebar {
    width: 260px;
    background: var(--layer-01);
    border-inline-end: 1px solid var(--border-subtle);
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-sm);
    z-index: 980;
}
.sidebar-header { display: grid; gap: var(--space-2); }
.sidebar-logo {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}
.sidebar-header h2 { margin: 0; font-size: var(--font-size-xl); }
.sidebar-subtitle { margin: 0; color: var(--text-soft); font-size: var(--font-size-sm); }
.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-2);
    color: var(--text-body);
    font-weight: 600;
    transition: background var(--ease-standard), color var(--ease-standard), transform var(--ease-standard);
}
.nav-link:visited { color: var(--text-body); }
.nav-link i { width: 20px; text-align: center; }
.nav-link:hover { background: var(--layer-accent-01); color: var(--color-primary); }
.nav-link.active { background: var(--layer-accent-02); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sidebar-footer { margin-top: auto; }

.main-content {
    flex: 1;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--layer-background-01) 0%, #ffffff 60%, #ffffff 100%);
    position: relative;
    min-width: 0;
}
.top-bar {
    position: sticky;
    top: 0;
    z-index: 850;
    background: var(--layer-01);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    box-shadow: var(--shadow-sm);
    flex-direction: row-reverse;
}
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: var(--space-2); }
.top-bar-left { margin-inline-start: auto; flex-wrap: wrap; }
.top-bar-right { flex-wrap: nowrap; gap: var(--space-2); }
.top-bar .page-title { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.page-title { font-size: var(--font-size-xl); margin: 0; color: var(--text-strong); }
.content-wrapper { padding: var(--space-6) var(--space-5) var(--space-7); }

/* Mobile sidebar toggle */
.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-2);
    border: 1px solid var(--border-subtle);
    background: var(--layer-01);
    box-shadow: var(--shadow-sm);
    color: var(--text-strong);
    align-items: center;
    justify-content: center;
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 970;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease-standard), visibility var(--ease-standard);
}
.sidebar-overlay.show { opacity: 1; visibility: visible; }
.sidebar.sidebar-open { transform: translateX(0); }

@media (max-width: 992px) {
    .top-bar { padding-inline: var(--space-4); gap: var(--space-2); align-items: center; }
    .sidebar {
        position: fixed;
        inset: 0 0 0 auto;
        transform: translateX(100%);
        transition: transform var(--ease-standard);
        max-width: 80vw;
        padding-bottom: var(--space-7);
    }
    .mobile-menu-toggle { display: inline-flex; }
    .main-content { margin-inline-start: 0; }
}

@media (min-width: 993px) {
    .sidebar {
        position: fixed;
        inset-inline-start: 0;
        inset-inline-end: auto;
        top: 0;
        bottom: 0;
        height: 100vh;
    }
    .main-content { margin-inline-start: 260px; margin-inline-end: 0; }
    .sidebar-overlay { display: none; }
}

body.sidebar-active { overflow: hidden; }

/* Page header */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.page-header h1 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-2xl); margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Alerts */
.alert {
    padding: var(--space-3);
    border-radius: var(--radius-2);
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.alert-success { background: #ecfdf3; color: #166534; border-color: #bbf7d0; }
.alert-warning { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.alert-error { background: #fef2f2; color: #b91c1c; border-color: #fecdd3; }
.alert-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--font-size-md);
    line-height: 1.5;
    cursor: pointer;
    transition: transform var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard), color var(--ease-standard);
    text-decoration: none;
    min-height: 42px;
    box-sizing: border-box;
}
button.btn {
    font-family: inherit;
}
.btn:visited { color: inherit; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.btn:focus-visible { outline: var(--focus-ring); }
.btn-primary { background: var(--color-primary); color: var(--text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:visited { color: var(--text-inverse); }
.btn-primary:hover { background: var(--color-primary-strong); }
.btn-secondary { background: var(--layer-accent-01); color: var(--text-strong); border-color: var(--border-subtle); }
.btn-secondary:visited { color: var(--text-strong); }
.btn-ghost { background: transparent; color: var(--text-body); border-color: var(--border-subtle); }
.btn-danger { background: var(--color-danger); color: var(--text-inverse); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.is-loading { position: relative; pointer-events: none; opacity: 0.88; }
.btn.is-loading .btn-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 0.8s linear infinite; vertical-align: middle; }

/* Forms */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label { font-weight: 600; color: var(--text-strong); font-size: var(--font-size-sm); }
.form-input, select, textarea {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--field-text);
    transition: border-color var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);
}
.form-select {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--field-text);
    transition: border-color var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);
    appearance: none;
}
.form-input::placeholder, textarea::placeholder { color: var(--field-placeholder); }
.form-input:hover, select:hover, textarea:hover { background: var(--field-bg-hover); }
.form-input:focus, select:focus, textarea:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); outline: none; }
.form-input:disabled, select:disabled, textarea:disabled { background: var(--field-bg-disabled); color: var(--text-soft); cursor: not-allowed; }
.form-input.is-invalid, .form-select.is-invalid, textarea.is-invalid { border-color: var(--color-danger); box-shadow: 0 0 0 1px rgba(220,38,38,0.18); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); align-items: end; }
.filter-actions { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* Profile info blocks */
.profile-info { display: grid; gap: var(--space-3); }
.profile-info p { margin: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); background: var(--layer-02); display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.profile-info strong { color: var(--text-soft); min-width: 120px; }
.profile-info a { color: var(--color-primary); font-weight: 600; }
.profile-info .alert { margin: 0; }

/* Cards */
.card {
    background: var(--layer-01);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.card-body { padding: var(--space-4); }
.card-header { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--layer-02); }
.alert-success { background: var(--support-success-bg); color: var(--support-success-text); border-color: var(--support-success-border); }
.alert-warning { background: var(--support-warning-bg); color: var(--support-warning-text); border-color: var(--support-warning-border); }
.alert-error { background: var(--support-error-bg); color: var(--support-error-text); border-color: var(--support-error-border); }
.alert-info { background: var(--support-info-bg); color: var(--support-info-text); border-color: var(--support-info-border); }
.report-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-3);
    background: linear-gradient(135deg, #ffffff 0%, var(--layer-accent-01) 100%);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    color: var(--text-strong);
    transition: transform var(--ease-standard), box-shadow var(--ease-standard), border var(--ease-standard);
    min-height: 140px;
    height: 100%;
    align-content: start;
}
.report-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.report-card h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.report-card p { margin: 0; color: var(--text-soft); }
.report-card--sales { background: linear-gradient(140deg, #e0e7ff 0%, #eef2ff 100%); }
.report-card--collections { background: linear-gradient(140deg, #e0f2fe 0%, #e6f5ff 100%); }
.report-card--financial { background: linear-gradient(140deg, #fff4e5 0%, #fff7ed 100%); }

/* Dashboard - quick actions */
.dashboard-grid { display: flex; flex-direction: column; gap: var(--space-6); }
.quick-actions-section { background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.section-title { margin: 0 0 var(--space-4); font-size: var(--font-size-2xl); display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); }
.quick-actions-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.quick-action-card { background: var(--layer-accent-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); padding: var(--space-4); color: var(--text-strong); display: grid; gap: var(--space-2); align-content: start; transition: transform var(--ease-standard), box-shadow var(--ease-standard), border-color var(--ease-standard); }
.quick-action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.quick-action-icon { width: 48px; height: 48px; border-radius: var(--radius-2); display: grid; place-items: center; font-size: var(--font-size-lg); }
.quick-action-icon--primary { background: rgba(33,83,246,0.12); color: var(--color-primary); }
.quick-action-icon--warning { background: rgba(245,158,11,0.14); color: var(--color-warning); }
.quick-action-icon--success { background: rgba(22,163,74,0.12); color: var(--color-success); }
.quick-action-icon--secondary { background: rgba(31,41,55,0.12); color: var(--color-secondary); }
.quick-action-icon--info { background: rgba(14,165,233,0.12); color: var(--color-info); }
.quick-action-icon--error { background: rgba(220,38,38,0.12); color: var(--color-danger); }
.quick-action-card h4 { margin: 0; font-size: var(--font-size-lg); }
.quick-action-card p { margin: 0; color: var(--text-soft); }

/* Reports landing grid */
.reports-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }

/* Stats */
.stats-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat-card {
    background: var(--layer-01);
    border-radius: var(--radius-3);
    border: 1px solid var(--border-subtle);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    box-shadow: var(--shadow-sm);
}
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-2);
    display: grid;
    place-items: center;
    font-size: var(--font-size-xl);
    background: var(--layer-accent-01);
    color: var(--color-primary);
}
.stat-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-strong); }
.stat-label { color: var(--text-soft); font-size: var(--font-size-sm); }

/* Tables */
.table-responsive { width: 100%; overflow-x: auto; border-radius: var(--radius-2); border: 1px solid var(--border-subtle); background: var(--layer-01); }
.table { width: 100%; border-collapse: collapse; min-width: 520px; }
.table th, .table td { padding: var(--space-3); text-align: start; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); }
.table th { background: var(--layer-02); font-weight: 700; color: var(--text-strong); }
.table tr:last-child td { border-bottom: none; }
.table .text-end { text-align: end; }

@media (max-width: 768px) {
    .table { min-width: 100%; }
    .table thead { display: none; }
    .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { margin-bottom: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); overflow: hidden; background: var(--layer-01); box-shadow: var(--shadow-sm); }
    .table td { border: none; border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-4); }
    .table td:last-child { border-bottom: none; }
    .table td::before { content: attr(data-label); font-weight: 700; color: var(--text-strong); display: block; margin-bottom: var(--space-1); }
}

/* Badges & pills */
.badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; }
.badge-success { background: rgba(22,163,74,0.12); color: #15803d; }
.badge-warning { background: rgba(245,158,11,0.14); color: #b45309; }
.badge-danger { background: rgba(220,38,38,0.14); color: #b91c1c; }
.badge-info { background: rgba(14,165,233,0.14); color: #0ea5e9; }
.badge-primary { background: rgba(33, 83, 246, 0.14); color: var(--color-primary); }

/* Sticky totals for purchases */
.sticky-total-card { position: sticky; top: var(--space-6); background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); box-shadow: var(--shadow-sm); padding: var(--space-4); display: grid; gap: var(--space-3); }
.sticky-total-card h5 { margin: 0; color: var(--text-strong); }
.totals-grid { display: grid; gap: var(--space-2); }
.totals-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.totals-row label { color: var(--text-soft); font-weight: 600; }
.totals-row input { max-width: 220px; text-align: end; }
@media (max-width: 992px) {
    .sticky-total-card { position: static; }
}

@keyframes spin { to { transform: rotate(360deg); } }
.badge-secondary { background: rgba(31, 41, 55, 0.12); color: #1f2937; }
.badge-neutral { background: rgba(107, 114, 128, 0.14); color: #4b5563; }

/* Utilities */
.text-muted { color: var(--text-soft); }
.text-soft { color: var(--text-soft); }
.text-end { text-align: end; }
.text-success { color: var(--support-success-text); }
.text-danger { color: var(--support-error-text); }
.text-warning { color: var(--support-warning-text); }
.text-info { color: var(--support-info-text); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.rounded { border-radius: var(--radius-2); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.input-inline-sm { max-width: 170px; display: inline-block; }
.pt-4 { padding-top: var(--space-4); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.stat-note { font-size: var(--font-size-sm); color: var(--text-soft); opacity: 0.85; }
.card-header-gradient { background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%); color: var(--text-strong); }

/* Lists and empty states */
.empty-state { text-align: center; padding: var(--space-6); color: var(--text-soft); }

/* Links */
.link-soft { color: var(--text-soft); }
.link-soft:hover { color: var(--color-primary); }

/* Skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-bg);
    border-radius: var(--radius-2);
    color: transparent;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: var(--skeleton-shimmer);
    animation: skeleton-shimmer 1.4s linear infinite;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Lists */
.list-unstyled { list-style: none; padding: 0; margin: 0; }

/* Log and modal utilities */
.log-line { margin: var(--space-2) 0; line-height: 1.6; }
.log-success { color: var(--support-success-text); }
.log-warning { color: var(--support-warning-text); }
.log-error { color: var(--support-error-text); }
.log-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }
.log-compact { font-size: var(--font-size-sm); }
.log-indent { padding-inline-start: var(--space-3); }
.log-relaxed { line-height: 1.75; }
.bg-success { background: rgba(22,163,74,0.12); color: #15803d; }
.bg-danger { background: rgba(220,38,38,0.12); color: #b91c1c; }
.bg-warning { background: rgba(245,158,11,0.12); color: #b45309; }
.bg-primary { background: rgba(33,83,246,0.12); color: var(--color-primary); }
.bg-info { background: rgba(14,165,233,0.12); color: #0ea5e9; }
.bg-secondary { background: rgba(31,41,55,0.12); color: #1f2937; }
.table-row-highlight { background: var(--layer-accent-01); font-weight: 700; }
.table-info { background: var(--layer-accent-01); }
.btn-error, .btn-danger { background: var(--color-danger); color: var(--text-inverse); }
.btn-error:hover, .btn-danger:hover { background: var(--support-error-border); }
.is-hidden { display: none !important; }

/* Lookup dropdown (customer search) */
.lookup-field { position: relative; }
.custom-dropdown {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--layer-01);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-lg);
    margin-top: var(--space-1);
    padding: var(--space-1) 0;
    display: none;
    z-index: 1000;
}
.dropdown-item { padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border-subtle); display: block; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--layer-accent-02); }
.customer-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.customer-name { font-weight: 600; color: var(--text-strong); }
.customer-phone { color: var(--text-soft); font-size: var(--font-size-sm); background: var(--layer-02); padding: 2px 8px; border-radius: var(--radius-2); }
.lookup-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 40px;
}

/* Table summaries */
.summary-box {
    background: var(--layer-02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.summary-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.summary-row:last-child { border-bottom: none; }
.summary-row.total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--border-strong); font-size: var(--font-size-lg); }
.summary-box-narrow { max-width: 520px; margin-inline-start: auto; }

/* Info groups */
.info-group { display: grid; gap: var(--space-1); padding: var(--space-2) 0; }
.info-group label { font-weight: 700; color: var(--text-strong); }
.info-group p { margin: 0; color: var(--text-soft); }

/* Table/actions helpers */
.table-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.btn-group-inline { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* Settings + info cards */
.settings-layout { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.info-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.info-item:last-child { border-bottom: none; }
.tip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.tip-list li { position: relative; padding-inline-start: var(--space-4); color: var(--text-soft); }
.tip-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--color-success); font-weight: 700; }

/* Highlight panels */
.panel-highlight { background: var(--layer-accent-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.panel-gradient { background: linear-gradient(135deg, rgba(33, 83, 246, 0.10), rgba(14, 165, 233, 0.10)); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); padding: var(--space-4); }

/* Trial expired page */
.trial-expired-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%); }
.trial-expired { background: var(--layer-01); border-radius: var(--radius-4); padding: var(--space-7); max-width: 720px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.trial-icon { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--space-5); font-size: 3rem; color: var(--text-strong); background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%); box-shadow: var(--shadow-md); }
.contact-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.contact-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); font-weight: 700; text-decoration: none; color: var(--text-inverse); box-shadow: var(--shadow-sm); transition: transform var(--ease-standard), box-shadow var(--ease-standard); }
.contact-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-btn--primary { background: linear-gradient(135deg, #e0f2fe 0%, #e5e7eb 100%); color: var(--text-strong); }
.contact-btn--secondary { background: #10b981; }
.pricing-highlight { background: #fef3c7; border: 1px solid #fbbf24; border-radius: var(--radius-3); padding: var(--space-4); }
.trial-note { color: #9ca3af; font-size: var(--font-size-sm); }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.modal-overlay.show { display: flex; }
.modal {
    background: var(--layer-01);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-lg);
    max-width: 900px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.modal-title { margin: 0; font-size: var(--font-size-lg); }
.modal-close { border: none; background: transparent; cursor: pointer; color: var(--text-soft); font-size: var(--font-size-xl); }
.modal-close:hover { color: var(--text-strong); }
.modal-body { padding: var(--space-4); overflow-y: auto; }

/* Migration manager */
.migration-manager { display: grid; gap: var(--space-4); }
.migration-header { background: linear-gradient(135deg, rgba(33, 83, 246, 0.12), rgba(14, 165, 233, 0.10)); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); padding: var(--space-5); color: var(--text-strong); box-shadow: var(--shadow-md); }
.migration-header h1 { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); }
.migration-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.migration-card { background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); box-shadow: var(--shadow-sm); overflow: hidden; }
.migration-card .card-header { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--layer-02); }
.migration-card .card-body { padding: var(--space-4); }
.migration-empty { text-align: center; padding: var(--space-6); color: var(--text-soft); display: grid; gap: var(--space-2); place-items: center; }
.migration-actions-inline { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.migration-actions-inline .btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-3);
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.migration-actions-inline .btn-primary { background: var(--color-primary); color: var(--text-inverse); border-color: var(--color-primary); }
.migration-actions-inline .btn-info { background: var(--color-info); color: var(--text-inverse); border-color: var(--color-info); }
.migration-actions-inline .btn-warning { background: var(--color-warning); color: var(--text-strong); border-color: var(--color-warning); }
.migration-actions-inline .btn-secondary { background: var(--layer-02); color: var(--text-strong); border-color: transparent; }
.migration-actions-inline .btn-success { background: var(--color-success); color: var(--text-inverse); border-color: var(--color-success); }
.migration-actions-inline .btn-danger { background: var(--color-danger); color: var(--text-inverse); border-color: var(--color-danger); }
.migration-meta { color: var(--text-soft); font-size: var(--font-size-sm); }
.migration-log-body { background: #0f172a; color: #e2e8f0; border-radius: var(--radius-2); padding: var(--space-4); font-family: var(--font-family-mono); font-size: 13px; overflow-x: auto; }


/* Responsive adjustments */
@media (max-width: 768px) {
    .top-bar { padding-inline: var(--space-4); }
    .content-wrapper { padding: var(--space-5) var(--space-4); }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-actions { width: 100%; }
    .top-bar { flex-wrap: wrap; gap: var(--space-2); }
    .page-title { font-size: var(--font-size-lg); }
    .sidebar { max-width: 82vw; width: 82vw; }
    .top-bar-right { width: 100%; justify-content: flex-start; }
}

@media print {
    .no-print { display: none !important; }
}

/* Auth layouts */
.auth-page {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(33, 83, 246, 0.12), transparent 35%),
                radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.12), transparent 25%),
                radial-gradient(circle at 50% 90%, rgba(236, 72, 153, 0.08), transparent 30%),
                var(--bg-page);
    display: grid;
    place-items: center;
    padding: var(--space-7) var(--space-4);
}

.auth-shell {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.auth-panel {
    border-radius: var(--radius-4, 18px);
    border: 1px solid var(--border-subtle);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    background: var(--layer-01);
    display: grid;
    gap: var(--space-4);
}

.auth-panel--brand {
    background: linear-gradient(145deg, rgba(33, 83, 246, 0.12), rgba(14, 165, 233, 0.08)), var(--layer-01);
    border-color: rgba(33, 83, 246, 0.18);
    position: relative;
    overflow: hidden;
}

.auth-panel--brand::after {
    content: "";
    position: absolute;
    inset: 10% auto -10% -30%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(33, 83, 246, 0.12), transparent 55%);
    filter: blur(6px);
    pointer-events: none;
}

.auth-panel--card {
    background: var(--layer-01);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

.auth-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-2);
    background: rgba(33, 83, 246, 0.12);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-sm);
}
.auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auth-highlight { display: grid; gap: var(--space-3); position: relative; z-index: 1; }
.auth-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--layer-02);
    border-radius: var(--radius-pill);
    color: var(--text-strong);
    width: fit-content;
    box-shadow: var(--shadow-sm);
}
.auth-list { display: grid; gap: var(--space-2); color: var(--text-body); }
.auth-list i { color: var(--color-primary); }

.auth-form { display: grid; gap: var(--space-4); }
.auth-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.auth-header h2 { margin: 0; font-size: var(--font-size-2xl); }
.auth-header .eyebrow { margin: 0 0 var(--space-1); color: var(--text-soft); letter-spacing: 0.4px; font-weight: 700; font-size: var(--font-size-xs); }
.auth-header .link-soft { color: var(--text-soft); font-weight: 600; }
.auth-header .link-soft:hover { color: var(--color-primary); }

.auth-links { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: 600; }
.auth-links--single { justify-content: flex-start; }
.auth-info { font-size: var(--font-size-sm); color: var(--text-soft); display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 768px) {
    .auth-page { padding: var(--space-6) var(--space-3); }
    .auth-panel { padding: var(--space-5); }
    .auth-header { flex-direction: column; align-items: flex-start; }
    .auth-links { flex-direction: column; align-items: flex-start; }
}

/* Migration results/manager */
.migration-page { background: radial-gradient(circle at 20% 20%, rgba(33, 83, 246, 0.08), transparent 35%), var(--bg-page); min-height: 100vh; padding: var(--space-6) var(--space-4); }
.migration-shell { max-width: 960px; margin: 0 auto; display: grid; gap: var(--space-4); }
.migration-hero { background: linear-gradient(135deg, rgba(33, 83, 246, 0.14), rgba(99, 102, 241, 0.12)); color: var(--text-strong); padding: var(--space-5); border-radius: var(--radius-3); box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); display: grid; gap: var(--space-2); }
.migration-status {
    border-radius: var(--radius-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.migration-status.success { background: var(--support-success-bg); border-color: var(--support-success-border); color: var(--support-success-text); }
.migration-status.error { background: var(--support-error-bg); border-color: var(--support-error-border); color: var(--support-error-text); }
.migration-log { background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); padding: var(--space-4); box-shadow: var(--shadow-sm); max-height: 520px; overflow-y: auto; font-family: var(--font-family-mono); font-size: 13px; direction: ltr; text-align: left; }
.migration-log-title { font-weight: 700; color: var(--text-strong); margin-bottom: var(--space-3); }
.migration-log-item { padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.migration-log-item:last-child { border-bottom: none; }
.migration-log-success { color: var(--support-success-text); }
.migration-log-error { color: var(--support-error-text); font-weight: 700; }
.migration-log-warning { color: var(--support-warning-text); }
.migration-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.migration-next { background: var(--support-warning-bg); border: 1px solid var(--support-warning-border); color: var(--support-warning-text); padding: var(--space-4); border-radius: var(--radius-2); box-shadow: var(--shadow-sm); }
.migration-next ul { padding-right: 18px; margin: var(--space-2) 0 0; color: var(--text-soft); }
.migration-next li { margin-bottom: var(--space-2); }

@media (max-width: 768px) {
    .migration-page { padding: var(--space-5) var(--space-3); }
    .migration-hero { padding: var(--space-4); }
}