:root {
  --bg:#eef4fb; --bg2:#f8fafc; --panel:#0f172a; --panel2:#172554; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --brand:#0369a1; --brandLight:#38bdf8; --green:#16a34a; --amber:#d97706; --red:#dc2626; --line:#e2e8f0; --soft:#f8fafc;
  --shadow:0 16px 40px rgba(15,23,42,.09); --radius:20px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; background:radial-gradient(circle at top left,#e0f2fe 0,#eef4fb 32%,#f8fafc 100%); color:var(--text); }
body[dir="rtl"] { font-family:Tahoma,Arial,sans-serif; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#082f49,#0f172a 55%,#164e63); }
.login-card { width:min(460px,100%); background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.35); border-radius:28px; padding:30px; box-shadow:0 30px 90px rgba(0,0,0,.32); display:grid; gap:16px; }
.login-card label { display:grid; gap:7px; color:#475569; font-weight:800; }
.login-brand { color:#0f172a; margin-bottom:6px; }
#appShell { display:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:300px; background:linear-gradient(180deg,#08111f,#0f172a 55%,#172554); color:white; padding:22px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; height:100vh; box-shadow:10px 0 35px rgba(15,23,42,.18); z-index:5; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,#38bdf8,#22c55e); color:#082f49; font-weight:900; letter-spacing:-.04em; box-shadow:0 10px 24px rgba(56,189,248,.28); }
h1,h2,h3,h4,p { margin:0; } .brand h1 { font-size:20px; letter-spacing:-.02em; } .brand p { color:#bae6fd; font-size:13px; margin-top:3px; }
nav { display:flex; flex-direction:column; gap:7px; overflow:auto; padding-right:4px; }
.nav-btn { border:0; border-radius:14px; background:transparent; color:#cbd5e1; padding:12px 14px; text-align:left; cursor:pointer; font-weight:750; transition:.18s ease; }
body[dir="rtl"] .nav-btn { text-align:right; }
.nav-btn.active,.nav-btn:hover { background:rgba(56,189,248,.17); color:white; transform:translateX(2px); }
.sidebar-footer { margin-top:auto; display:grid; gap:8px; }
button,.button-link { border:0; background:linear-gradient(135deg,var(--brand),#0284c7); color:white; padding:11px 15px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 18px rgba(2,132,199,.18); }
button:hover,.button-link:hover { filter:brightness(.98); transform:translateY(-1px); }
button.ghost { background:rgba(255,255,255,.09); color:#e2e8f0; box-shadow:none; }
button.small { padding:8px 11px; border-radius:999px; }
.main { flex:1; padding:30px; overflow:auto; }
.topbar { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:24px; }
.eyebrow { color:var(--brand); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
#pageTitle { font-size:34px; letter-spacing:-.04em; line-height:1; }
.actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.pill { display:inline-flex; align-items:center; background:#dcfce7; color:#166534; padding:8px 11px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap; }
.pill.secondary { background:#e0f2fe; color:#075985; }
.grid { display:grid; gap:18px; } .stats { grid-template-columns:repeat(4,minmax(0,1fr)); } .two { grid-template-columns:1.1fr .9fr; margin-top:18px; }
.card { background:rgba(255,255,255,.94); border:1px solid rgba(226,232,240,.9); border-radius:var(--radius); padding:21px; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.hero-card { margin-bottom:18px; background:linear-gradient(135deg,#0f172a,#075985); color:white; border:0; }
.hero-card .muted { color:#bae6fd; }
.dashboard-filters { margin-bottom:18px; }
.stat { position:relative; overflow:hidden; }
.stat:after { content:""; position:absolute; right:-28px; top:-28px; width:84px; height:84px; border-radius:50%; background:rgba(56,189,248,.12); }
.stat span { color:var(--muted); font-weight:850; } .stat strong { display:block; font-size:40px; margin-top:10px; letter-spacing:-.05em; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; padding:16px; background:linear-gradient(180deg,#f8fafc,#f1f5f9); border:1px solid var(--line); border-radius:16px; }
.form-grid.compact { margin:0; padding:12px; }
.form-grid label { display:grid; gap:6px; font-size:13px; color:var(--muted); font-weight:850; }
input,select,textarea { width:100%; border:1px solid #cbd5e1; border-radius:12px; padding:11px 12px; font:inherit; background:white; outline:none; transition:.15s ease; }
input:focus,select:focus,textarea:focus { border-color:#38bdf8; box-shadow:0 0 0 4px rgba(56,189,248,.16); }
textarea { min-height:96px; resize:vertical; }
.full { grid-column:1/-1; }
.hidden { display:none; }
.table-wrap { overflow:auto; border-radius:14px; border:1px solid var(--line); } table { width:100%; border-collapse:collapse; background:white; } th,td { border-bottom:1px solid var(--line); padding:12px; text-align:left; vertical-align:top; } body[dir="rtl"] th, body[dir="rtl"] td { text-align:right; } th { color:#475569; font-size:12px; background:#f8fafc; text-transform:uppercase; letter-spacing:.04em; } tr:hover td { background:#f8fafc; }
.clean-list { padding-left:20px; color:#475569; line-height:1.9; } body[dir="rtl"] .clean-list { padding-left:0; padding-right:20px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.muted { color:var(--muted); margin-top:8px; line-height:1.6; }
.record { border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:10px; background:#f8fafc; }
.alert-critical { border-color:#fecaca; background:#fef2f2; }
.alert-warning { border-color:#fde68a; background:#fffbeb; }
.alert-info { border-color:#bae6fd; background:#f0f9ff; }
.log { margin-top:14px; background:#0f172a; color:#d1fae5; padding:14px; border-radius:14px; white-space:pre-wrap; min-height:90px; }
.org-tree, .org-tree ul { list-style:none; padding-left:22px; }
body[dir="rtl"] .org-tree, body[dir="rtl"] .org-tree ul { padding-left:0; padding-right:22px; }
.org-tree li { margin:10px 0; padding:12px 14px; border-left:4px solid var(--brandLight); background:white; border-radius:14px; box-shadow:0 6px 16px rgba(15,23,42,.06); }
body[dir="rtl"] .org-tree li { border-left:0; border-right:4px solid var(--brandLight); }
details summary { cursor:pointer; font-weight:800; color:var(--brand); }
.chart-row { display:grid; grid-template-columns:minmax(120px, 1fr) 2fr 54px; gap:10px; align-items:center; margin:10px 0; }
.chart-label { font-weight:800; color:#334155; }
.chart-track { height:14px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.chart-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#38bdf8,#16a34a); }
.chart-value { font-weight:900; color:#075985; text-align:right; }
.heat-cell { border-radius:16px; padding:14px; margin:10px 0; color:#0f172a; border:1px solid var(--line); }
.heat-good { background:#dcfce7; border-color:#86efac; }
.heat-mid { background:#fef9c3; border-color:#fde047; }
.heat-low { background:#fee2e2; border-color:#fca5a5; }
.heat-none { background:#f1f5f9; color:#64748b; }
@media (max-width: 1100px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .two { grid-template-columns:1fr; } .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .app-shell { display:block; padding-bottom:86px; }
  .sidebar { width:100%; height:auto; position:relative; border-radius:0 0 24px 24px; }
  .brand { margin-bottom:4px; }
  nav { position:fixed; left:10px; right:10px; bottom:10px; display:flex; flex-direction:row; gap:6px; overflow:auto; background:rgba(15,23,42,.95); padding:9px; border-radius:22px; box-shadow:0 18px 45px rgba(0,0,0,.28); z-index:30; }
  .nav-btn { white-space:nowrap; padding:10px 12px; font-size:13px; }
  .nav-btn.active,.nav-btn:hover { transform:none; }
  .sidebar-footer { grid-template-columns:1fr 1fr; }
  .main { padding:18px; }
  .topbar { display:block; }
  .actions { justify-content:flex-start; margin-top:14px; }
  #pageTitle { font-size:28px; }
  .stats,.two,.form-grid { grid-template-columns:1fr; }
  .card { padding:16px; border-radius:18px; }
  .stat strong { font-size:34px; }
  button,.button-link { width:100%; }
  .button-row button,.button-row .button-link { width:auto; flex:1; }
}
@media print { .sidebar,.topbar button,.sidebar-footer,.login-screen,.dashboard-filters,.form-grid button,nav { display:none !important; } .app-shell,#appShell { display:block !important; } .main { padding:0; } .card { box-shadow:none; border:0; break-inside:avoid; } body { background:white; } }

/* Stage 23 modal edit forms */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.58); display:grid; place-items:center; padding:18px; z-index:100; }
.modal-backdrop.hidden { display:none; }
.modal-card { width:min(820px, 96vw); max-height:90vh; overflow:auto; background:white; border-radius:24px; padding:22px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.ghost-light { background:#e2e8f0; color:#0f172a; box-shadow:none; }
@media (max-width:760px){ .modal-card { width:100%; padding:16px; border-radius:18px; } }

/* Stage 24 - Draggable bubble org chart */
.org-toolbar { margin-bottom:12px; }
.org-root-drop { border:2px dashed #38bdf8; color:#075985; background:#f0f9ff; border-radius:16px; padding:14px; text-align:center; font-weight:900; margin:12px 0 18px; }
.org-bubble-chart { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; overflow:auto; padding:10px 0 24px; }
.org-node { display:flex; flex-direction:column; align-items:center; position:relative; }
.org-bubble { min-width:210px; max-width:260px; display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:999px; background:linear-gradient(135deg,#ffffff,#f8fafc); border:2px solid #bae6fd; box-shadow:0 12px 28px rgba(15,23,42,.10); cursor:grab; transition:.16s ease; }
.org-bubble:hover { transform:translateY(-2px); border-color:#38bdf8; box-shadow:0 18px 35px rgba(2,132,199,.18); }
.org-bubble:active { cursor:grabbing; }
.org-avatar { width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center; color:white; font-weight:900; background:linear-gradient(135deg,#0284c7,#22c55e); }
.org-bubble strong { display:block; color:#0f172a; line-height:1.1; }
.org-bubble span { display:block; color:#475569; font-size:12px; font-weight:800; margin-top:3px; }
.org-bubble small { display:block; color:#64748b; font-size:11px; margin-top:2px; }
.org-children { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:28px; padding-top:22px; border-top:2px solid #e0f2fe; position:relative; }
.org-children:before { content:""; position:absolute; top:-28px; left:50%; height:28px; border-left:2px solid #bae6fd; }
.level-1 .org-bubble { border-color:#bbf7d0; }
.level-2 .org-bubble { border-color:#fde68a; }
.level-3 .org-bubble { border-color:#fecaca; }
.level-4 .org-bubble { border-color:#ddd6fe; }
@media(max-width:760px){ .org-bubble-chart,.org-children { flex-direction:column; align-items:stretch; } .org-node { align-items:stretch; } .org-bubble { max-width:none; width:100%; border-radius:22px; } }

/* Stage 32 - Leave workflow visual */
.workflow-steps { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.workflow-step { padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#64748b; font-weight:800; font-size:12px; }
.workflow-step.done { background:#dcfce7; color:#166534; }

/* Stage 33 - Org chart drag/drop fixes */
.org-bubble.dragging { opacity:.55; transform:scale(.98); }
.org-bubble.drop-target, .org-root-drop.drop-target { outline:3px solid #22c55e; outline-offset:3px; background:#dcfce7; }
.org-actions { justify-content:center; margin-top:8px; }
.org-actions button { padding:7px 10px; font-size:12px; width:auto; flex:0 0 auto; }

/* Stage 38 - Org chart usability upgrade */
.org-controls { margin-bottom:16px; }
.org-selected-panel { margin-bottom:16px; border-left:5px solid #38bdf8; }
.org-bubble.selected { outline:4px solid rgba(34,197,94,.35); border-color:#22c55e; }
.org-bubble.dept-blue { background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:#93c5fd; }
.org-bubble.dept-green { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#86efac; }
.org-bubble.dept-amber { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-color:#fcd34d; }
.org-bubble.dept-purple { background:linear-gradient(135deg,#faf5ff,#f3e8ff); border-color:#c4b5fd; }
.org-bubble.dept-rose { background:linear-gradient(135deg,#fff1f2,#ffe4e6); border-color:#fda4af; }
.org-bubble.dept-slate { background:linear-gradient(135deg,#f8fafc,#e2e8f0); border-color:#cbd5e1; }
#orgChartCanvas { margin-top:12px; }

/* Stage 42 - Vanguard logo branding */
.brand-logo { display:block; object-fit:contain; background:rgba(255,255,255,.96); border-radius:14px; padding:8px; box-shadow:0 10px 24px rgba(15,23,42,.16); }
.sidebar-logo { width:82px; height:54px; flex:0 0 82px; }
.login-logo { width:150px; height:72px; margin-right:14px; }
.login-brand { align-items:center; }
@media(max-width:760px){ .sidebar-logo { width:72px; height:48px; } .login-logo { width:130px; height:64px; } }

/* Stage 43 - Clean logo and login text */
.brand-logo { background:transparent !important; padding:0 !important; box-shadow:none !important; border-radius:0 !important; }
.login-logo { width:170px; height:82px; }
.sidebar-logo { width:98px; height:64px; }
#loginMsg:empty { display:none; }

/* Stage 48 - Login logo layout and HR Platform text color */
.login-brand { flex-direction:column !important; align-items:center !important; text-align:center !important; gap:10px !important; }
.login-logo { width:220px !important; height:105px !important; margin-right:0 !important; margin-bottom:4px !important; }
.login-brand h1 { font-size:34px; }
.login-brand p { color:#000 !important; font-weight:900 !important; font-size:16px !important; }
@media(max-width:760px){ .login-logo { width:190px !important; height:92px !important; } .login-brand h1 { font-size:30px; } }

/* Stage 49 - Sidebar logo above Mawarid text */
.sidebar > .brand { flex-direction:column !important; align-items:center !important; text-align:center !important; gap:10px !important; }
.sidebar-logo { width:150px !important; height:84px !important; margin:0 auto 4px auto !important; }
.sidebar > .brand h1 { font-size:26px !important; }
.sidebar > .brand p { color:#bae6fd !important; font-weight:800 !important; }

/* Stage 57 - Department hierarchy context */
.org-bubble.context { opacity:.72; border-style:dashed; filter:saturate(.65); }
.org-context-node:before { content:'Manager context'; font-size:11px; color:#64748b; margin-bottom:4px; display:block; text-align:center; }
.org-bubble-chart.top-down { align-items:flex-start; }

/* Stage 60 - Past leave summary */
.past-leave-box { margin:12px 0; padding:12px; border-radius:14px; background:#f8fafc; border:1px solid #e2e8f0; }
.past-leave-box table { font-size:13px; }
.past-leave-box p { margin-top:8px; }

/* Stage 62 - Clickable dashboard cards */
.card.clickable { cursor:pointer; transition:.15s ease; }
.card.clickable:hover { transform:translateY(-2px); border-color:#38bdf8; box-shadow:0 18px 36px rgba(2,132,199,.14); }

/* Production menu scroll fix */
.sidebar {
    overflow: hidden !important;
}

.sidebar nav,
#nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 14px !important;
    scrollbar-width: thin;
}

.nav-btn {
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .nav-btn {
        flex: 0 0 auto !important;
    }
}

/* Mobile / iOS Chrome layout fix */
@media (max-width: 1024px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .app-shell,
    #appShell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 14px !important;
        border-radius: 0 0 22px 22px !important;
        box-shadow: none !important;
    }

    .sidebar > .brand {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .sidebar-logo {
        width: 130px !important;
        height: 74px !important;
        margin: 0 auto 4px auto !important;
    }

    .sidebar-footer {
        display: none !important;
    }

    .main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        padding-bottom: 95px !important;
    }

    .topbar {
        display: block !important;
        width: 100% !important;
    }

    .actions {
        justify-content: flex-start !important;
        margin-top: 12px !important;
    }

    #pageTitle {
        font-size: 26px !important;
        line-height: 1.1 !important;
    }

    #nav,
    nav {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        z-index: 9999 !important;

        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;

        width: auto !important;
        max-width: calc(100vw - 16px) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        background: rgba(15, 23, 42, 0.96) !important;
        padding: 8px !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 35px rgba(0,0,0,.32) !important;
    }

    .nav-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .grid,
    .stats,
    .two,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
    }

    button,
    .button-link {
        max-width: 100% !important;
    }
}