/* ===================================================================
   TRANSREC CRM THEME  •  Fleet-style with Solid Blue Sidebar
   =================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Core palette */
  --brand-blue:   #27718e;  /* Jelly Bean */
  --brand-hover:  #4c9cbc;  /* Fountain Blue */
  --brand-muted:  #84b4c4;  /* Glacier */
  --ink:          #111111;
  --muted:        #6b7280;
  --border:       #e8eaeb;
  --surface:      #ffffff;

  /* Layout */
  --sidebar-w:             264px;
  --sidebar-w-collapsed:   84px;
  --content-gap:           12px;
  --header-h:              88px;
  --radius:                12px;
  --shadow:                0 2px 6px rgba(0,0,0,.05);

  /* Breadcrumb / header */
  --crumb-blue:  #27718e;
  --crumb-muted: #6b7280;
  --crumb-line:  #e9eef4;
  --crumb-bg:    #f7f9fc;

  /* Tables */
  --table-head:  #ffffff;   /* default fallback if not defined elsewhere */
}

/* ---------- Base ---------- */
html, body { height:100%; }
html, body, *, *::before, *::after { box-sizing:border-box; }
body{
  color:var(--ink);
  background:#f7f9fc;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.45;
}
a{ color:var(--brand-blue); text-decoration:none; }
a:hover{ color:var(--brand-hover); }
.small, .text-muted{ color:var(--muted) !important; }

/* ===================================================================
   SIDEBAR • Solid Blue (full height, single scrollbar, footer pinned)
   =================================================================== */
aside#sidebar.nk-sidebar{
  position:fixed; inset:0 auto 0 0;
  width:var(--sidebar-w) !important;
  height:100vh !important;
  background:var(--brand-blue) !important;
  color:#fff !important;
  border-right:0 !important;
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden;                 /* Only inner scroll */
  z-index:1020;
  transition:width .2s ease;
}

/* Brand row */
aside#sidebar .sb-brand{
  height:var(--header-h) !important;
  padding:0 16px;
  display:flex; align-items:center; gap:.65rem;
  background:var(--brand-blue) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
aside#sidebar .sb-brand img{ height:40px !important; width:auto; display:block; }
aside#sidebar .sb-brand .title{
  color:#fff !important;
  font-weight:800;
  font-size:19px;
  white-space:nowrap;
}
aside#sidebar .sb-brand .sb-toggle{
  margin-left:auto; border:0;
  background:transparent; color:#fff; cursor:pointer;
}

/* Scroll area */
aside#sidebar .nk-nav-scroll,
aside#sidebar .slimScrollDiv{
  flex:1 1 auto !important; min-height:0 !important;
  height:auto !important; max-height:none !important;
  overflow-y:auto !important;
  background:transparent !important;
  padding:10px 8px 0;
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* IE/Edge legacy */
}
aside#sidebar .nk-nav-scroll::-webkit-scrollbar,
aside#sidebar .slimScrollDiv::-webkit-scrollbar{ width:0; height:0; }

/* Kill any legacy white backgrounds inside the sidebar */
aside#sidebar ul,
aside#sidebar .metismenu,
aside#sidebar .nk-nav-scroll,
.nk-sidebar ul{ background:transparent !important; }

/* Section labels */
aside#sidebar .metismenu .nav-label{
  padding:12px 14px 6px;
  color:rgba(255,255,255,.75) !important;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* Links (default = white text/icons on blue) */
aside#sidebar .metismenu > li > a,
aside#sidebar .metismenu ul li > a{
  position:relative;
  display:flex; align-items:center; gap:.65rem;
  margin:2px 8px; padding:10px 14px;
  border-radius:10px;
  color:#fff !important; background:transparent !important;
  border-left:3px solid transparent;
  transition:background .15s, color .15s, box-shadow .15s;
}

/* Items with arrows shouldn’t touch the right border */
aside#sidebar .metismenu > li > a.has-arrow{ padding-right:32px !important; }
aside#sidebar .metismenu .has-arrow::after{ right:12px !important; } /* metisMenu arrow */

