/*
 * Solvexa Landing — shared design system for module-launcher pages.
 *
 * Used by /Hub, /Finance/Index, /PurchaseOrders/Index, /Sales/Index,
 * /Items/Index, /Stocks/Index, /Reports/Index, /Admin/Index, etc.
 *
 * Pattern per page:
 *   1) topbar — back link + title + version badge
 *   2) hero  — solid coloured banner with title + tagline + KPI row
 *   3) optional alert strip
 *   4) tile sections — uppercase grouping headers + grid of clickable tiles
 *   5) optional recent-activity table at the bottom
 *
 * Each landing page picks ONE hero colour (--hero-from / --hero-to)
 * via inline style so different modules feel distinct without forking
 * the stylesheet.
 */

*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Roboto,system-ui,sans-serif}
body{background:#F5F7FA;color:#1A1A1A;font-size:13px}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:#FFF;border-bottom:1px solid #E0E5EB;height:56px}
.topbar a.back{color:#5B6C7E;text-decoration:none;font-size:13px;padding:6px 10px;border-radius:4px}
.topbar a.back:hover{background:#F0F3F7}
.topbar h1{font-size:16px;font-weight:600;margin-left:8px;display:flex;align-items:center;gap:8px}
.topbar .badge{padding:2px 9px;background:#E3F2FD;color:#1565C0;font-size:11px;font-weight:700;border-radius:99px;letter-spacing:.04em}

/* ── Hero (override --hero-from/--hero-to per page) ──────── */
.hero{
  background:linear-gradient(135deg, var(--hero-from,#1565C0) 0%, var(--hero-to,#0078D4) 100%);
  color:#FFF;padding:24px 28px
}
.hero-inner{max-width:1500px;margin:0 auto}
.hero h2{font-size:22px;font-weight:600;margin-bottom:4px}
.hero p{opacity:.88;font-size:14px;margin-bottom:18px;max-width:980px;line-height:1.5}

/* ── KPI row (semi-transparent cards on hero) ──────────── */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:14px 18px;backdrop-filter:blur(4px);position:relative}
.kpi-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:4px}
.kpi-value{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:11px;opacity:.75;margin-top:3px}
.kpi .integrity{position:absolute;top:6px;right:8px;font-size:10px;opacity:.9}

/* ── Section + tile grid ────────────────────────────────── */
.container{max-width:1500px;margin:0 auto;padding:24px 28px}
.section{margin-bottom:24px}
.section h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5B6C7E;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #E0E5EB;display:flex;align-items:center;gap:8px}
.section h3 .count{margin-left:auto;font-size:10px;color:#9CA3AF;text-transform:none;letter-spacing:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px}

.tile{background:#FFF;border:1px solid #E0E5EB;border-radius:6px;padding:14px 16px;text-decoration:none;color:#1A1A1A;display:flex;flex-direction:column;gap:5px;transition:all .14s ease;min-height:90px}
.tile:hover{border-color:#0078D4;box-shadow:0 4px 16px rgba(0,120,212,.16);transform:translateY(-1px)}
.tile .ico{font-size:22px;line-height:1;margin-bottom:4px}
.tile .title{font-size:13.5px;font-weight:600;color:#1A1A1A;display:flex;align-items:center;gap:8px}
.tile .title .new{padding:1px 6px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#E3F2FD;color:#0078D4}
.tile .title .ai{padding:1px 6px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(135deg,#6A1B9A,#0078D4);color:#FFF}
.tile .title .pro{padding:1px 6px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#FEF3C7;color:#92400E}
.tile .sub{font-size:11.5px;color:#6B7785;line-height:1.4;flex:1}
.tile .url{font-size:10px;color:#0078D4;font-family:'Cascadia Code',Consolas,monospace;margin-top:6px;opacity:.65}

/* Featured tile (highlight the primary call-to-action on each page) */
.tile.featured{background:linear-gradient(135deg, var(--hero-from,#0078D4), var(--hero-to,#106EBE));color:#FFF;border-color:var(--hero-from,#0078D4)}
.tile.featured:hover{filter:brightness(1.08)}
.tile.featured .title{color:#FFF}
.tile.featured .title .new{background:rgba(255,255,255,.25);color:#FFF}
.tile.featured .sub{color:rgba(255,255,255,.88)}
.tile.featured .url{color:rgba(255,255,255,.8)}

/* ── Recent activity table ──────────────────────────────── */
.recent{background:#FFF;border:1px solid #E0E5EB;border-radius:6px;overflow:hidden}
.recent-hd{padding:10px 16px;background:#FAFBFC;border-bottom:1px solid #E0E5EB;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5B6C7E}
.recent table{width:100%;border-collapse:collapse;font-size:12px}
.recent thead th{background:#FAFBFC;text-align:left;padding:8px 12px;font-size:10.5px;font-weight:700;color:#5B6C7E;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #E0E5EB}
.recent tbody td{padding:7px 12px;border-bottom:1px solid #F0F3F7}
.recent tbody tr:hover td{background:#FAFBFC}
.recent .col-amt{text-align:right;font-variant-numeric:tabular-nums}
.recent .col-num{font-family:'Cascadia Code',Consolas,monospace;color:#0078D4;font-weight:600;font-size:11.5px}
.recent .neg{color:#C62828}

/* ── Alert strip (orange warning above tiles) ──────────── */
.alert-strip{background:#FFF8E1;border:1px solid #FFE082;border-radius:8px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;gap:12px;font-size:13px;color:#7B5800}
.alert-strip .ico{font-size:18px}
.alert-strip .body{flex:1}
.alert-strip .body b{display:block;color:#925E00;margin-bottom:2px}
.alert-strip .right{margin-left:auto;font-size:11px;color:#9A7400}

/* ── Empty state on tile sections ───────────────────────── */
.empty{padding:24px;text-align:center;color:#9CA3AF;font-size:12px;font-style:italic}

/* ── Module hero color palette (apply as inline style) ─── */
/* :root style="--hero-from:#0D9488; --hero-to:#0F766E;" etc.   */
/* Suggested palettes by module:
 *  Finance:    #1565C0 → #0078D4  (blue)
 *  Purchase:   #6D28D9 → #7C3AED  (violet)
 *  Sales:      #B91C1C → #DC2626  (red)
 *  Items:      #047857 → #059669  (emerald)
 *  Stocks:     #0F766E → #14B8A6  (teal)
 *  Reports:    #1E40AF → #3B82F6  (royal blue)
 *  Admin:      #4338CA → #6366F1  (indigo)
 *  Hospitality:#C2410C → #EA580C  (orange)
 *  Hub (home): #0F172A → #1E293B  (slate)
 */