/* ==========================================================================
   SOS ISP Manager — Module Polish (Iteration 2)
   ------------------------------------------------------------------------
   Loaded AFTER sos-theme.css. Targets list-page patterns used by Clients
   (CRM), Packages, Payments, Live Monitor (NOC wallboard), Field Operations,
   and Inventory so list/detail screens match the polished dashboard feel.
   No markup changes required — every namespace below already exists.
   ========================================================================== */

/* ============================================================
   A. Module page header — icon + title + actions row
   Use: <header class="module-page-head"> ... </header>
   Existing pages without this header still look fine.
   ============================================================ */
.module-page-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .25rem 0 1rem;
    flex-wrap: wrap;
}
.module-page-head__icon {
    width: 48px; height: 48px;
    border-radius: var(--sos-radius);
    background: linear-gradient(135deg, var(--sos-primary), var(--sos-violet));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .28);
    flex-shrink: 0;
}
.module-page-head__copy { flex: 1; min-width: 0; }
.module-page-head__copy h1,
.module-page-head__copy h2 {
    margin: 0; font-weight: 800; letter-spacing: -0.02em; font-size: 1.4rem;
}
.module-page-head__copy p { margin: .15rem 0 0; color: var(--sos-text-muted); font-size: .88rem; }
.module-page-head__tools { display: inline-flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================
   B. Filter / toolbar shell — used above tables
   ============================================================ */
.module-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--sos-surface);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-radius-lg);
    box-shadow: var(--sos-shadow-sm);
}
.module-toolbar .form-control,
.module-toolbar .form-select {
    height: 38px;
    border-radius: var(--sos-radius-pill);
    background: var(--sos-surface-muted);
    border-color: transparent;
    padding-inline: 1rem;
}
.module-toolbar .form-control:focus,
.module-toolbar .form-select:focus {
    background: var(--sos-surface);
    border-color: var(--sos-primary);
}
.module-toolbar .input-group { width: auto; }
.module-toolbar .toolbar-spacer { flex: 1; }

/* ============================================================
   C. Status pills — shared, semantic, soft tinted
   Apply directly via class="status-pill is-success" etc.
   ============================================================ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: var(--sos-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--sos-surface-muted);
    color: var(--sos-text-muted);
    border: 1px solid var(--sos-border);
}
.status-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px currentColor; opacity: .35;
}
.status-pill.is-success { background: var(--sos-success-soft); color: var(--sos-success); border-color: transparent; }
.status-pill.is-danger,
.status-pill.is-error   { background: var(--sos-danger-soft);  color: var(--sos-danger);  border-color: transparent; }
.status-pill.is-warning,
.status-pill.is-pending { background: var(--sos-warning-soft); color: #b45309;            border-color: transparent; }
.status-pill.is-info,
.status-pill.is-active  { background: var(--sos-info-soft);    color: var(--sos-info);    border-color: transparent; }
.status-pill.is-primary { background: var(--sos-primary-soft); color: var(--sos-primary-strong); border-color: transparent; }
.status-pill.is-muted   { background: var(--sos-surface-muted); color: var(--sos-text-muted); }

/* ============================================================
   D. List rows — used by CRM leads/contacts/tickets and FieldOps queues
   Targets common namespaces: crml-, crmd-, fieldops-, fo-, inv-, sl-
   ============================================================ */
.crml-list-item, .crml-row, .crml-lead-row, .crml-ticket-row,
.crmd-feed-item, .crmd-task-row,
.fieldops-row, .fo-job-row, .fo-row,
.inv-row, .inventory-row, .sl-row,
.app-list-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sos-border);
    background: var(--sos-surface);
    transition: background var(--sos-dur) var(--sos-ease);
}
.crml-list-item:hover, .crml-row:hover, .crml-lead-row:hover,
.fieldops-row:hover, .fo-job-row:hover,
.inv-row:hover, .inventory-row:hover, .sl-row:hover,
.app-list-row:hover {
    background: var(--sos-primary-soft);
}
.crml-list-item:first-child, .app-list-row:first-child { border-top-left-radius: var(--sos-radius); border-top-right-radius: var(--sos-radius); }
.crml-list-item:last-child,  .app-list-row:last-child  { border-bottom: none; border-bottom-left-radius: var(--sos-radius); border-bottom-right-radius: var(--sos-radius); }

/* Leading avatar circle */
.app-row-avatar,
.crml-avatar, .fo-avatar, .inv-avatar, .sl-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sos-primary), var(--sos-violet));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(79, 70, 229, .25);
}

/* ============================================================
   E. Chart shells — keep charts inside white cards with title row
   ============================================================ */
.app-chart-shell,
.finance-chart-shell,
.crmd-chart-shell,
.crml-chart-shell,
.hr-chart-shell,
.inventory-chart-shell,
.noc-chart-shell {
    background: var(--sos-surface);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-radius-lg);
    box-shadow: var(--sos-shadow-sm);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}
