/* ============================================================
   CREATORS SPHERE · Admin Portal — Bootstrap OVERRIDE Skin
   Stack: Bootstrap 5.3.3 + jQuery (loaded FIRST), this file LAST.
   Theme: Creators Sphere (ported from the mobile app).
   Fonts: Bricolage Grotesque (display) + Manrope (body).

   This stylesheet RESKINS Bootstrap's own classes so real-app
   markup inherits the design with no markup changes. A handful of
   bespoke pieces (.stat KPI card, sidebar pill-nav, .drawer, tag
   input, .toast helper) keep custom classes — there is no Bootstrap
   equivalent that matches the look.

   Specificity strategy: load AFTER bootstrap.min.css. Most overrides
   win on equal-or-higher specificity. `!important` is used ONLY where
   Bootstrap ships its own `!important` (utilities) or sets inline-like
   var defaults we must beat.
   ============================================================ */

:root{
  /* Brand */
  --coral:#FF5226; --coral-deep:#E63E16; --orange:#FF9322; --gold:#FFC73E;
  --primary:#FF5226; --on-primary:#fff;
  --peach:#FFF1EB; --sun:#FFF7EC;

  /* Ink scale */
  --ink:#2A1712; --ink-70:#5C4A40; --ink-50:#8C7C71; --ink-30:#C4B8AE;

  /* Surfaces */
  --page:#FBF8F4; --surface:#ffffff; --surface-2:#FFF7EC;
  --hair:#ECE5DE; --border:#ECE5DE;

  /* Status */
  --success:#1F9D5B; --success-bg:#E6F5EC;
  --warn:#D97706;  --warn-bg:#FCEFDD;
  --danger:#E11D48; --danger-bg:#FCE7EC;
  --info:#2563EB;  --info-bg:#E6EEFE;
  --muted-bg:#F1ECE6; --muted-fg:#8C7C71;

  /* Type */
  --font:'Manrope',-apple-system,system-ui,sans-serif;
  --font-display:'Bricolage Grotesque','Manrope',sans-serif;

  /* Shape */
  --r-card:16px; --r-soft:13px; --r-btn:12px; --r-pill:100px; --r-sm:9px;

  /* Elevation (warm, restrained for desktop density) */
  --shadow-sm:0 1px 2px rgba(60,30,15,.05);
  --shadow:0 1px 2px rgba(60,30,15,.05), 0 10px 26px -16px rgba(60,30,15,.28);
  --shadow-lift:0 1px 2px rgba(60,30,15,.06), 0 20px 44px -20px rgba(60,30,15,.36);

  /* Layout */
  --sidebar-w:266px; --topbar-h:64px;

  /* Motion */
  --t-fast:.14s ease; --t:.22s cubic-bezier(.4,0,.2,1);

  /* ---- Map Bootstrap's theme variables onto our palette ---- */
  --bs-primary:#FF5226;
  --bs-primary-rgb:255,82,38;
  --bs-body-color:#2A1712;
  --bs-body-bg:#FBF8F4;
  --bs-body-font-family:'Manrope',-apple-system,system-ui,sans-serif;
  --bs-border-color:#ECE5DE;
  --bs-border-radius:12px;
  --bs-link-color:#E63E16;
  --bs-link-hover-color:#FF5226;
  --bs-secondary-color:#8C7C71;
}

/* ====================== BASE ====================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--page);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
::selection{background:var(--peach);color:var(--coral-deep)}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#E4DAD0;border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#D3C4B7;background-clip:content-box}

/* ====================== APP SHELL (mirrors real app.css ids) ====================== */
/* Topbar — Bootstrap .navbar reskinned via #top-navbar */
#top-navbar.navbar{position:fixed;top:0;left:0;right:0;z-index:1040;min-height:var(--topbar-h);
  padding:0 22px;gap:16px;background:rgba(255,255,255,.85);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border)}
#top-navbar .container-fluid{gap:16px;padding:0;align-items:center}
#top-navbar .navbar-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--ink);padding:0;margin:0;flex-shrink:0}
#top-navbar .navbar-brand .mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-size:15px;background:linear-gradient(135deg,var(--coral),var(--orange));
  box-shadow:0 6px 14px -6px rgba(255,82,38,.7);flex-shrink:0}
#top-navbar .navbar-brand b{color:var(--coral);font-weight:800}

