:root{
  --bg:#081a22;
  --bg-soft:#0b2530;
  --sidebar:#0a2029;
  --card:#0e2934;
  --card-2:#12323f;

  --line:#244650;
  --text:#f3f7f8;
  --muted:#8fb0ba;

  --primary:#ccff00;
  --primary-2:#b9e900;
  --primary-soft:#173b3f;

  --green:#10b981;
  --gold:#f59e0b;
  --red:#ef4444;
  --purple:#8b5cf6;

  --input:#082631;
  --table-head:#12323f;
  --hover:#153944;

  --shadow:none;

  --radius:14px;

  --sidebar-active:#173b3f;
  --sidebar-active-text:#ccff00;

  --top-accent:#ccff00;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]{
  --bg:#f4f7f8;
  --bg-soft:#ffffff;
  --sidebar:#ffffff;
  --card:#ffffff;
  --card-2:#f7f9fa;

  --line:#d8e2e6;
  --text:#16313a;
  --muted:#6f858d;

  --primary:#0b7285;
  --primary-2:#095c6b;
  --primary-soft:#e3f3f5;

  --input:#ffffff;
  --table-head:#eef4f5;
  --hover:#edf5f6;

  --shadow:0 8px 24px rgba(15,40,50,.06);

  --sidebar-active:#e4f3f4;
  --sidebar-active-text:#0b7285;

  --top-accent:#0b7285;
}


/* =========================================================
   BLUE THEME
========================================================= */

html[data-theme="blue"]{
  --bg:#071b35;
  --bg-soft:#0b2a52;
  --sidebar:#082445;
  --card:#0d315f;
  --card-2:#103968;

  --line:#2e5f95;
  --text:#f4f9ff;
  --muted:#b5d3f1;

  --primary:#38bdf8;
  --primary-2:#0ea5e9;
  --primary-soft:#0d4776;

  --input:#082b53;
  --table-head:#0b3768;
  --hover:#114579;

  --shadow:none;

  --sidebar-active:#15558f;
  --sidebar-active-text:#ffffff;

  --top-accent:#38bdf8;
}


/* =========================================================
   GLOBAL
========================================================= */

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  background:var(--bg);
  color:var(--text);

  transition:
    background .25s ease,
    color .25s ease;
}

button,
input,
select,
textarea{
  font:inherit;
}

.hidden{
  display:none !important;
}

.muted{
  color:var(--muted);
}

.small{
  font-size:12px;
}

code,
.mono{
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}


/* =========================================================
   LOGIN PAGE — DECA BRAND
========================================================= */

.login-wrap{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:#0B3442;
}

.login-card{
  width:100%;
  max-width:430px;

  background:#0D2E3A;

  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;

  padding:32px;

  box-shadow:
    0 22px 55px rgba(0,0,0,.28);
}

.login-header{
  text-align:center;
  margin-bottom:26px;
}

.login-logo{
  display:block;

  width:190px;
  max-width:70%;

  height:auto;

  margin:0 auto 18px;

  object-fit:contain;
}

.login-brand{
  margin:0 0 6px;

  font-size:28px;
  font-weight:800;

  color:#ffffff;
}

.login-subtitle{
  margin:0;

  font-size:14px;
  line-height:1.5;

  color:#b9d0d8;
}

.login-method{
  display:inline-block;

  margin-top:10px;

  padding:5px 12px;

  border:
    1px solid rgba(204,255,0,.25);

  border-radius:999px;

  background:
    rgba(204,255,0,.10);

  color:#ccff00;

  font-size:12px;
  font-weight:700;
}

.login-form{
  display:flex;
  flex-direction:column;

  gap:16px;
}

.login-card .field{
  width:100%;
  min-width:0;

  flex:none;

  gap:6px;
}

.login-card .field label{
  margin:0;

  font-size:12px;
  font-weight:600;

  color:#d8e6ea;
}