/* Default icon color */
aside#sidebar .metismenu i,
aside#sidebar .metismenu svg,
aside#sidebar .metismenu svg *{
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}

/* Submenu rail */
aside#sidebar .metismenu ul{
  list-style:none; margin:4px 0 8px 16px; padding-left:10px;
  border-left:1px dashed rgba(255,255,255,.18);
}

/* Hover (not active): translucent */
aside#sidebar .metismenu > li:hover > a:not(.active),
aside#sidebar .metismenu > li:focus > a:not(.active),
aside#sidebar .metismenu ul li:hover > a:not(.active),
aside#sidebar .metismenu ul li:focus > a:not(.active){
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}
aside#sidebar .metismenu > li:hover > a:not(.active) *,
aside#sidebar .metismenu > li:focus > a:not(.active) *,
aside#sidebar .metismenu ul li:hover > a:not(.active) *,
aside#sidebar .metismenu ul li:focus > a:not(.active) *{
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}

/* Active: white chip + brand-blue */
aside#sidebar .metismenu > li.active > a,
aside#sidebar .metismenu > li > a.active,
aside#sidebar .metismenu ul li.active > a,
aside#sidebar .metismenu ul li > a.active{
  background:#fff !important;
  color:var(--brand-blue) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
aside#sidebar .metismenu > li.active > a *,
aside#sidebar .metismenu > li > a.active * ,
aside#sidebar .metismenu ul li.active > a * ,
aside#sidebar .metismenu ul li > a.active *{
  color:var(--brand-blue) !important; fill:var(--brand-blue) !important; stroke:var(--brand-blue) !important;
}

/* Neutralize legacy rule that flips text dark on hover/active */
aside#sidebar.nk-sidebar .metismenu > li:hover span,
aside#sidebar.nk-sidebar .metismenu > li:focus span,
aside#sidebar.nk-sidebar .metismenu > li.active span{
  color:inherit !important;
}

/* Footer pinned at bottom */
aside#sidebar .metismenu{
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--header-h));
  padding-bottom:0 !important;
}
aside#sidebar .sb-footer{
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.12) !important;
  background:transparent !important;
}
aside#sidebar .sb-footer a{ color:#fff !important; font-weight:600; }
aside#sidebar .sb-footer a:hover{ color:#eaf3ff !important; }

/* Collapsed state */
aside#sidebar.sb-collapsed{ width:var(--sidebar-w-collapsed) !important; }
aside#sidebar.sb-collapsed .sb-brand{ justify-content:center; }
aside#sidebar.sb-collapsed .title,
aside#sidebar.sb-collapsed .nav-text,
aside#sidebar.sb-collapsed .nav-label{ display:none !important; }
aside#sidebar.sb-collapsed .metismenu > li > a{ justify-content:center; }
aside#sidebar.sb-collapsed .metismenu ul{ display:none !important; }

/* ===================================================================
   CONTENT OFFSET
   =================================================================== */
.content-body{
  margin-left:calc(var(--sidebar-w) + var(--content-gap)) !important;
  transition:margin-left .2s ease;
  background:#fff;
}
body.sb-collapsed .content-body,
aside#sidebar.sb-collapsed + .content-body{
  margin-left:calc(var(--sidebar-w-collapsed) + var(--content-gap)) !important;
}
.content-body > .container,
.content-body > .container-fluid{ padding-left:12px; padding-right:12px; }

/* ===================================================================
   NAV TABS / FORMS
   =================================================================== */
.nav-tabs{ border-bottom:1px solid var(--border) !important; margin:8px 0 14px; }
.nav-tabs .nav-item{ margin-right:10px; }
.nav-tabs .nav-link{
  padding:10px 12px; border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent !important; color:#111; font-weight:600;
}
.nav-tabs .nav-link:hover{ color:var(--brand-blue); border-bottom-color:rgba(39,113,142,.28); }
.nav-tabs .nav-link.active{ color:var(--brand-blue); border-bottom-color:var(--brand-blue); }

