/* =========================================================
   FIRE & EMERGENCY SERVICES, ASSAM - Demo Portal
   Palette: Ink navy #142433, Fire red #B3261E, Amber #C1780A,
            Neutral bg #F4F5F7, Line #E2E5EA, Text #1F2937
   ========================================================= */

:root{
  --ink:        #142433;
  --ink-soft:   #223345;
  --fire:       #B3261E;
  --fire-dark:  #8E1E17;
  --amber:      #C1780A;
  --bg:         #F4F5F7;
  --line:       #E2E5EA;
  --text:       #1F2937;
  --text-soft:  #5B6774;
  --card-radius: 10px;
}

*{ box-sizing: border-box; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.demo-ribbon{
  background: var(--amber);
  color: #241500;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 8px;
}

/* ---------- Top navbar ---------- */
.app-navbar{
  background: var(--ink);
  padding: 10px 0;
  border-bottom: 3px solid var(--fire);
}
.app-navbar .navbar-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.app-navbar .bi-fire{
  font-size: 26px;
  color: var(--fire);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-size: 15px; letter-spacing:.02em; }
.brand-text small{ color:#AFC0CF; font-size: 12px; }
.text-user{ color:#DCE4EA; font-size: 14px; }
.role-chip{
  background: rgba(179,38,30,.85);
  color:#fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ---------- Login page ---------- */
.login-shell{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.login-card{
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,36,51,.10);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.login-side{
  background: linear-gradient(165deg, var(--ink) 0%, #0D1822 100%);
  color: #fff;
  padding: 40px 34px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.login-side .bi-fire{ color: var(--fire); font-size: 38px; }
.login-side h2{ font-size: 21px; margin: 14px 0 8px; font-weight: 700;}
.login-side p{ color:#B6C4D1; font-size: 14px; line-height:1.55; }
.login-side .role-list{ margin-top: 22px; display:flex; flex-direction:column; gap:10px; }
.login-side .role-list div{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#CBD8E3;}
.login-side .role-list i{ color: var(--fire); margin-top:2px; }
.login-form-side{ padding: 40px 34px; }
.login-form-side h3{ font-weight:700; font-size:19px; margin-bottom: 4px;}
.login-form-side .sub{ color: var(--text-soft); font-size: 13.5px; margin-bottom: 22px;}
.demo-accounts{
  margin-top: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.demo-accounts table{ width:100%; margin-top:6px;}
.demo-accounts td{ padding: 2px 4px; }
.demo-accounts code{ background:#fff; border:1px solid var(--line); padding:1px 6px; border-radius:4px; }

@media (max-width: 760px){
  .login-card{ grid-template-columns: 1fr; }
  .login-side{ padding: 30px 26px; }
  .login-form-side{ padding: 30px 26px; }
}

/* ---------- Dashboard layout ---------- */
.dashboard-wrapper{
  flex: 1;
  display: flex;
  width: 100%;
}
.dashboard-sidebar{
  width: 240px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}
.sidebar-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}
.sidebar-link i{ font-size: 16px; width: 18px; text-align:center; }
.sidebar-link:hover{ background: var(--bg); color: var(--ink); }
.sidebar-link.active{ background: var(--fire); color: #fff; }

.dashboard-main{ flex: 1; min-width: 0; }
.dashboard-content{ padding: 26px 28px 40px; }

.page-heading h1{ font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 2px;}
.page-heading p{ color: var(--text-soft); font-size: 14px; margin-bottom: 18px;}

@media (max-width: 900px){
  .dashboard-wrapper{ flex-direction: column; }
  .dashboard-sidebar{ width: 100%; border-right:none; border-bottom:1px solid var(--line); padding: 10px; }
  .sidebar-link-group{ display:flex; overflow-x:auto; gap:4px; }
  .sidebar-link{ white-space: nowrap; }
  .dashboard-content{ padding: 18px 16px 32px; }
}

/* ---------- Stat cards ---------- */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 16px 18px;
  border-left: 4px solid var(--fire);
}
.stat-card .num{ font-size: 26px; font-weight: 700; color: var(--ink); line-height:1;}
.stat-card .lbl{ font-size: 12.5px; color: var(--text-soft); margin-top: 6px; }
.stat-card.alt1{ border-left-color: var(--amber); }
.stat-card.alt2{ border-left-color: #2E7D32; }
.stat-card.alt3{ border-left-color: #1565C0; }

/* ---------- Cards / panels ---------- */
.panel{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 20px;
  margin-bottom: 20px;
}
.panel-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-title i{ color: var(--fire); }

/* ---------- Tables ---------- */
.table-clean{ font-size: 13.8px; }
.table-clean thead th{
  background: var(--bg);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-clean td{ vertical-align: middle; }
.ref-code{ font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:12.8px; color: var(--ink); }

/* ---------- Timeline (application movements) ---------- */
.timeline{ position: relative; margin-left: 6px; padding-left: 24px; }
.timeline::before{
  content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background: var(--line);
}
.timeline-item{ position: relative; padding-bottom: 20px; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content:""; position:absolute; left:-24px; top:2px; width:12px; height:12px; border-radius:50%;
  background: var(--fire); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--fire);
}
.timeline-item .t-action{ font-weight:700; font-size: 14px; color: var(--ink);}
.timeline-item .t-meta{ font-size:12px; color: var(--text-soft); margin: 2px 0 4px;}
.timeline-item .t-remarks{ font-size:13px; color: var(--text); background: var(--bg); border-radius:6px; padding:6px 10px; display:inline-block;}

/* ---------- Buttons ---------- */
.btn-fire{ background: var(--fire); border-color: var(--fire); color:#fff; }
.btn-fire:hover{ background: var(--fire-dark); border-color: var(--fire-dark); color:#fff; }
.btn-outline-fire{ border-color: var(--fire); color: var(--fire); }
.btn-outline-fire:hover{ background: var(--fire); color:#fff; }

/* ---------- Misc ---------- */
.section-divider{ border-top: 1px dashed var(--line); margin: 20px 0; }
.info-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px 22px; font-size: 13.8px; }
.info-grid dt{ color: var(--text-soft); font-size: 12px; text-transform: uppercase; letter-spacing:.03em; margin-bottom:2px;}
.info-grid dd{ margin: 0; font-weight: 600; color: var(--ink); }

.app-footer{
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  text-align: center;
  color: var(--text-soft);
}

.auditor-select-card{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s;
}
.auditor-select-card:hover{ border-color: var(--fire); }
.auditor-select-card.picked{ border-color: var(--fire); background: #FBF1F0; }