/* ============================================================
   PGV — "Estate Ledger" console design system
   Layered over Bootstrap's grid/components. Deep forest sidebar,
   brass-gold accents, warm paper canvas.

   Typography is NOT defined here — partials/font.blade.php owns it
   and is included by all four layouts (app, auth, portal, public).
   It self-hosts Google Sans and exposes the type scale (--fs-2xs …
   --fs-5xl) plus --lh-tight/snug/normal. Use those tokens; do not
   reintroduce raw font-size values.

   (This header used to claim a "Fraunces display serif over Archivo
   UI grotesque". Neither was ever loaded — the stack named faces that
   were never delivered, so everything actually rendered in Segoe UI.)
   ============================================================ */

:root {
    /* brand greens (forest) + brass golds */
    --pine-50:#eef5f0; --pine-100:#dcebe1; --pine-200:#bcd8c6;
    --pine-400:#4e9a6f; --pine-500:#2e7d51; --pine-600:#1d6a41; --pine-700:#155233;
    --brass-400:#c9a25e; --brass-500:#b8924e; --brass-600:#967534;

    /* legacy aliases — older styles referenced these names; keep them resolving */
    --indigo-50:var(--pine-50); --indigo-100:var(--pine-100); --indigo-200:var(--pine-200);
    --indigo-400:var(--pine-400); --indigo-500:var(--pine-500); --indigo-600:var(--pine-600); --indigo-700:var(--pine-700);
    --violet-500:var(--brass-500); --violet-600:var(--brass-600);

    --bs-primary:#1d6a41; --bs-primary-rgb:29,106,65;

    --grad: linear-gradient(135deg,#2e7d51 0%,#155233 100%);
    --grad-soft: linear-gradient(135deg,#eef5f0 0%,#f6f1e4 100%);
    --grad-brass: linear-gradient(135deg,#c9a25e 0%,#967534 100%);

    --bg:#f5f4ed;                 /* warm oat paper */
    --surface:#ffffff;
    --border:#e9e6da;
    --border-soft:#f1efe6;
    --ink:#1c2a21;
    --ink-2:#54635a;
    --muted:#8b958c;

    --sidebar-bg:#0b2316;
    --sidebar-bg-2:#11321f;
    --sidebar-w:264px;
    --topbar-h:72px;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(22,40,28,.04), 0 10px 24px -14px rgba(22,40,28,.16);
    --shadow-lg:0 8px 30px -10px rgba(21,82,51,.24), 0 4px 10px -6px rgba(22,40,28,.10);
    --ring:0 0 0 4px rgba(46,125,81,.16);
}

body {
    background:
        radial-gradient(1100px 500px at 100% -10%, rgba(184,146,78,.05), transparent 60%),
        var(--bg);
    color:var(--ink);
    font-size:var(--fs-md);
    -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; }
::selection { background:rgba(46,125,81,.18); }
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cfccbd;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b5b2a1;background-clip:content-box}

/* ───────── Layout ───────── */
#page-topbar{
    position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:1002;
    background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--border);
}
#page-topbar .navbar-header{ height:var(--topbar-h); padding:0 22px 0 0; display:flex; align-items:center; justify-content:space-between; }

.navbar-brand-box{
    width:var(--sidebar-w); height:var(--topbar-h); display:flex; align-items:center; padding-left:24px;
    background:var(--sidebar-bg);
    border-bottom:1px solid rgba(201,162,94,.22);
}
.navbar-brand-box .logo-txt{ font-weight:800; letter-spacing:-.02em; font-size:var(--fs-xl); color:#fff; }
.navbar-brand-box .logo-txt .text-primary{ background:var(--grad-brass); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.navbar-brand-box .logo-light{ display:none; }
/* The logo is a transparent PNG built FOR dark backgrounds: gold phoenix with a
   WHITE "Green Valley" subtitle. A white plate behind it made that subtitle
   invisible, so it sits directly on the sidebar green instead. */
.navbar-brand-box img{ background:transparent; padding:0; }

#vertical-menu-btn{
    margin-left:14px; color:var(--ink-2); border:0; background:transparent;
    width:40px; height:40px; border-radius:10px; transition:.15s;
}
#vertical-menu-btn:hover{ background:var(--pine-50); color:var(--pine-600); }

.vertical-menu{
    position:fixed; top:var(--topbar-h); left:0; width:var(--sidebar-w); bottom:0; z-index:1001;
    background:linear-gradient(180deg,var(--sidebar-bg-2),var(--sidebar-bg) 55%);
    border-right:1px solid rgba(255,255,255,.04);
    overflow-y:auto;
}
.vertical-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); background-clip:content-box }
.main-content{ margin-left:var(--sidebar-w); padding-top:var(--topbar-h); min-height:100vh; }
.page-content{ padding:26px 26px 8px; }
.container-fluid{ padding-left:0; padding-right:0; }

