/* ===========================================================================
   EXIM CORE — application theme
   Corporate-modern. Dark branded sidebar + clean content.
   Brand colour is injected at runtime from settings via --exc-primary.
   =========================================================================== */

:root{
  --exc-primary:#C8102E;          /* Exim red (override in Settings)      */
  --exc-primary-d:#9d0c24;
  --exc-sidebar:#0b1f3a;          /* deep navy                            */
  --exc-sidebar-2:#12315c;
  --exc-accent:#38e1c6;           /* futuristic cyan glow                 */
  --exc-ink:#1f2937;
  --exc-muted:#6b7280;
  --exc-line:#e6e9ef;
  --exc-bg:#f4f6fb;
  --exc-card:#ffffff;
  --exc-radius:14px;
  --exc-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --exc-sb-w:236px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--exc-bg);
  color:var(--exc-ink);
  font-size:14px;
}

/* ---------- layout shell ------------------------------------------------- */
.exc-shell{ display:flex; min-height:100vh; }
.exc-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.exc-content{ padding:16px 18px 40px; }

/* ---------- sidebar ------------------------------------------------------ */
.exc-sidebar{
  width:var(--exc-sb-w); flex:0 0 var(--exc-sb-w);
  background:var(--exc-sidebar);
  color:#cdd7e5; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; z-index:1040;
  box-shadow:4px 0 24px rgba(5,15,35,.18);
}
.exc-brand{
  display:flex; align-items:center; gap:10px;
  padding:16px 16px 14px; border-bottom:1px solid rgba(255,255,255,.07);
}
.exc-brand img{ width:34px; height:34px; }
.exc-brand .exc-brand-txt b{ color:#fff; font-size:15px; letter-spacing:.3px; display:block; line-height:1.1; }
.exc-brand .exc-brand-txt span{ font-size:10.5px; color:#8ea3bf; text-transform:uppercase; letter-spacing:1px; }

.exc-nav{ padding:10px 10px 20px; overflow-y:auto; flex:1; }
.exc-nav .exc-sect{ font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:#5f7496; margin:14px 10px 6px; }
.exc-nav a.exc-link,
.exc-nav .exc-toggle{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:5px 7px; margin:1px 0; border-radius:5px;
  color:#c3cfe0; text-decoration:none; font-size:13.3px; font-weight:500;
  border:0; background:transparent; cursor:pointer; transition:.15s;
}
.exc-nav a.exc-link i,.exc-nav .exc-toggle i.exc-ic{ font-size:16px; width:20px; text-align:center; color:#8aa0bf; transition:.15s; }
.exc-nav a.exc-link:hover,.exc-nav .exc-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; }
.exc-nav a.exc-link.active{
  background:var(--exc-primary);
  color:#fff;
}
.exc-nav a.exc-link.active i{ color:#fff; }
.exc-nav a.exc-link.active::before{
  content:""; position:absolute; left:0; width:3px; height:22px;
  background:var(--exc-accent); border-radius:0 4px 4px 0; margin-left:-11px;
  box-shadow:0 0 10px var(--exc-accent);
}
.exc-nav .exc-link{ position:relative; }
.exc-sub{ list-style:none; margin:0; padding:2px 0 2px 34px; display:none; }
.exc-sub.open{ display:block; }
.exc-sub a{ display:block; padding:7px 10px; color:#aebdd3; text-decoration:none; font-size:12.6px; border-radius:8px; }
.exc-sub a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.exc-sub a.active{ color:#fff; }
.exc-toggle .exc-caret{ margin-left:auto; font-size:12px; transition:.2s; }
.exc-toggle.open .exc-caret{ transform:rotate(90deg); }

/* ---------- topbar ------------------------------------------------------- */
.exc-topbar{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--exc-line);
  display:flex; align-items:center; gap:12px; padding:9px 18px;
}
.exc-topbar .exc-title{ font-weight:700; font-size:15px; color:var(--exc-ink); }
.exc-topbar .exc-title small{ color:var(--exc-muted); font-weight:500; }
.exc-search{ position:relative; margin-left:auto; width:min(320px,42vw); }
.exc-search i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--exc-muted); font-size:14px; }
.exc-search input{
  width:100%; border:1px solid var(--exc-line); background:#fff;
  border-radius:50rem; padding:7px 14px 7px 32px; font-size:12.8px; outline:none; transition:.15s;
}
.exc-search input:focus{ border-color:var(--exc-primary); box-shadow:0 0 0 3px rgba(200,16,46,.12); }
.exc-user{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 6px; border-radius:50rem; }
.exc-user:hover{ background:#f0f2f7; }
.exc-ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:var(--exc-primary);
  color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.exc-user .exc-u-name{ font-size:12.7px; font-weight:600; line-height:1.05; }
.exc-user .exc-u-role{ font-size:10.5px; color:var(--exc-muted); text-transform:capitalize; }
.exc-burger{ border:0; background:transparent; font-size:20px; color:var(--exc-ink); display:none; }

/* ---------- cards & page header ------------------------------------------ */
.exc-page-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.exc-page-head h1{ font-size:19px; font-weight:700; margin:0; }
.exc-page-head p{ margin:2px 0 0; color:var(--exc-muted); font-size:12.5px; }
.exc-page-head .exc-ph-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.exc-card{
  background:var(--exc-card); border:1px solid var(--exc-line);
  border-radius:var(--exc-radius); box-shadow:var(--exc-shadow);
}
.exc-card .exc-card-h{ padding:12px 16px; border-bottom:1px solid var(--exc-line); display:flex; align-items:center; gap:8px; }
.exc-card .exc-card-h h2{ font-size:13.5px; font-weight:700; margin:0; }
.exc-card .exc-card-b{ padding:14px 16px; }

/* ---------- stat tiles --------------------------------------------------- */
.exc-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px; }
.exc-tile{
  position:relative; overflow:hidden; background:var(--exc-card);
  border:1px solid var(--exc-line); border-radius:var(--exc-radius);
  padding:15px 16px; box-shadow:var(--exc-shadow); transition:.18s;
}
.exc-tile:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(16,24,40,.12); }
.exc-tile::after{
  content:""; position:absolute; right:-24px; top:-24px; width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle,rgba(56,225,198,.18),transparent 70%);
}
.exc-tile .exc-t-ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; margin-bottom:10px;
  background:var(--exc-sidebar);
}
.exc-tile .exc-t-val{ font-size:26px; font-weight:800; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.exc-tile .exc-t-lbl{ font-size:12px; color:var(--exc-muted); margin-top:4px; }
.exc-tile.red .exc-t-ic{ background:var(--exc-primary); }
.exc-tile.cyan .exc-t-ic{ background:#0ea5a2; }
.exc-tile.amber .exc-t-ic{ background:#d97706; }
.exc-tile.green .exc-t-ic{ background:#047857; }

/* ---------- compact data tables ------------------------------------------ */
table.exc-table{ width:100%; font-size:12.6px; }
table.exc-table thead th{
  background:#f3f5fa; color:#44506a; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; vertical-align:middle;
}
table.exc-table td,table.exc-table th{ padding:.34rem .55rem !important; vertical-align:middle; }
table.exc-table tbody tr:hover{ background:#fafbfe; }
.dataTables_wrapper{ font-size:12.5px; }
.dataTables_wrapper .dataTables_info{ color:var(--exc-muted); font-size:11.5px; padding-top:10px; }

/* export buttons (left) — small rounded */
.dt-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
.dt-buttons .btn,.dt-button{
  border-radius:50rem !important; font-size:11.5px !important; padding:.26rem .72rem !important;
  border:1px solid var(--exc-line) !important; background:#fff !important; color:#3a4761 !important;
  font-weight:600 !important; box-shadow:none !important;
}
.dt-buttons .btn:hover,.dt-button:hover{ background:var(--exc-primary) !important; color:#fff !important; border-color:var(--exc-primary) !important; }

/* search box inside datatable */
.dataTables_filter input{ border:1px solid var(--exc-line); border-radius:50rem; padding:4px 12px; font-size:12px; }
.dataTables_length select{ border-radius:8px; padding:3px 8px; font-size:12px; }

/* pagination (right) — small rounded pills */
.dataTables_paginate{ padding-top:8px; }
.dataTables_paginate .pagination{ margin:0; justify-content:flex-end; }
.dataTables_paginate .page-link{
  border:0 !important; margin:0 2px; border-radius:50rem !important;
  font-size:11.6px; padding:.28rem .64rem; color:#3a4761; min-width:30px; text-align:center;
}
.dataTables_paginate .page-item.active .page-link{
  background:var(--exc-primary) !important; color:#fff !important; box-shadow:0 4px 10px rgba(200,16,46,.3);
}
.dataTables_paginate .page-link:hover{ background:#eef1f7; }

/* row group header (vulnerabilities grouped by system) */
tr.dtrg-group td{
  background:#eef2fb !important;
  font-weight:700 !important; color:var(--exc-sidebar) !important; font-size:12px !important;
  border-left:3px solid var(--exc-primary) !important;
}

/* ---------- badges ------------------------------------------------------- */
.exc-badge{
  display:inline-block; padding:2px 9px; border-radius:50rem; font-size:10.5px;
  font-weight:700; letter-spacing:.3px; line-height:1.5; white-space:nowrap;
}
.exc-badge-critical{ background:#7f1d1d; color:#fff; }
.exc-badge-high{ background:#dc2626; color:#fff; }
.exc-badge-medium{ background:#f59e0b; color:#3a2a00; }
.exc-badge-low{ background:#0ea5e9; color:#fff; }
.exc-badge-info{ background:#e5e7eb; color:#4b5563; }
.exc-badge-resolved{ background:#10b981; color:#fff; }
.exc-badge-progress{ background:#3b82f6; color:#fff; }
.exc-badge-open{ background:#64748b; color:#fff; }

/* ---------- buttons ------------------------------------------------------ */
.btn-exim{ background:var(--exc-primary); border:0; color:#fff; font-weight:600; }
.btn-exim:hover{ color:#fff; filter:brightness(1.07); }
.btn-outline-exim{ border:1px solid var(--exc-primary); color:var(--exc-primary); background:#fff; font-weight:600; }
.btn-outline-exim:hover{ background:var(--exc-primary); color:#fff; }
.btn.btn-sm.btn-icon{ padding:.2rem .45rem; line-height:1; }

/* ---------- compact form controls (app-wide, small & responsive) --------- */
.form-control,.form-select{
  font-size:12.5px; padding:.34rem .6rem; border-radius:8px; line-height:1.4;
}
.form-control-sm,.form-select-sm{ font-size:12px; padding:.26rem .5rem; border-radius:7px; }
textarea.form-control{ padding:.4rem .6rem; }
.form-label{ font-size:11.5px; font-weight:600; margin-bottom:3px; color:#44506a; }
.col-form-label{ font-size:12px; padding-top:.3rem; padding-bottom:.3rem; }
.form-check{ min-height:auto; }
.form-check-label{ font-size:12.5px; }
.form-check-input{ width:15px; height:15px; margin-top:.18rem; }
.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{ font-size:12px; }
.input-group-text{ font-size:12px; padding:.34rem .55rem; }
.form-text{ font-size:11px; }
.form-control::placeholder{ font-size:12px; color:#9aa4b2; }

/* ---------- small, centered, modern modals ------------------------------- */
.modal-dialog{ max-width:440px; }         /* small by default        */
.modal-dialog.modal-sm{ max-width:330px; }
.modal-dialog.modal-lg{ max-width:620px; } /* was large — now modest  */
.modal-dialog.modal-xl{ max-width:820px; }

.modal-content.exc-modal{ border:0; border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(10,20,40,.30); }
.exc-modal .modal-header{
  background:var(--exc-sidebar);
  color:#fff; border:0; padding:11px 15px;
}
.exc-modal .modal-header .modal-title{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.exc-modal .modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); padding:.4rem; font-size:11px; }
.exc-modal .modal-body{ padding:14px 15px; }
.exc-modal .modal-body .row{ --bs-gutter-x:.7rem; --bs-gutter-y:.6rem; }
.exc-modal .modal-footer{ border-top:1px solid var(--exc-line); padding:9px 15px; gap:6px; }
.exc-modal .form-label{ font-size:11px; font-weight:600; color:#44506a; margin-bottom:2px; text-transform:uppercase; letter-spacing:.3px; }
.exc-modal .form-control,.exc-modal .form-select{ font-size:12.5px; padding:.34rem .6rem; border-radius:8px; }
.exc-modal textarea.form-control{ min-height:62px; }
.exc-modal .form-control:focus,.exc-modal .form-select:focus{ border-color:var(--exc-primary); box-shadow:0 0 0 3px rgba(200,16,46,.12); }

/* ---------- auth pages (login / token) ----------------------------------- */
.exc-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:var(--exc-sidebar);
  position:relative; overflow:hidden;
}
.exc-auth-card{
  position:relative; width:100%; max-width:410px; background:rgba(255,255,255,.97);
  border-radius:20px; padding:30px 30px 26px; box-shadow:0 30px 70px rgba(2,8,23,.55);
  border:1px solid rgba(255,255,255,.4);
}
.exc-auth-logo{ text-align:center;}
.exc-auth-logo img{ width:50%;}
.exc-auth-card h1{ font-size:19px; font-weight:800; text-align:center; margin:4px 0 2px; }
.exc-auth-card .exc-sub-t{ text-align:center; color:var(--exc-muted); font-size:12.5px; margin-bottom:20px; }

/* 4-digit token inputs */
.exc-pin{ display:flex; gap:10px; justify-content:center; margin:6px 0 18px; }
.exc-pin input{
  width:52px; height:60px; text-align:center; font-size:26px; font-weight:800;
  border:2px solid var(--exc-line); border-radius:13px; outline:none; transition:.15s; color:var(--exc-sidebar);
}
.exc-pin input:focus{ border-color:var(--exc-primary); box-shadow:0 0 0 4px rgba(200,16,46,.14); }

.exc-token-out{
  text-align:center; letter-spacing:12px; font-size:40px; font-weight:800; color:var(--exc-sidebar);
  background:#f3f6fc; border:2px dashed var(--exc-primary); border-radius:14px; padding:16px; margin:6px 0 10px;
}

/* ---------- misc --------------------------------------------------------- */
.exc-footer{ text-align:center; color:var(--exc-muted); font-size:11px; padding:14px; }
.exc-empty{ text-align:center; color:var(--exc-muted); padding:30px 10px; }
.exc-empty i{ font-size:34px; opacity:.4; display:block; margin-bottom:8px; }
.exc-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:50rem; background:#eef2fb; color:#3a4761; }
.text-exim{ color:var(--exc-primary) !important; }
.exc-kv{ font-size:12.5px; }
.exc-kv dt{ color:var(--exc-muted); font-weight:600; }
.cursor-pointer{ cursor:pointer; }
.exc-scroll::-webkit-scrollbar{ width:7px; } .exc-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:10px; }

/* resolved vulnerability row tint */
.table-success-soft td{ background:#f0fdf4 !important; }

/* nav pills (tasks tabs) */
.nav-pills .nav-link{ color:#44506a; border:1px solid var(--exc-line); background:#fff; font-size:12.5px; }
.nav-pills .nav-link.active{ background:var(--exc-primary); border-color:var(--exc-primary); color:#fff; box-shadow:0 4px 12px rgba(200,16,46,.28); }

/* colour swatch input */
.exc-swatch{ width:46px; height:38px; padding:3px; border:1px solid var(--exc-line); border-radius:9px; cursor:pointer; }

/* sidebar backdrop (mobile) */
.exc-backdrop{ display:none; position:fixed; inset:0; background:rgba(5,12,25,.5); z-index:1035; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width:991px){
  .exc-sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s; }
  .exc-sidebar.open{ transform:translateX(0); }
  .exc-burger{ display:inline-block; }
  .exc-backdrop.show{ display:block; }
}
@media (max-width:767px){
  /* keep modals modest on tablets */
  .modal-dialog.modal-lg,.modal-dialog.modal-xl{ max-width:560px; }
}
@media (max-width:575px){
  .exc-search{ display:none; }
  .exc-content{ padding:12px 12px 32px; }
  .exc-page-head h1{ font-size:17px; }
  /* full-width, tidy modals on phones */
  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl{ max-width:none; margin:.55rem; }
  .exc-modal .modal-body{ padding:12px 13px; }
  .exc-tiles{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
}