/* Back-office components added on top of super-admin.css (Fawtra-style management screens). */

/* Grouped sidebar */
.sa-nav-group{margin:14px 12px 4px;color:rgba(255,255,255,.55);font-size:10.5px;font-weight:800;letter-spacing:.4px}
.sa-nav-group:first-child{margin-top:0}
.sa-sidebar nav{gap:3px}
.sa-sidebar nav a{padding:9px 12px}

/* Breadcrumb */
.os-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--sa-muted);font-size:12px;margin:-14px 0 18px}
.os-breadcrumb a{color:var(--sa-primary);text-decoration:none;font-weight:700}
.os-breadcrumb span.sep{opacity:.5}

/* KPI cards */
.os-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.os-kpis.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.os-kpis.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.os-kpi{background:var(--sa-surface);border:1px solid var(--sa-border);border-radius:var(--sa-radius);box-shadow:var(--sa-shadow);padding:18px;display:grid;gap:6px;position:relative;text-decoration:none;color:inherit}
a.os-kpi:hover{border-color:var(--sa-primary-border)}
.os-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.os-kpi-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--sa-primary-soft);color:var(--sa-primary)}
.os-kpi.success .os-kpi-icon{background:var(--sa-success-soft);color:var(--sa-success)}
.os-kpi.warning .os-kpi-icon{background:var(--sa-warning-soft);color:var(--sa-warning)}
.os-kpi.danger .os-kpi-icon{background:var(--sa-danger-soft);color:var(--sa-danger)}
.os-kpi.info .os-kpi-icon{background:var(--sa-info-soft);color:var(--sa-info)}
.os-kpi-value{font-size:24px;font-weight:800;color:var(--sa-text);letter-spacing:-.4px;line-height:1.2}
.os-kpi-label{color:var(--sa-muted);font-size:12px;font-weight:700}
.os-kpi-foot{color:var(--sa-muted);font-size:11.5px;border-top:1px dashed var(--sa-border);padding-top:7px}
.os-chip{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800;background:var(--sa-neutral-soft);color:var(--sa-muted)}
.os-chip.up{background:var(--sa-success-soft);color:var(--sa-success)}
.os-chip.down{background:var(--sa-danger-soft);color:var(--sa-danger)}

/* Two-column dashboard rows */
.os-row{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.os-row.even{grid-template-columns:1fr 1fr}
.os-row>.sa-panel{min-width:0}

/* Bar chart (pure CSS) */
.os-bars{display:flex;align-items:flex-end;gap:8px;height:210px;padding:10px 4px 0;border-bottom:1px solid var(--sa-border)}
.os-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.os-bar span{display:block;width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--sa-accent),var(--sa-primary));min-height:3px;transition:.2s}
.os-bar:hover span{filter:brightness(1.1)}
.os-bar em{font-style:normal;font-size:10.5px;color:var(--sa-muted);margin-bottom:4px;white-space:nowrap}
.os-bar-labels{display:flex;gap:8px;padding:6px 4px 0}
.os-bar-labels span{flex:1;text-align:center;font-size:10.5px;color:var(--sa-muted);white-space:nowrap;overflow:hidden}

/* Horizontal distribution list */
.os-dist{display:grid;gap:12px}
.os-dist-row{display:grid;gap:5px}
.os-dist-row div{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}
.os-dist-row i{display:block;height:8px;border-radius:99px;background:var(--sa-neutral-soft);overflow:hidden}
.os-dist-row i b{display:block;height:100%;border-radius:99px;background:var(--sa-primary)}
.os-dist-row i b.success{background:var(--sa-success)}
.os-dist-row i b.warning{background:var(--sa-warning)}
.os-dist-row i b.danger{background:var(--sa-danger)}
.os-dist-row i b.muted{background:var(--sa-muted)}

/* Filters bar */
.os-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.os-filters input,.os-filters select{width:100%;min-height:41px;border:1px solid var(--sa-input-border);border-radius:11px;padding:8px 11px;background:var(--sa-input-bg);color:var(--sa-text);font:13px Cairo,sans-serif;outline:none}
.os-filters input:focus,.os-filters select:focus{border-color:var(--sa-primary);box-shadow:0 0 0 3px var(--sa-ring)}
.os-filters label{display:grid;gap:4px;font-size:11.5px;font-weight:700;color:var(--sa-label)}
.os-filters .os-filter-actions{display:flex;gap:8px}
.os-filters .os-filter-actions>*{min-height:41px}

/* Card header: title + action */
.os-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.os-card-head h2{margin:0;font-size:18px}
.os-card-head p{margin:2px 0 0;color:var(--sa-muted);font-size:12px}

/* Table helpers */
.sa-table td small,.os-muted{color:var(--sa-muted);font-size:11.5px}
.sa-table td b{font-weight:800}
.os-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.os-row-actions{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;justify-content:flex-start}
.os-icon-btn{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--sa-border);background:var(--sa-surface);color:var(--sa-primary-text);font:700 12px Cairo,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.os-icon-btn:hover{background:var(--sa-primary-soft);border-color:var(--sa-primary-border)}
.os-icon-btn.danger{color:var(--sa-danger)}
.os-icon-btn.danger:hover{background:var(--sa-danger-soft);border-color:var(--sa-danger-border)}
.os-icon-btn.success{color:var(--sa-success)}
.os-icon-btn.success:hover{background:var(--sa-success-soft);border-color:var(--sa-success-border)}

/* ⋮ dropdown (details/summary, no JS needed) */
.os-menu{position:relative;display:inline-block}
.os-menu>summary{list-style:none;cursor:pointer}
.os-menu>summary::-webkit-details-marker{display:none}
.os-menu-list{position:absolute;z-index:30;inset-inline-end:0;top:calc(100% + 6px);min-width:200px;background:var(--sa-surface);border:1px solid var(--sa-border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16);padding:6px;display:grid;gap:2px}
.os-menu-list a,.os-menu-list button{display:block;width:100%;text-align:right;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--sa-text);font:600 12.5px Cairo,sans-serif;text-decoration:none;cursor:pointer}
.os-menu-list a:hover,.os-menu-list button:hover{background:var(--sa-primary-soft)}
.os-menu-list button.danger{color:var(--sa-danger)}
.os-menu-list form{margin:0}
.os-menu-list hr{border:0;border-top:1px solid var(--sa-border);margin:4px 0}

/* Pagination */
.os-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--sa-muted);font-size:12px}
.os-pages{display:flex;gap:4px;flex-wrap:wrap}
.os-pages a,.os-pages span{min-width:34px;height:34px;display:grid;place-items:center;padding:0 8px;border-radius:9px;border:1px solid var(--sa-border);background:var(--sa-surface);color:var(--sa-primary-text);text-decoration:none;font-weight:700}
.os-pages span.current{background:var(--sa-primary);border-color:var(--sa-primary);color:var(--sa-on-primary)}
.os-pages span.gap{border:0;background:none}
.os-pages span.disabled{opacity:.4}

/* Tabs */
.os-tabs{display:flex;gap:4px;border-bottom:1px solid var(--sa-border);margin-bottom:18px;overflow-x:auto}
.os-tabs a{padding:10px 14px;border-bottom:2px solid transparent;color:var(--sa-muted);font-weight:700;text-decoration:none;white-space:nowrap}
.os-tabs a.active{color:var(--sa-primary);border-bottom-color:var(--sa-primary)}
.os-tabs a .os-chip{margin-inline-start:4px}

/* Definition list */
.os-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.os-dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--sa-border)}
.os-dl dt{color:var(--sa-muted);font-size:12.5px}
.os-dl dd{margin:0;font-weight:700;text-align:left}
.os-dl.one{grid-template-columns:1fr}

/* Action forms grid on detail pages */
.os-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.os-action-card{border:1px solid var(--sa-border);border-radius:14px;padding:15px;display:grid;gap:10px;align-content:start;background:var(--sa-surface-2)}
.os-action-card h3{margin:0;font-size:14.5px}
.os-action-card p{margin:0;color:var(--sa-muted);font-size:12px}
.os-action-card input,.os-action-card select,.os-action-card textarea{width:100%;min-height:39px;border:1px solid var(--sa-input-border);border-radius:10px;padding:7px 10px;font:13px Cairo,sans-serif;background:var(--sa-input-bg);color:var(--sa-text)}
.os-action-card label{display:grid;gap:4px;font-size:11.5px;font-weight:700;color:var(--sa-label)}
.os-action-card .os-inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Guide callout */
.os-guide{border:1px solid var(--sa-primary-border);background:color-mix(in srgb,var(--sa-primary) 6%,var(--sa-surface));border-radius:13px;padding:12px 15px;color:var(--sa-primary-text);font-size:12.5px;margin-bottom:16px}
.os-guide.warning{border-color:var(--sa-warning-border);background:var(--sa-warning-soft);color:var(--sa-warning)}
.os-guide.danger{border-color:var(--sa-danger-border);background:var(--sa-danger-soft);color:var(--sa-danger)}

/* Empty state */
.os-empty{padding:34px 16px;text-align:center;color:var(--sa-muted)}
.os-empty strong{display:block;color:var(--sa-text);font-size:15px;margin-bottom:4px}

/* Permission checkboxes */
.os-perm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.os-perm-group{border:1px solid var(--sa-border);border-radius:13px;padding:12px 14px}
.os-perm-group h4{margin:0 0 8px;font-size:13px}
.os-perm-group label{display:flex !important;gap:8px;align-items:center;font-weight:600 !important;padding:3px 0}

/* More badge colours */
.sa-badge.completed,.sa-badge.paid,.sa-badge.free{background:var(--sa-success-soft);color:var(--sa-success)}
.sa-badge.scheduled,.sa-badge.partial,.sa-badge.info{background:var(--sa-info-soft);color:var(--sa-info)}
.sa-badge.grace{background:var(--sa-warning-soft);color:var(--sa-warning)}
.sa-badge.failed,.sa-badge.unpaid{background:var(--sa-danger-soft);color:var(--sa-danger)}
.sa-badge.refunded{background:var(--sa-teal-soft);color:var(--sa-teal)}
.sa-badge.cancelled,.sa-badge.archived{background:var(--sa-neutral-soft);color:var(--sa-muted)}
.sa-badge.trial{background:var(--sa-info-soft);color:var(--sa-info)}
.sa-badge.role{background:var(--sa-primary-soft);color:var(--sa-primary-text)}