.login-card input{
  display:block;

  width:100%;
  height:46px;

  padding:0 14px;

  border:
    1px solid #315766;

  border-radius:11px;

  background:#082631;

  color:#ffffff;

  outline:none;

  box-shadow:none;
}

.login-card input::placeholder{
  color:#87a7b1;
}

.login-card input:focus{
  border-color:#ccff00;

  box-shadow:
    0 0 0 3px
    rgba(204,255,0,.10);
}

.password-wrap{
  position:relative;

  width:100%;
}

.password-wrap input{
  padding-right:48px;
}

.password-toggle{
  position:absolute;

  top:50%;
  right:8px;

  transform:
    translateY(-50%);

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:8px;

  background:transparent;

  color:#b9d0d8;

  cursor:pointer;
}

.password-toggle:hover{
  background:
    rgba(255,255,255,.07);
}

.login-button{
  width:100% !important;
  height:46px;

  margin-top:2px;

  border:0;
  border-radius:11px;

  background:#ccff00 !important;

  color:#0B3442 !important;

  font-size:15px;
  font-weight:800;

  box-shadow:none !important;
}

.login-button:hover{
  background:#b9e900 !important;

  color:#0B3442 !important;

  transform:none !important;

  filter:none !important;
}

.login-footer{
  margin-top:20px;

  padding-top:16px;

  border-top:
    1px solid
    rgba(255,255,255,.10);

  text-align:center;

  color:#89a8b2;

  font-size:11px;
}

#loginMsg{
  margin-top:2px;
}

#loginMsg .alert{
  margin:0;
}


/* =========================================================
   APPLICATION LAYOUT
========================================================= */

.app{
  display:grid;

  grid-template-columns:
    230px
    1fr;

  min-height:100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
  position:sticky;

  top:0;

  height:100vh;

  overflow:auto;

  padding:
    20px
    14px;

  background:
    var(--sidebar);

  border-right:
    1px solid
    var(--line);
}

.brand{
  padding:
    8px
    10px
    18px;

  margin-bottom:14px;

  border-bottom:
    1px solid
    var(--line);
}

.brand b{
  display:block;

  font-size:15px;
  font-weight:800;
}

.brand span{
  color:var(--muted);

  font-size:11px;
}

.nav button{
  width:100%;

  margin:2px 0;

  padding:
    10px
    11px;

  border:0;
  border-radius:9px;

  background:transparent;

  color:var(--muted);

  text-align:left;

  font-size:13px;

  cursor:pointer;

  transition:.18s ease;
}

.nav button:hover{
  background:
    var(--hover);

  color:
    var(--text);
}

.nav button.active{
  background:
    var(--sidebar-active);

  color:
    var(--sidebar-active-text);

  font-weight:700;

  box-shadow:
    inset 3px 0 0
    var(--primary);
}


/* =========================================================
   MAIN
========================================================= */

.main{
  min-width:0;

  padding:
    24px
    28px;

  background:
    var(--bg);
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:12px;

  margin-bottom:20px;

  padding-bottom:14px;

  border-bottom:
    1px solid
    var(--line);
}

.topbar h1{
  margin:0;

  font-size:24px;
  font-weight:800;
}

.topbar .muted{
  margin-top:3px;

  font-size:12px;
}

.topbar-actions{
  display:flex;

  align-items:center;

  gap:8px;
}


/* =========================================================
   THEME PICKER
========================================================= */

.theme-picker{
  display:flex;

  align-items:center;

  gap:7px;

  padding:
    6px
    8px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:
    var(--card);
}

.theme-picker span{
  color:
    var(--muted);

  font-size:11px;
}

.theme-picker select{
  min-width:95px;

  padding:
    6px
    8px;

  font-size:12px;
}


/* =========================================================
   GRID
========================================================= */

.grid{
  display:grid;

  gap:12px;
}

.grid.kpi{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
}