/* Sidebar toggle button */
#sidebarCollapse,#sidebarCollapse.btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:var(--ink-70);display:inline-grid;place-items:center;cursor:pointer;padding:0;
  transition:var(--t-fast)}
#sidebarCollapse:hover{color:var(--coral);border-color:var(--coral);background:var(--peach)}

/* Topbar search box */
.topbar-search{flex:1;max-width:440px;display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:0 15px;height:40px;color:var(--ink-50);
  transition:var(--t-fast)}
.topbar-search:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,82,38,.12)}
.topbar-search input{border:0;background:transparent;outline:0;flex:1;color:var(--ink);font:inherit;font-size:14px}
.topbar-search input::placeholder{color:var(--ink-50)}

/* Topbar icon buttons (notifications) */
#top-navbar .nav-icon-btn{position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--border);
  background:#fff;color:var(--ink-70);display:grid;place-items:center;cursor:pointer;transition:var(--t-fast);font-size:15px}
#top-navbar .nav-icon-btn:hover{color:var(--coral);border-color:var(--coral);background:var(--peach)}
#top-navbar .nav-icon-btn .badge{position:absolute;top:-6px;right:-6px;padding:2px 5px;font-size:10px;font-weight:800}

/* Topbar user chip */
#top-navbar .user-chip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:#fff;cursor:pointer;transition:var(--t-fast);color:var(--ink)}
#top-navbar .user-chip:hover{border-color:var(--ink-30)}
#top-navbar .user-chip .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--coral),var(--gold))}
#top-navbar .user-chip .nm{font-size:13px;font-weight:700;line-height:1.1}
#top-navbar .user-chip .rl{font-size:11px;color:var(--ink-50)}

/* Wrapper + content (mirror real layout: fixed sidebar, content offset) */
.wrapper{display:flex;flex-direction:row;width:100%;align-items:stretch;min-height:calc(100vh - var(--topbar-h));
  padding-top:var(--topbar-h)}

/* Sidebar pill-nav (bespoke — kept) */
#sidebar{position:fixed;top:var(--topbar-h);left:0;height:calc(100vh - var(--topbar-h));
  width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w);
  background:#fff;border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;
  padding:16px 14px 28px;z-index:1020;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
#sidebar.active{margin-left:calc(-1 * var(--sidebar-w))}
#sidebar .nav-section{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-50);padding:14px 12px 6px}
#sidebar .nav-section:first-child{padding-top:2px}
/* top-level toggle + leaf links share the pill look */
#sidebar .nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--ink-70);font-weight:600;font-size:14px;cursor:pointer;transition:var(--t-fast);position:relative}
#sidebar .nav-link i{width:18px;text-align:center;font-size:15px;opacity:.8}
#sidebar .nav-link:hover{background:var(--surface-2);color:var(--ink)}
#sidebar .nav-link .caret{margin-left:auto;font-size:11px;opacity:.6;transition:transform var(--t-fast)}
#sidebar .nav-link[aria-expanded="true"] .caret{transform:rotate(180deg)}
#sidebar .nav-link[aria-expanded="true"]{color:var(--ink)}
/* submenu */
#sidebar .submenu{list-style:none;padding:4px 0 4px 0;margin:0}
#sidebar .submenu .nav-link{padding:8px 12px 8px 42px;font-size:13.5px;font-weight:600;color:var(--ink-50);border-radius:9px}
#sidebar .submenu .nav-link:hover{color:var(--ink);background:var(--surface-2)}
#sidebar .submenu .nav-link[data-active]{background:var(--peach);color:var(--coral-deep)}
#sidebar .submenu .nav-link[data-active]::before{content:"";position:absolute;left:14px;top:9px;bottom:9px;
  width:4px;border-radius:0 4px 4px 0;background:var(--coral)}

/* Content area (mirror real ids) */
#content{flex:1 1 auto;min-width:0;background:var(--page);margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));transition:margin-left .3s,width .3s;position:relative}
#sidebar.active ~ #content{margin-left:0;width:100%}
#content > .container-fluid{padding:26px 30px 64px;max-width:1480px}

/* Sidebar overlay scrim (mobile) */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(42,23,18,.45);
  backdrop-filter:blur(3px);z-index:1019;animation:fade .25s both}