/* Inputs */
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--brand-hover) !important;
  box-shadow:0 0 0 3px rgba(76,156,188,.18) !important; outline:0;
}

/* ===================================================================
   CARDS / SECTIONS
   =================================================================== */
.section-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:.75rem;
  box-shadow:var(--shadow);
  padding:.9rem 1.1rem;
  margin-bottom:1rem;
}
.section-card.soft-card{ background:#f9fbfc; }
.section-hd{ font-weight:600; font-size:.95rem; color:var(--brand-blue); margin-bottom:.75rem; }
.section-bd{ font-size:.875rem; }

/* Key/Value rows */
.kv{ display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px dashed var(--border); }
.kv .k{ font-weight:500; color:#111; }
.kv .v{ text-align:right; color:#333; }
.kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1rem; }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn-brand{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.btn-brand:hover{ background:var(--brand-hover); border-color:var(--brand-hover); color:#fff;}

.btn-outline-brand{
  border:1px solid var(--brand-blue);
  color:var(--brand-blue);
  background:#fff;
}
.btn-outline-brand:hover{ background:var(--brand-blue); color:#fff; }

.page-actions{ display:flex; align-items:center; gap:8px; }
.page-actions .btn{ border-radius:10px; font-weight:600; display:inline-flex; align-items:center; gap:.45rem; }

/* Icon-size utility button */
.btn-icon{
  width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; background:#fff; margin-left:4px;
}
.btn-icon:hover{ border-color:#cbd5e1; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* Bootstrap-flavored overrides, mapped to brand-blue */
.btn-outline-primary{
  color:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
  background:#fff !important;
  border-radius:10px;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color:#fff !important;
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
  box-shadow:0 0 0 .2rem rgba(39,113,142,.20) !important;
}
.btn-primary{
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
  color:#fff !important;
  border-radius:10px;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--brand-hover) !important;
  border-color:var(--brand-hover) !important;
  box-shadow:0 0 0 .2rem rgba(39,113,142,.20) !important;
}
.btn-xs{ padding:.28rem .6rem; font-size:.85rem; border-radius:10px; }

/* ===================================================================
   BADGES / STATUS
   =================================================================== */
.badge, .pill{ border-radius:999px; }
.badge-status{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .6rem; border-radius:20px; font-size:.8rem;
}
.badge-status .dot{ width:.5rem; height:.5rem; border-radius:50%; }
.badge-status.active{ background:#dff6e3; color:#1f7a3d; }
.badge-status.active .dot{ background:#1f7a3d; }
.badge-status.inactive{ background:#ffe5e5; color:#c53030; }
.badge-status.inactive .dot{ background:#c53030; }

/* Profile avatar */
.profile-avatar-lg{
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; background:var(--brand-blue); color:#fff;
}

/* ===================================================================
   TABLES
   =================================================================== */
.table{ width:100%; }
.table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--table-head);
  color:#667085;
  font-size:.72rem;
  text-transform:uppercase; letter-spacing:.02em;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.table tbody td{
  padding:14px 16px; border-bottom:1px solid #f0f2f5; vertical-align:middle;
}
.table-hover tbody tr:hover{ background:#f7fbfd; }

/* DataTables quick styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--brand-blue) !important; color:#fff !important; border:0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--brand-hover) !important; color:#fff !important; border:0 !important;
}

/* ===================================================================
   ACCORDION (forms)
   =================================================================== */
.card, .accordion, .accordion .card{ border:0; background:transparent; }
.card-header, .accordion .card-header{
  background:#fff; border:1px solid var(--border);
  border-radius:10px; margin-bottom:8px; padding:12px 14px;
}
.card-header .btn{ color:#111; font-weight:600; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer .copyright a{
  color:var(--brand-blue) !important;
  font-weight:700;
}
.footer .copyright a:hover{
  color:var(--brand-hover);
}

/* ===================================================================
   PAGE HERO (company + role + avatar)
   =================================================================== */
.page-hero{
  background:#fff;
  border-bottom:1px solid var(--crumb-line);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;           /* slim like your red line */
  position:sticky; top:0; z-index:100;   /* stays under the top app bar */
}
.page-hero .ph-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.page-hero .ph-title{
  font-size:20px; line-height:1.2; font-weight:700; color:var(--brand-blue);
}
.page-hero .ph-sub{
  font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.02em;
}
.page-hero .ph-right{ display:flex; align-items:center; gap:14px; }
.page-hero .ph-user{ display:flex; align-items:center; gap:12px; }
.page-hero .ph-user-meta{ text-align:right; }
.page-hero .ph-user-name{ font-weight:700; color:#0f172a; line-height:1.1; }
.page-hero .ph-user-role{ font-size:12.5px; color:var(--muted); }
.page-hero .ph-avatar{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-blue); color:#fff; font-weight:800;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.08);
  object-fit:cover;
}
.page-hero .ph-initials{ font-size:14px; }

/* ===================================================================
   BREADCRUMBS BAR (tight, below hero)
   =================================================================== */
.row.page-titles.mx-0{ margin:0 !important; }
.row.page-titles .col.p-md-0{ padding:0 !important; }

.row.page-titles{
  background:var(--crumb-bg);
  border-bottom:1px solid var(--crumb-line);
  padding:10px 0;                 /* trimmed vertical space */
}

.row.page-titles .breadcrumb{
  background:transparent;
  margin:0; padding:0 12px;
  display:flex; align-items:center; gap:10px;
}
.row.page-titles .breadcrumb .breadcrumb-item{
  font-weight:500; color:var(--crumb-muted);
  display:inline-flex; align-items:center;
}
.row.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  content:"•";
  color:var(--crumb-muted);
  padding:0 6px;
}
.row.page-titles .breadcrumb .breadcrumb-item a{
  color:var(--crumb-blue);
  text-decoration:none;
}
.row.page-titles .breadcrumb .breadcrumb-item a:hover{
  color:#1f5f77;
  text-decoration:underline;
}

/* Optional inline page title if you print one there */
.page-title-inline{
  font-size:24px;
  font-weight:500;
  color:var(--brand-blue);
  margin:0 12px 0 0;
}

/* Header actions aligned to the right if you place them in same row */
.page-header-actions{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-right:12px;
}

/* ===================================================================
   TABS RAIL (Fleet soft-grey with white active pill)
   =================================================================== */
/* Wrap your tabs with: <ul class="nav nav-tabs tabs-rail"> ... */
.tabs-rail{
  display:flex; align-items:center; gap:8px;
  background:#eef3f7;
  border:1px solid #e3e9ef;
  border-radius:14px;
  padding:6px; margin:0 12px 12px; overflow:auto;
}
.tabs-rail .nav-item{ margin:0; }
.tabs-rail .nav-link{
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--brand-blue) !important;
  font-weight:600; line-height:1; white-space:nowrap;
  border-radius:999px; padding:.6rem 1rem;
}
.tabs-rail .nav-link:hover{
  color:#1f5f77 !important;
  background:rgba(76,156,188,.08) !important;
  border-color:#d9e3ea !important;
}
.tabs-rail .nav-link.active{
  background:#fff !important;
  color:#0b3a4a !important;
  border-color:#d9e3ea !important;
  box-shadow:0 2px 6px rgba(16,24,40,.06) inset, 0 1px 2px rgba(16,24,40,.04);
}

/* ===================================================================
   MISC UTILITIES / FIXES
   =================================================================== */
.row-link{ cursor:pointer; }
.row-link:focus{ outline:2px solid var(--brand-blue); outline-offset:-2px; }

.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:9999px; font-size:.8125rem; }
.pill .dot{ width:.5rem; height:.5rem; border-radius:50%; display:inline-block; }
.pill-active{ background:rgba(20,134,160,.12); color:#0B5666; }
.pill-inactive{ background:#F3F4F6; color:#6B7280; }
.dot-active{ background:#1486A0; }
.dot-inactive{ background:#9CA3AF; }

.avatar{
  width:36px; height:36px; border-radius:50%;
  background:#eef2f6; display:flex; align-items:center; justify-content:center; color:#94a3b8;
}

/* fixed typo + sensible utility */
.font-weight-bold{ font-weight:700; color:var(--brand-blue); }

/* Typography tune */
h1, h2, h3, h4, .section-hd, .card-header .btn, .card-hd{
  font-weight:500 !important;
  color:var(--brand-blue);
}

/* Chips for statuses */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .55rem;border-radius:999px;font-weight:600;font-size:.82rem;border:1px solid transparent}
.chip-pending{background:#fff7ed;border-color:#fed7aa;color:#b45309}   /* warm amber = not completed */
.chip-done{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}      /* green = completed */

/* Profile actions (icons near avatar) */
.profile-actions{display:flex;justify-content:flex-end;gap:8px;margin:6px 0 2px}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid #d9e6ee;background:#fff;color:#27718e;cursor:pointer}
.icon-btn:hover{background:#f2f8fb}
.icon-btn.danger{color:#b42318;border-color:#f3c7c9}
.icon-btn.danger:hover{background:#fff3f3}
.icon-btn.warn{color:#a16207;border-color:#fcd34d}
.icon-btn.warn:hover{background:#fffbeb}
.icon-btn.success{color:#166534;border-color:#86efac}
.icon-btn.success:hover{background:#f0fdf4}


/* Tables: consistent row height */
.table tbody td{ padding:12px 16px; }

/* Trims big gap that sometimes appears after last tab */
.nav-tabs + .tab-content > .tab-pane{ padding-top:0; }
.nav-tabs + .tab-content{ margin-top:6px; }


/* Prevent accidental horizontal scroll */
html, body{ overflow-x:hidden; }

/* ---------- Page fundamentals ---------- */
h1,h2,h3,h4{ color:var(--ink); font-weight:800 }
h3{ font-size:1.35rem; letter-spacing:.1px; margin:0 }
.breadcrumb{ background:transparent; margin:0; padding:0 }
.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a{ color:#6b7280 }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:#9aa3af }
.breadcrumb .breadcrumb-item a:hover{ color:var(--brand-blue) }

.btn{ border-radius:10px; font-weight:600 }
.btn:focus{ box-shadow:0 0 0 3px rgba(76,156,188,.20)!important; outline:0 }
.btn-sm{ padding:.36rem .62rem; border-radius:10px; font-weight:600; line-height:1.25 }
.btn-primary,.btn-brand{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff }
.btn-primary:hover,.btn-brand:hover{ background:var(--brand-hover); border-color:var(--brand-hover) }
.btn-outline-primary,.btn-outline-brand{ background:#fff; color:var(--brand-blue); border:1px solid var(--brand-blue) }
.btn-outline-primary:hover,.btn-outline-brand:hover{ background:var(--brand-blue); color:#fff }
.acc-controls .btn{ border-radius:10px!important; font-weight:600!important; padding:.36rem .62rem!important; line-height:1.25!important; box-shadow:none!important; }

/* Card */
.shadow-panel{ border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow) }

/* Accordion */
.crm-acc .acc-item{ border:1px solid var(--border); border-radius:12px; margin-bottom:12px; background:#fff; box-shadow:0 10px 20px -18px rgba(20,134,160,.35) }
.crm-acc .acc-hd{ min-height:52px; padding:12px 16px; background:#fff; border:0; cursor:pointer; display:flex; align-items:center; gap:.75rem; width:100%; text-align:left }
.crm-acc .acc-hd:hover{ background:rgba(20,134,160,.05) }
.crm-acc .acc-item.open .acc-hd{ background:var(--table-head) }
.crm-acc .acc-hd .icon{ width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:rgba(20,134,160,.18); color:var(--brand-blue) }
.crm-acc .acc-hd .label{ font-weight:600; font-size:.98rem; letter-spacing:.1px }
.crm-acc .caret{ margin-left:auto; font-size:.95rem; color:#6b7280; transition:transform .2s ease }
.crm-acc .acc-item.open .caret{ transform:rotate(180deg) }
.crm-acc .acc-bd{ padding:16px; border-top:1px solid var(--border) }

/* Forms */
.form-group label{ font-weight:600; color:#334155 }
.form-control{ height:42px; border-radius:10px; border:1px solid var(--border) }
.form-control:focus{ border-color:var(--brand-hover)!important; box-shadow:0 0 0 3px rgba(76,156,188,.18)!important; outline:0 }
input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #fff inset!important; -webkit-text-fill-color:var(--ink) }

/* Hero header (optional) */
.page-hero{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); background:#fff }
.ph-title{ font-size:20px; font-weight:700; color:#0b3a4a }
.ph-sub{ font-size:.85rem; color:#6b7280 }
.ph-user{ display:flex; align-items:center; gap:.75rem }
.ph-user-name{ font-weight:700; color:#0b3a4a }
.ph-user-role{ font-size:.85rem; color:#6b7280 }
.ph-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover }
.ph-initials{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#dbeafe; color:#0b3a4a; font-weight:800 }

/* --------- Unified checkbox rows (Training + Toolbox) ---------- */
:root{ --cb-size:28px } /* size of the custom checkbox */

.module-list, .toolbox-list{
  display:grid; grid-template-columns:1fr; gap:12px; margin:0; padding:0; list-style:none;
}
.ucheck{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border:1px solid #e5e7eb; border-radius:16px;
  background:#fff; transition:box-shadow .15s,border-color .15s; position:relative;
}
.ucheck:hover{ border-color:#cfd8e3; box-shadow:0 1px 4px rgba(16,24,40,.08) }

/* kill any theme bullets / fake boxes */
.ucheck::before, .ucheck::after, label.ucheck::before, label.ucheck::after, .ucheck::marker{
  content:none!important; display:none!important;
}

/* hide native checkbox; label still toggles it */
.ucheck > input{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* visual box */
.ucheck .box{
  width:var(--cb-size); height:var(--cb-size);
  border:2px solid #cbd5e1; border-radius:10px;
  background:#fff; display:grid; place-items:center; flex:0 0 auto; box-sizing:border-box; position:relative; overflow:hidden;
  transition:border-color .12s, box-shadow .12s, background .12s;
}

/* tick as inline SVG, always centered */
.ucheck .box::before{
  content:"";
  position:absolute; inset:0;
  background-position:center; background-repeat:no-repeat; background-size:64% 64%;
  opacity:0; transform:scale(.85); transition:opacity .12s ease, transform .12s ease;
}

/* checked state */
.ucheck > input:checked + .box{
  background:var(--brand-blue); border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(39,113,142,.18);
}
.ucheck > input:checked + .box::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13l6 6L20 7'/></svg>");
  opacity:1; transform:scale(1);
}

/* thumbnail */
.thumb{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex:0 0 auto; background:#f2f4f7 }

/* title */
.mod-title{ font-size:1rem; line-height:1.25; font-weight:600; color:#0f172a }

/* hint strip */
.module-hint{
  font-size:.85rem; color:#6b7280; background:#f0f5ff; border:1px solid #d7e3ff;
  padding:10px 12px; border-radius:8px; margin:6px 0 14px;
}

/* Footer link */
.footer .copyright a{ color:var(--brand-blue)!important; font-weight:700 }
.footer .copyright a:hover{ color:var(--brand-hover) }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1199.98px){
  :root{ --sidebar-w:240px; }
}
@media (max-width:991.98px){
  :root{ --sidebar-w:220px; --sidebar-w-collapsed:72px; }
  .kv-grid{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .page-hero{ padding:12px; }
  .page-hero .ph-title{ font-size:18px; }
  .page-hero .ph-user-name{ font-size:13.5px; }
  .page-hero .ph-user-role{ font-size:12px; }
  .page-hero .ph-avatar{ width:36px; height:36px; }
}