/* =========================================================
   AiServe CIP — FINAL app.css
   Blue base (brighter) + Green accents
   Glass UI + ERP Sidebar + Light/Dark toggle
   ========================================================= */

/* =========================================================
   THEME TOKENS — DEFAULT (BRIGHTER DARK)
========================================================= */
:root{
  --bg-main: linear-gradient(135deg,#152a44 0%,#1a3b66 52%,#1c4a7a 100%);
  --bg-sidebar:#0f2a48;
  --bg-panel:#123056;

  --bg-card:rgba(28,68,112,.52);
  --bg-card-solid:#1c4470;

  --text-main:#eef6ff;
  --text-muted:#b3c7de;
  --text-dim:rgba(238,246,255,.78);

  --green:#16a34a;
  --green-d:#0f7a35;
  --green-soft:rgba(22,163,74,.14);

  --blue:#1e3a8a;
  --blue-soft:rgba(30,58,138,.18);

  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#38bdf8;

  --border-soft:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.18);

  --shadow: 0 18px 55px rgba(0,0,0,.32);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.22);

  --radius:14px;
  --radius-sm:10px;

  --input-bg:rgba(255,255,255,.07);
  --input-bd:rgba(255,255,255,.14);

  --link:#d3e6ff;
}

/* =========================================================
   LIGHT THEME (MATCHES html.theme-light)
========================================================= */
html.theme-light{
  --bg-main: linear-gradient(135deg,#f3f7ff 0%, #eaf2ff 100%);
  --bg-sidebar:#ffffff;
  --bg-panel:#ffffff;

  --bg-card:rgba(255,255,255,.75);
  --bg-card-solid:#ffffff;

  --text-main:#0f172a;
  --text-muted:#475569;
  --text-dim:rgba(15,23,42,.72);

  --border-soft:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);

  --input-bg:rgba(15,23,42,.04);
  --input-bd:rgba(15,23,42,.12);

  --shadow: 0 18px 55px rgba(2,6,23,.12);
  --shadow-soft: 0 10px 30px rgba(2,6,23,.10);

  --link:#1e3a8a;
}

/* =========================================================
   BASE / RESET
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

a{ color: var(--link); text-decoration:none; }
hr{
  border:0;
  height:1px;
  background: var(--border-soft);
  margin:16px 0;
}

/* =========================================================
   LAYOUT
========================================================= */
.container{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:270px;
  background:var(--bg-sidebar);
  padding:18px 16px;
  border-right:1px solid var(--border-soft);
  position:sticky;
  top:0;
  height:100vh;
}

.main{
  flex:1;
  padding:26px 28px;
  position:relative;
}

.main::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(800px 420px at 90% 10%, rgba(22,163,74,.12), transparent 55%);
  filter: blur(2px);
}
.main > *{ position:relative; z-index:1; }

