/* ============================================================
   ProjectTracker ERP — Design System
   Material Design · Corporate Blue · v2.0 · 2026-02-17
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

/* ─── CSS VARIABLES ─── */
:root {
  --primary:        #1A73E8;
  --primary-dark:   #1557B0;
  --primary-light:  #E8F0FE;
  --primary-mid:    #4285F4;
  --success:        #34A853;
  --success-light:  #E6F4EA;
  --warning:        #E37400;
  --warning-light:  #FEF3E2;
  --danger:         #EA4335;
  --danger-dark:    #C5221F;
  --danger-light:   #FCE8E6;
  --sidebar-bg:     #1A237E;
  --sidebar-active: #1A73E8;
  --sidebar-hover:  rgba(255,255,255,.07);
  --sidebar-text:   rgba(255,255,255,.85);
  --sidebar-icon:   rgba(255,255,255,.6);
  --surface:        #FFFFFF;
  --surface-2:      #F8F9FA;
  --surface-3:      #F1F3F4;
  --border:         #DADCE0;
  --text-primary:   #202124;
  --text-secondary: #5F6368;
  --text-disabled:  #9AA0A6;
  --shadow-1: 0 1px 3px rgba(60,64,67,.3), 0 1px 2px rgba(60,64,67,.15);
  --shadow-2: 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 12px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);
  --sidebar-w:  256px;
  --topbar-h:   64px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto',sans-serif; background:var(--surface-2); color:var(--text-primary); min-height:100vh; display:flex; }
a { text-decoration:none; color:inherit; }
button { font-family:'Roboto',sans-serif; }
input, select, textarea { font-family:'Roboto',sans-serif; }

/* ─── LAYOUT ─── */
.erp-layout { display:flex; min-height:100vh; }
.erp-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }
.page-content { padding:24px; flex:1; }

