/* =========================================================================
   CDEC CAMEROUN — styles.css — Thème SaaS Entreprise
   ========================================================================= */

:root{
  --navy-950:#0b1220; --navy-900:#0f1b2d; --navy-800:#16273e; --navy-700:#1e3350; --navy-600:#28456c;
  --ink-900:#111827; --ink-700:#374151; --ink-500:#6b7280; --ink-400:#9ca3af; --ink-200:#e5e7eb; --ink-100:#f1f3f6; --ink-50:#f8f9fb;
  --brand:#0e6b52; --brand-dark:#0a4f3d; --brand-light:#e6f4ef;
  --accent-red:#c1272d; --accent-yellow:#f2b90a;
  --blue:#2563eb; --blue-light:#e8f0fe;
  --amber:#b45309; --amber-light:#fef3c7;
  --green:#15803d; --green-light:#dcfce7;
  --teal:#0f766e; --teal-light:#ccfbf1;
  --violet:#6d28d9; --violet-light:#ede9fe;
  --red:#b91c1c; --red-light:#fee2e2;
  --gray:#4b5563; --gray-light:#f1f3f6;
  --slate:#475569; --slate-light:#e2e8f0;
  --radius:10px; --radius-sm:6px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --sidebar-w:264px; --topbar-h:60px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--ink-50); color:var(--ink-900); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 4px; font-weight:600; color:var(--ink-900);}
p{margin:0 0 8px;}
ul{margin:0; padding:0;}
button{font-family:inherit;}
::selection{background:var(--brand-light);}

