/* NetStudy Design System — Bootstrap 5 bridge.
   Link AFTER bootstrap.min.css and AFTER styles.css:
     <link href="bootstrap.min.css">
     <link href="ds/styles.css">
     <link href="ds/ns-bootstrap.css">

   This file changes NO markup. It re-points Bootstrap's own CSS variables and
   the handful of component classes at NetStudy tokens, so existing PHP views
   adopt the design system without being rewritten. Everything below is a
   token reference — never a literal hex. */

:root{
  /* Bootstrap theme colors */
  --bs-primary:var(--ns-blue);
  --bs-primary-rgb:39,90,156;
  --bs-secondary:var(--ns-navy);
  --bs-success:var(--status-success);
  --bs-warning:var(--status-warning);
  --bs-danger:var(--status-danger);
  --bs-info:var(--status-info);
  --bs-light:var(--neutral-50);
  --bs-dark:var(--ns-navy);

  /* Body + surfaces */
  --bs-body-bg:var(--surface-page);
  --bs-body-color:var(--text-body);
  --bs-body-font-family:var(--font-body);
  --bs-body-font-size:var(--text-base);
  --bs-body-line-height:var(--leading-normal);
  --bs-emphasis-color:var(--text-heading);
  --bs-secondary-color:var(--text-muted);

  /* Links */
  --bs-link-color:var(--text-link);
  --bs-link-hover-color:var(--text-link-hover);

  /* Borders + radii */
  --bs-border-color:var(--border-subtle);
  --bs-border-radius:var(--radius-control);
  --bs-border-radius-sm:var(--radius-sm);
  --bs-border-radius-lg:var(--radius-card);
  --bs-border-radius-pill:var(--radius-pill);

  /* Headings use the display face */
  --bs-headings-font-family:var(--font-display);

  /* Shadows */
  --bs-box-shadow-sm:var(--shadow-xs);
  --bs-box-shadow:var(--shadow-sm);
  --bs-box-shadow-lg:var(--shadow-lg);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-base);border-radius:var(--radius-control);transition:var(--transition-control)}
.btn:focus-visible,.btn:focus{box-shadow:var(--focus-ring)}
.btn-primary{--bs-btn-bg:var(--blue-500);--bs-btn-border-color:var(--blue-500);--bs-btn-hover-bg:var(--blue-600);--bs-btn-hover-border-color:var(--blue-600);--bs-btn-active-bg:var(--blue-700);--bs-btn-color:var(--ns-white);--bs-btn-hover-color:var(--ns-white)}
.btn-secondary{--bs-btn-bg:var(--ns-white);--bs-btn-border-color:var(--border-default);--bs-btn-color:var(--text-body);--bs-btn-hover-bg:var(--neutral-50);--bs-btn-hover-border-color:var(--border-strong);--bs-btn-hover-color:var(--text-heading)}
.btn-outline-primary{--bs-btn-color:var(--blue-500);--bs-btn-border-color:var(--blue-500);--bs-btn-hover-bg:var(--blue-50);--bs-btn-hover-color:var(--blue-700);--bs-btn-hover-border-color:var(--blue-500)}
.btn-success{--bs-btn-bg:var(--green-500);--bs-btn-border-color:var(--green-500);--bs-btn-hover-bg:var(--green-600);--bs-btn-hover-border-color:var(--green-600)}
.btn-danger{--bs-btn-bg:var(--status-danger);--bs-btn-border-color:var(--status-danger)}
/* Gold accent = "needs attention" only (renewals, overdue actions). */
.btn-accent{background:var(--gold-400);border:1px solid var(--gold-400);color:var(--ns-black);font-weight:var(--weight-semibold);border-radius:var(--radius-control);padding:.375rem .75rem}
.btn-accent:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--ns-black)}
.btn:active{box-shadow:inset 0 2px 0 rgba(1,42,94,.12)}
.btn:disabled,.btn.disabled{opacity:.48;cursor:not-allowed}

/* ---- Cards ------------------------------------------------------------- */
/* Border AND a whisper of shadow — never one without the other. */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.card-header{background:transparent;border-bottom:1px solid var(--border-subtle);padding:14px var(--card-padding);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);letter-spacing:var(--tracking-tight);color:var(--text-heading)}
.card-body{padding:var(--card-padding)}
.card-footer{background:transparent;border-top:1px solid var(--border-subtle);padding:12px var(--card-padding)}

/* ---- Forms ------------------------------------------------------------- */
.form-label{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-heading);margin-bottom:var(--space-1)}
.form-control,.form-select{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-body);background:var(--ns-white);border:1px solid var(--border-default);border-radius:var(--radius-control);padding:7px 11px;transition:var(--transition-control)}
.form-control:focus,.form-select:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.form-control::placeholder{color:var(--text-subtle)}
.form-control:disabled,.form-select:disabled{background:var(--neutral-50);opacity:.6;cursor:not-allowed}
.form-text{font-size:var(--text-xs);color:var(--text-muted)}
.form-check-input:checked{background-color:var(--blue-500);border-color:var(--blue-500)}
.form-check-input:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.is-invalid,.form-control.is-invalid{border-color:var(--status-danger)}
.invalid-feedback{color:var(--status-danger);font-size:var(--text-xs)}