/* ─── SIDEBAR ─── */
.erp-sidebar { width:var(--sidebar-w); background:var(--sidebar-bg); height:100vh; position:fixed; left:0;top:0; display:flex; flex-direction:column; z-index:100; }
.sidebar-logo { height:var(--topbar-h); display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.logo-icon { width:36px;height:36px; background:linear-gradient(135deg,#4285F4,#34A853); border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:18px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.logo-text { font-family:'Google Sans',sans-serif; font-size:15px; font-weight:700; color:#fff; line-height:1.2; }
.logo-text span { display:block; font-size:10px; font-weight:400; color:rgba(255,255,255,.5); letter-spacing:.5px; text-transform:uppercase; }
.nav-menu { flex:1; padding:12px 0; overflow-y:auto; list-style:none; }
.nav-section-label { font-size:10px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.35); padding:16px 20px 6px; }
.nav-item { margin:2px 8px; border-radius:8px; list-style:none; }
.nav-link { display:flex; align-items:center; gap:14px; padding:11px 12px; color:var(--sidebar-text); font-size:13.5px; border-radius:8px; cursor:pointer; transition:background .15s; }
.nav-link:hover { background:var(--sidebar-hover); }
.nav-item.active .nav-link { background:var(--sidebar-active); color:#fff; font-weight:500; box-shadow:0 2px 8px rgba(26,115,232,.4); }
.nav-link .material-icons-round { font-size:20px; color:var(--sidebar-icon); flex-shrink:0; }
.nav-item.active .nav-link .material-icons-round { color:rgba(255,255,255,.9); }
.nav-badge { margin-left:auto; background:#EA4335; color:#fff; font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; min-width:18px; text-align:center; }
.nav-footer { padding:12px 8px; border-top:1px solid rgba(255,255,255,.08); }
.user-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:background .15s; }
.user-card:hover { background:var(--sidebar-hover); }
.user-avatar { width:32px;height:32px; background:linear-gradient(135deg,#4285F4,#34A853); border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Google Sans',sans-serif; font-size:13px;font-weight:600; color:#fff; flex-shrink:0; }
.user-name { font-size:13px;font-weight:500;color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px;color:rgba(255,255,255,.45); }

/* ─── TOPBAR ─── */
.erp-topbar { height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:16px; position:sticky;top:0;z-index:50; box-shadow:var(--shadow-1); }
.topbar-title { font-family:'Google Sans',sans-serif; font-size:20px; font-weight:500; flex:1; }
.topbar-search { display:flex; align-items:center; gap:8px; background:var(--surface-3); border:1px solid var(--border); border-radius:24px; padding:6px 16px; width:280px; transition:all .2s; }
.topbar-search:focus-within { background:#fff; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.topbar-search input { border:none;background:none;font-size:14px;outline:none;flex:1; }
.topbar-search .material-icons-round { font-size:18px;color:var(--text-secondary); }
.icon-btn { width:40px;height:40px; border:none;background:none; border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer; color:var(--text-secondary); transition:background .15s; position:relative; }
.icon-btn:hover { background:var(--surface-3); }
.notif-dot { position:absolute;top:8px;right:8px; width:8px;height:8px; background:#EA4335; border-radius:50%; border:2px solid #fff; }

/* ─── BREADCRUMB ─── */
.breadcrumb { display:flex;align-items:center;gap:6px; font-size:13px;color:var(--text-secondary); margin-bottom:20px; }
.breadcrumb .material-icons-round { font-size:16px; }
.breadcrumb a { color:var(--primary); }
.breadcrumb a:hover { text-decoration:underline; }

/* ─── KPI GRID ─── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi-card { background:var(--surface); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-1); border:1px solid var(--border); position:relative; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.kpi-card:hover { box-shadow:var(--shadow-2); transform:translateY(-1px); }
.kpi-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; }
.kpi-card.primary::before, .kpi-card.blue::before { background:var(--primary); }
.kpi-card.success::before, .kpi-card.green::before { background:var(--success); }
.kpi-card.warning::before, .kpi-card.orange::before { background:var(--warning); }
.kpi-card.danger::before, .kpi-card.red::before   { background:var(--danger); }
.kpi-icon-wrap { width:44px;height:44px; border-radius:10px; display:flex;align-items:center;justify-content:center; margin-bottom:14px; }
.kpi-card.primary .kpi-icon-wrap, .kpi-card.blue .kpi-icon-wrap { background:var(--primary-light);color:var(--primary); }
.kpi-card.success .kpi-icon-wrap, .kpi-card.green .kpi-icon-wrap { background:var(--success-light);color:var(--success); }
.kpi-card.warning .kpi-icon-wrap, .kpi-card.orange .kpi-icon-wrap { background:var(--warning-light);color:var(--warning); }
.kpi-card.danger .kpi-icon-wrap,  .kpi-card.red .kpi-icon-wrap   { background:var(--danger-light);color:var(--danger); }
.kpi-icon-wrap .material-icons-round { font-size:22px; }
.kpi-label { font-size:11px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px; }
.kpi-value { font-family:'Google Sans',sans-serif;font-size:26px;font-weight:700;line-height:1;margin-bottom:6px; }
.kpi-sub  { font-size:12px;color:var(--text-secondary); }
.kpi-trend { display:flex;align-items:center;gap:4px;font-size:12px; }
.kpi-trend.up { color:var(--success); }
.kpi-trend.down { color:var(--danger); }
.kpi-trend .material-icons-round { font-size:14px; }

/* ─── CARD ─── */
.card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); border:1px solid var(--border); overflow:hidden; }
.card-header { display:flex;align-items:center;justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.card-title { font-family:'Google Sans',sans-serif;font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px; }
.card-title .material-icons-round { font-size:18px;color:var(--primary); }
.card-body  { padding:20px; }
.card + .card { margin-top:16px; }

/* ─── BUTTONS ─── */
.btn-primary { display:inline-flex;align-items:center;gap:8px; padding:9px 18px; border-radius:8px; border:none; background:var(--primary); color:#fff; font-size:13px;font-weight:500; cursor:pointer; transition:all .15s; box-shadow:0 1px 4px rgba(26,115,232,.3); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { display:inline-flex;align-items:center;gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); font-size:13px;font-weight:500; cursor:pointer; transition:all .15s; }
.btn-secondary:hover { border-color:var(--primary);color:var(--primary); }
.btn-text { border:none;background:none; font-size:13px;font-weight:500;color:var(--primary); padding:6px 12px; border-radius:6px; cursor:pointer; transition:background .15s; }
.btn-text:hover { background:var(--primary-light); }
.btn-sm { padding:5px 10px; border-radius:6px; font-size:12px;font-weight:500; border:1px solid var(--border);background:var(--surface); cursor:pointer;color:var(--text-secondary); display:inline-flex;align-items:center;gap:4px; transition:all .15s; }
.btn-sm:hover { border-color:var(--primary);color:var(--primary);background:var(--primary-light); }
.btn-sm .material-icons-round { font-size:13px; }
.btn-sm.danger:hover { border-color:var(--danger);color:var(--danger-dark);background:var(--danger-light); }
.btn-primary .material-icons-round, .btn-secondary .material-icons-round { font-size:17px; }

/* ─── BADGES ─── */
.badge { display:inline-flex;align-items:center;gap:4px; padding:3px 10px; border-radius:12px; font-size:11.5px;font-weight:500; }
.badge::before { content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0; }
.badge.paid, .badge.success  { background:var(--success-light);color:#137333; }
.badge.paid::before, .badge.success::before { background:var(--success); }
.badge.pending, .badge.warning { background:var(--warning-light);color:#B06000; }
.badge.pending::before, .badge.warning::before { background:var(--warning); }
.badge.overdue, .badge.danger { background:var(--danger-light);color:var(--danger-dark); }
.badge.overdue::before, .badge.danger::before { background:var(--danger); }
.badge.approved, .badge.info { background:var(--primary-light);color:var(--primary-dark); }
.badge.approved::before, .badge.info::before { background:var(--primary); }

/* ─── TABLE ─── */
.erp-table { width:100%;border-collapse:collapse; }
.table-toolbar { display:flex;align-items:center;gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); flex-wrap:wrap; }
.table-header { display:flex;align-items:center;justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.table-header h3 { font-family:'Google Sans',sans-serif;font-size:15px;font-weight:500; }
.table-footer { display:flex;align-items:center;justify-content:space-between; padding:10px 16px; background:var(--surface-2); border-top:1px solid var(--border); font-size:13px;color:var(--text-secondary); }
.erp-table thead tr { background:var(--surface-3); border-bottom:2px solid var(--border); }
.erp-table th { padding:11px 16px; text-align:left; font-size:11px;font-weight:600;color:var(--text-secondary); text-transform:uppercase;letter-spacing:.6px; white-space:nowrap; cursor:pointer;user-select:none; }
.erp-table th:hover { color:var(--primary); }
.erp-table td { padding:13px 16px; font-size:13.5px; border-bottom:1px solid var(--border); vertical-align:middle; }
.erp-table tbody tr { transition:background .1s; }
.erp-table tbody tr:hover { background:var(--primary-light); }
.erp-table tbody tr:last-child td { border-bottom:none; }
.erp-table td.loading, .erp-table td.empty { text-align:center;color:var(--text-secondary);padding:32px; }
.erp-table .total-row td { background:var(--surface-3);font-weight:600; border-top:2px solid var(--border); }
.cell-primary { font-family:'Roboto Mono',monospace;font-size:12.5px;font-weight:500;color:var(--primary); }
.amount { font-family:'Roboto Mono',monospace;font-size:13px; }

/* ─── FORM ─── */
.search-field { display:flex;align-items:center;gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 12px; transition:all .2s; }
.search-field:focus-within { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.search-field input { border:none;background:none;font-size:13px;outline:none;flex:1; }
.search-field .material-icons-round { font-size:17px;color:var(--text-secondary); }
.select-field { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--surface); color:var(--text-primary); outline:none; cursor:pointer; }
.select-field:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.chip-group { display:flex;gap:6px;flex-wrap:wrap; }
.chip { padding:5px 12px;border-radius:16px;font-size:12px;font-weight:500; border:1px solid var(--border);background:var(--surface);cursor:pointer; transition:all .15s;color:var(--text-secondary); }
.chip:hover { border-color:var(--primary);color:var(--primary);background:var(--primary-light); }
.chip.active { background:var(--primary);color:#fff;border-color:var(--primary); }
.form-row { margin-bottom:14px; }
.form-row label { display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:5px; }
.form-row input, .form-row select, .form-row textarea { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; transition:border-color .2s; background:var(--surface); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }

/* ─── MODAL ─── */
.modal { position:fixed;inset:0;background:rgba(32,33,36,.6);display:flex;align-items:center;justify-content:center;z-index:500; backdrop-filter:blur(2px); }
.modal.hidden { display:none; }
.modal-box { background:var(--surface);border-radius:var(--radius-xl);padding:28px; width:480px;max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-3); }
.modal-box h3 { font-family:'Google Sans',sans-serif;font-size:18px;font-weight:600;margin-bottom:20px; }
.modal-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border); }

/* ─── VIEW TOGGLE ─── */
.view-toggle { display:flex;background:var(--surface-3);border-radius:8px;padding:3px;gap:2px; }
.view-btn { padding:6px 14px;border-radius:6px;border:none;background:none;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-secondary);transition:all .15s; }
.view-btn .material-icons-round { font-size:16px; }
.view-btn.active { background:var(--surface);box-shadow:var(--shadow-1);color:var(--primary); }

/* ─── PERSON / WORKLOAD CARDS ─── */
.persons-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.person-card { background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);border:1px solid var(--border);overflow:hidden;transition:box-shadow .2s,transform .2s; }
.person-card:hover { box-shadow:var(--shadow-2);transform:translateY(-2px); }
.person-card.overloaded { border-color:#FECDD2; }
.person-card-header { padding:16px 16px 12px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border); }
.person-card.overloaded .person-card-header { background:#FFF8F8; }
.person-avatar-lg { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Google Sans',sans-serif;font-size:16px;font-weight:700;color:#fff;flex-shrink:0; }
.av-blue   { background:linear-gradient(135deg,#1A73E8,#4285F4); }
.av-green  { background:linear-gradient(135deg,#34A853,#0F9D58); }
.av-orange { background:linear-gradient(135deg,#F29900,#E37400); }
.av-purple { background:linear-gradient(135deg,#7B1FA2,#AB47BC); }
.av-teal   { background:linear-gradient(135deg,#00796B,#26A69A); }
.av-red    { background:linear-gradient(135deg,#D32F2F,#EF5350); }
.person-name { font-family:'Google Sans',sans-serif;font-size:15px;font-weight:600;margin-bottom:2px; }
.person-role { font-size:12px;color:var(--text-secondary);margin-bottom:8px; }
.capacity-bar-wrap { display:flex;align-items:center;gap:8px; }
.capacity-bar { flex:1;height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden; }
.capacity-fill { height:100%;border-radius:3px;transition:width .4s ease; }
.fill-green  { background:linear-gradient(90deg,#34A853,#4CAF50); }
.fill-orange { background:linear-gradient(90deg,#F29900,#FF9800); }
.fill-red    { background:linear-gradient(90deg,#EA4335,#EF5350); }
.capacity-pct { font-size:12px;font-weight:600;font-family:'Roboto Mono',monospace;white-space:nowrap; }
.pct-green  { color:var(--success); }
.pct-orange { color:var(--warning); }
.pct-red    { color:var(--danger); }
.person-card-body { padding:12px 16px; }
.task-item { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.task-item:last-child { border-bottom:none; }
.task-status-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.dot-done { background:var(--success); }
.dot-progress { background:var(--primary); }
.dot-todo { background:var(--border); }
.task-info { flex:1;min-width:0; }
.task-name { font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3; }
.task-meta { font-size:11px;color:var(--text-secondary);display:flex;gap:8px;margin-top:2px;align-items:center; }
.task-meta .material-icons-round { font-size:12px; }
.task-badge { font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;flex-shrink:0; }
.tb-done     { background:var(--success-light);color:#137333; }
.tb-progress { background:var(--primary-light);color:var(--primary-dark); }
.tb-todo     { background:var(--surface-3);color:var(--text-secondary); }
.person-card-footer { padding:10px 16px;background:var(--surface-2);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.person-card.overloaded .person-card-footer { background:#FFF4F4; }
.deadline-chip { display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-secondary); }
.deadline-chip.soon    { color:var(--warning); }
.deadline-chip.overdue { color:var(--danger); }
.deadline-chip .material-icons-round { font-size:12px; }

/* ─── FAB ─── */
.fab { position:fixed;right:28px;bottom:28px; background:var(--primary);color:#fff; border:none;border-radius:16px;padding:16px 24px; display:flex;align-items:center;gap:10px; font-family:'Google Sans',sans-serif;font-size:14px;font-weight:500; cursor:pointer;box-shadow:0 4px 12px rgba(26,115,232,.4);transition:all .2s; }
.fab:hover { background:var(--primary-dark);box-shadow:0 6px 20px rgba(26,115,232,.5);transform:translateY(-1px); }
.fab .material-icons-round { font-size:20px; }

/* ─── MISC ─── */
.two-col-grid  { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px; }
.charts-grid   { display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px; }
.loading-spinner { text-align:center;color:var(--text-secondary);padding:32px; }
.empty-state { text-align:center;padding:48px;color:var(--text-secondary); }
.empty-state .material-icons-round { font-size:48px;opacity:.3;display:block;margin-bottom:12px; }