/* ---------- Utility ---------- */
.hidden{display:none !important;}
.muted{color:var(--ink-500);}
.small{font-size:12px;}
.mono{font-family:"Consolas","SF Mono",Menlo,monospace;}
.flex{display:flex;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.w-full{width:100%;}
.text-right{text-align:right;}
.nowrap{white-space:nowrap;}

/* ---------- App Shell ---------- */
#app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--navy-950);
  color:#cfd8e3; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-badge{
  width:38px; height:38px; border-radius:9px; flex:0 0 38px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.brand-text .t1{color:#fff; font-weight:700; font-size:14.5px; letter-spacing:.3px;}
.brand-text .t2{color:#8aa0bd; font-size:11px;}

.sidebar-role{
  margin:14px 14px 6px; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px;
}
.role-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; flex:0 0 32px;
}
.role-meta .rn{color:#fff; font-size:12.5px; font-weight:600;}
.role-meta .rr{color:#8aa0bd; font-size:11px;}

.sidebar-nav{flex:1; padding:10px 10px 16px; overflow-y:auto;}
.nav-section{margin-top:14px;}
.nav-section:first-child{margin-top:2px;}
.nav-section-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#5f7793; padding:0 10px 6px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#c4d0e0;
  font-size:13px; cursor:pointer; margin-bottom:2px; border:1px solid transparent;
}
.nav-item svg{flex:0 0 16px; width:16px; height:16px; opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none;}
.nav-item.active{background:rgba(14,107,82,.35); border-color:rgba(14,107,82,.6); color:#fff;}
.nav-item .badge-count{
  margin-left:auto; background:var(--accent-red); color:#fff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:20px;
}

.sidebar-footer{padding:12px 16px 16px; border-top:1px solid rgba(255,255,255,.08);}
.btn-logout{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#cfd8e3;
  padding:9px; border-radius:8px; cursor:pointer; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-logout:hover{background:rgba(255,255,255,.12); color:#fff;}

/* ---------- Main area ---------- */
.main-col{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--ink-200); display:flex; align-items:center;
  justify-content:space-between; padding:0 22px; position:sticky; top:0; z-index:20;
}
.topbar-left{display:flex; align-items:center; gap:14px;}
.breadcrumb{font-size:12.5px; color:var(--ink-500);}
.breadcrumb b{color:var(--ink-900); font-weight:600;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.icon-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--ink-200); background:#fff; display:flex;
  align-items:center; justify-content:center; cursor:pointer; position:relative; color:var(--ink-700);
}
.icon-btn:hover{background:var(--ink-100);}
.icon-btn .dot{
  position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--accent-red); border:2px solid #fff;
}
.lang-pill{font-size:11.5px; border:1px solid var(--ink-200); border-radius:20px; padding:4px 10px; color:var(--ink-700); background:#fff; cursor:pointer;}

.lang-switch{display:inline-flex; border:1px solid var(--ink-200); border-radius:20px; padding:2px; background:#fff; gap:2px;}
.lang-btn{
  border:none; background:transparent; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--ink-500);
  padding:5px 12px; border-radius:16px; cursor:pointer;
}
.lang-btn:hover{color:var(--ink-800);}
.lang-btn.active{background:var(--brand); color:#fff;}
.login-main .lang-switch{float:right;}

.content{padding:22px 26px 60px; flex:1;}
.page-header{margin-bottom:18px;}
.page-header .kicker{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:700; margin-bottom:4px;}
.page-header h1{font-size:21px;}
.page-header .desc{color:var(--ink-500); font-size:13px; max-width:760px;}
.page-actions{display:flex; gap:10px; align-items:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:.12s;
}
.btn svg{width:14px; height:14px;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-secondary{background:#fff; color:var(--ink-700); border-color:var(--ink-200);}
.btn-secondary:hover{background:var(--ink-100);}
.btn-danger{background:#fff; color:var(--red); border-color:#f3c6c6;}
.btn-danger:hover{background:var(--red-light);}
.btn-success{background:var(--green); color:#fff;}
.btn-success:hover{background:#0f5e2c;}
.btn-ghost{background:transparent; color:var(--ink-700); border-color:transparent;}
.btn-ghost:hover{background:var(--ink-100);}
.btn-sm{padding:5px 10px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-block{width:100%; justify-content:center;}

/* ---------- Cards / KPI ---------- */
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1200px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

.card{background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.card-pad{padding:18px 20px;}
.card-header{padding:16px 20px; border-bottom:1px solid var(--ink-100); display:flex; align-items:center; justify-content:space-between;}
.card-header h3{font-size:14.5px;}
.card-header .sub{font-size:12px; color:var(--ink-500); font-weight:400;}

.kpi-card{padding:18px 20px; display:flex; flex-direction:column; gap:6px;}
.kpi-card .kpi-label{font-size:12px; color:var(--ink-500); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.kpi-card .kpi-value{font-size:25px; font-weight:700; color:var(--ink-900);}
.kpi-card .kpi-trend{font-size:11.5px; color:var(--green); font-weight:600;}
.kpi-card .kpi-trend.down{color:var(--red);}
.kpi-icon{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
table.data-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500);
  padding:10px 14px; border-bottom:1px solid var(--ink-200); background:var(--ink-50); white-space:nowrap; font-weight:700;
}
table.data-table tbody td{padding:11px 14px; border-bottom:1px solid var(--ink-100); color:var(--ink-800); vertical-align:middle;}
table.data-table tbody tr:hover{background:var(--ink-50);}
table.data-table tbody tr:last-child td{border-bottom:none;}
.row-link{cursor:pointer;}
.row-link:hover td:first-child{color:var(--brand); font-weight:600;}

/* ---------- Badges / status ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700;
  white-space:nowrap; border:1px solid transparent;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-gray{background:var(--gray-light); color:var(--gray);}
.badge-blue{background:var(--blue-light); color:var(--blue);}
.badge-amber{background:var(--amber-light); color:var(--amber);}
.badge-green{background:var(--green-light); color:var(--green);}
.badge-teal{background:var(--teal-light); color:var(--teal);}
.badge-violet{background:var(--violet-light); color:var(--violet);}
.badge-red{background:var(--red-light); color:var(--red);}
.badge-slate{background:var(--slate-light); color:var(--slate);}

.dept-tag{font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--brand-light); color:var(--brand-dark);}

/* ---------- Forms ---------- */
.form-section{margin-bottom:22px;}
.form-section-title{
  font-size:12.5px; font-weight:700; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.04em;
  padding-bottom:8px; margin-bottom:14px; border-bottom:2px solid var(--brand-light); display:flex; align-items:center; gap:8px;
}
.form-section-title .n{
  width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; font-size:11px; display:flex;
  align-items:center; justify-content:center; flex:0 0 20px;
}
.field-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px;}
.field-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .field-grid,.field-grid.cols-3{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:5px;}
.field.span-2{grid-column:span 2;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-700);}
.field label .req{color:var(--red); margin-left:2px;}
.field .hint{font-size:11px; color:var(--ink-400);}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=url],input[type=tel],input[type=password],select,textarea{
  border:1px solid var(--ink-200); border-radius:8px; padding:9px 11px; font-size:13px; color:var(--ink-900);
  background:#fff; width:100%; font-family:inherit;
}
textarea{resize:vertical; min-height:70px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);}
input::placeholder,textarea::placeholder{color:var(--ink-400);}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-700);}

/* ---------- Upload ---------- */
.upload-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media (max-width:900px){.upload-grid{grid-template-columns:1fr;}}
.upload-item{
  display:flex; align-items:center; justify-content:space-between; border:1px dashed var(--ink-200); border-radius:9px;
  padding:11px 13px; background:var(--ink-50);
}
.upload-item.done{border-style:solid; border-color:var(--green-light); background:var(--green-light);}
.upload-item .ui-left{display:flex; align-items:center; gap:10px;}
.upload-item .ui-icon{
  width:30px; height:30px; border-radius:7px; background:#fff; border:1px solid var(--ink-200); display:flex;
  align-items:center; justify-content:center; color:var(--ink-500); flex:0 0 30px;
}
.upload-item.done .ui-icon{color:var(--green); border-color:var(--green-light);}
.upload-item .ui-name{font-size:12.5px; font-weight:600; color:var(--ink-800);}
.upload-item .ui-req{font-size:10.5px; color:var(--ink-500);}

/* ---------- Stepper / Workflow ---------- */
.stepper{display:flex; align-items:flex-start; overflow-x:auto; padding:6px 2px 14px;}
.step{display:flex; flex-direction:column; align-items:center; flex:1; min-width:120px; position:relative;}
.step .dot{
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--ink-200); color:var(--ink-400);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; z-index:2;
}
.step .line{position:absolute; top:15px; left:50%; width:100%; height:2px; background:var(--ink-200); z-index:1;}
.step:last-child .line{display:none;}
.step .label{margin-top:8px; font-size:11.5px; text-align:center; color:var(--ink-500); font-weight:600; max-width:110px;}
.step.done .dot{background:var(--brand); border-color:var(--brand); color:#fff;}
.step.done .line{background:var(--brand);}
.step.current .dot{background:#fff; border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 4px var(--brand-light);}
.step.current .label{color:var(--brand-dark);}

.timeline{border-left:2px solid var(--ink-200); margin-left:8px; padding-left:20px;}
.timeline-item{position:relative; padding-bottom:18px;}
.timeline-item::before{content:""; position:absolute; left:-25.5px; top:2px; width:11px; height:11px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 0 0 2px var(--brand);}
.timeline-item .ti-title{font-size:13px; font-weight:700; color:var(--ink-900);}
.timeline-item .ti-meta{font-size:11.5px; color:var(--ink-500); margin-top:2px;}
.timeline-item .ti-note{font-size:12.5px; color:var(--ink-700); margin-top:4px; background:var(--ink-50); padding:8px 10px; border-radius:7px;}

/* Kanban */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:260px; gap:14px; overflow-x:auto; padding-bottom:10px;}
.kanban-col{background:var(--ink-50); border:1px solid var(--ink-200); border-radius:12px; padding:12px; min-height:120px;}
.kanban-col-title{font-size:12px; font-weight:700; color:var(--ink-700); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
.kanban-count{background:#fff; border:1px solid var(--ink-200); border-radius:20px; font-size:10.5px; padding:1px 8px; color:var(--ink-500);}
.kanban-card{background:#fff; border:1px solid var(--ink-200); border-radius:9px; padding:10px 12px; margin-bottom:9px; box-shadow:var(--shadow-sm); cursor:pointer;}
.kanban-card:hover{border-color:var(--brand);}
.kanban-card .kc-title{font-size:12.5px; font-weight:700; color:var(--ink-900); margin-bottom:3px;}
.kanban-card .kc-meta{font-size:11px; color:var(--ink-500);}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--ink-200); margin-bottom:18px;}
.tab{padding:10px 4px; margin-right:20px; font-size:13px; font-weight:600; color:var(--ink-500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab.active{color:var(--brand-dark); border-color:var(--brand);}

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1100px 550px at 15% -10%, #163350 0%, var(--navy-950) 55%), linear-gradient(180deg,var(--navy-950),var(--navy-900));
  padding:30px;
}
.login-wrap{width:100%; max-width:1080px; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35);}
@media (max-width:880px){.login-wrap{grid-template-columns:1fr;}}
.login-side{
  background:linear-gradient(160deg, var(--navy-900) 0%, var(--brand-dark) 130%); color:#fff; padding:44px 38px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.login-side::after{content:""; position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.05);}
.login-side .flag-strip{display:flex; height:5px; width:56px; border-radius:3px; overflow:hidden; margin-bottom:22px;}
.login-side .flag-strip span{flex:1;}
.login-side h2{font-size:22px; line-height:1.35; margin-bottom:10px; color:#fff;}
.login-side p{color:#c9d6e5; font-size:13px; line-height:1.6;}
.login-feature{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:#dbe6f2;}
.login-feature svg{flex:0 0 16px; margin-top:2px; color:#8fd6bd;}
.login-main{padding:44px 42px;}
.login-main h1{font-size:20px; margin-bottom:4px;}
.login-main .sub{color:var(--ink-500); font-size:13px; margin-bottom:26px;}
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.role-card{
  border:1.5px solid var(--ink-200); border-radius:12px; padding:14px; cursor:pointer; text-align:left; background:#fff;
}
.role-card:hover{border-color:var(--brand); background:var(--brand-light);}
.role-card.selected{border-color:var(--brand); background:var(--brand-light); box-shadow:0 0 0 3px rgba(14,107,82,.12);}
.role-card .rc-icon{width:32px; height:32px; border-radius:8px; background:var(--ink-100); display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--brand-dark);}
.role-card .rc-title{font-size:12.5px; font-weight:700; color:var(--ink-900);}
.role-card .rc-sub{font-size:11px; color:var(--ink-500); margin-top:2px;}
.demo-user-list{border:1px solid var(--ink-200); border-radius:10px; overflow:hidden; margin-bottom:16px;}
.demo-user{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; font-size:12.5px; border-bottom:1px solid var(--ink-100); cursor:pointer;}
.demo-user:last-child{border-bottom:none;}
.demo-user:hover{background:var(--ink-50);}
.demo-user.selected{background:var(--brand-light);}
.demo-user .du-name{font-weight:600; color:var(--ink-900);}
.demo-user .du-fn{color:var(--ink-500); font-size:11.5px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(11,18,32,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal{background:#fff; border-radius:14px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.modal-header{padding:18px 22px; border-bottom:1px solid var(--ink-100); display:flex; align-items:center; justify-content:space-between;}
.modal-header h3{font-size:15.5px;}
.modal-body{padding:20px 22px;}
.modal-footer{padding:16px 22px; border-top:1px solid var(--ink-100); display:flex; justify-content:flex-end; gap:10px;}
.modal-close{cursor:pointer; color:var(--ink-400); font-size:20px; line-height:1; background:none; border:none;}

/* ---------- Toast ---------- */
#toast-wrap{position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--navy-950); color:#fff; padding:12px 16px; border-radius:10px; font-size:12.5px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px; min-width:260px; border-left:4px solid var(--brand);
  animation:slideIn .18s ease-out;
}
.toast.success{border-left-color:var(--green);}
.toast.error{border-left-color:var(--red);}
@keyframes slideIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* ---------- Misc components ---------- */
.info-box{display:flex; gap:10px; padding:12px 14px; border-radius:10px; font-size:12.5px; line-height:1.5;}
.info-box.ai{background:var(--violet-light); color:#4c1d95;}
.info-box.ok{background:var(--green-light); color:#14532d;}
.info-box.warn{background:var(--amber-light); color:#78350f;}
.info-box svg{flex:0 0 18px; margin-top:1px;}

.kv-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.kv-list .kv-item .k{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); margin-bottom:2px;}
.kv-list .kv-item .v{font-size:13.5px; color:var(--ink-900); font-weight:600;}

.progress-bar{height:6px; background:var(--ink-100); border-radius:20px; overflow:hidden;}
.progress-bar > span{display:block; height:100%; background:var(--brand); border-radius:20px;}

.empty-state{text-align:center; padding:50px 20px; color:var(--ink-500);}
.empty-state svg{color:var(--ink-300); margin-bottom:10px;}

.doc-thumb{
  width:100%; aspect-ratio:1/1.2; background:var(--ink-100); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink-400);
}

.qr-box{
  width:150px; height:150px; background:#fff; border:1px solid var(--ink-200); border-radius:10px; display:flex; align-items:center; justify-content:center; padding:10px;
}

.search-bar{
  display:flex; align-items:center; gap:8px; border:1px solid var(--ink-200); border-radius:9px; padding:8px 12px; background:#fff; flex:1; max-width:340px;
}
.search-bar input{border:none; outline:none; font-size:13px; width:100%;}
.search-bar svg{color:var(--ink-400); flex:0 0 15px;}

.filter-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.filter-row select{width:auto; padding:7px 10px; font-size:12.5px;}

.pagination{display:flex; align-items:center; justify-content:space-between; padding:12px 4px; font-size:12px; color:var(--ink-500);}
.pagination .pg-btns{display:flex; gap:6px;}
.pg-btn{width:28px; height:28px; border:1px solid var(--ink-200); border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-700);}
.pg-btn.active{background:var(--brand); color:#fff; border-color:var(--brand);}

.chart-bars{display:flex; align-items:flex-end; gap:14px; height:180px; padding-top:10px;}
.chart-bars .cb-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.chart-bars .cb-stack{width:100%; max-width:34px; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden;}
.chart-bars .cb-label{font-size:10.5px; color:var(--ink-500);}

.hbar-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.hbar-row .hb-label{width:150px; font-size:12px; color:var(--ink-700); flex:0 0 150px;}
.hbar-row .hb-track{flex:1; height:10px; background:var(--ink-100); border-radius:20px; overflow:hidden;}
.hbar-row .hb-track > span{display:block; height:100%; background:var(--brand); border-radius:20px;}
.hbar-row .hb-val{width:34px; font-size:12px; color:var(--ink-500); text-align:right;}

.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-600); margin-top:10px;}
.legend .li{display:flex; align-items:center; gap:6px;}
.legend .sw{width:10px; height:10px; border-radius:3px;}

.divider{height:1px; background:var(--ink-100); margin:18px 0;}

.footer-note{text-align:center; color:var(--ink-400); font-size:11.5px; padding:26px 0 6px;}

.comment{display:flex; gap:10px; margin-bottom:16px;}
.comment .cm-avatar{width:34px; height:34px; border-radius:50%; background:var(--navy-800); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:0 0 34px;}
.comment .cm-body{flex:1; background:var(--ink-50); border-radius:10px; padding:10px 13px;}
.comment .cm-head{display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px;}
.comment .cm-head .name{font-weight:700; color:var(--ink-900);}
.comment .cm-head .time{color:var(--ink-400);}
.comment.internal .cm-body{background:var(--amber-light);}
.comment .cm-text{font-size:12.5px; color:var(--ink-700);}

.screen-meta-bar{
  display:flex; flex-wrap:wrap; gap:8px 22px; padding:12px 16px; background:var(--navy-950); color:#cfd8e3; border-radius:10px; font-size:11.5px; margin-bottom:18px;
}
.screen-meta-bar b{color:#fff;}
.screen-meta-bar .smb-item{display:flex; gap:5px;}