/* =========================================================
   CARD
========================================================= */

.card{
  background:
    var(--card);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  padding:18px;

  box-shadow:
    var(--shadow);

  transition:
    .18s ease;
}

.card:hover{
  border-color:
    color-mix(
      in srgb,
      var(--primary) 35%,
      var(--line)
    );
}

.card h3{
  margin-top:0;
}


/* =========================================================
   KPI
========================================================= */

.kpi .card{
  position:relative;

  min-height:88px;

  overflow:hidden;
}

.kpi .card::before{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:2px;

  background:
    var(--top-accent);
}

.kpi .value{
  margin-top:10px;

  font-size:26px;
  font-weight:800;
}

.label{
  color:
    var(--muted);

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.07em;
}


/* =========================================================
   ROW & FIELD
========================================================= */

.row{
  display:flex;

  gap:12px;

  flex-wrap:wrap;
}

.field{
  display:flex;

  flex-direction:column;

  gap:6px;

  min-width:180px;

  flex:1;
}

.field label{
  color:
    var(--muted);

  font-size:12px;
}


/* =========================================================
   INPUT
========================================================= */

input,
select,
textarea{
  padding:
    10px
    12px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:
    var(--input);

  color:
    var(--text);

  outline:none;

  transition:.2s;
}

input:focus,
select:focus,
textarea:focus{
  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--primary) 14%,
      transparent
    );
}

textarea{
  min-height:90px;
}

input::placeholder,
textarea::placeholder{
  color:
    var(--muted);
}


/* =========================================================
   BUTTON
========================================================= */

.btn{
  padding:
    9px
    13px;

  border:0;

  border-radius:9px;

  font-size:13px;

  font-weight:700;

  cursor:pointer;

  transition:.18s;
}

.btn:hover{
  filter:
    brightness(1.04);
}

.btn.primary{
  background:
    var(--primary);

  color:#10252d;
}

html[data-theme="light"] .btn.primary,
html[data-theme="blue"] .btn.primary{
  color:#ffffff;
}

.btn.secondary{
  background:
    var(--card-2);

  border:
    1px solid
    var(--line);

  color:
    var(--text);
}

.btn.danger{
  background:
    #991b1b;

  color:#ffffff;
}

.btn.success{
  background:
    #166534;

  color:#ffffff;
}


/* =========================================================
   ALERT
========================================================= */

.alert{
  margin:12px 0;

  padding:
    11px
    13px;

  border:
    1px solid;

  border-radius:10px;

  font-size:13px;
}

.alert.info{
  background:
    color-mix(
      in srgb,
      var(--primary) 9%,
      var(--card)
    );

  border-color:
    color-mix(
      in srgb,
      var(--primary) 35%,
      var(--line)
    );
}

.alert.warn{
  background:
    color-mix(
      in srgb,
      var(--gold) 12%,
      var(--card)
    );

  border-color:
    color-mix(
      in srgb,
      var(--gold) 42%,
      var(--line)
    );
}

.alert.error{
  background:
    color-mix(
      in srgb,
      var(--red) 12%,
      var(--card)
    );

  border-color:
    color-mix(
      in srgb,
      var(--red) 45%,
      var(--line)
    );
}

