@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg: oklch(0.985 0.003 240);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.97 0.005 240);
  --border: oklch(0.9 0.007 240);
  --border-strong: oklch(0.8 0.012 240);
  --text: oklch(0.22 0.02 240);
  --text-muted: oklch(0.52 0.02 240);
  --text-faint: oklch(0.64 0.015 240);
  --accent: oklch(0.55 0.15 240);
  --accent-soft: oklch(0.94 0.035 240);
  --accent-text: oklch(0.42 0.14 240);
  --success: oklch(0.62 0.13 155);
  --success-soft: oklch(0.94 0.05 155);
  --success-text: oklch(0.44 0.12 155);
  --warn: oklch(0.65 0.16 50);
  --warn-soft: oklch(0.95 0.05 50);
  --warn-text: oklch(0.47 0.15 45);
  --neutral-soft: oklch(0.95 0.004 240);
  --neutral-text: oklch(0.5 0.015 240);
  --avatar-bg: oklch(0.32 0.02 240);

  --sidebar-w: 216px;
  --sidebar-bg: #16213a;
  --sidebar-bg-2: #1c2a47;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-text: #8d9bb8;
  --sidebar-text-dim: #5f6d8a;
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,0.045);
  --sidebar-item-active-bg: #24334f;
  --sidebar-active-accent: #f2a93c;
  --ic-amber: #f2a93c;
  --ic-blue: #5b93ff;
  --ic-green: #3ec281;
  --ic-teal: #2fd0c7;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:13px; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Manrope', system-ui, sans-serif; margin:0; color:var(--text);}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-text);}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}

.app-shell{display:flex; min-height:100vh;}
.btn-primary{background:var(--accent); color:white; border:none; padding:9px 16px; border-radius:8px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px;}
.btn-secondary{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); padding:9px 16px; border-radius:8px; font-weight:600; font-size:13px;}
.btn-link{background:none; border:none; color:var(--accent); font-weight:600; font-size:13px; padding:0;}
.user-chip{display:flex; align-items:center; gap:8px;}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--avatar-bg); color:white; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; font-family:'Manrope',sans-serif; flex-shrink:0;}
.avatar-sm{width:24px; height:24px; font-size:10px;}
.user-name{font-size:12px; font-weight:600;}
.user-role{font-size:11px; color:var(--text-faint);}

/* ---- Left sidebar ---- */
/* #sidebar-root is pre-painted with the sidebar's own width/background
   BEFORE renderSidebar() fills it in, so there's no visible flash of empty
   (light-colored) space between navigating to a new page and the sidebar
   JS running. */
#sidebar-root{width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); min-height:100vh;}
.sidebar{width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0;}
.sidebar-logo{padding:20px 20px 16px; border-bottom:1px solid var(--sidebar-border);}
.sidebar-logo-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; color:#fff; letter-spacing:.02em;}
.sidebar-logo-sub{font-size:10.5px; color:var(--ic-blue); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:1px;}
.sidebar-nav{flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;}
.sidebar-item{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--sidebar-text); font-size:13px; font-weight:500; border-left:3px solid transparent; margin-left:-3px;}
.sidebar-item svg{width:17px; height:17px; flex-shrink:0; stroke-width:2;}
.sidebar-item:hover{background:var(--sidebar-item-hover); color:#c3cee2;}
.sidebar-item.active{background:var(--sidebar-item-active-bg); color:var(--sidebar-text-active); font-weight:700; border-left-color:var(--sidebar-active-accent);}
.sidebar-item.active svg{color:var(--sidebar-active-accent);}
.ic-amber{color:var(--ic-amber);}
.ic-blue{color:var(--ic-blue);}
.ic-green{color:var(--ic-green);}
.ic-teal{color:var(--ic-teal);}
.sidebar-footer{padding:14px 20px; border-top:1px solid var(--sidebar-border); font-size:11.5px; color:var(--sidebar-text-dim); font-weight:500;}

/* ---- Main area / page header ---- */
.main-area{flex:1; display:flex; flex-direction:column; min-width:0;}
.page-header{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 28px; background:var(--surface); border-bottom:1px solid var(--border);}
.page-header h1{font-size:19px; font-weight:700;}
.page-header .muted{margin:2px 0 0;}
.ph-user{display:flex; align-items:center; gap:16px; flex-shrink:0;}

.content{flex:1; padding:22px 28px 40px; width:100%;}
.muted{color:var(--text-muted); font-size:13px; margin:4px 0 0;}
.page-actions{display:flex; justify-content:flex-end; margin-bottom:16px;}

.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px;}
.stat-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600;}
.stat-value{font-family:'Manrope',sans-serif; font-size:26px; font-weight:700; margin-top:6px;}
.stat-success{color:var(--success-text);}
.stat-warn{color:var(--warn-text);}
/* Sits in the stats-row grid's 4th column (grid items stretch to the row's
   height by default), so it lines up exactly with the stat cards instead of
   floating above them on its own line. */