.app-chart-shell .chart-title,
.finance-chart-shell .chart-title,
.crmd-chart-shell .chart-title,
.hr-chart-shell .chart-title {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .75rem;
}
.app-chart-shell .chart-title h4,
.finance-chart-shell .chart-title h4 {
    margin: 0; font-weight: 700; font-size: .95rem; color: var(--sos-text);
}
.app-chart-shell .chart-title small,
.finance-chart-shell .chart-title small {
    color: var(--sos-text-muted); font-size: .78rem;
}

/* ============================================================
   F. Donut score rings used in Packages, Reports, Live Monitor
   ============================================================ */
.donut-ring,
.score-ring,
.invoice-score-ring,
.package-score-ring,
.finance-score-ring {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--sos-primary) calc(var(--ring-pct, 50) * 1%), var(--sos-surface-muted) 0);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    transition: background .6s var(--sos-ease);
}
.donut-ring::after,
.score-ring::after,
.invoice-score-ring::after,
.package-score-ring::after,
.finance-score-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--sos-surface);
    box-shadow: inset 0 0 0 1px var(--sos-border);
}
.donut-ring > *,
.score-ring > *,
.invoice-score-ring > *,
.package-score-ring > *,
.finance-score-ring > * {
    position: relative; z-index: 1;
    text-align: center;
}

/* ============================================================
   G. Timeline / activity feed (CRM, FieldOps, NOC events)
   ============================================================ */
.app-timeline,
.crmd-timeline,
.fieldops-timeline,
.noc-event-feed {
    position: relative;
    padding-left: 1.25rem;
}
.app-timeline::before,
.crmd-timeline::before,
.fieldops-timeline::before,
.noc-event-feed::before {
    content: "";
    position: absolute;
    left: 6px; top: .35rem; bottom: .35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--sos-primary), var(--sos-violet));
    border-radius: 2px;
    opacity: .35;
}
.app-timeline > .timeline-item,
.crmd-timeline > .crmd-event,
.fieldops-timeline > .fo-event,
.noc-event-feed > .noc-event {
    position: relative;
    padding: .6rem 0 .6rem .9rem;
    border-bottom: 1px dashed var(--sos-border);
}
.app-timeline > .timeline-item::before,
.crmd-timeline > .crmd-event::before,
.fieldops-timeline > .fo-event::before,
.noc-event-feed > .noc-event::before {
    content: "";
    position: absolute;
    left: -1.25rem; top: 1rem;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--sos-surface);
    border: 2px solid var(--sos-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* ============================================================
   H. Live Monitor wallboard — keep dark, restyle tiles
   Targets: .noc-wallboard, .noc-tile, .noc-device-tile, .noc-grid
   ============================================================ */
body[data-module="noc"] .noc-wallboard,
.noc-wallboard {
    background: linear-gradient(135deg, #0b1020 0%, #1e1b4b 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: var(--sos-radius-lg);
}
.noc-tile, .noc-device-tile {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--sos-radius) !important;
    color: #fff !important;
    padding: 1rem;
    backdrop-filter: blur(8px);
    transition: transform var(--sos-dur) var(--sos-ease), background var(--sos-dur) var(--sos-ease);
}
.noc-tile:hover, .noc-device-tile:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.12) !important;
}
.noc-tile.is-up,    .noc-device-tile.is-up    { box-shadow: inset 4px 0 0 #22c55e; }
.noc-tile.is-down,  .noc-device-tile.is-down  { box-shadow: inset 4px 0 0 #ef4444; }
.noc-tile.is-warn,  .noc-device-tile.is-warn  { box-shadow: inset 4px 0 0 var(--sos-accent); }

/* ============================================================
   I. Inventory + FieldOps badges (stock low / SLA breach)
   ============================================================ */
.stock-low,    .inv-low    { color: var(--sos-danger);  font-weight: 700; }
.stock-ok,     .inv-ok     { color: var(--sos-success); font-weight: 700; }
.sla-breach,   .fo-breach  { color: var(--sos-danger);  font-weight: 700; }
.sla-on-time,  .fo-on-time { color: var(--sos-success); font-weight: 700; }

/* ============================================================
   J. Empty / loading states inside any module
   ============================================================ */
.module-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--sos-text-muted);
    background: var(--sos-surface);
    border: 1px dashed var(--sos-border-strong);
    border-radius: var(--sos-radius-lg);
}
.module-empty__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--sos-primary-soft);
    color: var(--sos-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}
.module-empty h3 { color: var(--sos-text); font-weight: 700; margin: 0 0 .35rem; }

/* ============================================================
   K. Mini sparkline cleanup inside light cards (non-premium)
   ============================================================ */
.card svg.aw-spark, .card svg.app-spark { stroke: var(--sos-primary); fill: none; stroke-width: 1.5; }

/* ============================================================
   L. Module-specific surfaces still using older off-white cards
   ============================================================ */
.fieldops-card, .fieldops-section, .fo-card, .fo-section,
.inv-card, .inv-section,
.payments-card, .payments-section,
.packages-card, .packages-section,
.live-monitor-card {
    background: var(--sos-surface) !important;
    border: 1px solid var(--sos-border) !important;
    border-radius: var(--sos-radius-lg) !important;
    box-shadow: var(--sos-shadow-sm) !important;
    padding: 1.25rem;
}

/* ============================================================
   M. Tabs inside module pages (often nav-pills+badge counts)
   ============================================================ */
.module-tabs { border-bottom: 1px solid var(--sos-border); margin-bottom: 1rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.module-tabs a, .module-tabs button {
    padding: .65rem 1rem;
    color: var(--sos-text-muted);
    font-weight: 600;
    text-decoration: none;
    border: none; background: transparent;
    border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: color var(--sos-dur) var(--sos-ease), border-color var(--sos-dur) var(--sos-ease);
}
.module-tabs a:hover, .module-tabs button:hover {
    color: var(--sos-primary);
    border-bottom-color: var(--sos-border-strong);
}
.module-tabs a.is-active, .module-tabs button.is-active,
.module-tabs a.active, .module-tabs button.active {
    color: var(--sos-primary-strong);
    border-bottom-color: var(--sos-primary);
}
.module-tabs .tab-count {
    background: var(--sos-surface-muted);
    color: var(--sos-text-muted);
    border-radius: var(--sos-radius-pill);
    padding: .1rem .55rem;
    font-size: .7rem;
    font-weight: 700;
}
.module-tabs a.is-active .tab-count,
.module-tabs a.active .tab-count {
    background: var(--sos-primary);
    color: #fff;
}

/* ============================================================
   N. Subscriber portal-like client info card pattern
   ============================================================ */
.client-summary, .package-summary, .payment-summary {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--sos-shadow-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}
.client-summary h4, .package-summary h4, .payment-summary h4 {
    margin: 0; font-weight: 700; color: var(--sos-text);
}
.client-summary small, .package-summary small, .payment-summary small {
    color: var(--sos-text-muted);
}

/* ============================================================
   O. Print + standalone reset (don't carry SOS gradients into PDF)
   ============================================================ */
@media print {
    .app-sidebar, .app-topbar, .app-footer { display: none !important; }
    body.app-shell { background: #fff !important; }
    .aw-snapshot.is-premium {
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .aw-snapshot.is-premium *,
    .aw-snapshot.is-premium .aw-snapshot__title,
    .aw-snapshot.is-premium .aw-snapshot__copy { color: #111 !important; }
}

/* ============================================================
   P. Auto-injected default page hero (sos-page-hero)
   --------------------------------------------------------------
   The layout auto-injects this hero above every non-dashboard
   page. PageHeroStats fills .aw-ribbon with KPI tiles, and may
   set a score gauge. When neither is present we fall back to a
   slim title-only banner.
   ============================================================ */

/* Default (KPIs present) — full two-column dashboard layout */
.sos-page-hero { padding: 1.5rem 1.75rem !important; }
.sos-page-hero .aw-focus { gap: .75rem !important; }
.sos-page-hero .aw-snapshot__title { font-size: 1.5rem !important; margin-top: .25rem !important; }
.sos-page-hero .aw-snapshot__copy { font-size: .92rem !important; max-width: 70ch; }
.sos-page-hero .aw-snapshot__kicker { display: inline-flex !important; align-items: center; gap: .4rem; }
.sos-page-hero .sos-page-hero__icon { width: 16px; height: 16px; }
.sos-page-hero .aw-focus__gauge .aw-gauge--xl { width: 110px; height: 110px; }

/* Slim variant — when the hero ended up empty (no KPIs and no
   score) collapse to a single column and hide the empty side. */
.sos-page-hero.is-slim { grid-template-columns: 1fr !important; }
.sos-page-hero.is-slim .aw-side { display: none !important; }
.sos-page-hero.is-slim .aw-focus__gauge { display: none !important; }

/* Make ribbon tiles a touch denser on auto-injected heroes so 4
   KPIs sit comfortably without crowding the title column. */
.sos-page-hero .aw-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}
.sos-page-hero .aw-ribbon__cell {
    padding: .65rem .8rem;
}
.sos-page-hero .aw-ribbon__cell strong { font-size: 1.15rem; }
.sos-page-hero .aw-ribbon__cell span { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }

@media (max-width: 992px) {
    .sos-page-hero { grid-template-columns: 1fr !important; }
    .sos-page-hero .aw-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}