:root {
    --blue: #185FA5; --blue-light: #E6F1FB; --blue-mid: #378ADD;
    --green: #3B6D11; --green-light: #EAF3DE;
    --amber: #854F0B; --amber-light: #FAEEDA;
    --red: #A32D2D; --red-light: #FCEBEB;
    --purple: #3C3489; --purple-light: #EEEDFE;
    --teal: #085041; --teal-light: #E1F5EE;
    --gray: #444441; --gray-light: #F1EFE8;
    --border: rgba(0,0,0,0.12);
    --text: #1a1a1a; --text-muted: #666;
    --bg: #f5f5f0; --surface: #fff;
    --radius: 10px; --radius-sm: 6px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 15px; min-height: 100vh; }

/* NAV */
.navbar { background: var(--blue); color: #fff; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.navbar-brand { font-weight: 600; font-size: 17px; letter-spacing: -.2px; }
.navbar-brand span { opacity: .7; font-weight: 400; font-size: 13px; margin-left: 8px; }
.navbar-nav { display: flex; align-items: center; gap: 4px; }
.navbar-nav a { color: rgba(255,255,255,.85); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 14px; }
.navbar-nav a:hover, .navbar-nav a.active { background: rgba(255,255,255,.15); color: #fff; }
.navbar-nav .logout { color: rgba(255,255,255,.7); cursor: pointer; background: none; border: none; font-size: 14px; padding: 6px 12px; border-radius: var(--radius-sm); }
.navbar-nav .logout:hover { background: rgba(255,255,255,.15); color: #fff; }
.navbar-user { font-size: 13px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

/* LAYOUT */
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 1.25rem; }

/* CARDS */
.card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 1.25rem; margin-bottom: 1rem; }
.card-title { font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }

/* METRICS */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 1.5rem; }
.metric { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 1rem 1.1rem; }
.metric-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.metric-value { font-size: 22px; font-weight: 700; }
.metric-value.blue { color: var(--blue); }
.metric-value.green { color: var(--green); }
.metric-value.amber { color: var(--amber); }
.metric-value.red { color: var(--red); }
.metric-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* FORMS */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; }
.form-control { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; font-size: 14px; background: var(--surface); color: var(--text); transition: border-color .15s; }
.form-control:focus { outline: none; border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(55,138,221,.15); }
textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap; }
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #0C447C; border-color: #0C447C; color: #fff; }
.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: #27500A; color: #fff; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #791F1F; color: #fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-full { width: 100%; }

/* TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafaf8; }

/* BADGES */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.badge-pending  { background: var(--amber-light); color: var(--amber); }
.badge-approved { background: var(--green-light); color: var(--green); }
.badge-flagged  { background: var(--red-light);   color: var(--red);   }
.badge-labor    { background: var(--purple-light); color: var(--purple); }
.badge-materials{ background: var(--teal-light);   color: var(--teal);   }
.badge-transport{ background: var(--amber-light);  color: var(--amber);  }
.badge-machinery{ background: var(--blue-light);   color: var(--blue);   }
.badge-rent     { background: #FAECE7; color: #712B13; }
.badge-food     { background: #FBEAF0; color: #72243E; }
.badge-other    { background: var(--gray-light);   color: var(--gray);   }
.badge-vendor   { background: #26215C; color: #CECBF6; }

/* ALERTS */
.alert { padding: .85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 14px; }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid #C0DD97; }
.alert-error   { background: var(--red-light);   color: var(--red);   border: 1px solid #F09595; }
.alert-warning { background: var(--amber-light); color: var(--amber); border: 1px solid #FAC775; }
.alert-info    { background: var(--blue-light);  color: var(--blue);  border: 1px solid #B5D4F4; }

/* STORY BOX */
.story-box { background: #FFFEF7; border: 1px solid #FAC775; border-radius: var(--radius-sm); padding: 1rem; font-size: 14px; line-height: 1.7; color: var(--text); }
.story-date { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }

/* TABS */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.tab-btn { padding: 8px 16px; border: none; background: none; font-size: 14px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* LOGIN */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 2rem; width: 380px; max-width: 95vw; }
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo h1 { font-size: 22px; font-weight: 700; color: var(--blue); }
.login-logo p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* PENDING CARD */
.exp-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .75rem; background: var(--surface); }
.exp-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.exp-card-person { display: flex; align-items: center; gap: 8px; }
.exp-card-amount { font-size: 18px; font-weight: 700; color: var(--blue); }
.exp-card-desc { font-size: 15px; margin-bottom: 4px; }
.exp-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.exp-card-story { background: #FFFEF7; border-left: 3px solid #EF9F27; padding: .6rem .85rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; color: var(--text); margin-bottom: 10px; font-style: italic; }
.exp-card-actions { display: flex; gap: 8px; }

/* PERSON CHIP */
.person-chip { display: flex; align-items: center; gap: 8px; }
.person-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--purple-light); color: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* EMPTY STATE */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .icon { font-size: 40px; margin-bottom: .75rem; }

/* RESPONSIVE */
@media (max-width: 640px) {
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .navbar-nav a span { display: none; }
    .container { padding: 1rem .75rem; }
    .metrics { grid-template-columns: 1fr 1fr; }
}

/* PRINT */
@media print {
    .navbar, .btn, .exp-card-actions { display: none !important; }
    body { background: white; }
    .card { border: 1px solid #ccc; }
}