.sidebar-overlay.show{display:block}
@media(min-width:993px){.sidebar-overlay.show{display:none !important}}

/* Page header (used inside .container-fluid) */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head .crumb{font-size:12.5px;color:var(--ink-50);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.page-head .crumb i{font-size:9px}
.page-head h1{font-size:27px;font-weight:800;margin:0}
.page-head p{color:var(--ink-50);font-size:14px;margin-top:4px;margin-bottom:0;max-width:60ch}
.page-head .actions{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ====================== BOOTSTRAP: BUTTONS ====================== */
.btn{font-weight:700;font-size:13.5px;border-radius:var(--r-btn);padding:11px 17px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;white-space:nowrap;
  transition:var(--t-fast);border:1px solid transparent}
.btn i{font-size:13px}
.btn-primary{--bs-btn-bg:var(--coral);--bs-btn-border-color:var(--coral);
  --bs-btn-hover-bg:var(--coral-deep);--bs-btn-hover-border-color:var(--coral-deep);
  --bs-btn-active-bg:var(--coral-deep);--bs-btn-active-border-color:var(--coral-deep);
  --bs-btn-disabled-bg:var(--coral);--bs-btn-disabled-border-color:var(--coral);
  background:var(--coral);border-color:var(--coral);
  color:#fff;box-shadow:0 8px 18px -10px rgba(255,82,38,.8)}
.btn-primary:hover,.btn-primary:focus{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff;transform:translateY(-1px)}
.btn-secondary,.btn-outline-secondary{--bs-btn-color:var(--ink);--bs-btn-bg:#fff;--bs-btn-border-color:var(--border);
  --bs-btn-hover-color:var(--coral);--bs-btn-hover-bg:var(--peach);--bs-btn-hover-border-color:var(--coral);
  --bs-btn-active-color:var(--coral);--bs-btn-active-bg:var(--peach);--bs-btn-active-border-color:var(--coral)}
.btn-outline-primary{--bs-btn-color:var(--coral-deep);--bs-btn-border-color:var(--coral);--bs-btn-bg:#fff;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--coral);--bs-btn-hover-border-color:var(--coral);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--coral-deep);--bs-btn-active-border-color:var(--coral-deep)}
.btn-soft{background:var(--peach);color:var(--coral-deep);border-color:transparent}
.btn-soft:hover{background:#ffe3d6;color:var(--coral-deep)}
.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger);
  --bs-btn-hover-bg:#c4153c;--bs-btn-hover-border-color:#c4153c;color:#fff}
.btn-success{--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success);
  --bs-btn-hover-bg:#178049;--bs-btn-hover-border-color:#178049;color:#fff}
.btn-sm{padding:8px 12px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:var(--r-btn)}
.btn:disabled,.btn.disabled{opacity:.5;transform:none}
/* compact square icon action (for table rows) */
.btn-icon{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--ink-50);
  display:inline-grid;place-items:center;padding:0;font-size:13px;transition:var(--t-fast)}
.btn-icon:hover{color:var(--coral);border-color:var(--coral);background:var(--peach)}
.btn-icon.btn-icon-danger:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}

/* ====================== BOOTSTRAP: CARDS ====================== */
.card{--bs-card-bg:var(--surface);--bs-card-border-color:var(--border);--bs-card-border-radius:var(--r-card);
  --bs-card-inner-border-radius:calc(var(--r-card) - 1px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;gap:12px;padding:18px 20px;background:transparent;
  border-bottom:1px solid var(--border)}
.card-header h3,.card-header .card-title{font-size:16px;font-weight:800;margin:0}
.card-header .sub{font-size:12.5px;color:var(--ink-50);margin-top:2px;font-family:var(--font);font-weight:600}
.card-header .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:20px}
.card-footer{padding:14px 20px;background:transparent;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:12px}

/* ====================== STAT / KPI (bespoke — kept) ====================== */
.card.stat{padding:20px}
.stat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.stat .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-50)}
.stat .chip{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:16px;background:var(--peach);color:var(--coral)}
.stat .chip.g{background:var(--success-bg);color:var(--success)}
.stat .chip.b{background:var(--info-bg);color:var(--info)}
.stat .chip.y{background:var(--sun);color:var(--warn)}
.stat .num{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .meta{display:flex;align-items:center;justify-content:space-between;margin:11px 0 9px;font-size:12.5px;color:var(--ink-50)}
.delta{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12.5px}
.delta.up{color:var(--success)} .delta.down{color:var(--danger)} .delta.flat{color:var(--ink-50)}
.stat .bar{height:7px;border-radius:99px;background:var(--peach);overflow:hidden}
.stat .bar>span{display:block;height:100%;border-radius:99px;background:var(--coral)}
.stat .bar.g>span{background:var(--success)} .stat .bar.y>span{background:var(--gold)} .stat .bar.b>span{background:var(--info)}

/* ====================== BOOTSTRAP: BADGES ====================== */
.badge{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;
  display:inline-flex;align-items:center;gap:5px;line-height:1.2}
/* soft tonal variants (override bg-* on a .badge) */
.badge.bg-success{color:var(--success)!important;background:var(--success-bg)!important}
.badge.bg-info{color:var(--info)!important;background:var(--info-bg)!important}
.badge.bg-warning{color:var(--warn)!important;background:var(--warn-bg)!important}
.badge.bg-danger{color:var(--danger)!important;background:var(--danger-bg)!important}
.badge.bg-secondary{color:var(--muted-fg)!important;background:var(--muted-bg)!important}
.badge.bg-primary{color:var(--coral-deep)!important;background:var(--peach)!important}
/* leading dot (add .badge-dot) */
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.badge.rounded-pill{border-radius:99px}

/* ====================== BOOTSTRAP: TABLES ====================== */
.table{--bs-table-bg:transparent;color:var(--ink);margin:0;vertical-align:middle}
.table>thead>tr>th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-50);padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.table>tbody>tr>td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:13.5px;
  vertical-align:middle;border-top:0}