/* =========================================================
   BRAND / SIDEBAR
========================================================= */
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid var(--border-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.brand-badge{
  background:var(--green);
  color:#fff;
  font-weight:900;
  border-radius:10px;
  padding:8px 10px;
  min-width:44px;
  text-align:center;
}

.brand-title{ font-weight:900; font-size:14px; }
.brand-sub{ font-size:12px; color:var(--text-muted); }

/* =========================================================
   NAVIGATION
========================================================= */
.nav{ margin-top:14px; }
.nav-section{
  margin:14px 10px 6px;
  font-size:11px;
  color:var(--text-muted);
  font-weight:900;
  text-transform:uppercase;
}

.nav a{
  display:block;
  padding:10px 12px;
  margin:6px 0;
  border-radius:12px;
  color:var(--text-muted);
}

.nav a:hover{
  background:rgba(255,255,255,.06);
  color:var(--text-main);
}

.nav a.active{
  background:var(--green-soft);
  border:1px solid rgba(22,163,74,.30);
  color:#d1fae5;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.06);
  color:var(--text-main);
  font-weight:800;
  cursor:pointer;
}

.btn:hover{
  background:rgba(255,255,255,.08);
}

.btn.primary{
  background:linear-gradient(180deg,var(--green),var(--green-d));
  color:#fff;
  border-color:rgba(22,163,74,.45);
  box-shadow:0 14px 30px rgba(22,163,74,.22);
}

.btn.logout{
  width:100%;
  margin-top:10px;
}

/* =========================================================
   CARDS (GLASS)
========================================================= */
.card{
  border-radius:var(--radius);
  padding:18px;
  border:1px solid var(--border-soft);
  background:var(--bg-card);
  box-shadow:var(--shadow-soft);
  backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(10px)){
  .card{ background:var(--bg-card-solid); }
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
.page-header h1{
  margin:0;
  font-size:28px;
}

.h1{ font-size:22px; font-weight:900; }
.muted{ color:var(--text-muted); }
.small{ font-size:12px; color:var(--text-muted); }

/* =========================================================
   GRID
========================================================= */
.grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.col-12{ width:100%; }
.col-6{ width:calc(50% - 8px); }
.col-4{ width:calc(33.333% - 10px); }
.col-3{ width:calc(25% - 12px); }

@media(max-width:900px){
  .container{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; }
  .col-3,.col-4,.col-6{ width:100%; }
}

/* =========================================================
   TABLES
========================================================= */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  padding:10px;
  border-top:1px solid var(--border-soft);
  font-size:13px;
}
.table th{
  color:var(--text-dim);
  font-weight:900;
}

/* =========================================================
   BADGES / STATUS
========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid var(--border-soft);
}

.badge.live{ background:rgba(22,163,74,.16); color:#d1fae5; }
.badge.info{ background:rgba(56,189,248,.14); color:#cffafe; }
.badge.closed{ background:rgba(239,68,68,.14); color:#fee2e2; }

/* =========================================================
   FORMS
========================================================= */
label{
  font-size:13px;
  font-weight:800;
  margin:12px 0 6px;
  display:block;
}

.input,select.input,textarea.input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--input-bd);
  background:var(--input-bg);
  color:var(--text-main);
}

.input:focus{
  border-color:rgba(22,163,74,.45);
  box-shadow:0 0 0 3px rgba(22,163,74,.16);
}

/* =========================================================
   FOOTER
========================================================= */
.app-footer{
  padding:14px 20px;
  border-top:1px solid var(--border-soft);
  color:var(--text-muted);
  font-size:13px;
}

/* =========================================================
   Carlsberg Campaign Theme Override
   Scope: body.theme-carlsberg
   Brand: Carlsberg Green
   ========================================================= */

body.theme-carlsberg{
  --bg-main: linear-gradient(135deg,#0f3d2e 0%, #145a32 55%, #1e8449 100%);
  --bg-panel:#0f3d2e;
  --bg-card:rgba(20,90,50,.55);
  --bg-card-solid:#145a32;

  --text-main:#ecfdf5;
  --text-muted:#a7f3d0;
  --text-dim:rgba(236,253,245,.78);

  --green:#00a651;           /* Carlsberg green */
  --green-d:#007a3d;
  --green-soft:rgba(0,166,81,.18);

  --link:#bbf7d0;
}

/* Card border & glow */
body.theme-carlsberg .card{
  border-color: rgba(0,166,81,.35);
  box-shadow: 0 18px 45px rgba(0,166,81,.18);
}

/* Inputs */
body.theme-carlsberg .input{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
body.theme-carlsberg .input:focus{
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,166,81,.28);
}

/* Primary buttons */
body.theme-carlsberg .btn.primary{
  background: linear-gradient(180deg,#00a651,#007a3d);
  border-color:#00a651;
  box-shadow: 0 14px 30px rgba(0,166,81,.35);
}

/* Select dropdown arrow fix */
body.theme-carlsberg select.input{
  color:#ecfdf5;
}

/* Required asterisk */
body.theme-carlsberg label::after{
  color:#86efac;
}