/* ---- Tables ------------------------------------------------------------ */
.table{--bs-table-bg:transparent;--bs-table-color:var(--text-body);--bs-table-border-color:var(--border-subtle);--bs-table-hover-bg:var(--surface-hover);font-size:var(--text-base);margin-bottom:0}
.table>thead>tr>th{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);background:transparent;border-bottom:1px solid var(--border-default);padding:var(--table-cell-y) var(--table-cell-x);white-space:nowrap}
.table>tbody>tr>td{padding:var(--table-cell-y) var(--table-cell-x);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.table>tbody>tr:last-child>td{border-bottom:0}
.table td .num,.table .tabular{font-variant-numeric:tabular-nums}

/* ---- Badges / status pills -------------------------------------------- */
.badge{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-badge);padding:4px 10px;letter-spacing:0}
/* Status vocabulary is one-to-one with color. Use these, not .bg-* utilities. */
.badge-compliant,.badge-passed{background:var(--status-success-bg);border:1px solid var(--status-success-border);color:var(--green-700)}
.badge-due-soon,.badge-awaiting{background:var(--status-warning-bg);border:1px solid var(--status-warning-border);color:var(--status-warning)}
.badge-overdue,.badge-failed{background:var(--status-danger-bg);border:1px solid var(--status-danger-border);color:var(--status-danger)}
.badge-in-progress{background:var(--status-info-bg);border:1px solid var(--status-info-border);color:var(--status-info)}
.badge-not-started{background:var(--status-neutral-bg);border:1px solid var(--status-neutral-border);color:var(--status-neutral)}

/* ---- Nav / tabs -------------------------------------------------------- */
.nav-tabs{border-bottom:1px solid var(--border-subtle)}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--text-muted);font-weight:var(--weight-semibold);font-size:var(--text-base);padding:10px 14px}
.nav-tabs .nav-link:hover{color:var(--text-heading);background:transparent;border-bottom-color:var(--border-default)}
.nav-tabs .nav-link.active{color:var(--blue-600);background:transparent;border-bottom-color:var(--blue-500)}
.breadcrumb{font-size:var(--text-sm);--bs-breadcrumb-divider-color:var(--text-muted)}
.breadcrumb-item a{color:var(--text-muted)}
.breadcrumb-item.active{color:var(--text-heading)}

/* ---- Sidebar rail ----------------------------------------------------- */
/* Structure: <nav class="ns-sidebar"> logo · .ns-sidebar-nav · client logo </nav> */
.ns-sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--surface-brand-deep);display:flex;flex-direction:column;min-height:100vh}
.ns-sidebar-brand{padding:var(--space-4) 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.ns-sidebar-brand img{height:30px;object-fit:contain}
.ns-sidebar-nav{flex:1;padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.ns-sidebar-nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-control);color:var(--blue-200);font-size:var(--text-base);text-decoration:none;transition:var(--transition-control)}
.ns-sidebar-nav a:hover{background:rgba(255,255,255,.08);color:var(--ns-white);text-decoration:none}
.ns-sidebar-nav a.active{background:var(--surface-brand);color:var(--ns-white);font-weight:var(--weight-semibold)}
.ns-sidebar-nav .ns-sidebar-group{padding:var(--space-4) 10px var(--space-1);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:rgba(189,208,225,.55)}
/* Client / co-brand logo, pinned to the bottom of the rail. White plate so any
   client logo sits legibly on navy. */
.ns-sidebar-client{margin:auto var(--space-4) var(--space-4);padding:var(--space-4);background:var(--ns-white);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;min-height:76px}
.ns-sidebar-client img{max-width:100%;max-height:56px;object-fit:contain}

/* ---- Top bar ---------------------------------------------------------- */
.ns-topbar{height:var(--topbar-height);flex-shrink:0;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}

/* ---- Page header ------------------------------------------------------ */
.ns-page-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-3xl);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-heading);margin:0}
.ns-page-subtitle{font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-muted);margin:var(--space-2) 0 0}

/* ---- Modals / dropdowns / alerts ------------------------------------- */
.modal-content{border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-xl)}
.modal-backdrop.show{background:var(--overlay-scrim);opacity:1;backdrop-filter:blur(2px)}
.modal-header,.modal-footer{border-color:var(--border-subtle)}
.modal-title{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
.dropdown-menu{border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1)}
.dropdown-item{border-radius:var(--radius-sm);font-size:var(--text-base)}
.dropdown-item:active{background:var(--blue-500)}
.alert{border-radius:var(--radius-md);border-width:1px;font-size:var(--text-base)}
.alert-success{background:var(--status-success-bg);border-color:var(--status-success-border);color:var(--green-700)}
.alert-warning{background:var(--status-warning-bg);border-color:var(--status-warning-border);color:var(--status-warning)}
.alert-danger{background:var(--status-danger-bg);border-color:var(--status-danger-border);color:var(--status-danger)}
.alert-info{background:var(--status-info-bg);border-color:var(--status-info-border);color:var(--status-info)}
.progress{background:var(--surface-sunken);border-radius:var(--radius-pill);height:8px}
.progress-bar{background:var(--blue-500);transition:width var(--duration-slow) var(--ease-standard)}
.pagination{--bs-pagination-color:var(--text-body);--bs-pagination-border-color:var(--border-subtle);--bs-pagination-hover-bg:var(--surface-hover);--bs-pagination-active-bg:var(--blue-500);--bs-pagination-active-border-color:var(--blue-500);--bs-pagination-font-size:var(--text-sm)}
.tooltip-inner{background:var(--neutral-900);font-size:var(--text-xs);border-radius:var(--radius-sm)}

/* ---- Layout helpers -------------------------------------------------- */
.ns-app{display:flex;min-height:100vh;background:var(--surface-page)}
.ns-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ns-content{flex:1;padding:var(--space-6);max-width:var(--container-max);width:100%}
.ns-grid-dashboard{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--gutter);align-items:start}
.ns-grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media (max-width:991.98px){.ns-grid-dashboard,.ns-grid-kpi{grid-template-columns:1fr}}