:root{
  --ink:        #16233A;   /* deep navy — primary text & sidebar */
  --ink-soft:   #47526B;   /* secondary text */
  --line:       #DDE2EA;   /* hairline borders */
  --surface:    #FFFFFF;
  --canvas:     #F4F6F9;   /* page background */
  --sand:       #EEF1F5;   /* subtle fill */
  --gold:       #B9862E;   /* civic accent — used sparingly */
  --gold-soft:  #F6ECDA;

  --ok:         #1F7A4D;
  --ok-bg:      #E7F5EC;
  --warn:       #B0740E;
  --warn-bg:    #FCF1DD;
  --danger:     #B4322A;
  --danger-bg:  #FBEAE8;
  --info:       #2A5FA5;
  --info-bg:    #E9F0FA;
  --idle:       #5B6577;
  --idle-bg:    #EBEDF1;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-1: 0 1px 2px rgba(22,35,58,.06);
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

html,body{ height:100%; }
body{
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a{ color: var(--info); text-decoration:none; }
a:hover{ color: var(--ink); }

small, .text-muted{ color: var(--ink-soft) !important; }

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: 248px;
  flex: 0 0 248px;
  background: var(--ink);
  color: #C9D2E3;
  display:flex;
  flex-direction:column;
  position: fixed;
  top:0; bottom:0; left:0;
  z-index: 1030;
  transition: transform .2s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:.65rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .brand .mark{
  width:34px; height:34px; border-radius:8px;
  background: linear-gradient(155deg, var(--gold), #8F6522);
  display:flex; align-items:center; justify-content:center;
  color:#20140a; font-weight:700; font-size:.95rem;
  flex: 0 0 auto;
}
.sidebar .brand .name{ color:#fff; font-weight:700; font-size:.95rem; line-height:1.2; }
.sidebar .brand .sub{ color:#8C96AC; font-size:.72rem; }

.sidebar nav{ padding: .9rem .75rem; flex:1; overflow-y:auto; }
.sidebar .nav-section{
  text-transform: none;
  font-size: .72rem;
  color:#7A84A0;
  padding: .9rem .6rem .35rem;
}
.sidebar .nav-link{
  color:#C9D2E3;
  padding:.55rem .7rem;
  border-radius: var(--radius-sm);
  font-size:.89rem;
  display:flex; align-items:center; gap:.65rem;
  margin-bottom:2px;
}
.sidebar .nav-link i{ font-size:1rem; width:18px; text-align:center; opacity:.85; }
.sidebar .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active{
  background: rgba(185,134,46,.16);
  color:#fff;
  box-shadow: inset 3px 0 0 var(--gold);
}
.sidebar .sidebar-foot{
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size:.78rem;
  color:#8C96AC;
}

.main{
  margin-left: 248px;
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction: column;
}

.topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
  position: sticky; top:0; z-index: 1020;
}
.topbar .page-title{ font-weight:700; font-size:1.05rem; margin:0; }
.topbar .breadcrumb-line{ font-size:.78rem; color: var(--ink-soft); margin:0; }
.topbar .spacer{ flex:1; }

.avatar-chip{
  display:flex; align-items:center; gap:.55rem;
  padding: .3rem .5rem .3rem .3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.avatar-circle{
  width:32px;height:32px;border-radius:50%;
  background: var(--gold-soft); color:#5C3F13;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.78rem;
}

.content{ padding: 1.5rem; flex:1; }

/* menu toggle for small screens */
.menu-toggle{ display:none; }
@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.open{ transform: translateX(0); }
  .main{ margin-left:0; }
  .menu-toggle{ display:inline-flex; }
  .sidebar-backdrop.show{ display:block; }
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,20,32,.45); z-index:1025;
}

/* ---------- Cards ---------- */
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-weight:700;
  padding: .9rem 1.1rem;
}
.card-body{ padding: 1.1rem; }

.stat-card{
  border-left: 3px solid var(--line);
  padding: 1rem 1.1rem;
}
.stat-card .stat-label{ font-size:.78rem; color:var(--ink-soft); margin-bottom:.3rem; }
.stat-card .stat-value{ font-size: 1.7rem; font-weight:700; line-height:1; }
.stat-card .stat-foot{ font-size:.76rem; color:var(--ink-soft); margin-top:.4rem; }
.stat-card.accent-gold{ border-left-color: var(--gold); }
.stat-card.accent-ok{ border-left-color: var(--ok); }
.stat-card.accent-info{ border-left-color: var(--info); }
.stat-card.accent-danger{ border-left-color: var(--danger); }

/* ---------- Status badges ---------- */
.badge-status{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.76rem;
  padding:.32rem .62rem;
  border-radius: 999px;
}
.badge-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ongoing{ background:var(--info-bg); color:var(--info); }
.badge-completed{ background:var(--ok-bg); color:var(--ok); }
.badge-not-started{ background:var(--idle-bg); color:var(--idle); }
.badge-delayed{ background:var(--warn-bg); color:var(--warn); }
.badge-stalled{ background:var(--danger-bg); color:var(--danger); }

/* ---------- Tables ---------- */
.table-clean{ margin-bottom:0; }
.table-clean thead th{
  font-size:.72rem;
  text-transform:none;
  color: var(--ink-soft);
  font-weight:700;
  border-bottom: 1px solid var(--line);
  padding: .7rem .9rem;
  white-space:nowrap;
}
.table-clean tbody td{
  padding: .8rem .9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  font-size: .87rem;
}
.table-clean tbody tr:last-child td{ border-bottom:none; }
.table-clean tbody tr:hover{ background: var(--sand); }
.proj-name{ font-weight:600; color:var(--ink); }
.proj-code{ font-size:.76rem; color:var(--ink-soft); }

/* ---------- Forms ---------- */
.form-label{ font-size:.83rem; font-weight:600; color:var(--ink); }
.form-control, .form-select{
  border-color: var(--line);
  font-size:.89rem;
  padding: .5rem .7rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185,134,46,.15);
}
.section-title{
  font-size: .95rem;
  font-weight:700;
  padding-bottom:.5rem;
  margin-bottom:1rem;
  border-bottom: 1px solid var(--line);
}
.field-hint{ font-size:.76rem; color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{ font-size:.87rem; font-weight:600; border-radius: var(--radius-sm); }
.btn-primary{
  background: var(--ink); border-color: var(--ink);
}
.btn-primary:hover, .btn-primary:focus{ background:#0E1830; border-color:#0E1830; }
.btn-gold{
  background: var(--gold); border-color: var(--gold); color:#fff;
}
.btn-gold:hover{ background:#9E7226; border-color:#9E7226; color:#fff; }
.btn-outline-line{ border-color: var(--line); color: var(--ink); background:#fff; }
.btn-outline-line:hover{ background: var(--sand); color:var(--ink); }

/* ---------- Login page ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  background: var(--ink);
}
.login-visual{
  flex:1.1;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(185,134,46,.25), transparent 60%),
    linear-gradient(155deg,#0E1830,#1B2A4A 60%, #223759);
  color:#fff;
  padding: 3.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
}
.login-visual .crest{
  width:46px;height:46px;border-radius:10px;
  background: linear-gradient(155deg, var(--gold), #8F6522);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.login-visual h2{ color:#fff; font-size:1.9rem; max-width: 420px; }
.login-visual .quote{ color:#B7C0D6; font-size:.9rem; max-width:380px; }
.login-form-side{
  flex:1; background:var(--canvas);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem;
}
.login-card{ width:100%; max-width:400px; }

/* ---------- Misc ---------- */
.divider-label{
  display:flex; align-items:center; gap:.75rem;
  color:var(--ink-soft); font-size:.78rem; margin: 1.1rem 0;
}
.divider-label::before, .divider-label::after{
  content:""; height:1px; background:var(--line); flex:1;
}
.empty-state{
  text-align:center; padding: 3rem 1rem; color: var(--ink-soft);
}
.empty-state i{ font-size:2rem; color: var(--line); margin-bottom:.75rem; display:block; }

.timeline-track{ background: var(--line); height:6px; border-radius:3px; overflow:hidden; }
.timeline-fill{ height:100%; background: var(--gold); }

.progress-thin{ height:6px; border-radius:3px; background: var(--sand); }
.progress-thin .progress-bar{ background: var(--ink); }

::selection{ background: var(--gold-soft); }

.skip-link{
  position:absolute; left:-999px; top:auto;
}
.skip-link:focus{
  left: 1rem; top: 1rem; background:#fff; padding:.5rem 1rem; z-index:2000; border-radius:6px;
}


/* ---------- Top-bar user menu ---------- */
.user-menu .dropdown-menu{ border-radius:12px; border-color:var(--line); box-shadow:0 4px 14px rgba(22,35,58,.08); min-width:240px; padding:.4rem; }
.user-menu .dropdown-item{ border-radius:8px; font-size:.86rem; padding:.5rem .7rem; display:flex; align-items:center; gap:.55rem; }
.user-menu .dropdown-item.active, .user-menu .dropdown-item:active{ background:var(--sand); color:var(--ink); }
.user-menu .dropdown-header{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }