:root {
    --olive-950: #292c20;
    --olive-900: #3f4431;
    --olive-800: #51583e;
    --olive-700: #626a4a;
    --olive-600: #77805b;
    --olive-200: #c7c9b7;
    --sage: #b9baa8;
    --cream: #f4ecde;
    --cream-soft: #fbf8f1;
    --yellow: #ffd21c;
    --yellow-soft: #fff2a1;
    --charcoal: #23251d;
    --muted: #71756a;
    --line: #e3e4dc;
    --surface: #ffffff;
    --danger: #a9463d;
    --success: #2f7657;
    --shadow: 0 18px 45px rgba(38, 42, 29, .08);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--charcoal);
    background: #f5f5f0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--olive-700); text-decoration: none; }
a:hover { color: var(--olive-950); }
.btn {
    --bs-btn-border-radius: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.btn-primary {
    --bs-btn-bg: var(--olive-700);
    --bs-btn-border-color: var(--olive-700);
    --bs-btn-hover-bg: var(--olive-900);
    --bs-btn-hover-border-color: var(--olive-900);
    --bs-btn-active-bg: var(--olive-950);
    --bs-btn-active-border-color: var(--olive-950);
}
.btn-dark { --bs-btn-bg: var(--charcoal); --bs-btn-border-color: var(--charcoal); }
.btn-light { --bs-btn-bg: #f5f5ef; --bs-btn-border-color: #e4e5dc; }
.form-control, .form-select {
    min-height: 48px;
    border-color: #dcded2;
    border-radius: 12px;
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--olive-600);
    box-shadow: 0 0 0 .2rem rgba(119, 128, 91, .15);
}
textarea.form-control { min-height: 96px; }
.form-label { color: #3c4031; font-size: .85rem; font-weight: 750; }
.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    width: 264px;
    flex-direction: column;
    color: #f7f4e9;
    background:
        radial-gradient(circle at 15% 6%, rgba(255, 210, 28, .13), transparent 23%),
        linear-gradient(165deg, var(--olive-800), var(--olive-950));
}
.brand {
    display: flex;
    align-items: center;
    min-height: 104px;
    padding: 20px 24px;
    gap: 13px;
    color: #fff;
}
.brand:hover { color: #fff; }
.brand img {
    width: 112px;
    height: 64px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.15));
}
.brand span {
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.25);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sidebar-nav { flex: 1; padding: 4px 14px 22px; overflow-y: auto; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 4px 0;
    padding: 10px 14px;
    gap: 13px;
    color: rgba(255,255,255,.68);
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 650;
    transition: .18s ease;
}
.sidebar-nav a i { width: 21px; font-size: 1.12rem; text-align: center; }
.nav-count { min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; display: inline-grid; place-items: center; color: #fff; background: #dc3545; border-radius: 999px; font-size: .68rem; line-height: 1; }
.sidebar-nav a.active .nav-count { color: #fff; background: var(--charcoal); }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-nav a.active { color: var(--charcoal); background: var(--yellow); box-shadow: 0 9px 20px rgba(0,0,0,.12); }
.sidebar-footer {
    display: flex;
    align-items: center;
    min-height: 84px;
    margin: 0 14px 14px;
    padding: 14px;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
}
.avatar {
    display: inline-grid;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--olive-950);
    background: color-mix(in srgb, var(--avatar-accent, var(--yellow)) 60%, white);
    border-radius: 13px;
    font-size: .78rem;
    font-weight: 850;
}
.sidebar-user { min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: #fff; font-size: .82rem; }
.sidebar-user small { color: rgba(255,255,255,.58); font-size: .7rem; }
.logout-link { color: rgba(255,255,255,.7); }
.logout-link:hover { color: var(--yellow); }
.main-area { grid-column: 2; display: flex; min-width: 0; flex-direction: column; min-height: 100vh; }
.topbar {
    display: flex;
    align-items: center;
    min-height: 104px;
    padding: 22px clamp(22px, 3vw, 52px);
    gap: 16px;
    background: rgba(245,245,240,.9);
    border-bottom: 1px solid rgba(220,222,210,.8);
    backdrop-filter: blur(12px);
}
.topbar h1 { margin: 0; color: var(--olive-950); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 840; letter-spacing: -.035em; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.menu-toggle { display: none; width: 44px; height: 44px; }
.topbar-notification {
    display: grid;
    width: 45px;
    height: 45px;
    margin-left: auto;
    place-items: center;
    color: var(--olive-900);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.topbar-notification { position: relative; }
.notification-count { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; color: #fff; background: #dc3545; border: 2px solid #fff; border-radius: 999px; font-size: .62rem; line-height: 1; }
.content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 32px clamp(22px, 3vw, 52px) 52px; }
.page-footer { display: flex; justify-content: space-between; margin-top: auto; padding: 20px clamp(22px,3vw,52px); color: #85887e; border-top: 1px solid var(--line); font-size: .74rem; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--olive-600); font-size: .68rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.hero-strip {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 216px;
    padding: clamp(28px, 4vw, 48px);
    gap: 30px;
    color: #fff;
    background:
        linear-gradient(112deg, rgba(40,44,32,.96), rgba(87,95,64,.89)),
        radial-gradient(circle at 88% 22%, var(--yellow), transparent 27%);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.hero-strip .eyebrow { color: var(--yellow); }
.hero-strip h2 { max-width: 690px; margin: 0; font-size: clamp(2rem, 3.7vw, 3.4rem); font-weight: 850; letter-spacing: -.055em; line-height: .98; }
.hero-strip p { max-width: 650px; margin: 17px 0 0; color: rgba(255,255,255,.7); }
.hero-strip .btn { flex: 0 0 auto; padding: 14px 19px; background: var(--yellow); border-color: var(--yellow); color: var(--charcoal); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 24px 0; gap: 16px; }
.metric-card {
    display: flex;
    min-height: 126px;
    padding: 22px;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(33,38,25,.04);
}
.metric-card.metric-primary { background: var(--cream); border-color: #e9dbc2; }
.metric-icon { display: grid; width: 47px; height: 47px; flex: 0 0 auto; place-items: center; color: var(--olive-900); background: var(--yellow-soft); border-radius: 14px; font-size: 1.15rem; }
.metric-card small, .metric-card span { display: block; color: var(--muted); font-size: .72rem; }
.metric-card strong { display: block; margin: 4px 0 3px; color: var(--olive-950); font-size: 1.75rem; font-weight: 850; letter-spacing: -.05em; }
.dashboard-grid, .detail-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 20px; margin-top: 20px; }
.panel {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(33,38,25,.035);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; gap: 18px; }
.panel-heading h2, .panel > h2 { margin: 0; color: var(--olive-950); font-size: 1.18rem; font-weight: 820; letter-spacing: -.03em; }
.panel-heading > a { font-size: .78rem; font-weight: 750; }
.request-list, .people-list { margin: -6px; }
.request-row { display: flex; align-items: center; min-height: 76px; padding: 11px 10px; gap: 13px; color: inherit; border-radius: 14px; }
.request-row:hover { color: inherit; background: #f7f7f2; }
.request-date { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; align-content: center; color: var(--olive-900); background: var(--cream); border-radius: 13px; font-size: .65rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.request-date strong { margin-bottom: 4px; font-size: 1.05rem; }
.request-main { flex: 1; min-width: 0; }
.request-main strong, .request-main small { display: block; }
.request-main strong { font-size: .88rem; }
.request-main small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.request-row > .bi-chevron-right { color: #b1b3aa; font-size: .75rem; }
.people-list .person-row { display: flex; align-items: center; min-height: 67px; padding: 8px 4px; gap: 11px; border-bottom: 1px solid #eef0e8; }
.person-row > span:nth-child(2) { flex: 1; min-width: 0; }
.person-row strong, .person-row small { display: block; }
.person-row strong { font-size: .82rem; }
.person-row small { color: var(--muted); font-size: .69rem; }
.person-row time { color: var(--olive-700); font-size: .72rem; font-weight: 750; }
.status-badge { display: inline-flex; align-items: center; padding: 6px 9px; gap: 6px; border-radius: 999px; font-size: .68rem; font-weight: 780; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.status-success { color: #28694e; background: #e6f4ec; }
.status-danger { color: #9b3f36; background: #f9e9e7; }
.status-warning { color: #8a671c; background: #fff3cb; }
.status-secondary { color: #676961; background: #eff0eb; }
.status-info { color: #3f6977; background: #e8f2f5; }
.page-actions, .detail-toolbar, .calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 14px;
}
.filter-pills { display: flex; align-items: center; padding: 4px; gap: 3px; background: #e9eae3; border-radius: 13px; }
.filter-pills a, .filter-pills span, .filter-pills button { padding: 8px 13px; color: #6c7066; background: transparent; border: 0; border-radius: 10px; font-size: .76rem; font-weight: 750; }
.filter-pills .active { color: var(--olive-950); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 14px 12px; border-bottom-color: #eceee7; }
.table thead th { color: #777b70; font-size: .67rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { color: #3e4236; font-size: .8rem; }
.color-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--dot); border-radius: 50%; }
.employee-cell { display: flex; align-items: center; gap: 10px; }
.employee-cell strong, .employee-cell small { display: block; }
.employee-cell small { color: var(--muted); font-size: .68rem; }
.empty-state { display: grid; min-height: 230px; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state i { margin-bottom: 12px; color: var(--olive-600); font-size: 2rem; }
.empty-state h3 { margin: 0; color: var(--olive-950); font-size: 1rem; }
.empty-state p { margin: 6px 0 0; font-size: .77rem; }
.form-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 20px; }
.form-panel { grid-column: 1; }
.preview-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; color: #fff; background: linear-gradient(160deg,var(--olive-800),var(--olive-950)); border: 0; }
.preview-panel .eyebrow { color: var(--yellow); }
.preview-panel h2 { color: #fff; }
.duration-number { padding: 32px 0 24px; border-bottom: 1px solid rgba(255,255,255,.16); }
.duration-number strong, .duration-number span { display: block; }
.duration-number strong { color: var(--yellow); font-size: 4.2rem; line-height: 1; letter-spacing: -.08em; }
.duration-number span { margin-top: 7px; color: rgba(255,255,255,.65); font-size: .76rem; }
.preview-panel ul { margin: 22px 0 0; padding: 0; list-style: none; }
.preview-panel li { margin: 11px 0; color: rgba(255,255,255,.75); font-size: .78rem; }
.preview-panel li i { margin-right: 8px; color: var(--yellow); }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.request-hero { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 26px 30px; background: linear-gradient(105deg,color-mix(in srgb,var(--request-accent) 14%,white),#fff); border: 1px solid color-mix(in srgb,var(--request-accent) 25%,white); border-left: 6px solid var(--request-accent); border-radius: var(--radius); }
.request-hero h2 { margin: 0; font-size: 1.45rem; font-weight: 850; letter-spacing: -.035em; }
.request-hero p { margin: 4px 0 0; color: var(--muted); }
.detail-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; gap: 0; }
.detail-list div { padding: 14px 0; border-bottom: 1px solid #eceee7; }
.detail-list div:nth-last-child(-n+2) { border-bottom: 0; }
.detail-list .full { grid-column: 1 / -1; }
.detail-list dt { margin-bottom: 5px; color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.detail-list dd { margin: 0; font-size: .86rem; }
.attachment-link { display: inline-flex; align-items: center; margin: 3px 8px 3px 0; padding: 7px 9px; gap: 5px; color: var(--olive-800); background: #f0f1eb; border-radius: 8px; font-size: .72rem; font-weight: 700; }
.balance-card { display: flex; flex-direction: column; justify-content: center; min-height: 270px; background: var(--cream-soft); }
.balance-card > strong { margin-top: 14px; color: var(--olive-800); font-size: 3.6rem; line-height: 1; letter-spacing: -.08em; }
.balance-card > span:not(.eyebrow) { color: var(--muted); font-size: .75rem; }
.balance-breakdown { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 27px; padding-top: 18px; border-top: 1px solid #e4ddcf; }
.balance-breakdown span, .balance-breakdown b { display: block; }
.balance-breakdown span { color: var(--muted); font-size: .64rem; }
.balance-breakdown b { margin-top: 4px; font-size: .84rem; }
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { position: absolute; top: 18px; bottom: 18px; left: 18px; width: 1px; background: #dfe1d8; content: ""; }
.timeline li { position: relative; display: flex; min-height: 70px; gap: 13px; }
.timeline li > span { z-index: 1; display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; color: #888c81; background: #f0f1eb; border: 4px solid #fff; border-radius: 50%; }
.timeline li.complete > span { color: #fff; background: var(--olive-600); }
.timeline li.current > span { color: var(--olive-950); background: var(--yellow); }
.timeline strong { display: block; margin-top: 5px; font-size: .8rem; }
.timeline p { margin: 3px 0 0; color: var(--muted); font-size: .69rem; }
.comment-form { display: flex; align-items: flex-end; margin-bottom: 18px; gap: 8px; }
.comment-list article { display: flex; padding: 13px 0; gap: 11px; border-top: 1px solid #eceee7; }
.comment-list strong, .comment-list time { display: block; }
.comment-list strong { font-size: .78rem; }
.comment-list time { color: var(--muted); font-size: .63rem; }
.comment-list p { margin: 5px 0 0; font-size: .78rem; }
.queue-summary { display: grid; grid-template-columns: 180px 180px 1fr; margin-bottom: 20px; gap: 14px; }
.queue-summary > div { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.queue-summary strong { color: var(--olive-950); font-size: 2rem; font-weight: 850; }
.queue-summary p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.queue-note { display: flex; align-items: center; gap: 15px; color: #4e5440; background: var(--cream)!important; }
.queue-note i { color: var(--olive-700); font-size: 1.7rem; }
.queue-note strong { display: block; font-size: .8rem; }
.queue-note span { font-size: .73rem; }
.decision-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.decision-grid input { position: absolute; opacity: 0; }
.decision-grid span { display: grid; min-height: 78px; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; font-size: .75rem; font-weight: 750; }
.decision-grid i { font-size: 1.25rem; }
.decision-grid input:checked + span { color: var(--olive-950); background: var(--yellow-soft); border-color: var(--yellow); }
.approval-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.approval-actions form { margin: 0; }
.approval-review-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; padding: 16px; background: #f8f9f6; border: 1px solid var(--line); border-radius: 14px; }
.approval-review-details div { min-width: 0; }
.approval-review-details .full { grid-column: 1/-1; }
.approval-review-details dt { margin-bottom: 3px; color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.approval-review-details dd { margin: 0; color: var(--charcoal); font-size: .84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.calendar-event-locked { cursor: default; text-decoration: none; }
.org-card-grid, .type-card-grid, .role-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.org-card { display: flex; min-height: 210px; padding: 25px; gap: 17px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 9px 28px rgba(33,38,25,.04); }
.org-icon, .role-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; color: var(--olive-800); background: var(--cream); border-radius: 14px; font-size: 1.15rem; }
.org-card h2 { margin: 0; font-size: 1.1rem; font-weight: 820; }
.org-card p { margin: 5px 0 25px; color: var(--muted); font-size: .73rem; }
.org-stats { display: flex; gap: 20px; }
.org-stats span { color: var(--muted); font-size: .65rem; }
.org-stats strong { display: block; color: var(--olive-950); font-size: 1.1rem; }
.org-chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.org-chart-toolbar-actions { display:flex; align-items:center; gap:7px; }
.org-search-box { display:flex; align-items:center; width:min(440px,100%); height:42px; overflow:hidden; background:#fff; border:1px solid #d7d9d0; border-radius:10px; box-shadow:0 2px 7px rgba(36,42,29,.05); }
.org-search-box>i { margin-left:13px; color:var(--muted); }
.org-search-box input { min-width:0; flex:1; height:100%; padding:0 10px; border:0; outline:0; background:transparent; font-size:.78rem; }
.org-search-box button { width:40px; height:100%; border:0; border-left:1px solid #e4e5df; color:var(--muted); background:#f8f8f5; }
.org-search-box button:hover { color:#fff; background:var(--olive-700); }
.org-builder { display:grid; grid-template-columns:270px minmax(0,1fr); align-items:start; gap:16px; }
.org-selection-panel { position:sticky; top:20px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 9px 28px rgba(33,38,25,.06); }
.org-selection-panel h2 { margin:3px 0; font-size:1.05rem; }
.org-selection-panel p { margin:0 0 12px; color:var(--muted); font-size:.67rem; line-height:1.55; }
.org-card-scroll { max-height:650px; overflow:auto; padding-right:4px; scrollbar-color:#c8ccbf transparent; scrollbar-width:thin; }
.org-card-group-label { display:block; margin:15px 2px 4px; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.org-card-group-label:first-child { margin-top:3px; }
.org-drag-card { display:flex; align-items:center; gap:8px; margin-top:7px; padding:9px 10px 9px 6px; background:#fafaf7; border:1px solid #dedfd7; border-radius:9px; cursor:grab; user-select:none; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.org-department-card { background:#f4fbfd; border-color:#c4e3ea; }
.org-drag-card>i { flex:0 0 auto; color:#a6aa9e; }
.org-drag-card span,.org-drag-card strong,.org-drag-card small { display:block; min-width:0; }
.org-drag-card>span:last-child { flex:1; overflow:hidden; }
.org-drag-card-icon { display:grid!important; width:29px; height:29px; flex:0 0 29px; place-items:center; color:#0e7385; background:#e2f3f5; border-radius:8px; }
.org-drag-card:not(.org-department-card) .org-drag-card-icon { color:#285c83; background:#e8f1f8; }
.org-drag-card strong { overflow:hidden; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.org-drag-card small { overflow:hidden; color:var(--muted); font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.org-drag-card:hover { border-color:#8aa7a9; box-shadow:0 6px 14px rgba(30,73,75,.1); transform:translateY(-1px); }
.org-drag-card:active { cursor:grabbing; }
.org-drag-card.dragging,.org-tree-node.dragging { opacity:.38; }
.org-chart-canvas { min-height:630px; padding:16px 18px 38px; overflow:auto; background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.94)),radial-gradient(circle at 1px 1px,#cad8d8 1px,transparent 1px); background-size:auto,22px 22px; border:1px solid var(--line); border-radius:14px; box-shadow:0 9px 28px rgba(33,38,25,.05); scrollbar-color:#aeb9b2 transparent; scrollbar-width:thin; }
.org-chart-guide { position:sticky; z-index:6; top:0; left:0; display:flex; width:max-content; min-width:100%; align-items:center; gap:14px; margin:-2px 0 18px; padding:8px 10px; color:#60706b; background:rgba(255,255,255,.93); border-bottom:1px solid #e3e9e6; backdrop-filter:blur(7px); font-size:.62rem; }
.org-chart-guide span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.org-chart-guide-title { margin-right:auto; color:#43514b; font-weight:750; }
.org-chart-guide .bi-square-fill { font-size:.7rem; }
.org-legend-branch { color:#083f6f; }
.org-legend-department { color:#0c8791; }
.org-legend-position { color:#d9eaf6; -webkit-text-stroke:1px #4780a3; }
.org-tree { display:flex; min-width:max-content; width:100%; flex-direction:column; align-items:center; color:#20251b; font-size:.75rem; }
.org-tree-branch { display:flex; min-width:max-content; flex-direction:column; align-items:center; padding:12px 30px 34px; }
.org-tree-branch+.org-tree-branch { margin-top:28px; padding-top:35px; border-top:2px dashed #c7d4d1; }
.org-tree-list { position:relative; display:flex; margin:0; padding:34px 0 0; justify-content:center; align-items:flex-start; list-style:none; }
.org-tree-list::before { position:absolute; top:0; left:50%; height:34px; border-left:2px solid #176591; content:""; }
.org-tree-item { position:relative; display:flex; min-width:190px; flex-direction:column; align-items:center; padding:34px 8px 0; text-align:center; }
.org-tree-list>.org-tree-item::before,.org-tree-list>.org-tree-item::after { position:absolute; top:0; width:50%; height:34px; border-top:2px solid #176591; content:""; }
.org-tree-list>.org-tree-item::before { right:50%; border-right:2px solid #176591; }
.org-tree-list>.org-tree-item::after { left:50%; border-left:2px solid #176591; }
.org-tree-list>.org-tree-item:first-child::before,.org-tree-list>.org-tree-item:last-child::after { border-top-color:transparent; }
.org-tree-list>.org-tree-item:first-child::before { border-right:2px solid #176591; border-radius:0 8px 0 0; }
.org-tree-list>.org-tree-item:last-child::after { border-left:2px solid #176591; border-radius:8px 0 0; }
.org-tree-list>.org-tree-item:only-child::before,.org-tree-list>.org-tree-item:only-child::after { display:none; }
.org-tree-node { position:relative; z-index:2; display:grid; width:190px; min-height:84px; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; padding:12px 12px; background:#f9fcfd; border:2px solid #7fb3cf; border-radius:10px; box-shadow:0 7px 16px rgba(22,75,103,.1); cursor:default; text-align:left; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.org-position-node[draggable="true"],.org-department-node[draggable="true"] { cursor:grab; }
.org-position-node[draggable="true"]:active,.org-department-node[draggable="true"]:active { cursor:grabbing; }
.org-tree-node:hover { border-color:#176591; box-shadow:0 10px 23px rgba(22,75,103,.16); transform:translateY(-1px); }
.org-root-node { width:260px; min-height:94px; color:#fff; background:linear-gradient(135deg,#073e6c,#086c89); border-color:#0e87a2; box-shadow:0 10px 24px rgba(5,68,103,.23); }
.org-department-node { width:210px; color:#fff; background:linear-gradient(135deg,#087d8a,#16a5b0); border-color:#0c7581; box-shadow:0 8px 18px rgba(7,111,121,.2); }
.org-department-item:nth-child(4n+2)>.org-department-node { background:linear-gradient(135deg,#0c5682,#1584aa); border-color:#0a537c; }
.org-department-item:nth-child(4n+3)>.org-department-node { color:#4f3c08; background:linear-gradient(135deg,#f5c63f,#ffdd6f); border-color:#d4a51b; }
.org-department-item:nth-child(4n)>.org-department-node { background:linear-gradient(135deg,#356e5d,#55a07f); border-color:#316855; }
.org-position-node { color:#12344a; background:#f4fbff; border-color:#7db8d5; }
.org-manager-node { background:#e7f5fb; border-color:#2b87ad; }
.org-node-icon { display:grid; width:36px; height:36px; place-items:center; color:#1b6287; background:#dceff8; border-radius:50%; font-size:.95rem; }
.org-root-node .org-node-icon,.org-department-node .org-node-icon { color:#fff; background:rgba(255,255,255,.18); }
.org-department-item:nth-child(4n+3)>.org-department-node .org-node-icon { color:#725708; background:rgba(255,255,255,.38); }
.org-node-copy { display:flex; min-width:0; flex-direction:column; line-height:1.2; }
.org-node-copy small { margin-bottom:3px; color:#5e7e90; font-size:.5rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.org-node-copy strong { overflow:hidden; font-size:.68rem; font-weight:820; line-height:1.25; text-overflow:ellipsis; }
.org-node-copy em { margin-top:3px; overflow:hidden; color:#67808d; font-size:.5rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.org-root-node .org-node-copy small,.org-root-node .org-node-copy em,.org-department-node .org-node-copy small,.org-department-node .org-node-copy em { color:rgba(255,255,255,.76); }
.org-department-item:nth-child(4n+3)>.org-department-node .org-node-copy small,.org-department-item:nth-child(4n+3)>.org-department-node .org-node-copy em { color:rgba(79,60,8,.72); }
.org-node-count { display:grid; min-width:24px; height:24px; padding:0 6px; place-items:center; color:#315d72; background:#e0eef4; border-radius:12px; font-size:.57rem; font-weight:850; text-align:center; }
.org-root-node .org-node-count,.org-department-node .org-node-count { color:#fff; background:rgba(255,255,255,.18); }
.org-department-item:nth-child(4n+3)>.org-department-node .org-node-count { color:#5e4807; background:rgba(255,255,255,.42); }
.org-tree-toggle { position:absolute; z-index:3; right:5px; bottom:5px; display:grid; width:19px; height:19px; padding:0; place-items:center; border:0; color:inherit; background:rgba(255,255,255,.7); border-radius:50%; font-size:.5rem; opacity:.75; }
.org-root-node .org-tree-toggle,.org-department-node .org-tree-toggle { background:rgba(255,255,255,.18); }
.org-tree-toggle[aria-hidden="true"] { visibility:hidden; }
.org-tree-toggle:hover { opacity:1; }
.org-tree-item.collapsed>.org-tree-list,.org-tree-branch.collapsed>.org-tree-list { display:none; }
.org-tree-item.collapsed>.org-tree-node .org-tree-toggle i,.org-tree-branch.collapsed>.org-tree-node .org-tree-toggle i { transform:rotate(-90deg); }
.org-tree-node.drop-ready { color:#2b2b20!important; background:#fff0a5!important; border-color:#d4a900!important; box-shadow:0 0 0 5px rgba(227,190,37,.25),0 10px 22px rgba(111,91,5,.18)!important; transform:translateY(-3px) scale(1.02); }
.org-tree-node.drop-ready .org-node-copy small,.org-tree-node.drop-ready .org-node-copy em { color:#706020!important; }
.org-tree-node.drop-ready .org-node-icon { color:#7e6400!important; background:#fff8d2!important; }
.org-chart-canvas.drag-position .org-department-node,.org-chart-canvas.drag-position .org-position-node,
.org-chart-canvas.drag-department .org-department-node,.org-chart-canvas.drag-department .org-root-node { outline:3px dashed rgba(227,190,37,.64); outline-offset:3px; }
.org-search-hidden { display:none!important; }
.org-empty-search { display:grid; min-height:420px; place-content:center; color:var(--muted); text-align:center; }
.org-empty-search i { font-size:1.7rem; }
.org-empty-search p { margin:8px 0; font-size:.75rem; }
.org-no-data { display:grid; min-width:360px; min-height:360px; place-content:center; justify-items:center; gap:8px; color:var(--muted); text-align:center; }
.org-no-data i { font-size:2rem; }
.org-no-data strong { color:var(--charcoal); }
.org-no-data span { font-size:.72rem; }
.type-card { position: relative; padding: 24px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--type-color); border-radius: var(--radius); box-shadow: 0 9px 28px rgba(33,38,25,.04); }
.type-card-top { display: flex; align-items: center; justify-content: space-between; }
.type-code { padding: 6px 9px; color: color-mix(in srgb,var(--type-color) 78%,black); background: color-mix(in srgb,var(--type-color) 15%,white); border-radius: 8px; font-size: .68rem; font-weight: 850; }
.type-card h2 { margin: 18px 0 3px; font-size: 1.18rem; font-weight: 840; }
.type-card > p { color: var(--muted); font-size: .73rem; }
.type-rules { display: grid; grid-template-columns: 1fr 1fr; margin: 19px 0; padding: 14px 0; border-block: 1px solid #eceee7; }
.type-rules span { color: var(--muted); font-size: .67rem; }
.type-rules strong { display: block; margin: 4px 0; color: var(--olive-950); font-size: 1.1rem; }
.type-card ul { padding-left: 18px; color: #676b61; font-size: .72rem; line-height: 1.75; }
.holiday-list article { display: flex; align-items: center; padding: 13px 5px; gap: 17px; border-bottom: 1px solid #eceee7; }
.holiday-list time { display: grid; width: 51px; height: 51px; place-items: center; align-content: center; color: var(--olive-900); background: var(--cream); border-radius: 13px; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.holiday-list time strong { font-size: 1.1rem; line-height: 1; }
.holiday-list article > span:nth-child(2) { flex: 1; }
.holiday-list strong, .holiday-list small { display: block; }
.holiday-list small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.year-switcher { display: flex; align-items: center; padding: 5px; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.year-switcher a { display: grid; width: 33px; height: 33px; place-items: center; }
.role-chip, .module-chip { display: inline-flex; padding: 6px 9px; color: var(--olive-800); background: #eef0e7; border-radius: 8px; font-size: .68rem; font-weight: 750; }
.role-grid { margin-top: 20px; }
.role-grid article { min-height: 180px; }
.role-grid h2 { margin: 15px 0 5px; }
.role-grid p { min-height: 48px; color: var(--muted); font-size: .72rem; }
.calendar-toolbar { justify-content: flex-start; }
.calendar-toolbar div { min-width: 190px; text-align: center; }
.calendar-toolbar h2 { margin: 0; font-size: 1.3rem; font-weight: 850; }
.calendar-panel { overflow-x: auto; }
.calendar-weekdays, .calendar-grid { display: grid; min-width: 760px; grid-template-columns: repeat(7,1fr); }
.calendar-weekdays span { padding: 6px 10px 13px; color: var(--muted); font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.calendar-weekdays span:nth-child(6), .calendar-weekdays span:nth-child(7) { background:#eaf4ff; }
.calendar-day { min-height: 134px; padding: 9px; border-top: 1px solid #e9ebe3; border-right: 1px solid #e9ebe3; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day > time { display: grid; width: 26px; height: 26px; place-items: center; font-size: .72rem; font-weight: 750; }
.calendar-day.muted { color: #b6b8af; background: #fafaf7; }
.calendar-day.weekend-day { background:#eaf4ff; }
.calendar-day.weekend-day.muted { background:#f3f8fd; }
.calendar-day.today > time { color: var(--charcoal); background: var(--yellow); border-radius: 50%; }
.calendar-day.holiday-day { color: #fff; background: #111; }
.calendar-day.holiday-day.muted { color: #9a9a9a; background: #191919; }
.calendar-day.holiday-day .calendar-event.holiday { color: #fff; background: #333; border-color: #777; }
.day-events { display: grid; margin-top: 6px; gap: 4px; }
.calendar-event { display: block; overflow: hidden; padding: 5px 6px; color: color-mix(in srgb,var(--event-color) 75%,black); background: color-mix(in srgb,var(--event-color) 18%,white); border-left: 3px solid var(--event-color); border-radius: 5px; font-size: .61rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event small { display: block; opacity: .72; font-size: .55rem; }
.leave-status-approved { --leave-status:#24945f; color:#165c3b; background:#dff5e9; border-color:#24945f; }
.leave-status-pending { --leave-status:#f59e0b; color:#85500a; background:#fff0cf; border-color:#f59e0b; }
.leave-status-rejected { --leave-status:#dc3545; color:#842029; background:#f8d7da; border-color:#dc3545; }
.calendar-event.half-day, .matrix-leave.half-day { color:#26312b; background:linear-gradient(135deg,var(--leave-status) 0 49%,#fff 50% 100%); }
.calendar-event.holiday { --event-color: var(--yellow); color: #7b6115; background: var(--yellow-soft); }
.flatpickr-day.holiday-picker-day,
.flatpickr-day.holiday-picker-day:hover,
.flatpickr-day.holiday-picker-day:focus {
    color: #fff;
    background: #111;
    border-color: #111;
    font-weight: 800;
}
.flatpickr-day.holiday-picker-day.selected,
.flatpickr-day.holiday-picker-day.selected:hover {
    color: #fff;
    background: #111;
    border-color: var(--yellow);
    box-shadow: inset 0 0 0 2px var(--yellow);
}
.flatpickr-day.holiday-picker-day.prevMonthDay,
.flatpickr-day.holiday-picker-day.nextMonthDay { color: #bdbdbd; background: #222; }
.more-events { color: var(--muted); font-size: .6rem; }
.calendar-legend { display: flex; margin-top: 14px; gap: 16px; flex-wrap: wrap; }
.calendar-legend span { color: var(--muted); font-size: .67rem; }
.calendar-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--legend); border-radius: 50%; }
.calendar-legend .legend-diagonal { width:14px; height:14px; border:1px solid #999; border-radius:2px; background:linear-gradient(135deg,#24945f 0 49%,#fff 50% 100%); vertical-align:middle; }
.calendar-view-actions { align-items:center; }
.calendar-scope-form { display:flex; gap:8px; }
.calendar-scope-form .form-select { min-width:180px; }
.leave-matrix-panel { overflow:hidden; padding:0; }
.leave-matrix { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; }
.leave-matrix th,.leave-matrix td { width:38px; min-width:38px; height:44px; padding:3px; text-align:center; border-right:1px solid #e4e6df; border-bottom:1px solid #e4e6df; }
.leave-matrix thead th { position:sticky; top:0; z-index:2; color:#6d7168; background:#f7f8f4; font-size:.67rem; }
.leave-matrix thead th span { display:block; color:#a1a49c; font-size:.55rem; }
.leave-matrix .employee-column { position:sticky; left:0; z-index:3; width:220px; min-width:220px; padding:8px 14px; text-align:left; background:#fff; box-shadow:2px 0 0 #e4e6df; }
.leave-matrix thead .employee-column { z-index:4; background:#f7f8f4; }
.leave-matrix .employee-column strong,.leave-matrix .employee-column small { display:block; }
.leave-matrix .employee-column strong { font-size:.75rem; }
.leave-matrix .employee-column small { color:var(--muted); font-size:.6rem; }
.leave-matrix .weekend-column:not(.holiday-column) { background:#eaf4ff; }
.leave-matrix .holiday-column { color:#fff; background:#111; }
.matrix-leave { display:grid; width:100%; min-height:31px; place-items:center; border:1px solid var(--leave-status); border-radius:5px; font-size:.57rem; font-weight:850; }
.leave-balance-panel { margin-bottom:20px; }
.guideline-panel { margin-bottom:20px; }
.guideline-groups { display:grid; gap:24px; }
.guideline-group { overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.guideline-group h3 { margin:0; padding:12px 16px; color:var(--olive-950); background:var(--cream); font-size:.9rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.guideline-table { margin:0; min-width:820px; }
.guideline-table thead th { color:#172033; background:#91add8; font-size:.72rem; }
.guideline-table td { font-size:.74rem; vertical-align:top; }
.guideline-table th:first-child,.guideline-table td:first-child { width:58px; text-align:center; }
.report-catalog { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 20px; gap: 12px; }
.report-catalog a { display: flex; align-items: center; padding: 18px; gap: 12px; color: #565a4d; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.report-catalog a.active { color: var(--olive-950); background: var(--cream); border-color: #dfd3bd; }
.report-catalog i { font-size: 1.35rem; }
.report-catalog strong, .report-catalog small { display: block; }
.report-catalog small { color: var(--muted); font-size: .66rem; }
.report-filter { display: flex; align-items: flex-end; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.report-filter > div { min-width: 170px; }
.report-meta { display: flex; margin: 0 -24px 12px; padding: 10px 24px; gap: 20px; color: var(--muted); background: #f8f8f4; border-block: 1px solid #eceee7; font-size: .66rem; }
.audit-summary { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 20px; gap: 14px; }
.audit-summary > div { display: flex; align-items: center; padding: 20px; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.audit-summary i { color: var(--olive-600); font-size: 1.4rem; }
.audit-summary strong { display: block; font-size: 1.2rem; }
.audit-summary span { color: var(--muted); font-size: .7rem; }
.notification-list { padding: 0; overflow: hidden; }
.notification-list > a { display: flex; padding: 19px 24px; gap: 14px; color: inherit; border-bottom: 1px solid var(--line); }
.notification-list > a.unread { background: var(--cream-soft); }
.notification-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: var(--olive-800); background: var(--yellow-soft); border-radius: 13px; }
.notification-list strong, .notification-list time { display: block; }
.notification-list p { margin: 3px 0; color: var(--muted); font-size: .75rem; }
.notification-list time { color: #989b91; font-size: .64rem; }
.login-page { background: var(--cream-soft); }
.login-grid { display: grid; grid-template-columns: minmax(420px,1.05fr) minmax(430px,.95fr); min-height: 100vh; }
.login-visual { position: relative; display: flex; align-items: flex-end; min-height: 100vh; padding: clamp(45px,7vw,100px); color: #fff; background: radial-gradient(circle at 75% 18%,rgba(255,210,28,.33),transparent 26%),linear-gradient(145deg,var(--olive-600),var(--olive-950)); overflow: hidden; }
.login-visual::after { position: absolute; top: 12%; right: -16%; width: 520px; height: 520px; border: 96px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }
.login-visual-copy { position: relative; z-index: 1; max-width: 670px; }
.login-visual .eyebrow { color: var(--yellow); }
.login-visual h1 { margin: 0; font-size: clamp(3.6rem,7vw,7rem); font-weight: 870; letter-spacing: -.075em; line-height: .83; }
.login-visual p { max-width: 570px; margin: 30px 0; color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.65; }
.login-metrics { display: flex; gap: 30px; color: rgba(255,255,255,.6); font-size: .75rem; }
.login-metrics strong { display: block; color: #fff; font-size: 1.12rem; }
.login-panel { display: grid; min-height: 100vh; place-items: center; padding: 40px; }
.login-card { width: min(100%,440px); }
.login-logo { display: block; width: 100%; height: auto; margin-bottom: 24px; object-fit: contain; object-position: center; }
.login-heading span { color: var(--olive-600); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.login-heading h2 { margin: 7px 0; color: var(--olive-950); font-size: 2rem; font-weight: 870; letter-spacing: -.05em; }
.login-heading p, .login-help { color: var(--muted); font-size: .8rem; }
.login-heading { margin-bottom: 28px; }
.input-icon { position: relative; }
.input-icon i { position: absolute; top: 50%; left: 15px; z-index: 1; color: #8c9084; transform: translateY(-50%); }
.employee-context-menu{position:fixed;z-index:1090;width:245px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 45px rgba(20,30,20,.2)}
.employee-context-menu[hidden]{display:none}.employee-context-menu strong{display:block;padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-context-menu a,.employee-context-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#1683c7;text-decoration:none;text-align:left}.employee-context-menu a:hover,.employee-context-menu button:hover{background:#f0f5ee;color:#111}.employee-context-menu i{width:18px;color:#111}
.employee-master-locked{color:#686d63!important;background:#eef0ea!important;cursor:not-allowed}
.reference-explanation{padding:14px 16px;border:1px solid #dfe4d5;border-radius:12px;background:#f7f9f3}.reference-explanation strong{display:block;color:var(--olive-900);margin-bottom:4px}.reference-explanation p{font-size:.84rem;color:#444}.transaction-guide summary{cursor:pointer;color:var(--olive-700);font-weight:750}.transaction-guide div{max-height:230px;overflow:auto;padding:12px 14px;border-left:3px solid var(--yellow);background:#fafbf7;font-size:.8rem}.reference-group-tabs{display:flex;flex-wrap:wrap;gap:8px}.reference-group-tabs a{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--olive-800);font-size:.74rem;font-weight:750;text-decoration:none}.reference-group-tabs a:hover,.reference-group-tabs a.active{border-color:var(--olive-700);background:var(--olive-700);color:#fff}.reference-master-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.reference-master-links a{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:14px;color:var(--olive-900);text-decoration:none}.reference-master-links a:hover{border-color:var(--olive-500);background:#f7f9f3}.reference-master-links i{display:grid;width:38px;height:38px;border-radius:10px;background:var(--yellow);place-items:center}.reference-master-links span,.reference-master-links small{display:block}.reference-master-links small{color:var(--muted);font-size:.7rem}
.input-icon .form-control { padding-left: 43px; }
.link-olive { color: var(--olive-700); font-weight: 700; }
.login-help { margin: 20px 0 0; text-align: center; }
.standalone-card, .error-card { width: min(calc(100% - 32px),460px); margin: 8vh auto; padding: 38px; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.password-panel { width: min(100%, 560px); margin-inline: auto; }
.standalone-card h1, .error-card h1 { color: var(--olive-950); font-size: 1.8rem; font-weight: 850; }
.error-page { display: grid; min-height: 100vh; place-items: center; background: var(--cream-soft); }
.error-card { margin: 0; text-align: center; }
.error-card img { width: 180px; height: 100px; object-fit: contain; }
.error-code { display: block; color: var(--yellow); font-size: 4.5rem; font-weight: 900; text-shadow: 2px 2px 0 var(--olive-900); }
.modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(29,32,23,.18); overflow: hidden; }
.modal-header, .modal-footer { padding: 18px 22px; border-color: var(--line); }
.modal-body { padding: 22px; }
.dt-container .dt-search input, .dt-container .dt-length select { min-height: 36px; border: 1px solid #dcded2; border-radius: 9px; }
.dt-container .dt-info, .dt-container .dt-length, .dt-container .dt-search { color: var(--muted); font-size: .7rem; }

.reactive-dropdown { position: relative; }
.reactive-dropdown-native { position: absolute!important; left: 0; bottom: 0; width: 1px!important; height: 1px!important; padding: 0!important; opacity: 0; pointer-events: none; }
.reactive-dropdown-toggle { min-height: 42px; padding-right: 2.5rem; overflow: hidden; color: var(--charcoal); text-align: left; text-overflow: ellipsis; white-space: nowrap; background-color: #fff; }
.reactive-dropdown-toggle.reactive-dropdown-placeholder { color: #777d70; }
.reactive-dropdown.open .reactive-dropdown-toggle { border-color: var(--olive-700); box-shadow: 0 0 0 .2rem rgba(92,102,58,.14); }
.reactive-dropdown.is-invalid .reactive-dropdown-toggle { border-color: var(--bs-danger); }
.reactive-dropdown-menu { position: absolute; z-index: 1080; top: calc(100% + 5px); right: 0; left: 0; padding: 7px; background: #fff; border: 1px solid #d7d9d0; border-radius: 11px; box-shadow: 0 14px 34px rgba(32,37,24,.16); }
.reactive-dropdown-menu[hidden] { display: none; }
.reactive-dropdown-search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 10px; border: 1px solid #d7d9d0; border-radius: 8px; background: #fafaf7; }
.reactive-dropdown-search-wrap:focus-within { border-color: var(--olive-700); box-shadow: 0 0 0 .16rem rgba(92,102,58,.12); background: #fff; }
.reactive-dropdown-search-wrap i { color: var(--muted); font-size: .8rem; }
.reactive-dropdown-search { width: 100%; height: 37px; padding: 0; border: 0; outline: 0; background: transparent; font-size: .78rem; }
.reactive-dropdown-options { max-height: 240px; overflow-y: auto; }
.reactive-dropdown-option { display: block; width: 100%; padding: 9px 10px; color: var(--charcoal); text-align: left; border: 0; border-radius: 7px; background: transparent; font-size: .78rem; }
.reactive-dropdown-option:hover, .reactive-dropdown-option:focus { color: var(--olive-950); outline: 0; background: #f1f3e8; }
.reactive-dropdown-option.selected { color: #fff; background: var(--olive-700); }
.reactive-dropdown-empty { padding: 14px 10px; color: var(--muted); text-align: center; font-size: .75rem; }

@media (max-width: 1200px) {
    .metric-grid { grid-template-columns: repeat(2,1fr); }
    .org-card-grid, .type-card-grid { grid-template-columns: repeat(2,1fr); }
    .org-builder { grid-template-columns:235px minmax(0,1fr); }
    .form-layout { grid-template-columns: minmax(0,1fr) 280px; }
}
@media (max-width: 920px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,.18); }
    .main-area { grid-column: 1; }
    .menu-toggle { display: inline-grid; place-items: center; }
    .dashboard-grid, .detail-grid { grid-template-columns: 1fr; }
    .org-builder { grid-template-columns:1fr; }
    .org-selection-panel { position:static; }
    .org-card-scroll { max-height:320px; }
    .org-chart-canvas { min-height:560px; }
    .queue-summary { grid-template-columns: 1fr 1fr; }
    .queue-note { grid-column: 1 / -1; }
    .form-layout { grid-template-columns: 1fr; }
    .form-panel, .preview-panel, .form-actions { grid-column: 1; }
    .preview-panel { grid-row: auto; position: static; }
    .login-grid { grid-template-columns: 1fr; }
    .login-visual { min-height: 400px; }
    .login-panel { min-height: auto; }
}
@media (max-width: 640px) {
    .content { padding-inline: 14px; }
    .topbar { padding-inline: 14px; }
    .topbar p { display: none; }
    .hero-strip { align-items: flex-start; flex-direction: column; }
    .metric-grid, .org-card-grid, .type-card-grid, .role-grid, .audit-summary, .report-catalog { grid-template-columns: 1fr; }
    .org-department-grid { grid-template-columns:1fr; }
    .org-chart-toolbar { align-items:stretch; flex-direction:column; }
    .org-chart-toolbar-actions { width:100%; }
    .org-chart-toolbar-actions .btn { flex:1; }
    .org-chart-guide-title { display:none!important; }
    .org-chart-canvas { padding-inline:10px; }
    .page-actions, .detail-toolbar { align-items: stretch; flex-direction: column; }
    .calendar-view-actions,.calendar-scope-form { align-items:stretch; flex-direction:column; }
    .filter-pills { overflow-x: auto; }
    .queue-summary { grid-template-columns: 1fr; }
    .queue-note { grid-column: auto; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list .full { grid-column: auto; }
    .request-hero { align-items: flex-start; flex-direction: column; }
    .page-footer { flex-direction: column; gap: 4px; }
    .login-panel { padding: 30px 20px; }
    .login-visual { min-height: 340px; padding: 36px 24px; }
    .login-visual h1 { font-size: 3.7rem; }
}
@media print {
    .sidebar, .topbar, .page-footer, .detail-toolbar, .comment-form, .btn, .page-actions { display: none!important; }
    .app-shell, .main-area { display: block; }
    .content { max-width: none; padding: 0; }
    body { background: #fff; }
    .panel, .request-hero { break-inside: avoid; box-shadow: none; }
}
.sidebar-nav-group{display:grid;gap:4px}
.sidebar-nav-parent{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--sidebar-muted,#d6d0c4);font-weight:600}
.sidebar-nav-group.active>.sidebar-nav-parent{color:#fff}
.sidebar-submenu{display:grid;gap:3px;margin-left:24px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.sidebar-submenu a{padding:8px 10px!important;font-size:.88rem}
.sidebar-submenu a i{font-size:.9rem}
.tabular-controls{margin-bottom:18px;padding:18px}
.tabular-control-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(330px,1.35fr) minmax(260px,1fr);gap:24px;align-items:start}
.tabular-month-nav{display:flex;align-items:center;justify-content:center;gap:16px}
.tabular-month-nav strong{min-width:130px;font-size:1.05rem}
.tabular-status-filters{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;padding-top:14px;border-top:1px solid #e6e6e6}
.status-filter{display:flex;align-items:center;gap:7px;margin:0}
.status-swatch{width:18px;height:18px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.status-planned .status-swatch{background:#9ca3af}.status-accepted .status-swatch{background:#24945f}.status-requested .status-swatch{background:#f59e0b}.status-cancellation .status-swatch{background:#dc3545}
.tabular-calendar-panel{padding:0;overflow:hidden}
.tabular-scroll{overflow:auto;max-width:100%;max-height:70vh}
.tabular-calendar-table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;font-size:.78rem}
.tabular-calendar-table th,.tabular-calendar-table td{width:38px;min-width:38px;height:34px;padding:0;border-right:1px solid #d9dde3;border-bottom:1px solid #d9dde3;text-align:center;position:relative;background:#fff}
.tabular-calendar-table thead th{height:27px;background:#f3f5f7;font-weight:700;position:sticky;top:0;z-index:5}
.tabular-calendar-table thead tr:nth-child(2) th{top:27px}
.tabular-calendar-table .tabular-employee-column{width:220px;min-width:220px;max-width:220px;text-align:left;padding:7px 12px;position:sticky;left:0;z-index:4;background:#fff;border-left:1px solid #d9dde3}
.tabular-calendar-table thead .tabular-employee-column{z-index:8;background:#eef1f4}
.tabular-employee-column a{display:block;color:#1e3a5f;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabular-employee-column small{display:block;color:#7b8490;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabular-calendar-table .weekend-day:not(.blocked-day){background:#eaf4ff}
.tabular-calendar-table .blocked-day{background:#161616!important;color:#fff}
.tabular-calendar-table .today-column:not(.blocked-day){background:#fff8cf}
.tabular-calendar-table .today-column.weekend-day:not(.blocked-day){background:#eaf4ff}
.tabular-calendar-table td.today-column:not(.blocked-day){border-left:1px dashed #d2a900;border-right:1px dashed #d2a900}
.tabular-leave{position:absolute;inset:2px;border:0;border-radius:2px;color:#fff;font-size:.62rem;font-weight:800;line-height:1;padding:0;z-index:2;overflow:hidden}
.tabular-leave:nth-child(2){inset:6px 2px 2px 6px;z-index:3}.tabular-leave:nth-child(n+3){inset:10px 2px 2px 10px;z-index:4}
.leave-planned{background:#9ca3af}.leave-accepted{background:#24945f}.leave-requested{background:#f59e0b}.leave-cancellation{background:#dc3545}
.tabular-calendar-table td.blocked-day .tabular-leave{inset:auto 2px 2px auto;width:10px;height:10px;border-radius:50%;font-size:0;outline:1px solid #fff}
.tabular-leave.partial-morning{clip-path:polygon(0 0,100% 0,0 100%)}
.tabular-leave.partial-afternoon{clip-path:polygon(100% 0,100% 100%,0 100%)}
.tabular-leave.partial-minutes{clip-path:polygon(0 0,55% 0,0 55%)}
.tabular-leave-details dt,.tabular-leave-details dd{padding-top:5px;padding-bottom:5px;border-bottom:1px solid #eee}
.team-balance-matrix{min-width:max-content;margin:0}
.team-balance-matrix th{min-width:150px;vertical-align:bottom}
.team-balance-matrix th:first-child{min-width:190px}.team-balance-matrix th:nth-child(2){min-width:210px}
.team-balance-cell{min-width:165px;background:#fbfcf8!important}
.team-balance-cell>strong{display:block;color:var(--olive-900);font-size:1rem}
.team-balance-cell>span{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}
.team-balance-cell>small{display:block;margin-top:6px;color:#60665a;font-size:.67rem;white-space:nowrap}
.notice-confirmation-detail dd{padding:14px;border:1px solid #f0d58c;border-radius:12px;background:#fff9e8}
#leaveConfirmationModal .alert{font-size:.82rem}
@media(max-width:991px){.tabular-control-grid{grid-template-columns:1fr}.tabular-control-grid .text-end{text-align:left!important}.tabular-control-grid .justify-content-end{justify-content:flex-start!important}}
@media print{.sidebar,.topbar,.page-footer,.tabular-controls,.alert,.modal{display:none!important}.main-area,.content{margin:0!important;padding:0!important}.tabular-scroll{overflow:visible;max-height:none}.tabular-calendar-table{font-size:7px}.tabular-calendar-table th,.tabular-calendar-table td{min-width:20px;width:20px;height:22px}.tabular-calendar-table .tabular-employee-column{min-width:130px;width:130px}}