.table>tbody>tr{transition:background .12s}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:var(--surface-2);background:var(--surface-2)}
.table>tbody>tr:last-child>td{border-bottom:0}
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable i{margin-left:5px;opacity:.5;font-size:10px}
.table .num,.table .text-end{text-align:right}
.table td.num{font-variant-numeric:tabular-nums;font-weight:600}
.cell-main{display:flex;align-items:center;gap:11px}
.cell-main .nm{font-weight:700} .cell-main .sub{font-size:12px;color:var(--ink-50)}
.row-actions{display:inline-flex;gap:6px}
/* table inside a card: clip corners */
.card>.table-responsive:first-child,.card>.table-responsive:last-child{border-radius:inherit}

/* ====================== BOOTSTRAP: FORMS ====================== */
.form-label{font-size:12.5px;font-weight:700;color:var(--ink-70);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.form-label .req{color:var(--coral)}
.form-text{font-size:12px;color:var(--ink-50)}
.form-control,.form-select{border:1.5px solid var(--border);background:#fff;border-radius:var(--r-btn);
  padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);transition:var(--t-fast)}
.form-control::placeholder{color:var(--ink-30)}
.form-control:focus,.form-select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,82,38,.12)}
textarea.form-control{resize:vertical;min-height:96px;line-height:1.5}
.form-select{background-position:right 14px center;padding-right:38px}
.input-group .form-control{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.input-group-text{border:1.5px solid var(--border);background:var(--surface-2);color:var(--coral);
  border-radius:0 var(--r-btn) var(--r-btn) 0;font-size:13px}
/* checkboxes / radios */
.form-check-input{width:18px;height:18px;border:1.5px solid var(--ink-30);background-color:#fff;cursor:pointer;margin-top:.15em}
.form-check-input:checked{background-color:var(--coral);border-color:var(--coral)}
.form-check-input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,82,38,.12)}
.form-check-input[type=checkbox]{border-radius:6px}
.form-check-label{font-size:13.5px;font-weight:600;color:var(--ink-70)}
/* switch */
.form-switch .form-check-input{width:42px;height:24px;border-radius:99px}
.form-switch .form-check-input:checked{background-color:var(--coral);border-color:var(--coral)}

/* ====================== BOOTSTRAP: NAV / PILLS / TABS ====================== */
.nav-pills{--bs-nav-pills-border-radius:11px;gap:2px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:11px;padding:3px;display:inline-flex}
.nav-pills .nav-link{color:var(--ink-50);font-weight:700;font-size:13px;padding:7px 14px;border-radius:8px;
  background:transparent;transition:var(--t-fast)}
