/* ==========================================================
   VVC SMART DOCUMENT TRACKING - assets/css/style.css
   ========================================================== */
:root{
  --vvc-900:#0a2b4d;
  --vvc-800:#0d3560;
  --vvc-700:#0f3d6e;
  --vvc-600:#124d89;
  --vvc-500:#1560a8;
  --vvc-050:#eef5fb;
  --vvc-gold:#f0b429;
  --sidebar-w:258px;
  --navbar-h:60px;
  --radius:.65rem;
}

*{ -webkit-tap-highlight-color: transparent; }

body.app-body{
  font-family:'Prompt','Kanit',-apple-system,'Segoe UI',sans-serif;
  background:#f4f6fa;
  color:#243244;
  font-size:.95rem;
  padding-top:var(--navbar-h);
}
h1,h2,h3,h4,h5,h6,.navbar-brand{ font-family:'Kanit','Prompt',sans-serif; font-weight:500; }
.fw-500{font-weight:500}.fw-600{font-weight:600}
a{ text-decoration:none }

/* ---------------- Navbar ---------------- */
.app-navbar{
  height:var(--navbar-h);
  background:linear-gradient(90deg,var(--vvc-900) 0%,var(--vvc-600) 100%);
  box-shadow:0 2px 10px rgba(10,43,77,.18);
  z-index:1040;
}
.app-navbar .navbar-brand{ color:#fff; }
.brand-logo{
  width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14); color:var(--vvc-gold); font-size:1.15rem;
}
.brand-logo.has-img{ background:#fff; padding:3px; }
.brand-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.login-logo img{ max-width:88px; max-height:88px; object-fit:contain; background:#fff; border-radius:.75rem; padding:6px; }
.brand-title{ font-size:.92rem; font-weight:600; letter-spacing:.3px; }
.brand-sub{ font-size:.7rem; opacity:.82; font-weight:300; }
.btn-nav{ color:#fff; border:0; background:transparent; padding:.35rem .6rem; border-radius:.5rem; }
.btn-nav:hover,.btn-nav:focus{ background:rgba(255,255,255,.12); color:#fff; }
.avatar-circle{
  width:34px;height:34px;border-radius:50%;background:var(--vvc-gold);color:#0a2b4d;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;
}
.noti-menu{ width:330px; max-width:92vw; }
.noti-list{ max-height:360px; overflow-y:auto; }
.noti-item{ display:block; padding:.6rem .9rem; border-bottom:1px solid #f1f3f7; color:inherit; }
.noti-item:hover{ background:var(--vvc-050); }
.noti-item.unread{ background:#fffdf3; }

/* ---------------- Layout ---------------- */
.app-wrapper{ display:flex; min-height:calc(100vh - var(--navbar-h)); }
.app-sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--vvc-900); position:fixed; top:var(--navbar-h); bottom:0; left:0;
  overflow-y:auto; z-index:1030;
}
.app-content{ flex:1 1 auto; min-width:0; margin-left:0; display:flex; flex-direction:column; }
@media (min-width:992px){ .app-content{ margin-left:var(--sidebar-w); } }
.app-content > .container-fluid{ flex:1 0 auto; }

.sidebar-inner{ padding:.6rem 0 1.5rem; }
.sidebar-group{
  color:#8fb3d6; font-size:.7rem; letter-spacing:.9px; text-transform:uppercase;
  padding:1rem 1.15rem .35rem; font-weight:500;
}
.sidebar-link{
  display:flex; align-items:center; gap:.7rem; padding:.62rem 1.15rem;
  color:#d7e5f3; font-size:.9rem; border-left:3px solid transparent; transition:all .15s;
}
.sidebar-link i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sidebar-link.active{ background:rgba(240,180,41,.14); color:#fff; border-left-color:var(--vvc-gold); font-weight:500; }
.app-offcanvas{ background:var(--vvc-900); color:#fff; width:262px; }
.app-offcanvas .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
.text-white-75{ color:rgba(255,255,255,.75); }

/* ---------------- Page ---------------- */
.page-title{ font-size:1.3rem; color:var(--vvc-800); font-weight:600; }
@media (max-width:575px){ .page-title{ font-size:1.08rem; } }

.card{ border:0; border-radius:var(--radius); box-shadow:0 1px 3px rgba(16,36,64,.08); }
.card-header{ background:#fff; border-bottom:1px solid #eef1f6; font-weight:500; border-radius:var(--radius) var(--radius) 0 0 !important; }

/* Stat card */
.stat-card{ border-radius:var(--radius); padding:1rem 1.1rem; background:#fff; height:100%;
  box-shadow:0 1px 3px rgba(16,36,64,.08); border-left:4px solid var(--vvc-500); }
.stat-card .stat-value{ font-size:1.7rem; font-weight:600; font-family:'Kanit',sans-serif; line-height:1.1; }
.stat-card .stat-label{ font-size:.82rem; color:#6b7c93; }
.stat-card .stat-icon{ font-size:1.6rem; opacity:.25; }
.stat-primary{border-left-color:var(--vvc-500)} .stat-success{border-left-color:#198754}
.stat-warning{border-left-color:#ffc107} .stat-danger{border-left-color:#dc3545}
.stat-info{border-left-color:#0dcaf0} .stat-dark{border-left-color:#212529}

/* Badge */
.badge-status{ font-weight:400; font-size:.76rem; padding:.4em .7em; border-radius:999px; }

/* Table */
.table{ font-size:.88rem; }
.table > :not(caption) > * > *{ padding:.65rem .7rem; vertical-align:middle; }
.table thead th{ background:var(--vvc-050); color:var(--vvc-800); font-weight:500; white-space:nowrap; border-bottom:2px solid #dce8f4; }
.table-hover tbody tr:hover{ background:#f8fbff; }
.table-responsive{ border-radius:var(--radius); }

/* Document card (mobile) */
.doc-card{ border-left:4px solid #cbd6e4; }
.doc-card.st-submitted{ border-left-color:#198754; }
.doc-card.st-late{ border-left-color:#ffc107; }
.doc-card.st-overdue{ border-left-color:#dc3545; }
.doc-card.st-rejected{ border-left-color:#dc3545; }

/* Form */
.form-label{ font-size:.86rem; font-weight:500; color:#41536b; margin-bottom:.3rem; }
.form-control,.form-select{ font-size:.9rem; border-radius:.5rem; border-color:#d8e0ea; }
.form-control:focus,.form-select:focus{ border-color:var(--vvc-500); box-shadow:0 0 0 .2rem rgba(21,96,168,.12); }
.btn{ border-radius:.5rem; font-size:.9rem; }
.btn-vvc{ background:var(--vvc-600); color:#fff; }
.btn-vvc:hover{ background:var(--vvc-700); color:#fff; }
.required::after{ content:' *'; color:#dc3545; }

/* Dropzone */
.dropzone{
  border:2px dashed #b9c9dc; border-radius:var(--radius); background:#fafcfe;
  padding:1.6rem 1rem; text-align:center; cursor:pointer; transition:.15s;
}
.dropzone:hover,.dropzone.dragover{ border-color:var(--vvc-500); background:var(--vvc-050); }
.dropzone i{ font-size:2.1rem; color:var(--vvc-500); }

/* Login */
.login-page{
  min-height:100vh; padding-top:0 !important;
  background:linear-gradient(135deg,var(--vvc-900) 0%,var(--vvc-600) 55%,#1e7bbf 100%);
  display:flex; align-items:center;
}
.login-card{ border-radius:1rem; overflow:hidden; box-shadow:0 18px 50px rgba(5,25,50,.35); }
.login-brand{ background:linear-gradient(160deg,var(--vvc-800),var(--vvc-600)); color:#fff; }

/* Footer */
.app-footer{ background:#fff; border-top:1px solid #e9eef5; padding:.9rem 0; margin-top:1rem; }

/* Timeline */
.timeline{ position:relative; padding-left:1.6rem; }
.timeline::before{ content:''; position:absolute; left:.45rem; top:.3rem; bottom:.3rem; width:2px; background:#e2e9f2; }
.timeline-item{ position:relative; padding-bottom:1rem; }
.timeline-item::before{
  content:''; position:absolute; left:-1.32rem; top:.35rem; width:11px; height:11px;
  border-radius:50%; background:var(--vvc-500); border:2px solid #fff; box-shadow:0 0 0 2px #e2e9f2;
}

/* Print */
@media print{
  .app-navbar,.app-sidebar,.app-offcanvas,.app-footer,.no-print,.btn{ display:none !important; }
  body.app-body{ padding-top:0; background:#fff; }
  .app-content{ margin-left:0 !important; }
  .card{ box-shadow:none; border:1px solid #ccc; }
}