/* Invoice (print) */
.os-invoice{max-width:860px;margin:0 auto}
.os-invoice-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--sa-primary);padding-bottom:16px;margin-bottom:18px}
.os-invoice-head h2{margin:0;font-size:22px;color:var(--sa-primary-text)}
.os-invoice table{width:100%;border-collapse:collapse;margin:14px 0}
.os-invoice th,.os-invoice td{padding:10px;border-bottom:1px solid var(--sa-border);text-align:right}
.os-invoice th{background:var(--sa-surface-2);font-size:12px}
.os-invoice .totals{margin-inline-start:auto;width:min(100%,320px)}
.os-invoice .totals div{display:flex;justify-content:space-between;padding:6px 0}
.os-invoice .totals .grand{border-top:2px solid var(--sa-text);font-weight:800;font-size:16px}
@media print{
    .sa-sidebar,.sa-topbar,.sa-sidebar-backdrop,.os-no-print,.os-breadcrumb,.sa-alert{display:none !important}
    .sa-workspace{margin:0 !important;width:100% !important}
    .sa-main{padding:0 !important}
    .sa-panel{box-shadow:none;border:0}
    body{background:#fff}
}

@media(max-width:1200px){
    .os-kpis,.os-kpis.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
    .os-row,.os-row.even{grid-template-columns:1fr}
}
@media(max-width:600px){
    .os-kpis,.os-kpis.cols-3,.os-kpis.cols-5{grid-template-columns:1fr}
    .os-dl{grid-template-columns:1fr}
    .os-bars{gap:3px}
    .os-bar em{display:none}
}

/* ---------------------------------------------------------------------------
   Appearance: Settings › Appearance (theme, brand color, density, sidebar).
   The brand tokens (--sa-primary …) come inline on <html> from owner_appearance();
   every component reads --sa-* tokens (super-admin.css :root), so a theme only
   re-defines tokens here instead of re-colouring components one by one.
   --------------------------------------------------------------------------- */
.sa-sidebar{background:linear-gradient(165deg,var(--sa-sidebar-start,#241044) 0%,var(--sa-sidebar-mid,#4c1d95) 58%,var(--sa-primary) 100%)}
.sa-brand-mark{color:var(--sa-primary-dark)}
.sa-secondary{color:var(--sa-primary-text)}
.os-pages span.current{background:var(--sa-primary);border-color:var(--sa-primary)}

/* Light sidebars (sidebar style «light» and the minimal theme): brand-filled active item */
html[data-sidebar="light"],html[data-ui-theme="minimal"]{--sa-nav-active-bg:var(--sa-primary);--sa-nav-active-text:var(--sa-on-primary);--sa-nav-active-icon:rgba(255,255,255,.2)}
html[data-sidebar="solid"] .sa-sidebar{background:var(--sa-sidebar-start,#241044)}
html[data-sidebar="light"] .sa-sidebar,html[data-ui-theme="minimal"] .sa-sidebar{background:var(--sa-surface);color:var(--sa-text);border-left:1px solid var(--sa-border);box-shadow:none}
html[data-sidebar="light"] .sa-sidebar a,html[data-sidebar="light"] .sa-brand small,html[data-sidebar="light"] .sa-sidebar-footer,html[data-sidebar="light"] .sa-nav-group,
html[data-ui-theme="minimal"] .sa-sidebar a,html[data-ui-theme="minimal"] .sa-brand small,html[data-ui-theme="minimal"] .sa-sidebar-footer,html[data-ui-theme="minimal"] .sa-nav-group{color:var(--sa-muted)}
html[data-sidebar="light"] .sa-sidebar nav a,html[data-ui-theme="minimal"] .sa-sidebar nav a{color:var(--sa-text)}
html[data-sidebar="light"] .sa-sidebar nav a:hover,html[data-ui-theme="minimal"] .sa-sidebar nav a:hover{background:var(--sa-primary-soft);color:var(--sa-primary-text)}
html[data-sidebar="light"] .sa-sidebar nav a.active,html[data-ui-theme="minimal"] .sa-sidebar nav a.active{background:var(--sa-nav-active-bg);color:var(--sa-nav-active-text)}
html[data-sidebar="light"] .sa-nav-icon,html[data-ui-theme="minimal"] .sa-nav-icon{background:var(--sa-primary-soft)}
html[data-sidebar="light"] .sa-sidebar nav a.active .sa-nav-icon,html[data-ui-theme="minimal"] .sa-sidebar nav a.active .sa-nav-icon{background:var(--sa-nav-active-icon)}
html[data-sidebar="light"] .sa-brand-mark,html[data-ui-theme="minimal"] .sa-brand-mark{background:linear-gradient(145deg,var(--sa-primary),var(--sa-accent));color:var(--sa-on-primary)}
html[data-sidebar="light"] .sa-logout,html[data-ui-theme="minimal"] .sa-logout{border-color:var(--sa-border);background:var(--sa-bg);color:var(--sa-text)}

html[data-density="compact"] body{font-size:13px}
html[data-density="compact"] .sa-panel{padding:16px;margin-bottom:14px}
html[data-density="compact"] .sa-table td{padding:8px 10px}
html[data-density="compact"] .sa-table th{padding:9px 10px}
html[data-density="compact"] .os-kpi{padding:13px}
html[data-density="compact"] .os-kpi-value{font-size:20px}
html[data-density="compact"] .sa-sidebar nav a{padding:7px 10px}

html[data-ui-theme="minimal"]{--sa-bg:#f4f5f8}
html[data-ui-theme="sand"]{--sa-bg:#f6f1e9;--sa-surface:#fffdf9;--sa-border:#eadfce;--sa-text:#2f2318;--sa-muted:#7c6a58}
html[data-ui-theme="sand"]:not([data-sidebar="light"]) .sa-sidebar{background:linear-gradient(165deg,#2f2318,#4a3624 65%,color-mix(in srgb,var(--sa-primary) 40%,#4a3624))}
html[data-ui-theme="sand"][data-sidebar="solid"] .sa-sidebar{background:#2f2318}
html[data-ui-theme="contrast"]{--sa-bg:#ffffff;--sa-border:#1f2937;--sa-muted:#374151;--sa-text:#000;--sa-label:#000}
html[data-ui-theme="contrast"]:not([data-sidebar="light"]) .sa-sidebar{background:#000}
html[data-ui-theme="contrast"] .sa-panel,html[data-ui-theme="contrast"] .os-kpi{border-width:2px;box-shadow:none}
html[data-ui-theme="contrast"] .sa-table th{color:#000}

/* Dark themes (dark, midnight): surfaces + readable state colours; brand text is a light tint of the brand */
html[data-theme="dark"]{--sa-bg:#151927;--sa-surface:#1e2435;--sa-text:#e7e9f2;--sa-muted:#9aa1b8;--sa-border:#2c3348;--sa-shadow:0 12px 30px rgba(0,0,0,.35);
    --sa-success:#4ade80;--sa-warning:#fbbf24;--sa-danger:#f87171;--sa-info:#93c5fd;--sa-teal:#5eead4;
    --sa-primary-text:color-mix(in srgb,var(--sa-primary) 45%,#fff);--sa-link:var(--sa-primary-text);
    --sa-primary-border:color-mix(in srgb,var(--sa-primary) 45%,var(--sa-surface));--sa-ring:color-mix(in srgb,var(--sa-primary) 35%,transparent);
    --sa-surface-2:color-mix(in srgb,var(--sa-bg) 55%,var(--sa-surface));--sa-hover:color-mix(in srgb,#fff 3%,var(--sa-surface));--sa-line:var(--sa-border);
    --sa-input-bg:var(--sa-bg);--sa-input-border:color-mix(in srgb,var(--sa-muted) 18%,var(--sa-border));--sa-label:var(--sa-muted);
    --sa-success-soft:color-mix(in srgb,var(--sa-success) 15%,var(--sa-surface));--sa-warning-soft:color-mix(in srgb,var(--sa-warning) 15%,var(--sa-surface));
    --sa-danger-soft:color-mix(in srgb,var(--sa-danger) 15%,var(--sa-surface));--sa-info-soft:color-mix(in srgb,var(--sa-info) 15%,var(--sa-surface));
    --sa-teal-soft:color-mix(in srgb,var(--sa-teal) 15%,var(--sa-surface));--sa-neutral-soft:color-mix(in srgb,var(--sa-muted) 16%,var(--sa-surface));
    --sa-success-border:color-mix(in srgb,var(--sa-success) 35%,var(--sa-surface));--sa-warning-border:color-mix(in srgb,var(--sa-warning) 35%,var(--sa-surface));
    --sa-danger-border:color-mix(in srgb,var(--sa-danger) 35%,var(--sa-surface));
    --sa-nav-active-bg:var(--sa-primary);--sa-nav-active-text:#fff;--sa-nav-active-icon:rgba(255,255,255,.18);color-scheme:dark}
html[data-ui-theme="midnight"]{--sa-bg:#070a12;--sa-surface:#0f1420;--sa-border:#1d2433}
html[data-theme="dark"]:not([data-sidebar="light"]) .sa-sidebar{background:linear-gradient(165deg,#0b0e17,#10131d 60%,var(--sa-sidebar-start,#241044))}
html[data-theme="dark"][data-sidebar="solid"] .sa-sidebar{background:#10131d}
html[data-ui-theme="midnight"]:not([data-sidebar="light"]) .sa-sidebar{background:#04060b}
html[data-theme="dark"] .sa-sidebar{border-left:1px solid var(--sa-border)}
/* Inputs without a component class (inline forms in menus) */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=color]),html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--sa-input-bg) !important;color:var(--sa-text) !important;border-color:var(--sa-input-border) !important}
html[data-theme="dark"] .os-kpi-value{color:var(--sa-text)}

/* Sync banner + settings tabs */
.os-sync-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.os-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.os-theme-card{border:2px solid var(--sa-border);border-radius:14px;padding:10px;cursor:pointer;display:grid;gap:8px;background:var(--sa-surface)}
.os-theme-card:has(input:checked){border-color:var(--sa-primary);box-shadow:0 0 0 3px var(--sa-primary-soft)}
.os-theme-card input{position:absolute;opacity:0}
.os-theme-swatch{display:flex;height:54px;border-radius:9px;overflow:hidden;border:1px solid var(--sa-border)}
.os-theme-swatch span{flex:1}
.os-theme-swatch span:last-child{flex:.6}
.os-theme-card b{font-size:13px}
.os-theme-card small{color:var(--sa-muted);font-size:11.5px}
.os-color-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.os-color-presets button{width:30px;height:30px;border-radius:50%;border:3px solid var(--sa-surface);box-shadow:0 0 0 1px var(--sa-border);cursor:pointer}