.nav-pills .nav-link:hover{color:var(--ink)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background:#fff;color:var(--coral-deep);box-shadow:var(--shadow-sm)}
/* underline tabs */
.nav-tabs{--bs-nav-tabs-border-color:var(--border);border-bottom:1px solid var(--border);gap:4px}
.nav-tabs .nav-link{color:var(--ink-50);font-weight:700;font-size:14px;padding:12px 16px;border:0;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;background:transparent}
.nav-tabs .nav-link:hover{color:var(--ink);border-color:transparent transparent transparent}
.nav-tabs .nav-link.active{color:var(--coral);border-bottom-color:var(--coral);background:transparent}

/* ====================== BOOTSTRAP: DROPDOWN MENU ====================== */
.dropdown-menu{--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--border);--bs-dropdown-border-radius:13px;
  border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lift);padding:6px;min-width:210px}
.dropdown-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--ink-70);transition:var(--t-fast)}
.dropdown-item i{width:16px;text-align:center;font-size:13px;opacity:.8}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2);color:var(--ink)}
.dropdown-item.text-danger:hover{background:var(--danger-bg);color:var(--danger)!important}
.dropdown-divider{border-top:1px solid var(--border);margin:6px 4px;opacity:1}
.dropdown-header{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-50);padding:8px 12px 4px}

/* ====================== BOOTSTRAP: MODAL ====================== */
.modal-content{border:0;border-radius:var(--r-card);box-shadow:var(--shadow-lift);overflow:hidden}
.modal-header{padding:20px 22px;border-bottom:1px solid var(--border)}
.modal-title{font-size:17px;font-weight:800}
.modal-body{padding:22px}
.modal-footer{padding:16px 22px;border-top:1px solid var(--border);gap:10px}
.modal-backdrop{--bs-backdrop-bg:rgba(42,23,18,.45)}
.modal-backdrop.show{opacity:1;backdrop-filter:blur(3px)}

/* ====================== BOOTSTRAP: PAGINATION ====================== */
.pagination{--bs-pagination-color:var(--ink);--bs-pagination-bg:#fff;--bs-pagination-border-color:var(--border);
  --bs-pagination-border-radius:9px;--bs-pagination-hover-color:var(--coral);--bs-pagination-hover-bg:var(--peach);
  --bs-pagination-hover-border-color:var(--coral);--bs-pagination-focus-box-shadow:0 0 0 4px rgba(255,82,38,.12);
  --bs-pagination-active-bg:var(--coral);--bs-pagination-active-border-color:var(--coral);
  --bs-pagination-disabled-color:var(--ink-30);--bs-pagination-disabled-bg:#fff;--bs-pagination-disabled-border-color:var(--border);
  gap:5px}
.page-link{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;border-radius:9px}
.page-item:not(:first-child) .page-link{margin-left:0}
.page-item.active .page-link{color:#fff}

/* ====================== BOOTSTRAP: BREADCRUMB ====================== */
.breadcrumb{--bs-breadcrumb-divider-color:var(--ink-30);font-size:12.5px;font-weight:600;margin:0}
.breadcrumb-item,.breadcrumb-item a{color:var(--ink-50)}
.breadcrumb-item.active{color:var(--ink)}

/* ====================== BOOTSTRAP: LIST GROUP ====================== */
.list-group{--bs-list-group-border-color:var(--border);--bs-list-group-border-radius:var(--r-soft);
  --bs-list-group-bg:transparent;--bs-list-group-action-hover-bg:var(--surface-2)}
.list-group-flush>.list-group-item{padding:13px 0;border-color:var(--border)}
.list-group-item{font-size:14px}
.list-group-item .nm{font-weight:700} .list-group-item .sub{font-size:12px;color:var(--ink-50)}

/* ====================== AVATARS (bespoke — kept) ====================== */
.avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:14px;
  color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--coral),var(--gold))}
