:root{--navy:#102a43;--navy2:#163b5c;--orange:#f47b20;--green:#2d8a57;--gold:#c99a2e;--cream:#f8f1e3;--card:#fffaf1;--ink:#1f2933;--muted:#697386;--line:#eadfca}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--cream);color:var(--ink)}button,input,select,textarea{font:inherit}button{border:0;border-radius:12px;padding:10px 14px;background:var(--orange);color:white;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(244,123,32,.18)}button.secondary,button.ghost{background:white;color:var(--navy);border:1px solid var(--line);box-shadow:none}.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#102a43,#1f4d71 45%,#f8f1e3 45%)}.login-card{width:min(920px,92vw);background:rgba(255,250,241,.96);border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:42px;box-shadow:0 24px 70px rgba(16,42,67,.28)}.login-logo{height:78px;margin-bottom:12px}.eyebrow{color:var(--orange);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.login-card h1{font-size:48px;margin:0;color:var(--navy)}.subtitle{font-size:19px;color:var(--muted)}.login-actions,.login-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.login-form input{padding:12px;border:1px solid var(--line);border-radius:12px}.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:290px;background:linear-gradient(180deg,var(--navy),#071a2d);color:white;padding:20px 16px;overflow:auto}.brand{display:flex;gap:12px;align-items:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.15)}.brand img{width:54px;height:54px;object-fit:contain;background:white;border-radius:16px;padding:4px}.brand b{display:block;font-size:20px}.brand span{display:block;color:#cbd5e1;font-size:12px}.nav-section{font-size:11px;color:#f1c870;text-transform:uppercase;letter-spacing:.12em;margin:18px 8px 8px}.sidebar button{display:block;width:100%;text-align:left;margin:5px 0;background:transparent;color:#e5edf4;box-shadow:none;border-radius:12px;padding:11px 12px}.sidebar button:hover,.sidebar button.active{background:rgba(244,123,32,.18);color:white;border-left:4px solid var(--orange)}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;background:rgba(255,250,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:16px 22px}.topbar h1{margin:3px 0 0;color:var(--navy)}.topbar small{color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.top-actions input{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:white}.badge,.status{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#fff2c2;color:#7a4d00;font-size:12px;font-weight:800}.content{padding:22px;overflow:auto;flex:1}.hero{background:linear-gradient(135deg,#fffaf1,#f0f7ec);border:1px solid var(--line);border-radius:24px;padding:24px;display:grid;grid-template-columns:1.4fr .8fr;gap:20px;margin-bottom:18px}.hero h2{margin:0;font-size:28px;color:var(--navy)}.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:14px}.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(46,38,22,.06)}.kpi .value{font-size:30px;color:var(--navy);font-weight:900}.kpi .label{color:var(--muted);font-weight:700}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:white}table{width:100%;border-collapse:collapse}th,td{padding:12px 14px;border-bottom:1px solid #f0e5d5;text-align:left;vertical-align:top}th{background:#fff4dc;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.06em}tr:hover td{background:#fffaf1}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{padding:7px 10px;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid label{font-size:12px;font-weight:800;color:var(--muted);display:grid;gap:6px}.form-grid input,.form-grid select,.form-grid textarea{padding:10px;border:1px solid var(--line);border-radius:12px;background:white}.drawer{position:fixed;right:0;top:0;width:min(520px,92vw);height:100vh;background:white;border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.18);z-index:20;padding:18px;overflow:auto}.drawer>div:first-child{display:flex;justify-content:space-between;align-items:center}.modal{position:fixed;inset:0;background:rgba(16,42,67,.45);display:grid;place-items:center;z-index:30}.modal-card{width:min(760px,92vw);max-height:90vh;overflow:auto;background:var(--card);border-radius:24px;padding:24px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.25)}.close{float:right;background:white;color:var(--navy);border:1px solid var(--line)}.toast{position:fixed;right:24px;bottom:26px;background:var(--navy);color:white;padding:14px 18px;border-radius:16px;box-shadow:0 15px 40px rgba(0,0,0,.25);z-index:40}footer{padding:14px 22px;color:var(--muted);border-top:1px solid var(--line);background:#fffaf1}.status.Open,.status.Pending{background:#fff2c2;color:#7a4d00}.status.Approved,.status.Completed,.status.Resolved{background:#ddf7e8;color:#17663b}.status.Cancelled,.status.Rejected{background:#ffe2e2;color:#9b1c1c}@media(max-width:980px){.sidebar{position:fixed;left:-300px;top:0;bottom:0;z-index:50;transition:.2s}.sidebar.open{left:0}.kpi-grid{grid-template-columns:repeat(2,1fr)}.hero,.grid.two{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}}

/* Functional completion patch 2026-07-02 */
.toolbar{margin-bottom:12px;flex-wrap:wrap}.toolbar input,.toolbar select{min-width:170px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0 18px}.detail-grid>div{background:#fffaf0;border:1px solid rgba(15,23,42,.08);border-radius:12px;padding:10px}.detail-grid b{display:block;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.detail-grid span{font-weight:600;color:#0f172a}.table-wrap table td.actions,.actions{white-space:normal}.actions button{margin:2px}.drawer h4{margin-top:18px;margin-bottom:8px;color:#13294b}.form-grid select,.form-grid input,.form-grid textarea{width:100%}

.sso-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 14px;
    background: #1f5fbf;
    color: #fff !important;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
}

.sso-button:hover {
    background: #174c99;
    color: #fff !important;
    text-decoration: none;
}
/* Babco header action buttons - added 20260720 */
.babco-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    flex-wrap: wrap;
}

.babco-header-action-btn {
    min-height: 32px;
    line-height: 1.2;
    white-space: nowrap;
}

.babco-user-name,
.user-name,
#currentUserName,
#loggedInUserName {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 10px;
}
/* BABCO_DASHBOARD_CARD_NAV_START */
.babco-clickable-card,
[data-dashboard-target] {
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.babco-clickable-card:hover,
[data-dashboard-target]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.babco-clickable-card:focus,
[data-dashboard-target]:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
/* BABCO_DASHBOARD_CARD_NAV_END */

/* BABCO_DASHBOARD_CARD_NAV_V2_START */
.babco-clickable-card,
[data-dashboard-target] {
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.babco-clickable-card:hover,
[data-dashboard-target]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    border-color: #f47b20;
}
.babco-clickable-card:focus,
[data-dashboard-target]:focus {
    outline: 2px solid #f47b20;
    outline-offset: 2px;
}
/* BABCO_DASHBOARD_CARD_NAV_V2_END */