/* =====================================================================
   PDI MANAGEMENT SYSTEM — THEME (White + Navy Blue)
   ===================================================================== */
:root{
  --navy:#0a1f44;
  --navy-light:#123163;
  --navy-soft:#e8edf6;
  --accent:#2f6fed;
  --white:#ffffff;
  --gray-bg:#f5f7fb;
  --border:#e3e7ef;
  --text-dim:#6b7280;
  --radius:12px;
  --shadow:0 4px 18px rgba(10,31,68,0.08);
}
*{box-sizing:border-box;}
body{
  background:var(--gray-bg);
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  color:#1f2937;
}

/* ---------- LOGIN PAGE ---------- */
.login-wrap{
  min-height:100vh;
  background:linear-gradient(135deg, rgba(10,31,68,.88), rgba(18,49,99,.82)),
             url('../img/login-bg.jpg') center/cover no-repeat;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:40px;
}
.login-card{
  background:var(--white);
  width:100%;
  max-width:380px;
  border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:36px 32px;
  margin-top:20px;
}
.login-card .brand{
  text-align:center;
  margin-bottom:22px;
}
.login-card .brand h4{
  color:var(--navy);
  font-weight:700;
  margin-top:10px;
}
.login-card .form-control{
  border-radius:8px;
  padding:10px 14px;
}
.btn-navy{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.btn-navy:hover{
  background:var(--navy-light);
  border-color:var(--navy-light);
  color:#fff;
}

/* ---------- LAYOUT ---------- */
.app-sidebar{
  background:var(--navy);
  min-height:100vh;
  color:#fff;
  width:250px;
  position:fixed;
  top:0;left:0;bottom:0;
  padding:0;
  z-index:1030;
  transition:transform .25s ease;
}
.app-sidebar .brand-box{
  padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:700;
  font-size:1.05rem;
}
.app-sidebar .nav-link{
  color:rgba(255,255,255,.8);
  padding:12px 20px;
  border-left:3px solid transparent;
  font-size:.94rem;
}
.app-sidebar .nav-link i{width:22px;display:inline-block;}
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-left-color:var(--accent);
}
.app-main{
  margin-left:250px;
  padding:0;
}
.app-topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1020;
}
.app-content{
  padding:24px;
}
.sidebar-toggle{display:none;}

@media (max-width: 991.98px){
  .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.show{transform:translateX(0);}
  .app-main{margin-left:0;}
  .sidebar-toggle{display:inline-flex;}
  .login-wrap{justify-content:center;padding:16px;}
}

/* ---------- CARDS / WIDGETS ---------- */
.stat-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  border-left:4px solid var(--navy);
}
.stat-card h3{margin:0;font-weight:700;color:var(--navy);}
.stat-card p{margin:0;color:var(--text-dim);font-size:.85rem;}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  font-weight:600;
  color:var(--navy);
  border-radius:var(--radius) var(--radius) 0 0 !important;
}
.table thead th{
  background:var(--navy-soft);
  color:var(--navy);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-bottom:none;
}
.table td, .table th{vertical-align:middle;}
.badge{font-weight:500;}
.doc-thumb{
  width:64px;height:64px;object-fit:cover;
  border-radius:8px;border:1px solid var(--border);
}
.section-title{
  color:var(--navy);
  font-weight:700;
  margin:24px 0 12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--navy-soft);
}
.btn-primary{background:var(--navy);border-color:var(--navy);}
.btn-primary:hover{background:var(--navy-light);border-color:var(--navy-light);}
.form-label{font-weight:600;font-size:.85rem;color:#334155;}

/* ---------- NOTIFICATIONS / TOASTS ---------- */
#toast-area{
  position:fixed;
  top:16px;right:16px;
  z-index:2000;
}

/* ---------- SESSION TIMEOUT MODAL ---------- */
.timeout-count{font-size:1.6rem;font-weight:700;color:var(--navy);}

/* live indicator dot */
.dot-live{
  width:9px;height:9px;border-radius:50%;
  background:#22c55e;display:inline-block;margin-right:6px;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}
.dot-off{
  width:9px;height:9px;border-radius:50%;
  background:#9ca3af;display:inline-block;margin-right:6px;
}