.avatar.sm{width:30px;height:30px;border-radius:9px;font-size:12px}
.avatar.lg{width:64px;height:64px;border-radius:18px;font-size:24px}
.avatar.c2{background:linear-gradient(135deg,var(--info),#7DA7FF)}
.avatar.c3{background:linear-gradient(135deg,var(--success),#7AE0AC)}
.avatar.c4{background:linear-gradient(135deg,#7C3AED,#C4A5F7)}
.avatar.c5{background:linear-gradient(135deg,var(--danger),#FB7DA0)}

/* ====================== TAG INPUT (bespoke — kept) ====================== */
.taginput{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1.5px solid var(--border);
  border-radius:var(--r-btn);padding:9px 11px;background:#fff;min-height:46px}
.taginput:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,82,38,.12)}
.taginput .tagpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;
  border-radius:8px;background:var(--peach);color:var(--coral-deep)}
.taginput .tagpill .x{cursor:pointer;opacity:.7} .taginput .tagpill .x:hover{opacity:1}
.taginput input{border:0;outline:0;flex:1;min-width:90px;font:inherit;font-size:14px;color:var(--ink);background:transparent}

/* ====================== SIDE DRAWER (bespoke — kept; extends old .sheet) ====================== */
.drawer-scrim,.sheet-scrim{position:fixed;inset:0;background:rgba(42,23,18,.45);backdrop-filter:blur(3px);
  z-index:1050;display:none}
.drawer-scrim.show,.sheet-scrim.show{display:block;animation:fade .2s both}
.drawer,.sheet{position:fixed;top:0;right:0;height:100vh;width:min(480px,92vw);background:#fff;z-index:1055;
  box-shadow:var(--shadow-lift);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.drawer.show,.sheet.show{transform:none}
.drawer-head,.sheet-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border)}
.drawer-head h3,.sheet-head h3{font-size:17px;font-weight:800;margin:0}
.drawer-body,.sheet-body{padding:22px;overflow-y:auto;flex:1}
.drawer-foot,.sheet-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px}

/* Smooth scrolling for responsive tables on iOS */
.table-responsive{-webkit-overflow-scrolling:touch}

/* ====================== TOASTS (bespoke — kept; toast() helper) ====================== */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:1100;display:flex;flex-direction:column;gap:10px}
.cs-toast{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);
  border-left:4px solid var(--coral);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-lift);
  min-width:280px;animation:slidein .3s both;font-size:13.5px;font-weight:600}
.cs-toast.ok{border-left-color:var(--success)} .cs-toast.ok>i{color:var(--success)}
.cs-toast.err{border-left-color:var(--danger)} .cs-toast.err>i{color:var(--danger)}
.cs-toast>i{font-size:16px;color:var(--coral)}
.cs-toast .x{margin-left:auto;cursor:pointer;color:var(--ink-30)}

/* ====================== SUPPORTING BITS ====================== */
.pill{font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--peach);color:var(--coral-deep);display:inline-flex;align-items:center;gap:6px}
.tagpill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;background:var(--surface-2);color:var(--ink-70);border:1px solid var(--border);display:inline-flex;align-items:center;gap:6px}
.chart{position:relative;width:100%}
.chart.h-220{height:220px} .chart.h-260{height:260px} .chart.h-300{height:300px}
.empty{text-align:center;padding:54px 24px}
.empty .ic{width:72px;height:72px;border-radius:22px;background:var(--peach);color:var(--coral);display:grid;place-items:center;font-size:30px;margin:0 auto 16px}
.empty h3{font-size:18px;font-weight:800} .empty p{color:var(--ink-50);font-size:14px;margin:6px auto 18px;max-width:42ch}
.muted{color:var(--ink-50)!important}

/* ====================== ANIMATIONS ====================== */
.reveal{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ====================== RESPONSIVE ====================== */

/* ---- Tablet (≤992px): sidebar off-screen by default, toggle shows it ---- */
@media (max-width: 992px) {
  #sidebar {
    margin-left: calc(-1 * var(--sidebar-w));
  }
  #sidebar.active {
    margin-left: 0;
    box-shadow: var(--shadow-lift);
    z-index: 1025;
  }
  #content {
    margin-left: 0;
    width: 100%;
  }
  #sidebar.active ~ #content {
    margin-left: 0;
    width: 100%;
  }
  .topbar-search {
    display: none;
  }
}