.btn-new-project{justify-content:center; font-size:13.5px; grid-column:4;}

/* ---- Modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,20,32,0.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;}
.modal-overlay[hidden]{display:none;}
.modal-box{background:var(--surface); border-radius:14px; width:100%; max-width:720px; max-height:90vh; overflow-y:auto; box-shadow:0 12px 40px rgba(20,24,40,0.18);}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px 0;}
.modal-head h2{font-size:17px; font-weight:700;}
.modal-close{background:none; border:none; color:var(--text-faint); font-size:20px; line-height:1; padding:4px; border-radius:6px;}
.modal-close:hover{background:var(--surface-2); color:var(--text);}
.modal-body{padding:18px 24px 24px;}
.modal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.modal-grid .field.span-2{grid-column:span 2;}
.modal-grid .field.span-3{grid-column:span 3;}
@media (max-width:760px){ .modal-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .modal-grid{grid-template-columns:1fr;} }

.table-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(20,24,40,0.03);}
table{width:100%; border-collapse:collapse;}
th{text-align:left; padding:11px 16px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; border-bottom:1px solid var(--border); background:var(--surface-2);}
td{padding:13px 16px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-2);}
.job-no{font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px;}
.tag{padding:3px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); font-size:11.5px; color:var(--text-muted); font-weight:500; white-space:nowrap;}

.status-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;}
.status-ontrack{background:var(--success-soft); color:var(--success-text);}
.status-delayed{background:var(--warn-soft); color:var(--warn-text);}
.status-completed{background:var(--accent-soft); color:var(--accent-text);}
.status-notstarted{background:var(--neutral-soft); color:var(--neutral-text);}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}

/* ---- Tabs (Settings page) ---- */
.tabs{display:flex; gap:24px; border-bottom:1px solid var(--border); margin-bottom:22px;}
.tab-btn{padding:0 0 11px; background:none; border:none; border-bottom:2px solid transparent; font-weight:600; font-size:13.5px; color:var(--text-muted); margin-bottom:-1px;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent-text); border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.list-row{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-row-name{font-weight:600; font-size:13px;}
.list-row-sub{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
.prefix-input{width:90px; padding:6px 9px; border:1px solid var(--border-strong); border-radius:7px; font-size:12.5px; text-transform:uppercase; text-align:center; color:var(--text);}
.btn-sm{padding:6px 12px; font-size:12px;}
.btn-danger-text{background:none; border:none; color:var(--warn-text); font-weight:600; font-size:12px; padding:4px 6px;}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state h3{color:var(--text); font-size:15px; margin-bottom:6px;}
.empty-state p{font-size:13px; margin:0 0 18px;}

.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px;}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px; width:100%; max-width:380px; box-shadow:0 4px 24px rgba(20,24,40,0.06);}
.auth-logo{display:flex; align-items:center; gap:10px; margin-bottom:24px;}
.logo-mark{width:36px; height:36px; border-radius:9px; background:var(--sidebar-bg); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.01em; flex-shrink:0;}
.logo-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; line-height:1.25; color:var(--text);}
.logo-sub{font-size:10.5px; color:var(--ic-blue); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:1px;}
.auth-card h1{font-size:18px; font-weight:700; margin-bottom:4px;}
.auth-card .muted{margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px;}
.field input,.field select{width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:8px; font-size:13px; color:var(--text); background:var(--surface);}
.field input:focus,.field select:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.auth-submit{width:100%; margin-top:6px; padding:11px; text-align:center; justify-content:center;}
.auth-error{background:var(--warn-soft); color:var(--warn-text); padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px;}
.auth-footer{margin-top:18px; text-align:center; font-size:12.5px; color:var(--text-muted);}