/* ───────── Sidebar nav ───────── */
#sidebar-menu{ padding:18px 14px 40px; }
#sidebar-menu .menu-title{
    color:rgba(220,199,154,.55); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; padding:18px 12px 8px; list-style:none;
}
#sidebar-menu ul{ list-style:none; padding:0; margin:0; }
#sidebar-menu ul li a{
    display:flex; align-items:center; gap:12px; color:rgba(238,243,236,.6);
    padding:.62rem .8rem; margin:2px 0; border-radius:12px; font-weight:500; font-size:var(--fs-md);
    transition:.16s; position:relative;
}
#sidebar-menu ul li a svg{ width:18px; height:18px; opacity:.85; }
#sidebar-menu ul li a:hover{ color:#fff; background:rgba(255,255,255,.06); }
#sidebar-menu ul li a.active{
    color:#fff; background:var(--grad);
    box-shadow:inset 0 0 0 1px rgba(201,162,94,.35), 0 8px 20px -8px rgba(21,82,51,.8);
}
#sidebar-menu ul li a.active::before{
    content:''; position:absolute; left:-14px; top:8px; bottom:8px; width:3px;
    border-radius:3px; background:var(--brass-400);
}
#sidebar-menu ul li a.active svg{ opacity:1; }

/* ───────── Topbar user ───────── */
.header-item{ border:0; background:transparent; }
#page-header-user-dropdown{
    display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:40px !important;
    border:1px solid var(--border) !important; background:#fff !important; transition:.15s;
}
#page-header-user-dropdown:hover{ box-shadow:var(--shadow); }
#page-header-user-dropdown > span:first-child{ background:var(--grad) !important; box-shadow:0 6px 14px -6px rgba(21,82,51,.6); }
.dropdown-menu{ border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; }
.dropdown-item{ border-radius:9px; padding:.5rem .7rem; font-weight:500; }
.dropdown-item:hover{ background:var(--pine-50); color:var(--pine-700); }

/* ───────── Page title ───────── */
.page-title-box{ padding:4px 0 20px; }
.page-title-box h4{
    font-weight:600; letter-spacing:0; color:var(--ink); font-size:var(--fs-3xl);
}
.page-title-box h4::after{
    content:''; display:block; width:42px; height:3px; margin-top:.45rem;
    border-radius:2px; background:var(--grad-brass);
}
.breadcrumb{ background:transparent; font-size:var(--fs-sm); }
.breadcrumb-item, .breadcrumb-item a{ color:var(--muted); }
.breadcrumb-item.active{ color:var(--pine-600); font-weight:600; }
.breadcrumb-item+.breadcrumb-item::before{ color:#cfccbd; }

/* ───────── Cards ───────── */
.card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:24px;
}
.card-h-100{ height:calc(100% - 24px); }
.card-body{ padding:1.35rem; }
.card-header{ padding:1.1rem 1.35rem; background:transparent; border-bottom:1px solid var(--border); }
.card-title{ font-weight:700; letter-spacing:-.01em; }
a.card{ transition:transform .18s, box-shadow .18s; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--pine-200); }

/* ───────── Avatars / icon chips ───────── */
.avatar-sm{ width:46px; height:46px; }
.avatar-xs{ width:34px; height:34px; }
.avatar-title{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:700; }
.bg-primary-subtle{ background:var(--pine-50) !important; }
.text-primary{ color:var(--pine-600) !important; }

/* ───────── Buttons ───────── */
.btn{ border-radius:10px; font-weight:600; padding:.5rem .95rem; transition:.16s; letter-spacing:-.01em; }
.btn-sm{ border-radius:8px; padding:.32rem .7rem; font-size:var(--fs-sm); }
.btn-lg{ border-radius:12px; padding:.7rem 1.3rem; }
.btn-primary{ background:var(--grad); border:0; box-shadow:0 8px 18px -8px rgba(21,82,51,.7); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 22px -8px rgba(21,82,51,.8); filter:brightness(1.05); }
.btn-light{ background:#f0efe7; border:1px solid var(--border); color:var(--ink-2); }
.btn-light:hover{ background:#e7e5d9; }
.btn-soft-primary{ background:var(--pine-50); color:var(--pine-600); border:0; }
.btn-soft-primary:hover{ background:var(--pine-100); color:var(--pine-700); }
.btn-soft-success{ background:#e7f5ec; color:#177245; border:0; }
.btn-soft-success:hover{ background:#d4eedd; }
.btn-soft-danger{ background:#fdecec; color:#cf3340; border:0; }
.btn-soft-danger:hover{ background:#fbdcdc; }
.btn-soft-secondary{ background:#efeee6; color:#54635a; border:0; }
.btn-soft-secondary:hover{ background:#e5e3d6; }
.btn-soft-warning{ background:#fbf3e1; color:#a8771c; border:0; }
.btn-soft-info{ background:#e8f1f5; color:#22708f; border:0; }
.btn-soft-info:hover{ background:#d9e9f0; }
.btn-outline-secondary{ border:1px solid #d6d3c4; color:var(--ink-2); }
.btn-outline-secondary:hover{ background:#f0efe7; color:var(--ink); border-color:#c8c5b4; }
.btn-success{ background:#1d7a47; border:0; box-shadow:0 8px 18px -10px rgba(29,122,71,.7); }
.btn-warning{ background:#c08a1d; border:0; color:#fff; }
.btn-danger{ background:#cf3340; border:0; }

/* ───────── Tables ───────── */
.table{ --bs-table-bg:transparent; margin-bottom:0; color:var(--ink-2); }
.table > thead{ background:transparent; }
.table > thead th{
    text-transform:uppercase; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.08em;
    color:var(--muted); border-bottom:1px solid var(--border); padding:.85rem 1rem; white-space:nowrap;
}
.table > tbody > tr{ border-bottom:1px solid #f1efe6; }
.table > tbody > tr:last-child{ border-bottom:0; }
.table > tbody td{ padding:.9rem 1rem; vertical-align:middle; }
.table-hover > tbody > tr:hover{ background:#f8f7f0; }
.table-light{ --bs-table-bg:#faf9f3; }
.table-nowrap td, .table-nowrap th{ white-space:nowrap; }

/* ───────── Badges ───────── */
.badge{ font-weight:600; padding:.36em .7em; border-radius:7px; letter-spacing:.01em; }
.bg-success-subtle{ background:#e7f5ec !important; } .text-success{ color:#177245 !important; }
.bg-warning-subtle{ background:#fbf3e1 !important; } .text-warning{ color:#a8771c !important; }
.bg-danger-subtle{ background:#fdecec !important; }  .text-danger{ color:#cf3340 !important; }
.bg-info-subtle{ background:#e8f1f5 !important; }    .text-info{ color:#22708f !important; }
.bg-secondary-subtle{ background:#efeee6 !important; } .text-secondary{ color:#6c7a70 !important; }

/* ───────── Forms ───────── */
.form-control,.form-select{
    border:1px solid #e0ddcf; border-radius:10px; padding:.55rem .8rem; font-size:var(--fs-md); color:var(--ink);
    transition:.15s; background-color:#fff;
}
.form-control:focus,.form-select:focus{ border-color:var(--pine-400); box-shadow:var(--ring); }
.form-label{ font-weight:600; font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:.4rem; }
.input-group-text{ background:#f6f5ee; border:1px solid #e0ddcf; border-radius:10px; color:var(--muted); }
.form-text{ font-size:var(--fs-xs); color:var(--muted); }
.form-switch .form-check-input{ width:2.6em; height:1.35em; background-color:#d6d3c4; border:0; cursor:pointer; }
.form-switch .form-check-input:checked{ background-color:var(--pine-500); }
.form-check-input:checked{ background-color:var(--pine-500); border-color:var(--pine-500); }
.form-check-input:focus{ box-shadow:var(--ring); }

/* ───────── Alerts ───────── */
.alert{ border:0; border-radius:12px; padding:.85rem 1.1rem; font-weight:500; }
.alert-success{ background:#e7f5ec; color:#115c36; }
.alert-danger{ background:#fdecec; color:#a82833; }
.alert-warning{ background:#fbf3e1; color:#8a6217; }
.alert-info{ background:#e8f1f5; color:#1d5f7a; }
.alert-secondary{ background:#f6f5ee; color:var(--ink-2); }

/* ───────── Footer ───────── */
.footer{ margin-left:0; padding:18px 26px; color:var(--muted); font-size:var(--fs-sm); }

/* ───────── Login ───────── */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:992px){ .auth-shell{ grid-template-columns:480px 1fr; } }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; background:#fff; }
.auth-form-card{ width:100%; max-width:380px; }
.auth-brand{ font-weight:700; font-size:var(--fs-3xl); letter-spacing:-.01em; color:var(--ink); }
.auth-brand .text-primary{ background:var(--grad-brass); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-aside{
    display:none; position:relative; overflow:hidden; color:#fff;
    background:
        radial-gradient(900px 600px at 85% 15%, rgba(201,162,94,.16), transparent 55%),
        linear-gradient(150deg,#11321f 0%,#0e2a1a 45%,#0b2316 100%);
}
@media (min-width:992px){ .auth-aside{ display:flex; align-items:center; } }
.auth-aside::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none'%3E%3Cpath d='M0 60h120M60 0v120' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E");
}
.auth-aside .blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; }
.auth-aside .blob.b1{ width:420px;height:420px; background:radial-gradient(circle at 30% 30%, rgba(201,162,94,.28), rgba(201,162,94,.05)); top:-120px; right:-80px; }
.auth-aside .blob.b2{ width:320px;height:320px; background:rgba(255,255,255,.07); bottom:-100px; left:-60px; }
.auth-aside .content{ position:relative; z-index:2; padding:64px; max-width:560px; }
.auth-aside h1{ font-weight:600; }
.auth-aside h1 em{ font-style:italic; color:#dcc79c; }
.auth-aside .badge{ letter-spacing:.14em; text-transform:uppercase; font-weight:700; }

/* ───────── Responsive sidebar ───────── */
@media (max-width:991.98px){
    .vertical-menu{ transform:translateX(-100%); transition:transform .25s; box-shadow:0 0 40px rgba(0,0,0,.3); }
    body.sidebar-open .vertical-menu{ transform:none; }
    .navbar-brand-box{ width:auto; padding-right:18px; background:transparent; border-bottom:0; }
    .navbar-brand-box img{ background:transparent; padding:0; }
    .navbar-brand-box .logo-txt{ color:var(--ink); }
    .navbar-brand-box .logo-txt .text-primary{ -webkit-text-fill-color:initial; color:var(--pine-600); }
    .main-content{ margin-left:0; }
    body.sidebar-open::after{ content:''; position:fixed; inset:0; top:var(--topbar-h); background:rgba(12,24,17,.5); z-index:1000; }
}

/* chart text inherits the UI face */
.apex-charts text{ font-family:var(--font-google-sans) !important; }

/* ============================================================
   Dashboard components  (all `dsh-` prefixed)
   This stylesheet is shared by every admin page, so the console
   redesign lives behind its own namespace — nothing here can
   collide with Bootstrap or with agents/bookings/payouts/settings.
   ============================================================ */

/* Money and counts line up in columns — a console reads figures far
   more than prose, so proportional digits are the wrong default. */
.dsh-num, .table td, .table th{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.dsh-wrap{ display:flex; flex-direction:column; gap:22px; }

/* ── needs-attention band: severity carried by a stripe + icon,
      so it reads as urgent by form and not by colour alone ── */
.dsh-attn{
    display:flex; align-items:center; gap:14px; padding:.95rem 1.25rem;
    background:#fbf3e1; border:1px solid #f0e2bf; border-left:4px solid #a8771c;
    border-radius:var(--radius);
}
.dsh-attn .ic{ color:#a8771c; display:grid; place-items:center; flex:none; font-size:var(--fs-2xl); }
.dsh-attn .tx{ flex:1; font-size:var(--fs-md); color:#7a5713; }
.dsh-attn .tx b{ color:#5f430c; }
.dsh-attn .acts{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── hero: one headline metric + the pipeline beside it ── */
.dsh-hero{ display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:stretch; }
.dsh-hero > .card{ margin-bottom:0; }
.dsh-lbl{
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.dsh-big{ font-size:2.9rem; font-weight:700; letter-spacing:-.035em; line-height:1.05; margin:.35rem 0 .2rem; }
.dsh-big .cur{ font-size:var(--fs-3xl); font-weight:600; color:var(--muted); margin-right:.12em; }
.dsh-note{ font-size:var(--fs-sm); color:var(--ink-2); }
.dsh-chip{
    display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:700;
    padding:.2rem .5rem; border-radius:7px; background:#e7f5ec; color:#177245;
}

/* ── stage ladder: proportion at a glance, degrades gracefully when
      only one or two stages have data (a donut does not) ── */
.dsh-ladder{ display:flex; flex-direction:column; gap:.7rem; }
.dsh-rung{ display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; align-items:center; }
.dsh-rung .nm{ font-size:var(--fs-sm); color:var(--ink-2); }
.dsh-rung .vl{ font-size:var(--fs-sm); font-weight:700; }
.dsh-rung .bar{ grid-column:1/-1; height:7px; border-radius:6px; background:#f1efe6; overflow:hidden; }
.dsh-rung .fill{ display:block; height:100%; border-radius:6px; }

/* ── compact counter strip ── */
.dsh-counters{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.dsh-ctr{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:.95rem 1.05rem; display:flex; align-items:flex-start; gap:.8rem;
    text-decoration:none; color:inherit; transition:border-color .16s, transform .16s;
}
.dsh-ctr:hover{ border-color:var(--pine-200); transform:translateY(-2px); color:inherit; }
.dsh-ctr .ic{
    width:34px; height:34px; border-radius:10px; background:var(--pine-50); color:var(--pine-600);
    display:grid; place-items:center; flex:none; font-size:var(--fs-lg);
}
.dsh-ctr .n{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.dsh-ctr .l{ font-size:var(--fs-xs); color:var(--ink-2); font-weight:600; }
.dsh-ctr .s{ font-size:var(--fs-2xs); color:var(--muted); }

/* ── inventory: stacked proportion bar + a legend that carries values ── */
.dsh-stack{ display:flex; height:12px; border-radius:7px; overflow:hidden; background:#f1efe6; }
.dsh-stack span{ display:block; }
.dsh-legend{ display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.dsh-lg{ display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); }
.dsh-lg .sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.dsh-lg .nm{ color:var(--ink-2); flex:1; }
.dsh-lg .vl{ font-weight:700; }
.dsh-lg .pc{ color:var(--muted); font-size:var(--fs-xs); min-width:38px; text-align:right; }

/* ── stage pill: state encoded in shape as well as colour ── */
.dsh-pill{
    display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-2xs); font-weight:700;
    padding:.2rem .55rem; border-radius:20px; white-space:nowrap;
}
.dsh-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── jump-to tiles (replaces the old wall of 9 buttons) ── */
.dsh-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.dsh-tile{
    display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem; text-decoration:none;
    border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
    color:var(--ink); font-weight:600; font-size:var(--fs-sm); transition:.16s;
}
.dsh-tile:hover{ border-color:var(--pine-200); background:var(--pine-50); color:var(--pine-700); transform:translateY(-2px); }
.dsh-tile .ic{ color:var(--pine-600); font-size:var(--fs-lg); flex:none; }

@media (max-width:1200px){
    .dsh-hero{ grid-template-columns:1fr; }
    .dsh-counters{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767.98px){
    .dsh-counters{ grid-template-columns:repeat(2,1fr); }
    .dsh-big{ font-size:2.3rem; }
    .dsh-attn{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
    .dsh-ctr, .dsh-tile{ transition:none; }
    .dsh-ctr:hover, .dsh-tile:hover{ transform:none; }
}

/* ============================================================
   Shared page furniture  (`pg-` prefixed)
   Rendered by the x-page-head / x-empty / x-stat components, so
   every admin list, detail and form page picks these up without
   needing to be edited individually.
   ============================================================ */

/* ── section header (x-page-head) ── */
.pg-head{
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
    gap:12px; padding-bottom:1rem; margin-bottom:1.25rem;
    border-bottom:1px solid var(--border-soft);
}
.pg-head h5{ margin:0; font-size:var(--fs-lg); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.pg-head p{ margin:.25rem 0 0; font-size:var(--fs-sm); color:var(--muted); max-width:70ch; }
.pg-head-a{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── empty state (x-empty) ── */
.pg-empty{ text-align:center; padding:3rem 1rem; }
.pg-empty .ic{
    width:52px; height:52px; border-radius:16px; margin:0 auto .9rem;
    display:grid; place-items:center; background:var(--pine-50); color:var(--pine-600);
}
.pg-empty .ic svg{ width:22px; height:22px; }
.pg-empty h6{ margin:0 0 .3rem; font-weight:700; font-size:var(--fs-md); color:var(--ink); }
.pg-empty p{ margin:0 auto; font-size:var(--fs-sm); color:var(--muted); max-width:46ch; }
.pg-empty .act{ margin-top:1.1rem; }

/* ── stat tile (x-stat) — mirrors the dashboard counter strip.
      Keeps the old card's 24px outer spacing so column grids are unchanged. ── */
.pg-stat{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:.95rem 1.05rem; display:flex; align-items:flex-start; gap:.8rem;
    margin-bottom:24px; height:calc(100% - 24px);
    transition:border-color .16s, transform .16s;
}
.pg-stat:hover{ border-color:var(--pine-200); transform:translateY(-2px); }
.pg-stat .ic{
    width:34px; height:34px; border-radius:10px; background:var(--pine-50); color:var(--pine-600);
    display:grid; place-items:center; flex:none;
}
.pg-stat .ic svg{ width:16px; height:16px; }
.pg-stat .tx{ min-width:0; }
.pg-stat .n{
    display:block; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.15;
    font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.pg-stat .l{ display:block; font-size:var(--fs-xs); color:var(--ink-2); font-weight:600; }
.pg-stat .s{ display:block; font-size:var(--fs-2xs); color:var(--muted); font-variant-numeric:tabular-nums; }

/* ── filter bar: reads as a control zone rather than inputs floating
      above the table. Applied per page (class on the GET form). ── */
.pg-filters{
    background:#faf9f3; border:1px solid var(--border-soft); border-radius:var(--radius-sm);
    padding:.85rem; margin-bottom:1.15rem;
}
.pg-filters .form-control, .pg-filters .form-select{ background:#fff; }

/* ── pagination: Bootstrap's default is unstyled against this theme ── */
.pagination{ gap:4px; margin-bottom:0; flex-wrap:wrap; }
.page-link{
    border:1px solid var(--border); border-radius:9px; color:var(--ink-2);
    font-size:var(--fs-sm); font-weight:600; padding:.4rem .7rem; background:#fff; transition:.14s;
}
.page-link:hover{ background:var(--pine-50); color:var(--pine-700); border-color:var(--pine-200); }
.page-link:focus{ box-shadow:var(--ring); }
.page-item.active .page-link{ background:var(--grad); border-color:transparent; color:#fff; }
.page-item.disabled .page-link{ background:#faf9f3; color:#c3c0b2; }

@media (prefers-reduced-motion:reduce){
    .pg-stat{ transition:none; }
    .pg-stat:hover{ transform:none; }
}

/* ============================================================
   Settings page
   These rules lived in an inline <style> in settings.blade.php,
   pinned to a COOL-grey palette (#5b626b / #eef0f2 / #a0a8b0) and
   a different green (#15803d) than the rest of the console — which
   is why the page drifted visually. Re-expressed against the shared
   tokens so it matches everything else and can't drift again.
   ============================================================ */
.settings-page .settings-nav-card{ position:sticky; top:calc(var(--topbar-h) + 18px); }
.settings-page .settings-nav .nav-link{
    display:flex; align-items:center; gap:.7rem; border-radius:10px; color:var(--ink-2);
    font-weight:600; font-size:var(--fs-md); padding:.6rem .8rem; margin-bottom:2px; transition:.15s;
}
.settings-page .settings-nav .nav-link i{ font-size:var(--fs-lg); width:1.35rem; text-align:center; opacity:.8; }
.settings-page .settings-nav .nav-link:hover{ background:var(--pine-50); color:var(--pine-700); }
.settings-page .settings-nav .nav-link.active{
    background:var(--grad); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(201,162,94,.30), 0 8px 18px -10px rgba(21,82,51,.75);
}
.settings-page .settings-nav .nav-link.active i{ opacity:1; }
.settings-page .settings-nav-group{
    display:block; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); padding:.9rem .8rem .3rem;
}
.settings-page .settings-nav-group:first-child{ padding-top:.25rem; }

.settings-page .pane-head{ border-bottom:1px solid var(--border-soft); padding-bottom:.9rem; margin-bottom:1.3rem; }
.settings-page .pane-head h5{ font-size:var(--fs-lg); font-weight:700; letter-spacing:-.015em; margin:0; }
.settings-page .pane-head p{ font-size:var(--fs-sm); color:var(--muted); margin:.22rem 0 0; max-width:70ch; }
.settings-page .pane-icon{
    width:40px; height:40px; border-radius:12px; background:var(--pine-50); color:var(--pine-600);
    display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-xl);
    margin-right:.8rem; flex:none;
}
.settings-page .asset-preview{
    border:1px dashed #d6d3c4; border-radius:12px; background:#faf9f3;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* Sticky save bar — frosted like the topbar so content reads through it.
   Global (not settings-only): any long form can use it. */
.savebar{
    position:sticky; bottom:0; z-index:6;
    background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:.75rem 1.15rem; margin-top:1.1rem;
    box-shadow:0 -6px 22px -10px rgba(22,40,28,.18);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.settings-page textarea.code-area{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--fs-sm); line-height:1.55;
}

/* ============================================================
   Roles page
   ============================================================ */
.pg-role{
    border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem;
    height:100%; display:flex; flex-direction:column; background:var(--surface);
    transition:border-color .16s, transform .16s;
}
.pg-role:hover{ border-color:var(--pine-200); transform:translateY(-2px); }
.pg-role .hd{ display:flex; align-items:center; gap:.65rem; margin-bottom:.7rem; }
.pg-role .ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:var(--fs-xl); flex:none; }
.pg-role .nm{ font-weight:700; letter-spacing:-.01em; }
.pg-role .ds{ font-size:var(--fs-sm); color:var(--muted); flex:1; margin:0 0 .9rem; }
.pg-role .ft{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.pg-role .mt{ display:flex; gap:1rem; font-size:var(--fs-xs); color:var(--muted); }
.pg-role .mt b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* Permission matrix: the header must stay put — scrolling a wide grid of
   ticks with the role columns off-screen is unreadable. */
.perm-matrix{
    max-height:62vh; overflow:auto;
    border:1px solid var(--border-soft); border-radius:var(--radius-sm);
}
.perm-matrix table{ margin:0; }
.perm-matrix thead th{ position:sticky; top:0; z-index:2; background:#faf9f3; box-shadow:inset 0 -1px 0 var(--border); }
.perm-matrix tbody td{ padding:.5rem .8rem; }
.perm-matrix tr.grp td{
    background:#f4f2e9; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    font-size:var(--fs-2xs); color:var(--ink-2);
}

@media (prefers-reduced-motion:reduce){
    .pg-role{ transition:none; }
    .pg-role:hover{ transform:none; }
}

/* ============================================================
   Forms — section rules, repeating rows, tabs
   ============================================================ */

/* Tabs: Bootstrap's default boxed tabs read as a different product
   against this theme. An underline reads as a quieter mode switch. */
.nav-tabs{ border-bottom:1px solid var(--border); gap:2px; }
.nav-tabs .nav-link{
    border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent;
    color:var(--ink-2); font-weight:600; font-size:var(--fs-md); padding:.6rem .9rem; transition:.15s;
}
.nav-tabs .nav-link:hover{ color:var(--pine-700); border-bottom-color:var(--pine-200); }
.nav-tabs .nav-link.active{ color:var(--pine-700); background:transparent; border-bottom-color:var(--pine-600); }

/* Section rule inside a long form — groups fields so a wall of inputs
   becomes a few readable blocks. */
.pg-section{
    display:flex; align-items:center; gap:.75rem;
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin:1.7rem 0 .9rem;
}
.pg-section::after{ content:''; flex:1; height:1px; background:var(--border-soft); }
.pg-section.is-first{ margin-top:.25rem; }

/* Repeating row block (payment history, etc.) */
.pg-rows{ display:flex; flex-direction:column; gap:.6rem; }
.pg-row{
    background:#faf9f3; border:1px solid var(--border-soft);
    border-radius:var(--radius-sm); padding:.75rem;
}