/* ---- Mobile (≤768px): content padding, stacking, drawers full-width ---- */
@media (max-width: 768px) {
  #content > .container-fluid {
    padding: 22px 20px 56px;
  }

  /* Page header: stack vertically */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-head .actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  /* KPI stat cards: smaller numbers */
  .stat .num {
    font-size: 26px;
  }

  /* Card footer / pagination: stack on mobile */
  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .card-footer .pagination {
    align-self: flex-end;
  }

  /* Tables: smaller text on mobile */
  .table > thead > tr > th {
    padding: 10px 12px;
    font-size: 10px;
  }
  .table > tbody > tr > td {
    padding: 11px 12px;
    font-size: 12.5px;
  }

  /* Smooth scrolling for table-responsive on iOS */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Drawers: full-width on mobile */
  .drawer, .sheet {
    width: 100%;
    max-width: 100%;
  }

  /* Vetting drawer two-column layout: stack */
  .all-vetting-data {
    flex-direction: column;
  }
  .all-vetting-data .col {
    flex: 1 1 auto;
    width: 100%;
    min-width: 100%;
  }

  /* Nav tabs: horizontally scrollable */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
  }

  /* Modal: more compact */
  .modal-dialog {
    margin: 10px;
  }
  .modal-body {
    padding: 16px;
  }

  /* Page head tighter */
  .page-head h1 {
    font-size: 22px;
  }
  .page-head p {
    font-size: 13px;
  }

  /* Topbar compact */
  #top-navbar {
    padding: 0 14px;
  }
}

/* ---- Small phones (≤576px): extra tightening ---- */
@media (max-width: 576px) {
  #content > .container-fluid {
    padding: 16px 12px 44px;
  }

  #top-navbar .user-chip .nm,
  #top-navbar .user-chip .rl {
    display: none;
  }
  #top-navbar .user-chip {
    padding: 5px 8px 5px 4px;
  }
  #top-navbar {
    padding: 0 10px;
  }

  /* Brand: smaller gap, smaller font for text */
  #top-navbar .navbar-brand {
    gap: 7px;
    font-size: 15px;
  }

  /* Toggle button: tighter on small screens */
  #sidebarCollapse, #sidebarCollapse.btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  /* Page head */
  .page-head h1 {
    font-size: 20px;
  }

  /* KPI cards: smaller */
  .stat .num {
    font-size: 22px;
  }
  .stat {
    padding: 16px;
  }

  /* Card header / body tighter */
  .card-header {
    padding: 14px 16px;
  }
  .card-body {
    padding: 16px;
  }

  /* Drawer head/body/foot compact */
  .drawer-head, .sheet-head {
    padding: 14px 16px;
  }
  .drawer-body, .sheet-body {
    padding: 16px;
  }
  .drawer-foot, .sheet-foot {
    padding: 12px 16px;
  }

  /* Toasts: full-width anchored to bottom */
  .toast-wrap {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .cs-toast {
    min-width: auto;
  }

  /* Page head action buttons: full-width on small phones */
  .page-head .actions {
    flex-direction: column;
    gap: 8px;
  }
  .page-head .actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Nav pills: compact */
  .nav-pills .nav-link {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Modal header compact */
  .modal-header {
    padding: 14px 16px;
  }
  .modal-footer {
    padding: 12px 16px;
  }

  /* Table row actions: more gap for touch */
  .row-actions {
    gap: 8px;
  }
}

/* ====================== MOBILE DATA CARDS (shared) ====================== */
.mobile-card-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.mobile-data-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.mobile-data-card .card-body { padding: 14px; }
.mobile-data-card .card-header-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.mobile-data-card .card-header-row .avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.mobile-data-card .card-header-row .info { flex: 1; min-width: 0; }
.mobile-data-card .card-header-row .info .title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.mobile-data-card .card-header-row .info .title a { color: var(--ink); text-decoration: none; }
.mobile-data-card .card-header-row .info .sub { font-size: 11.5px; color: var(--ink-50); margin-top: 2px; }
.mobile-data-card .card-details { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-bottom: 8px; }
.mobile-data-card .card-details .detail-item { color: var(--ink-50); }
.mobile-data-card .card-details .detail-item strong { color: var(--ink); font-weight: 600; }
.mobile-data-card .card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mobile-data-card .card-actions .btn-icon { width: 30px; height: 30px; border-radius: 7px; font-size: 12px; }
.mobile-data-card .card-actions .btn-icon.btn-sm { width: 28px; height: 28px; font-size: 11px; }
.mobile-data-card .badge { font-size: 10.5px; padding: 3px 8px; }

@media (min-width: 768px) {
  .mobile-card-list { display: none; }
}