.alert.ok{
  background:
    color-mix(
      in srgb,
      var(--green) 12%,
      var(--card)
    );

  border-color:
    color-mix(
      in srgb,
      var(--green) 42%,
      var(--line)
    );
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap{
  overflow:auto;

  border:
    1px solid
    var(--line);

  border-radius:11px;

  background:
    var(--card);
}

table{
  width:100%;

  border-collapse:
    collapse;

  font-size:13px;
}

th,
td{
  padding:
    10px
    12px;

  border-bottom:
    1px solid
    var(--line);

  text-align:left;

  white-space:nowrap;
}

th{
  position:sticky;

  top:0;

  background:
    var(--table-head);

  color:
    var(--muted);

  font-size:12px;
}

tbody tr:hover td{
  background:
    var(--hover);
}


/* =========================================================
   BADGE
========================================================= */

.badge{
  display:inline-block;

  padding:
    3px
    8px;

  border-radius:999px;

  font-size:11px;

  font-weight:700;
}

.high{
  background:#0f5132;
  color:#b7f7d5;
}

.mid{
  background:#6b4a00;
  color:#ffe08a;
}

.low{
  background:#7f1d1d;
  color:#fecaca;
}

html[data-theme="light"] .high{
  background:#dcfce7;
  color:#166534;
}

html[data-theme="light"] .mid{
  background:#fef3c7;
  color:#92400e;
}

html[data-theme="light"] .low{
  background:#fee2e2;
  color:#991b1b;
}


/* =========================================================
   PAGE
========================================================= */

.page{
  display:none;
}

.page.active{
  display:block;
}


/* =========================================================
   SPLIT CARD
========================================================= */

.split{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:12px;

  margin-top:12px;
}

.split .card{
  min-height:160px;
}

.split .card h3{
  margin:
    0
    0
    14px;

  font-size:17px;
}


/* =========================================================
   TREE
========================================================= */

.tree-node{
  margin:
    8px
    0
    8px
    18px;

  padding-left:12px;

  border-left:
    2px solid
    var(--line);
}

.tree-box{
  padding:10px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:
    var(--card-2);
}

.metric{
  color:
    var(--muted);

  font-size:12px;
}


/* =========================================================
   ASSISTANT
========================================================= */

.assistant-log{
  height:320px;

  overflow:auto;

  padding:12px;

  border:
    1px solid
    var(--line);

  border-radius:11px;

  background:
    var(--card-2);
}

.msg{
  max-width:90%;

  margin:8px 0;

  padding:
    9px
    11px;

  border-radius:10px;
}

.msg.user{
  margin-left:auto;

  background:
    var(--primary);

  color:#10252d;
}

html[data-theme="light"] .msg.user,
html[data-theme="blue"] .msg.user{
  color:#ffffff;
}

.msg.bot{
  background:
    var(--hover);

  color:
    var(--text);
}


/* =========================================================
   PROGRESS
========================================================= */

.progress{
  height:8px;

  overflow:hidden;

  border-radius:999px;

  background:
    var(--card-2);
}

.progress span{
  display:block;

  height:100%;

  background:
    var(--primary);
}


/* =========================================================
   BLUE THEME EXTRA
========================================================= */

html[data-theme="blue"] .sidebar{
  background:
    linear-gradient(
      180deg,
      #061f3d,
      #0a315c
    );
}


/* =========================================================
   LIGHT THEME EXTRA
========================================================= */

html[data-theme="light"] .sidebar{
  box-shadow:
    5px 0 18px
    rgba(31,41,55,.04);
}


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

@media(max-width:980px){

  .app{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;

    height:auto;
  }

  .grid.kpi{
    grid-template-columns:
      repeat(2,1fr);
  }

  .split{
    grid-template-columns:1fr;
  }

  .topbar{
    align-items:flex-start;
  }

  .topbar-actions{
    flex-wrap:wrap;

    justify-content:flex-end;
  }
}


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

@media(max-width:620px){

  .main{
    padding:14px;
  }

  .grid.kpi{
    grid-template-columns:1fr;
  }

  .topbar{
    flex-direction:column;

    align-items:flex-start;
  }

  .topbar-actions{
    width:100%;

    justify-content:
      space-between;
  }

  .theme-picker{
    flex:1;
  }

  .theme-picker select{
    width:100%;
  }

  .login-wrap{
    padding:16px;
  }

  .login-card{
    width:100%;

    max-width:390px;

    padding:
      26px
      20px;
  }

  .login-logo{
    width:165px;
  }

  .login-brand{
    font-size:25px;
  }
}