:root {
    --brand: #0b6f73;
    --brand-dark: #07565a;
    --brand-soft: #e8f4f3;
    --accent: #d9342b;
    --ink: #17383d;
    --muted: #6f8184;
    --line: #dce8e8;
    --surface: #ffffff;
    --page: #f4f8f8;
    --danger: #b3261e;
    --danger-bg: #fff0ef;
    --shadow: 0 28px 70px rgba(8, 63, 67, .12);
    font-family: Arial, Tahoma, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body { background: var(--page); }

button, input { font: inherit; }

.auth-page { min-height: 100vh; }

.auth-shell {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) minmax(520px, 1.08fr);
    min-height: 100vh;
    direction: ltr;
}

.auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(48px, 7vw, 110px);
    color: #fff;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.13), transparent 28%),
        linear-gradient(145deg, #0d7d7d 0%, #07575c 55%, #073d45 100%);
    direction: rtl;
}

.brand-content { position: relative; z-index: 2; max-width: 620px; }

.brand-badge {
    display: inline-flex;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    font-size: 13px;
    font-weight: 700;
}

.auth-brand h1 {
    margin: 28px 0 16px;
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.18;
    letter-spacing: -.8px;
}

.auth-brand h1 span { color: #bde5df; }

.auth-brand > .brand-content > p {
    max-width: 590px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.9;
}

.feature-list { display: grid; gap: 18px; margin-top: 46px; }

.feature-item { display: flex; align-items: center; gap: 14px; }

.feature-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #e7fffb;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
}

.feature-item strong, .feature-item small { display: block; }
.feature-item strong { margin-bottom: 4px; font-size: 15px; }
.feature-item small { color: rgba(255,255,255,.66); font-size: 13px; }

.brand-decoration { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.brand-decoration-one { width: 420px; height: 420px; bottom: -230px; left: -120px; }
.brand-decoration-two { width: 250px; height: 250px; top: -140px; right: -90px; }

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: #f7fbfb;
    direction: rtl;
}

.login-card {
    width: min(100%, 470px);
    padding: 42px;
    border: 1px solid rgba(11,111,115,.09);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-header { text-align: center; }
.login-logo { width: 170px; height: auto; margin-bottom: 20px; mix-blend-mode: multiply; }
.eyebrow { margin: 0 0 8px; color: var(--brand); font-size: 13px; font-weight: 800; }
.login-header h2 { margin: 0 0 9px; color: var(--ink); font-size: 26px; }
.login-header > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 24px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
}
.alert span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-weight: 800; }
.alert p { margin: 1px 0 0; line-height: 1.55; }
.alert-error { color: var(--danger); background: var(--danger-bg); border: 1px solid #f6cfcc; }
.alert-error span { color: #fff; background: var(--danger); }

.login-form { display: grid; gap: 21px; margin-top: 30px; }
.form-group { display: grid; gap: 8px; }
.form-group label { color: #26494d; font-size: 13px; font-weight: 700; }
.login-identifier-hint { color:#59777a;font-size:12px;line-height:1.7; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted-link { color: var(--brand); font-size: 12px; text-decoration: none; opacity: .8; }
.input-wrap { position: relative; }
.input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 45px 0 60px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: #fbfdfd;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-wrap input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(11,111,115,.1); }
.input-wrap input::placeholder { color: #a0afb0; }
.input-icon { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); color: var(--brand); font-size: 13px; font-weight: 800; }
.password-toggle { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); padding: 7px; border: 0; color: var(--brand); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }

.primary-button, .secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.primary-button { width: 100%; margin-top: 3px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 12px 24px rgba(11,111,115,.18); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(11,111,115,.25); }
.primary-button:focus-visible, .password-toggle:focus-visible, .secondary-button:focus-visible { outline: 3px solid rgba(11,111,115,.25); outline-offset: 2px; }

.login-footer { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: #819092; font-size: 11px; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #25a66a; box-shadow: 0 0 0 4px rgba(37,166,106,.1); }

.dashboard-preview { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.preview-card { width: min(100%, 620px); padding: 48px; border: 1px solid var(--line); border-radius: 24px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.preview-card img { width: 180px; mix-blend-mode: multiply; }
.preview-card h1 { margin: 10px 0; }
.preview-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; }
.secondary-button { margin: 26px auto 0; padding: 0 24px; color: var(--brand); background: var(--brand-soft); }

@media (max-width: 980px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { min-height: auto; padding: 42px 32px; }
    .auth-brand h1 { font-size: 36px; }
    .feature-list { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
    .feature-item { align-items: flex-start; }
    .auth-panel { padding: 38px 20px; }
}

@media (max-width: 680px) {
    .auth-brand { display: none; }
    .auth-panel { min-height: 100vh; padding: 20px; }
    .login-card { padding: 30px 22px; border-radius: 19px; box-shadow: 0 18px 45px rgba(8,63,67,.1); }
    .login-logo { width: 150px; }
    .login-header h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ================================================================
   Enterprise dashboard prototype
   ================================================================ */

[data-theme="dark"] {
    --ink: #e5eeee;
    --muted: #91a4a6;
    --line: #263c3f;
    --surface: #122629;
    --page: #0c1c1f;
    --brand-soft: #15383a;
    --shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

.admin-page {
    --primary: var(--brand);
    --border: var(--line);
    --surface-soft: var(--page);
    --text: var(--ink);
    min-height: 100vh;
    color: var(--ink);
    background: var(--page);
    overflow-x: hidden;
}

.admin-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: 276px;
    height: 100vh;
    border-left: 1px solid var(--line);
    background: var(--surface);
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 94px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
}

.sidebar-brand img { width: 156px; height: 70px; object-fit: contain; mix-blend-mode: multiply; }
[data-theme="dark"] .sidebar-brand img { padding: 4px; border-radius: 10px; background: #fff; mix-blend-mode: normal; }
.sidebar-close { display: none; border: 0; color: var(--muted); background: transparent; font-size: 26px; cursor: pointer; }

.sidebar-context { padding: 18px 18px 12px; }
.context-label, .nav-label { display: block; margin: 0 8px 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .3px; }
.context-selector {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--page);
    text-align: right;
    cursor: pointer;
}
.context-symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--brand), #11a0a0); font-weight: 800; }
.context-selector strong, .context-selector small { display: block; }
.context-selector strong { margin-bottom: 4px; font-size: 12px; }
.context-selector small { color: var(--muted); font-size: 9px; }
.chevron { color: var(--muted); }

.sidebar-nav { flex: 1; padding: 2px 14px 18px; overflow-y: auto; scrollbar-width: thin; }
.nav-label { margin-top: 19px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    margin: 3px 0;
    padding: 0 12px;
    border-radius: 10px;
    color: #5b7073;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: background .18s, color .18s, transform .18s;
}
[data-theme="dark"] .nav-item { color: #a8b8ba; }
.nav-item:hover { color: var(--brand); background: var(--brand-soft); transform: translateX(-2px); }
.nav-item.active { color: var(--brand); background: var(--brand-soft); }
.nav-icon { display: grid; place-items: center; width: 24px; height: 24px; color: currentColor; font-size: 17px; }
.nav-count { margin-right: auto; min-width: 21px; padding: 3px 6px; border-radius: 999px; color: #fff; background: var(--accent); text-align: center; font-size: 9px; }
.nav-count.muted { color: var(--brand); background: var(--brand-soft); }

.sidebar-help { display: flex; align-items: center; gap: 10px; margin: 12px 16px 18px; padding: 13px; border-radius: 12px; color: var(--ink); background: var(--brand-soft); }
.sidebar-help .help-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--brand); font-weight: 800; }
.sidebar-help strong, .sidebar-help small { display: block; }
.sidebar-help strong { margin-bottom: 3px; font-size: 11px; }
.sidebar-help small { color: var(--muted); font-size: 9px; }

.admin-main { min-height: 100vh; margin-right: 276px; }
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 0 30px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(13px);
}
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; border: 0; color: var(--ink); background: transparent; font-size: 23px; cursor: pointer; }
.global-search { position: relative; display: flex; align-items: center; width: min(35vw, 410px); }
.global-search > span { position: absolute; right: 14px; color: var(--muted); font-size: 20px; }
.global-search input { width: 100%; height: 42px; padding: 0 42px 0 50px; border: 1px solid transparent; border-radius: 11px; outline: none; color: var(--ink); background: var(--page); font-size: 11px; }
.global-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,111,115,.09); }
.global-search input::placeholder { color: var(--muted); }
.global-search kbd { position: absolute; left: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font: 9px Arial; }
.icon-button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); font-size: 17px; cursor: pointer; }
.notification-button span { position: absolute; top: -5px; left: -4px; display: grid; place-items: center; min-width: 17px; height: 17px; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: var(--accent); font-size: 8px; font-weight: 800; }
.notification-menu{position:relative}.notification-dropdown{position:absolute;z-index:1200;top:calc(100% + 12px);left:0;width:min(390px,calc(100vw - 28px));overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 22px 55px rgba(7,63,69,.2)}.notification-dropdown[hidden]{display:none}.notification-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}.notification-dropdown-head div{display:grid;gap:2px}.notification-dropdown-head small{color:var(--muted)}.notification-dropdown-head a,.notification-read-all button{color:var(--primary);font-weight:800}.notification-dropdown-list{max-height:390px;overflow:auto}.notification-dropdown-item{margin:0;border-bottom:1px solid var(--border)}.notification-dropdown-item button{display:grid;width:100%;gap:4px;padding:13px 18px;text-align:right;color:var(--text);background:transparent;border:0;cursor:pointer}.notification-dropdown-item button:hover{background:var(--surface-soft)}.notification-dropdown-item.is-unread button{background:#edfafa}.notification-dropdown-item span{overflow:hidden;color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis}.notification-dropdown-item time{color:var(--muted);font-size:10px}.notification-dropdown-empty{padding:28px 18px;text-align:center;color:var(--muted)}.notification-read-all{padding:11px 18px;text-align:center}.notification-read-all button{border:0;background:transparent;cursor:pointer}

.notifications-page{padding:32px}.notifications-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;border-radius:24px;color:#fff;background:linear-gradient(125deg,#075c63,#0b8c8c)}.notifications-hero span{font-size:12px;font-weight:800}.notifications-hero h1{margin:7px 0;font-size:34px}.notifications-hero p{margin:0;opacity:.86}.notifications-hero .primary-button{color:#075c63;background:#fff}.notifications-panel{margin-top:20px;padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}.notifications-filters{display:grid;grid-template-columns:minmax(220px,1fr) 180px 180px auto auto;gap:10px;margin-bottom:18px}.notifications-filters input,.notifications-filters select{min-height:44px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);color:var(--text)}.notifications-list{display:grid;gap:10px}.notification-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:16px}.notification-row.is-unread{border-color:#95d9d5;background:#f0fbfa}.notification-row-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:var(--primary);background:#dff4f2}.notification-row-body>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.notification-category{color:var(--primary);font-size:11px;font-weight:800}.notification-row time{color:var(--muted);font-size:11px}.notification-row h2{margin:4px 0;font-size:16px}.notification-row p{margin:0;color:var(--muted);font-size:13px}.notifications-empty{display:grid;place-items:center;gap:7px;padding:55px;color:var(--muted)}.notifications-empty i{font-size:32px}.notifications-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}.notifications-pagination a{font-weight:800}.notifications-pagination a.disabled{pointer-events:none;opacity:.4}
@media(max-width:800px){.notifications-page{padding:16px}.notifications-hero{align-items:flex-start;flex-direction:column;padding:22px}.notifications-hero h1{font-size:27px}.notifications-filters{grid-template-columns:1fr 1fr}.notifications-filters input{grid-column:1/-1}.notification-row{grid-template-columns:40px 1fr}.notification-row>form{grid-column:1/-1}.notification-row>form button{width:100%}.notification-dropdown{position:fixed;top:70px;right:14px;left:14px;width:auto}}
.topbar-divider { width: 1px; height: 30px; margin: 0 4px; background: var(--line); }
.user-menu { display: flex; align-items: center; gap: 9px; padding: 4px; border: 0; color: var(--ink); background: transparent; text-align: right; cursor: pointer; text-decoration: none; }

/* Unified employee profile */
.profile-page { display: grid; gap: 20px; }
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 28px; border-radius: 24px; color: #fff; background: linear-gradient(135deg,#0b6f73,#07545e); box-shadow: 0 18px 45px rgba(7,84,94,.2); }
.profile-avatar { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 24px; font-size: 34px; font-weight: 800; color: #0b6f73; background: #fff; }
.profile-kicker { display: block; margin-bottom: 5px; color: #c9f3ee; font-size: 13px; font-weight: 700; }
.profile-identity h1 { margin: 0 0 5px; font-size: clamp(25px,3vw,38px); }
.profile-identity p { margin: 0; color: #d7f1ef; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.profile-badge { padding: 5px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(255,255,255,.11); font-size: 12px; }
.profile-badge.success { color: #07545e; background: #bcf4df; border-color: transparent; }
.profile-hero-meta { display: grid; min-width: 180px; gap: 3px; padding-right: 22px; border-right: 1px solid rgba(255,255,255,.2); }
.profile-hero-meta span { margin-top: 8px; color: #c9e4e2; font-size: 12px; }
.profile-notice,.profile-card { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.profile-notice { display: flex; gap: 14px; align-items: center; padding: 18px 22px; }
.profile-notice>i { font-size: 28px; color: var(--primary); }.profile-notice p { margin: 3px 0 0; color: var(--muted); }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.profile-card { padding: 22px; min-width: 0; }
.profile-card>header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.profile-card>header>i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--primary); background: var(--primary-soft); font-size: 19px; }
.profile-card>header h2 { margin: 0; font-size: 18px; }.profile-card>header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }.profile-card>header .button { margin-right: auto; }
.profile-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.profile-details div { padding: 13px 14px; background: var(--surface); }.profile-details dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }.profile-details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.profile-details.compact { margin-bottom: 15px; }
.profile-list { display: grid; gap: 9px; }.profile-list article { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; }.profile-list article>i { color: var(--primary); font-size: 18px; }.profile-list span { display: grid; }.profile-list small { color: var(--muted); }
.profile-password-form { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }.profile-password-form h3 { margin: 0; font-size: 16px; }.profile-password-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }.profile-password-form input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); background: var(--surface); }.profile-password-hint { margin: 0; padding: 10px; border-radius: 10px; color: #7a4b00; background: #fff4d6; font-size: 12px; }
.profile-verified { display:inline-block; margin-right:5px; padding:2px 6px; border-radius:999px; color:#08704f; background:#d9f7e9; font-size:10px; }.otp-local-code { display:grid; gap:5px; margin:14px 0; padding:12px; border:1px dashed #d39b28; border-radius:12px; text-align:center; color:#704c00; background:#fff8df; }.otp-local-code strong { font-size:25px; letter-spacing:6px; }.otp-back { display:block; margin-top:14px; text-align:center; color:var(--primary); text-decoration:none; }
.profile-empty { width: 100%; margin: 10px 0; padding: 15px; color: var(--muted); text-align: center; }
.profile-balance-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 13px; }.profile-balance-grid article { padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-alt); }.profile-balance-grid article>span { float: left; color: var(--muted); }.profile-balance-grid article>strong { display: block; font-size: 30px; color: var(--primary); }.profile-balance-grid article>small { color: var(--muted); }.profile-balance-grid article>div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.profile-balance-grid b { padding: 4px 7px; border-radius: 7px; background: var(--surface); font-size: 11px; }
.profile-table-wrap { overflow-x: auto; }.profile-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.profile-table th,.profile-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: right; }.profile-table th { color: var(--muted); font-size: 12px; }.profile-table td>small { display: block; color: var(--muted); }.profile-status { display: inline-block; padding: 5px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 12px; }.profile-document { color: #c13a3a; font-weight: 700; text-decoration: none; }.button-small { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.profile-completion-card>header{align-items:center}.profile-completion-percent{margin-right:auto;color:var(--primary);font-size:28px}.profile-progress{height:10px;overflow:hidden;border-radius:999px;background:var(--surface-alt)}.profile-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0b6f73,#17a58f)}.profile-complete-message{display:flex;align-items:center;gap:8px;margin-top:15px;padding:12px;border-radius:12px;color:#08704f;background:#e5f8ef;font-weight:700}.profile-missing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:15px}.profile-missing-grid article{padding:13px;border:1px solid #f0d8a5;border-radius:12px;background:#fff9e9}.profile-missing-grid strong{display:block;color:#8b5c06}.profile-missing-grid p{margin:5px 0 0;color:var(--muted);font-size:13px}.profile-self-edit{margin-top:18px;border:1px solid var(--border);border-radius:14px}.profile-self-edit>summary{display:flex;align-items:center;justify-content:space-between;padding:15px;cursor:pointer}.profile-self-edit>summary span{display:grid;grid-template-columns:auto 1fr;column-gap:9px}.profile-self-edit>summary i{grid-row:1/3;color:var(--primary);font-size:18px}.profile-self-edit>summary small{color:var(--muted)}.profile-self-edit form{padding:0 15px 15px}.profile-self-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:14px;padding-top:15px;border-top:1px solid var(--border)}.profile-self-grid label{display:grid;gap:6px}.profile-self-grid label>span{font-size:13px;font-weight:700}.profile-self-grid input,.profile-self-grid select,.profile-self-grid textarea{width:100%;min-height:43px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink)}.profile-self-grid textarea{min-height:80px;resize:vertical}.profile-self-grid small{min-height:16px;color:var(--muted)}.profile-self-wide{grid-column:1/-1}.profile-document-checklist{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.profile-document-checklist div{display:grid;gap:3px}.profile-document-checklist small{color:var(--muted)}.record-review-note{padding:8px;border-radius:8px;background:#fff4d6;color:#7a4b00;font-size:12px}.status-pending_review{color:#8a5a00!important;background:#fff0c9!important}.status-rejected{color:#a52b2b!important;background:#ffe3e3!important}
@media (max-width:900px) { .profile-grid { grid-template-columns: 1fr; }.profile-hero { grid-template-columns: auto 1fr; }.profile-hero-meta { grid-column: 1/-1; padding: 14px 0 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.2); }.profile-details { grid-template-columns: 1fr; } }
@media (max-width:560px) { .profile-hero { grid-template-columns: 1fr; text-align: center; }.profile-avatar { margin: auto; }.profile-badges { justify-content: center; }.profile-card { padding: 16px; }.profile-self-grid{grid-template-columns:1fr}.profile-self-wide{grid-column:auto}.profile-document-checklist{align-items:stretch;flex-direction:column}.profile-completion-percent{font-size:22px} }
.user-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--brand), #13a6a2); font-weight: 800; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { margin-bottom: 3px; font-size: 11px; }
.user-copy small { color: var(--muted); font-size: 9px; }

.dashboard-content { max-width: 1740px; margin: 0 auto; padding: 26px 30px 18px; }
.prototype-banner { margin-bottom: 18px; padding: 10px 13px; border: 1px solid #f0d599; border-radius: 10px; color: #7b5b12; background: #fff8e6; font-size: 10px; }
.prototype-banner span { display: inline-block; margin-left: 7px; padding: 4px 7px; border-radius: 6px; color: #fff; background: #c99019; font-weight: 800; }
[data-theme="dark"] .prototype-banner { border-color: #6e592a; color: #ebcf8e; background: #302917; }

.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.heading-date { margin: 0 0 7px; color: var(--brand); font-size: 10px; font-weight: 800; }
.page-heading h1 { margin: 0 0 8px; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.4px; }
.page-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.heading-actions { display: flex; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 41px; padding: 0 16px; border-radius: 10px; font-size: 11px; font-weight: 800; cursor: pointer; }
.button-light { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.button-primary { border: 1px solid var(--brand); color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 8px 18px rgba(11,111,115,.16); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 16px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 4px 18px rgba(8,63,67,.035); }
.metric-card { padding: 17px 18px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.metric-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; font-size: 17px; font-weight: 800; }
.metric-icon.teal, .quick-icon.teal { color: #08767a; background: #e7f6f4; }
.metric-icon.blue, .quick-icon.blue { color: #2868b6; background: #edf4fc; }
.metric-icon.amber, .quick-icon.amber { color: #ac7510; background: #fff6df; }
.metric-icon.red { color: #b33a34; background: #fff0ef; }
.quick-icon.purple { color: #7954b0; background: #f3eefb; }
.metric-trend { padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.metric-trend.up { color: #158455; background: #eaf8f1; }
.metric-trend.down { color: #b23d35; background: #fff0ef; }
.metric-trend.neutral { color: var(--muted); background: var(--page); }
.metric-card > p { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.metric-value { margin-bottom: 7px; color: var(--ink); font-size: 28px; font-weight: 800; line-height: 1; }
.metric-value em { font-size: 12px; font-style: normal; }
.metric-card > small { color: var(--muted); font-size: 8.5px; }

.dashboard-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dashboard-grid-main { grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr); }
.dashboard-grid-secondary { grid-template-columns: 1.25fr .9fr .75fr; }
.dashboard-grid-bottom { grid-template-columns: 1.25fr .75fr; }
.panel { min-width: 0; padding: 18px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.panel-header h2 { margin: 0 0 5px; font-size: 13px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 9px; }
.panel-header select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; outline: none; color: var(--ink); background: var(--surface); font-size: 9px; }
.text-button, .icon-more { border: 0; color: var(--brand); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.icon-more { color: var(--muted); font-size: 15px; }

.chart-legend { display: flex; gap: 17px; margin-bottom: 8px; color: var(--muted); font-size: 8px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.teal-dot { background: var(--brand); }
.gray-dot { background: #afbec0; }
.line-chart { position: relative; height: 245px; padding-top: 3px; overflow: hidden; }
.line-chart svg { position: relative; z-index: 2; width: 100%; height: 205px; overflow: visible; }
.chart-grid-lines { position: absolute; inset: 9px 0 35px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines i { display: block; border-top: 1px dashed var(--line); }
.chart-target { fill: none; stroke: #b0bfc1; stroke-width: 2; stroke-dasharray: 6 7; }
.chart-area { fill: url(#attendanceFill); }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; }
.chart-points circle { fill: var(--surface); stroke: var(--brand); stroke-width: 3; }
.chart-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }

.branch-list { display: grid; gap: 18px; }
.branch-row { display: grid; grid-template-columns: 35px 1fr 30px; align-items: center; gap: 10px; }
.branch-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; font-size: 11px; font-weight: 800; }
.branch-avatar.b1 { color: #08767a; background: #e3f4f2; }.branch-avatar.b2 { color: #2868b6; background: #e9f2fc; }.branch-avatar.b3 { color: #7b57ae; background: #f0eafb; }.branch-avatar.b4 { color: #a8700d; background: #fff4db; }.branch-avatar.b5 { color: #af3d36; background: #ffedeb; }
.branch-row div strong { display: block; margin-bottom: 8px; font-size: 9.5px; }
.branch-row div span { display: block; height: 5px; border-radius: 99px; background: var(--page); overflow: hidden; }
.branch-row div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #25aaa5); }
.branch-row .progress-88 { width: 88%; }.branch-row .progress-73 { width: 73%; }.branch-row .progress-60 { width: 60%; }.branch-row .progress-47 { width: 47%; }.branch-row .progress-32 { width: 32%; }
.branch-row > b { text-align: left; font-size: 11px; }

.approval-list { display: grid; }
.approval-item { display: grid; grid-template-columns: 34px minmax(120px,1fr) auto 55px; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.approval-item:last-child { border-bottom: 0; }
.mini-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 10px; font-weight: 800; }
.teal-bg { color: #08767a; background: #e5f5f3; }.blue-bg { color: #2868b6; background: #eaf3fc; }.purple-bg { color: #7954b0; background: #f1ebfa; }.red-bg { color: #af3d36; background: #ffedeb; }
.approval-item div strong, .approval-item div small { display: block; }
.approval-item div strong { margin-bottom: 4px; font-size: 9.5px; }
.approval-item div small, .approval-item time { color: var(--muted); font-size: 8px; }
.approval-item time { text-align: left; }
.tag { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; border-radius: 6px; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.amber-tag { color: #9a6811; background: #fff4d9; }.blue-tag { color: #2868b6; background: #eaf3fc; }.purple-tag { color: #7954b0; background: #f1ebfa; }.red-tag { color: #af3d36; background: #ffedeb; }.teal-tag { color: #08767a; background: #e5f5f3; }

.compliance-summary { display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 15px; padding: 6px 0 18px; }
.donut { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--brand) 0 87%, var(--line) 87% 100%); }
.donut::before { content: ""; grid-area: 1/1; width: 72px; height: 72px; border-radius: 50%; background: var(--surface); }
.donut span { z-index: 1; grid-area: 1/1; text-align: center; }
.donut strong, .donut small { display: block; }
.donut strong { font-size: 18px; }.donut small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.compliance-stats { display: grid; gap: 11px; }
.compliance-stats p { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 8px; }
.compliance-stats b { color: var(--ink); font-size: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }.status-dot.urgent { background: #d34840; }.status-dot.warning { background: #e0a62d; }.status-dot.calm { background: #4f8ccc; }
.panel-action { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--brand); background: var(--page); font-size: 8px; font-weight: 800; cursor: pointer; }

.quick-actions { display: grid; gap: 9px; }
.quick-actions button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 9px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); text-align: right; cursor: pointer; }
.quick-actions button:hover { border-color: var(--brand); background: var(--brand-soft); }
.quick-icon { grid-row: 1/3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 800; }
.quick-actions strong { align-self: end; font-size: 9px; }.quick-actions small { align-self: start; margin-top: 3px; color: var(--muted); font-size: 7.5px; }

.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 31px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; font-size: 11px; font-weight: 800; }.activity-mark.success { color: #168357; background: #e9f8f0; }.activity-mark.info { color: #2868b6; background: #eaf3fc; }.activity-mark.warning { color: #a8700d; background: #fff4db; }.activity-mark.neutral { color: var(--muted); background: var(--page); }
.activity-item p { margin: 1px 0 5px; font-size: 9px; }.activity-item small { color: var(--muted); font-size: 8px; }

.upcoming-list { display: grid; }
.upcoming-list > div { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.upcoming-list > div:last-child { border-bottom: 0; }
.upcoming-list time { padding: 6px; border-radius: 8px; background: var(--page); text-align: center; }
.upcoming-list time strong, .upcoming-list time small, .upcoming-list p strong, .upcoming-list p small { display: block; }
.upcoming-list time strong { font-size: 13px; }.upcoming-list time small { color: var(--muted); font-size: 7px; }
.upcoming-list p { margin: 0; }.upcoming-list p strong { margin-bottom: 4px; font-size: 9px; }.upcoming-list p small { color: var(--muted); font-size: 7.5px; }

.dashboard-footer { display: flex; align-items: center; justify-content: space-between; padding: 9px 3px 0; color: var(--muted); font-size: 8px; }
.dashboard-footer p { margin: 0; }.dashboard-footer p span { margin: 0 5px; }
.dashboard-footer div { display: flex; align-items: center; gap: 7px; }
.system-online { width: 7px; height: 7px; border-radius: 50%; background: #20a66c; box-shadow: 0 0 0 4px rgba(32,166,108,.11); }
.mobile-overlay { display: none; }

@media (max-width: 1250px) {
    .dashboard-grid-secondary { grid-template-columns: 1.25fr .9fr; }
    .quick-panel { grid-column: 1 / -1; }
    .quick-actions { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1050px) {
    .admin-sidebar { transform: translateX(100%); box-shadow: -20px 0 45px rgba(0,0,0,.13); }
    .admin-sidebar.open { transform: translateX(0); }
    .sidebar-close, .menu-toggle { display: block; }
    .admin-main { margin-right: 0; }
    .mobile-overlay.show { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(4,24,26,.45); backdrop-filter: blur(2px); }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
    .admin-topbar { padding: 0 16px; }
    .global-search { width: min(43vw, 280px); }.global-search kbd, .user-copy, .user-menu .chevron { display: none; }
    .dashboard-content { padding: 20px 16px 14px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions { width: 100%; }.heading-actions .button { flex: 1; }
    .dashboard-grid-main, .dashboard-grid-secondary, .dashboard-grid-bottom { grid-template-columns: 1fr; }
    .quick-panel { grid-column: auto; }.quick-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .admin-topbar { min-height: 64px; }.global-search { display: none; }.topbar-divider { display: none; }
    .metric-grid { grid-template-columns: 1fr; }.metric-card { padding: 15px; }
    .prototype-banner { line-height: 1.7; }
    .heading-actions { flex-direction: column; }.quick-actions { grid-template-columns: 1fr; }
    .approval-item { grid-template-columns: 34px 1fr auto; }.approval-item time { display: none; }
    .compliance-summary { grid-template-columns: 1fr; justify-items: center; }.compliance-stats { width: 100%; }
    .dashboard-footer { align-items: flex-start; flex-direction: column; gap: 9px; }
}

/* ================================================================
   Dashboard readability pass — comfortable Arabic UI at 100% zoom
   ================================================================ */
.admin-page {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.admin-sidebar { width: 296px; }
.admin-main { margin-right: 296px; }
.sidebar-brand { min-height: 108px; padding: 10px 22px; }
.sidebar-brand img { width: 205px; height: 88px; }
.sidebar-context { padding: 18px 17px 12px; }
.context-label,
.nav-label { margin-bottom: 9px; font-size: 12px; letter-spacing: 0; }
.context-selector { grid-template-columns: 42px 1fr auto; gap: 11px; padding: 11px; }
.context-symbol { width: 42px; height: 42px; font-size: 15px; }
.context-selector strong { font-size: 14px; }
.context-selector small { font-size: 11px; }
.sidebar-nav { padding-inline: 14px; }
.nav-label { margin-top: 21px; }
.nav-item { gap: 12px; min-height: 48px; padding-inline: 13px; font-size: 14px; }
.nav-icon { width: 26px; height: 26px; font-size: 19px; }
.nav-count { min-width: 23px; font-size: 11px; }
.sidebar-help { padding: 14px; }
.sidebar-help .help-icon { width: 36px; height: 36px; font-size: 16px; }
.sidebar-help strong { font-size: 13px; }
.sidebar-help small { font-size: 11px; }

.admin-topbar { min-height: 78px; padding-inline: 32px; }
.global-search { width: min(38vw, 470px); }
.global-search > i { position: absolute; right: 16px; z-index: 1; color: var(--muted); font-size: 17px; }
.global-search input { height: 46px; padding-right: 46px; font-size: 13px; }
.global-search kbd { font-size: 10px; }
.icon-button { width: 42px; height: 42px; font-size: 18px; }
.notification-button span { min-width: 19px; height: 19px; font-size: 10px; }
.user-avatar { width: 42px; height: 42px; font-size: 14px; }
.user-copy strong { font-size: 13px; }
.user-copy small { font-size: 11px; }

.dashboard-content { max-width: 1760px; padding: 28px 32px 22px; }
.prototype-banner { margin-bottom: 21px; padding: 12px 15px; font-size: 13px; }
.prototype-banner span { padding: 5px 9px; }
.page-heading { margin-bottom: 27px; }
.heading-date { font-size: 12px; }
.page-heading h1 { margin-bottom: 9px; font-size: clamp(28px, 2.2vw, 36px); }
.page-heading > div > p:last-child { font-size: 14px; }
.heading-actions { gap: 10px; }
.button { min-height: 46px; padding-inline: 19px; font-size: 13px; }
.button i { font-size: 16px; }

.metric-grid { gap: 18px; margin-bottom: 18px; }
.metric-card { padding: 21px 22px; }
.metric-head { margin-bottom: 16px; }
.metric-icon { width: 44px; height: 44px; font-size: 20px; }
.metric-trend { padding: 5px 9px; font-size: 11px; }
.metric-card > p { margin-bottom: 8px; font-size: 13px; }
.metric-value { margin-bottom: 9px; font-size: 34px; }
.metric-value em { font-size: 15px; }
.metric-card > small { font-size: 11px; }

.dashboard-grid { gap: 18px; margin-bottom: 18px; }
.dashboard-grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(350px, .85fr); }
.panel { padding: 22px; }
.panel-header { margin-bottom: 19px; }
.panel-header h2 { margin-bottom: 6px; font-size: 16px; }
.panel-header p { font-size: 12px; }
.panel-header select { padding: 8px 11px; font-size: 12px; }
.text-button { font-size: 12px; }
.icon-more { font-size: 17px; }
.chart-legend { gap: 20px; font-size: 11px; }
.chart-labels { font-size: 10.5px; }

.branch-list { gap: 20px; }
.branch-row { grid-template-columns: 40px 1fr 34px; gap: 11px; }
.branch-avatar { width: 40px; height: 40px; font-size: 13px; }
.branch-row div strong { margin-bottom: 9px; font-size: 12.5px; }
.branch-row div span { height: 6px; }
.branch-row > b { font-size: 14px; }

.approval-item { grid-template-columns: 40px minmax(140px, 1fr) auto 64px; gap: 11px; padding: 13px 0; }
.mini-avatar { width: 40px; height: 40px; font-size: 12px; }
.approval-item div strong { font-size: 12.5px; }
.approval-item div small,
.approval-item time { font-size: 10.5px; }
.tag { padding: 5px 8px; font-size: 10px; }

.compliance-summary { grid-template-columns: 116px 1fr; gap: 18px; padding-bottom: 20px; }
.donut { width: 110px; height: 110px; }
.donut::before { width: 78px; height: 78px; }
.donut strong { font-size: 21px; }
.donut small { font-size: 10px; }
.compliance-stats { gap: 13px; }
.compliance-stats p { grid-template-columns: 8px 1fr auto; gap: 8px; font-size: 11px; }
.compliance-stats b { font-size: 12px; }
.status-dot { width: 7px; height: 7px; }
.panel-action { padding: 12px 14px; font-size: 11px; }

.quick-actions { gap: 11px; }
.quick-actions button { grid-template-columns: 40px 1fr; gap: 0 11px; padding: 11px; }
.quick-icon { width: 40px; height: 40px; font-size: 17px; }
.quick-actions strong { font-size: 12px; }
.quick-actions small { font-size: 10px; }

.activity-item { grid-template-columns: 37px 1fr; gap: 12px; padding: 13px 0; }
.activity-mark { width: 35px; height: 35px; font-size: 14px; }
.activity-item p { margin-bottom: 6px; font-size: 12px; }
.activity-item small { font-size: 10.5px; }
.upcoming-list > div { grid-template-columns: 54px 1fr auto; gap: 12px; padding: 13px 0; }
.upcoming-list time strong { font-size: 16px; }
.upcoming-list time small { font-size: 10px; }
.upcoming-list p strong { font-size: 12px; }
.upcoming-list p small { font-size: 10.5px; }
.dashboard-footer { padding-top: 11px; font-size: 10.5px; }

@media (max-width: 1250px) {
    .dashboard-grid-main { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .85fr); }
}

@media (max-width: 1050px) {
    .admin-main { margin-right: 0; }
}

@media (max-width: 780px) {
    .dashboard-content { padding: 22px 17px 16px; }
    .page-heading h1 { font-size: 27px; }
    .metric-card,
    .panel { padding: 19px; }
}

@media (max-width: 520px) {
    .admin-sidebar { width: min(90vw, 296px); }
    .admin-topbar { min-height: 66px; }
    .metric-card { padding: 18px; }
    .metric-value { font-size: 32px; }
}

/* ================================================================
   Organization structure prototype
   ================================================================ */
.organization-heading { margin-bottom: 22px; }
.organization-summary { margin-bottom: 28px; }
.group-card {
    display: grid;
    grid-template-columns: 62px minmax(260px, 1fr) auto auto 42px;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--surface), var(--brand-soft));
    box-shadow: 0 6px 24px rgba(8, 63, 67, .05);
}
.group-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--brand), #12a19e); font-size: 28px; }
.group-copy > span { color: var(--brand); font-size: 11px; font-weight: 800; }
.group-copy h2 { margin: 3px 0 5px; font-size: 20px; }
.group-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.group-stat { min-width: 100px; padding: 10px 18px; border-right: 1px solid var(--line); text-align: center; }
.group-stat strong, .group-stat span { display: block; }
.group-stat strong { font-size: 23px; }
.group-stat span { color: var(--muted); font-size: 11px; }

.organization-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.department-catalog { margin-bottom: 22px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 18px rgba(8,63,67,.035); }
.department-catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.department-catalog-heading h2 { margin: 0 0 4px; font-size: 16px; }
.department-catalog-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.department-catalog-heading > span { padding: 6px 9px; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-weight: 800; }
.department-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.department-catalog-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--page); }
.department-catalog-item.is-inactive { border-style: dashed; opacity: .82; }
.department-catalog-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); }
.department-catalog-item small, .department-catalog-item strong, .department-catalog-item div > span { display: block; }
.department-catalog-item small { margin-bottom: 2px; color: var(--muted); font-size: 8px; }
.department-catalog-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.department-catalog-item div > span { margin-top: 3px; color: var(--muted); font-size: 8.5px; }
.department-status { grid-column: 3; grid-row: 1; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.department-status.active { color: #176b4d; background: #e3f6ec; }
.department-status.inactive { color: #7b5b12; background: #fff2cf; }
.department-status-button { grid-column: 2 / 4; min-height: 28px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); background: var(--surface); font-size: 9px; font-weight: 800; cursor: pointer; }
.department-status-button:hover { border-color: var(--brand); background: var(--brand-soft); }
.organization-toolbar h2 { margin: 0 0 4px; font-size: 18px; }
.organization-toolbar p { margin: 0; color: var(--muted); font-size: 12px; }
.branch-search { position: relative; width: 270px; }
.branch-search i { position: absolute; top: 50%; right: 14px; color: var(--muted); transform: translateY(-50%); }
.branch-search input { width: 100%; height: 43px; padding: 0 41px 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: var(--surface); font-size: 12px; }
.branch-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 111, 115, .09); }

.branches-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.organization-branch-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 4px 18px rgba(8, 63, 67, .035); }
.organization-branch-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.branch-title { display: flex; align-items: center; gap: 12px; }
.branch-building { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-size: 19px; }
.branch-title div > span { color: var(--muted); font-size: 10px; }
.branch-title h3 { margin: 2px 0 0; font-size: 15px; }
.branch-menu { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.branch-menu:hover { color: var(--brand); background: var(--brand-soft); }
.branch-meta { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.branch-meta span { display: flex; align-items: center; gap: 6px; }
.branch-meta .status-active { color: #168357; font-weight: 800; }
.status-active i { width: 7px; height: 7px; border-radius: 50%; background: #20a66c; }
.branch-meta .status-inactive { color: #956b15; font-weight: 800; }
.status-inactive i { width: 7px; height: 7px; border-radius: 50%; background: #d19a2a; }

.branch-manager { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin-bottom: 17px; padding: 11px; border-radius: 11px; background: var(--page); }
.manager-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 17px; }
.branch-manager small, .branch-manager strong { display: block; }
.branch-manager small { margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.branch-manager strong { font-size: 11px; }
.branch-manager button, .legal-state button { border: 0; color: var(--brand); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.departments-title { display: flex; justify-content: space-between; margin-bottom: 10px; }
.departments-title strong { font-size: 12px; }
.departments-title span { color: var(--muted); font-size: 10px; }
.department-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 64px; }
.department-chips span, .department-chip { display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #50686b; background: var(--page); font-size: 10px; font-weight: 700; }
.department-chips i { color: var(--brand); }
.department-chip-edit { cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.department-chip-edit:hover, .department-chip-edit:focus-visible { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); outline: none; }
.department-chip-edit .bi-pencil-square { margin-inline-start: 2px; opacity: .65; }
.legal-state { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-state > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #a8700d; background: #fff4db; }
.legal-state strong, .legal-state small { display: block; }
.legal-state strong { font-size: 10.5px; }
.legal-state small { color: var(--muted); font-size: 9px; }
.organization-branch-card > footer { display: flex; gap: 8px; padding-top: 14px; }
.organization-branch-card > footer .button { min-height: 38px; flex: 1; padding-inline: 10px; font-size: 10.5px; }
.branch-edit-button { border: 1px solid transparent; color: var(--brand); background: var(--brand-soft); }
.branch-status-action { border: 1px solid #ead7a8; color: #8a6519; background: #fff8e6; }

.empty-search { display: grid; justify-items: center; gap: 6px; margin-top: 18px; padding: 45px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); background: var(--surface); }
.empty-search i { font-size: 28px; }.empty-search strong { color: var(--ink); }

.admin-dialog { width: min(92vw, 540px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: 0 25px 80px rgba(4, 30, 33, .25); }
.admin-dialog-wide { width: min(94vw, 720px); }
.admin-dialog::backdrop { background: rgba(4, 30, 33, .55); backdrop-filter: blur(3px); }
.admin-dialog > form > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.admin-dialog header span { color: var(--brand); font-size: 10px; font-weight: 800; }
.admin-dialog header h2 { margin: 3px 0 0; font-size: 19px; }
.admin-dialog header button { border: 0; color: var(--muted); background: transparent; font-size: 25px; cursor: pointer; }
.dialog-body { display: grid; gap: 16px; padding: 21px 22px; }
.dialog-body label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.dialog-body label b { color: var(--accent); }.dialog-body label small { color: var(--muted); font-size: 9px; font-weight: 400; }
.dialog-body input, .dialog-body select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--page); font-size: 12px; }
.dialog-body input:focus, .dialog-body select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 111, 115, .09); }
.dialog-body details { padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.dialog-body summary { display: flex; align-items: center; justify-content: space-between; color: var(--brand); font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.legal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.branch-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prototype-note { margin: 0; padding: 10px 12px; border-radius: 9px; color: #7b5b12; background: #fff8e6; font-size: 11px; }
.page-alert { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid; border-radius: 11px; font-size: 12px; font-weight: 700; }
.page-alert-success { color: #176b4d; border-color: #b9e4d1; background: #edf9f3; }
.page-alert-error { color: var(--danger); border-color: #f2c7c4; background: var(--danger-bg); }
.department-form-message { padding: 10px 12px; border: 1px solid #f2c7c4; border-radius: 9px; color: var(--danger); background: var(--danger-bg); font-size: 11px; line-height: 1.6; }
.status-confirmation-copy { padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--page); font-size: 11px; line-height: 1.8; }
.dialog-body .field-error { min-height: 0; color: var(--danger); font-size: 10px; font-weight: 700; }
.dialog-body .field-error:empty { display: none; }
.dialog-body [aria-invalid="true"] { border-color: var(--danger); background: #fffafa; }
.branch-selection { min-width: 0; margin: 0; padding: 0; border: 0; }
.branch-selection legend { margin-bottom: 9px; font-size: 12px; font-weight: 800; }
.branch-selection legend b { color: var(--accent); }
.dialog-body .check-option { display: flex; grid-template-columns: none; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); cursor: pointer; }
.dialog-body .check-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.dialog-body .check-option span { min-width: 0; font-size: 11px; }
.dialog-body .check-option strong, .dialog-body .check-option small { display: block; }
.dialog-body .check-option small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.check-option-all { margin-bottom: 9px; border-color: rgba(11, 111, 115, .25) !important; background: var(--brand-soft) !important; }
.branch-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.branch-check-list:has(input:disabled) { opacity: .5; }
.admin-dialog [data-submit-department]:disabled { opacity: .7; cursor: wait; }
.admin-dialog > form > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); }
.admin-dialog > form > footer .button { min-height: 41px; }

@media (max-width: 1250px) {
    .group-card { grid-template-columns: 58px minmax(220px, 1fr) auto auto; }
    .group-card > .icon-button { display: none; }
}

@media (max-width: 850px) {
    .group-card { grid-template-columns: 54px 1fr; }
    .group-mark { width: 54px; height: 54px; }
    .group-stat { border-right: 0; border-top: 1px solid var(--line); }
    .branches-grid { grid-template-columns: 1fr; }
    .department-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .organization-toolbar { align-items: stretch; flex-direction: column; }
    .branch-search { width: 100%; }
    .group-card { gap: 14px; padding: 18px; }
    .group-copy p { display: none; }
    .group-stat { min-width: 0; padding: 11px; }
    .organization-branch-card { padding: 16px; }
    .legal-fields { grid-template-columns: 1fr; }
    .branch-form-grid { grid-template-columns: 1fr; }
    .branch-check-list { grid-template-columns: 1fr; }
    .department-catalog-grid { grid-template-columns: 1fr; }
}

/* Employees module */
.employee-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.employee-metrics article { padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.employee-metrics strong,.employee-metrics span { display:block; }
.employee-metrics strong { margin-bottom:5px; color:var(--brand); font-size:25px; }
.employee-metrics span { color:var(--muted); font-size:11px; }
.employees-panel,.branch-managers-panel { margin-bottom:18px; padding:19px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.employees-panel>header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
.employees-panel h2,.branch-managers-panel h2 { margin:0 0 4px; font-size:16px; }
.employees-panel p { margin:0; color:var(--muted); font-size:10px; }
.employees-panel>header input { width:270px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--page); }
.employees-table-wrap { overflow-x:auto; }
.employees-table { width:100%; border-collapse:collapse; font-size:11px; }
.employees-table th { padding:10px; color:var(--muted); text-align:right; border-bottom:1px solid var(--line); }
.employees-table td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.employees-table td strong,.employees-table td small { display:block; }
.employees-table td small { margin-top:3px; color:var(--muted); font-size:9px; }
.employees-table td:last-child { display:flex; align-items:center; gap:6px; }
.employee-status { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:9px; font-weight:800; }
.employee-status.active { color:#176b4d; background:#e3f6ec; }.employee-status.inactive { color:#8a6519; background:#fff2cf; }
.employees-empty { display:grid; justify-items:center; gap:6px; padding:45px; color:var(--muted); }.employees-empty i{font-size:30px}.employees-empty strong{color:var(--ink)}
.branch-managers-panel>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:13px; }
.branch-managers-panel article { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--page); }
.branch-managers-panel article>i { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--brand); background:var(--brand-soft); }
.branch-managers-panel article strong,.branch-managers-panel article small { display:block; }.branch-managers-panel article small{margin-top:3px;color:var(--muted);font-size:9px}
.employee-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.responsibility-scope-preview { grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #b9e0df;border-radius:14px;background:#f0fbfa;color:#123f43; }
.responsibility-scope-preview>i { display:grid;place-items:center;min-width:36px;height:36px;border-radius:10px;background:#d8f2f0;color:#087f83;font-size:18px; }
.responsibility-scope-preview>div { display:grid;gap:3px; }
.responsibility-scope-preview span { color:#075d62;font-weight:700; }
.responsibility-scope-preview small { color:#60787a; }
.responsibility-scope-preview.compact { margin:4px 0 10px; }
.dialog-body textarea { width:100%; min-height:90px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; resize:vertical; background:var(--page); }
@media(max-width:850px){.employee-metrics{grid-template-columns:repeat(2,1fr)}.branch-managers-panel>div{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.employee-metrics,.branch-managers-panel>div,.employee-form-grid{grid-template-columns:1fr}.employees-panel>header{align-items:stretch;flex-direction:column}.employees-panel>header input{width:100%}}
/* Annual leave module */
.leave-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.leave-metrics article{background:#fff;border:1px solid #e6ecef;border-radius:16px;padding:18px;display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(22,45,70,.04)}.leave-metrics strong{font-size:26px;color:#0b756e}.leave-metrics span{color:#667587;font-size:13px}.leave-policy-note{display:flex;align-items:flex-start;gap:10px;background:#eef8f6;color:#175f5b;border:1px solid #cfe9e5;border-radius:12px;padding:12px 15px;margin-bottom:18px}.leave-panel{margin-top:0}.leave-table td small,.leave-table td strong{display:block}.leave-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.leave-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf1f4;color:#536273;font-size:11px;white-space:nowrap}.leave-status.approved,.leave-status.reduced{background:#e3f6ed;color:#16734e}.leave-status.rejected_manager,.leave-status.rejected_hr,.leave-status.cancelled{background:#fde9e8;color:#a43b36}.leave-status.pending_manager,.leave-status.pending_hr,.leave-status.cancellation_pending_manager,.leave-status.cancellation_pending_hr,.leave-status.reduction_pending_manager,.leave-status.reduction_pending_hr{background:#fff3d8;color:#8a6112}.verify-page{min-height:100vh;background:#f3f7f8;display:grid;place-items:center;padding:24px;font-family:Tahoma,Arial,sans-serif}.verify-card{width:min(620px,100%);background:#fff;border-radius:22px;padding:34px;box-shadow:0 18px 55px rgba(24,48,70,.12);text-align:center}.verify-card>img{max-width:180px;max-height:80px}.verify-card>i{display:block;font-size:52px;color:#0b756e;margin:18px}.verify-card dl{text-align:right;margin-top:25px}.verify-card dl div{display:grid;grid-template-columns:150px 1fr;gap:15px;padding:10px;border-bottom:1px solid #edf1f4}.verify-card dt{color:#728092}.verify-card dd{margin:0;font-weight:600}.verify-hash{direction:ltr;word-break:break-all;font-family:monospace;font-size:11px}@media(max-width:900px){.leave-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.leave-metrics{grid-template-columns:1fr}.verify-card dl div{grid-template-columns:1fr;gap:4px}}
.leave-notifications{background:#fff;border:1px solid #e5ecef;border-radius:16px;padding:16px;margin-bottom:18px}.leave-notifications h2{font-size:16px;margin:0 0 12px}.leave-notifications>div{display:grid;gap:8px}.leave-notifications article{display:flex;align-items:center;gap:12px;padding:11px;border-radius:10px;background:#f6f8f9}.leave-notifications article.unread{background:#eef8f6;border-right:3px solid #0b756e}.leave-notifications article>span{display:flex;flex-direction:column;flex:1}.leave-notifications small{color:#687788}.button-small{padding:6px 10px;font-size:11px}.workflow-floating-button{position:fixed;left:24px;bottom:24px;width:48px;height:48px;border:0;border-radius:50%;background:#0b756e;color:#fff;box-shadow:0 10px 28px rgba(11,117,110,.3);z-index:20}.leave-status.pending_department_reviewer,.leave-status.pending_manager_after_review,.leave-status.pending_general_manager,.leave-status.approved_waiting_execution,.leave-status.execution_in_progress{background:#fff3d8;color:#8a6112}.leave-status.executed,.leave-status.partially_executed,.leave-status.not_executed{background:#e3f6ed;color:#16734e}.leave-status.rejected_reviewer,.leave-status.rejected_general_manager{background:#fde9e8;color:#a43b36}
.approval-flow-cell{min-width:245px}.approval-flow{display:grid;gap:6px;position:relative}.approval-flow-step{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;background:#f5f7f8;color:#65727e;border:1px solid #e8edef}.approval-flow-step>i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e7ecef;font-size:11px;flex:0 0 22px}.approval-flow-step>span{min-width:0}.approval-flow-step strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.approval-flow-step small{font-size:10px;line-height:1.4}.approval-flow-step.submitted,.approval-flow-step.approved{background:#eaf8f1;color:#176b4c;border-color:#ccebdc}.approval-flow-step.submitted>i,.approval-flow-step.approved>i{background:#ccebdc;color:#176b4c}.approval-flow-step.active{background:#fff5dc;color:#805c0c;border-color:#f0dda7;box-shadow:0 0 0 2px rgba(224,171,42,.08)}.approval-flow-step.active>i{background:#f5dfa5;color:#805c0c}.approval-flow-step.rejected{background:#fdeceb;color:#9b3a35;border-color:#f2cecb}.approval-flow-step.rejected>i{background:#f4d1ce;color:#9b3a35}.approval-flow-step.queued{opacity:.78}
.cancellation-progress{margin-top:10px;padding:10px;border:1px solid #cfdde3;border-radius:12px;background:#f8fbfc}.cancellation-progress>header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.cancellation-progress>header strong{font-size:11px;color:#294e58}.cancellation-progress>header>span{padding:3px 7px;border-radius:999px;background:#e8eef1;color:#51646d;font-size:9px;white-space:nowrap}.cancellation-progress>p{margin:0 0 8px;font-size:10px;line-height:1.6;color:#586b73}.cancellation-progress.pending_approval>header>span{background:#fff0c9;color:#7b590d}.cancellation-progress.approved>header>span{background:#dff4e9;color:#176b4c}.cancellation-progress.rejected>header>span,.cancellation-progress.rejected_manager>header>span,.cancellation-progress.rejected_hr>header>span{background:#f9dddd;color:#953a35}.cancellation-flow{padding-top:7px;border-top:1px dashed #d8e2e6}.cancellation-result{display:grid;gap:3px;margin-top:8px;padding:8px;border-radius:9px;font-size:10px}.cancellation-result.rejected{background:#fff0ef;color:#913b36;border:1px solid #f3d0cd}.cancellation-result.approved{background:#e9f8f1;color:#176b4c;border:1px solid #ccebdc}.cancellation-result.pending{background:#fff8e8;color:#76590f;border:1px solid #eedda9}.cancellation-result span,.cancellation-result small{line-height:1.5}

/* Responsive leave request cards */
.leave-panel{overflow:hidden}.leave-panel>header{gap:20px}.leave-search{position:relative;display:block;flex:0 1 320px}.leave-search>i{position:absolute;right:14px;top:50%;translate:0 -50%;color:#7a8993;font-size:14px}.leave-panel>header .leave-search input{width:100%;padding-right:40px}.leave-request-list{display:grid;gap:16px;padding:18px;background:#f5f8f9}.leave-request-card{min-width:0;background:#fff;border:1px solid #dfe8eb;border-radius:18px;box-shadow:0 5px 18px rgba(19,55,64,.045);overflow:hidden;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,translate .2s ease}.leave-request-card:hover{border-color:#bad9d5;box-shadow:0 10px 28px rgba(19,78,82,.09);translate:0 -1px}.leave-request-card.is-expanded{border-color:#a9d6d1;box-shadow:0 12px 32px rgba(19,78,82,.1)}.leave-request-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #edf1f2}.leave-request-identity,.leave-request-identity>div,.leave-request-state{display:flex;align-items:center}.leave-request-identity{gap:12px}.leave-request-identity>div,.leave-request-state{align-items:flex-start;flex-direction:column}.leave-request-icon,.leave-avatar{display:grid;place-items:center;flex:0 0 auto;background:#e7f6f3;color:#08766f}.leave-request-icon{width:42px;height:42px;border-radius:12px;font-size:18px}.leave-request-identity small,.leave-request-identity span,.leave-request-state small{font-size:11px;color:#74838d}.leave-request-identity strong{font-size:14px;color:#173c45;direction:ltr}.leave-card-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px}.leave-request-state{gap:6px}.leave-request-state small{display:flex;align-items:center;gap:5px}.leave-pdf-button,.leave-card-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px;text-decoration:none;font:inherit}.leave-pdf-button{padding:0 11px;border:1px solid #f0d1cf;background:#fff7f6;color:#af3e37;font-size:11px;font-weight:700}.leave-pdf-button i{font-size:16px}.leave-card-toggle{padding:0 12px;border:1px solid #d9e5e7;background:#f8fbfb;color:#315b63;font-size:11px;cursor:pointer}.leave-card-toggle i{transition:rotate .2s ease}.leave-request-card.is-expanded .leave-card-toggle i{rotate:180deg}.leave-request-summary{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(0,2fr);gap:22px;padding:20px}.leave-summary-person{display:flex;align-items:center;gap:12px;min-width:0}.leave-avatar{width:48px;height:48px;border-radius:14px;font-size:18px;font-weight:700}.leave-summary-person>div{display:flex;flex-direction:column;min-width:0}.leave-summary-person small,.leave-request-summary dt{font-size:11px;color:#75848d}.leave-summary-person strong{font-size:14px;color:#173c45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leave-summary-person span{font-size:11px;color:#64747e}.leave-request-summary dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.leave-request-summary dl>div{padding:12px 14px;border:1px solid #e7edef;border-radius:12px;background:#fafcfc}.leave-request-summary dt{display:flex;align-items:center;gap:6px;margin-bottom:5px}.leave-request-summary dt i{color:#0b8179}.leave-request-summary dd{margin:0;font-weight:700;color:#173c45;font-size:13px}.leave-request-summary dd span{font-weight:400;color:#74838d;font-size:10px}.leave-request-details{border-top:1px solid #edf1f2;padding-top:18px;cursor:default}.leave-request-details[hidden]{display:none}.leave-approval-section{margin:0 20px 18px;padding:16px;border:1px solid #dce7e9;border-radius:14px;background:#fbfdfd}.leave-approval-section>header,.cancellation-progress>header>div{display:flex;align-items:center;gap:9px}.leave-approval-section>header{justify-content:space-between;margin-bottom:14px}.leave-approval-section>header>div>i,.cancellation-progress>header>div>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#e7f6f3;color:#08766f}.leave-approval-section>header span,.cancellation-progress>header>div>span{display:flex;flex-direction:column}.leave-approval-section>header strong,.cancellation-progress>header>div strong{font-size:13px;color:#24464e}.leave-approval-section>header small,.cancellation-progress>header>div small{font-size:10px;color:#7b8991}.leave-step-count{padding:4px 9px;border-radius:999px;background:#eef3f4;color:#63747d;font-size:10px}.leave-approval-section .approval-flow,.cancellation-progress .approval-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}.leave-approval-section .approval-flow-step,.cancellation-progress .approval-flow-step{position:relative;min-height:54px;padding:9px 10px}.leave-approval-section .approval-flow-step strong,.cancellation-progress .approval-flow-step strong{font-size:11px;white-space:normal}.cancellation-progress{margin:0 20px 18px;padding:16px;border-radius:14px}.cancellation-progress>header{margin-bottom:12px}.cancellation-progress>header>span{font-size:10px;padding:5px 9px}.cancellation-progress>p{padding:10px 12px;margin:0 0 12px;background:#fff;border-radius:9px;font-size:11px}.cancellation-flow{padding-top:12px}.cancellation-result{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 12px;font-size:11px}.cancellation-result>i{font-size:17px;margin-top:1px}.cancellation-result>span{display:flex;flex-direction:column;gap:3px}.cancellation-result b{font-weight:500}.leave-request-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 20px;background:#fafcfc;border-top:1px solid #edf1f2}.leave-request-footer>span{display:flex;align-items:center;gap:6px;font-size:10px;color:#78878f}.leave-request-footer>span i{color:#0b8179}.leave-request-footer .leave-actions{justify-content:flex-end}.leave-request-footer .icon-button{background:#fff;border:1px solid #dce6e9}
@media(max-width:900px){.leave-request-summary{grid-template-columns:1fr}.leave-approval-section .approval-flow,.cancellation-progress .approval-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.leave-panel>header{align-items:stretch}.leave-search{flex-basis:auto;width:100%}.leave-request-list{padding:10px;gap:12px}.leave-request-card{border-radius:14px}.leave-request-head{align-items:flex-start;flex-wrap:wrap;padding:14px;gap:10px}.leave-request-identity{align-items:flex-start;flex:1 1 180px}.leave-request-icon{width:36px;height:36px}.leave-card-tools{width:100%;justify-content:space-between;padding-top:9px;border-top:1px solid #edf1f2}.leave-request-state{align-items:flex-start;text-align:right;flex:1}.leave-card-toggle span{display:none}.leave-card-toggle{width:38px;padding:0}.leave-pdf-button{height:38px}.leave-request-summary{padding:14px;gap:14px}.leave-request-summary dl{grid-template-columns:1fr}.leave-request-summary dl>div{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}.leave-request-summary dt{margin:0}.leave-request-details{padding-top:14px}.leave-approval-section,.cancellation-progress{margin:0 14px 14px;padding:13px}.leave-approval-section .approval-flow,.cancellation-progress .approval-flow{grid-template-columns:1fr}.leave-approval-section>header{align-items:flex-start}.cancellation-progress>header{align-items:flex-start;flex-wrap:wrap}.leave-request-footer{align-items:stretch;flex-direction:column;padding:12px 14px}.leave-request-footer .leave-actions{justify-content:stretch}.leave-request-footer .leave-actions>*:not(.icon-button){flex:1}.leave-request-footer .text-button{padding:9px 10px;border:1px solid #dce6e9;border-radius:9px}.leave-request-footer>span{order:2}}

/* Employee requests module */
.mandatory-announcement{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;background:rgba(5,36,40,.76);backdrop-filter:blur(8px)}.mandatory-announcement-card{width:min(650px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:30px;border:1px solid #cfe2e3;border-radius:24px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.3);text-align:center}.mandatory-announcement-card>i{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 14px;border-radius:20px;background:#e5f5f3;color:#087d78;font-size:31px}.mandatory-announcement-card>span{color:#087d78;font-weight:800}.mandatory-announcement-card h2{margin:8px 0 15px;color:#123f43;font-size:25px}.mandatory-announcement-card p{max-height:45vh;overflow:auto;margin:0 0 20px;padding:16px;border-radius:14px;background:#f5f9f9;color:#3f5f63;line-height:1.9;text-align:right;white-space:normal}.mandatory-announcement-card form{display:grid}.mandatory-announcement-card .primary-button{justify-content:center}.mandatory-announcement-card small{display:block;margin-top:10px;color:#718386}@media(max-width:620px){.mandatory-announcement{padding:12px}.mandatory-announcement-card{padding:20px;border-radius:18px}.mandatory-announcement-card h2{font-size:21px}}

/* Employee requests module */
.request-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.request-metrics article{display:flex;align-items:center;gap:13px;padding:17px 18px;background:#fff;border:1px solid #e2eaed;border-radius:16px;box-shadow:0 6px 20px rgba(20,59,67,.04)}.request-metrics article>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e7f6f3;color:#08766f;font-size:18px}.request-metrics article>div{display:flex;flex-direction:column}.request-metrics strong{font-size:23px;color:#173c45}.request-metrics span{font-size:11px;color:#71818b}.request-panel{overflow:hidden}.request-panel>header{gap:20px}.request-search{position:relative;display:block;flex:0 1 320px}.request-search i{position:absolute;right:14px;top:50%;translate:0 -50%;color:#7a8993}.request-panel>header .request-search input{width:100%;padding-right:40px}.employee-request-list{display:grid;gap:14px;padding:18px;background:#f5f8f9}.employee-request-card{background:#fff;border:1px solid #dfe8eb;border-radius:17px;overflow:hidden;cursor:pointer;box-shadow:0 5px 18px rgba(19,55,64,.045);transition:.2s ease}.employee-request-card:hover,.employee-request-card.is-expanded{border-color:#afd7d2;box-shadow:0 11px 28px rgba(19,78,82,.09)}.employee-request-card>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;border-bottom:1px solid #edf1f2}.request-card-title,.request-card-tools{display:flex;align-items:center;gap:11px}.request-card-title{min-width:0}.request-type-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:12px;background:#e7f6f3;color:#08766f;font-size:18px}.request-card-title>div{display:flex;flex-direction:column;min-width:0}.request-card-title small,.request-card-title span{font-size:10px;color:#76868f}.request-card-title strong{font-size:14px;color:#193f47;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-request-status{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff2d4;color:#805c0c;font-size:10px;white-space:nowrap}.employee-request-status.approved{background:#e3f6ed;color:#16734e}.employee-request-status.rejected,.employee-request-status.cancelled{background:#fde9e8;color:#a43b36}.employee-request-status.cancellation_pending{background:#edf0fa;color:#505f9b}.request-card-toggle{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border:1px solid #d9e5e7;border-radius:10px;background:#f8fbfb;color:#315b63;font:inherit;font-size:11px;cursor:pointer}.request-card-toggle i{transition:rotate .2s}.employee-request-card.is-expanded .request-card-toggle i{rotate:180deg}.request-card-summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr);gap:20px;padding:17px 19px}.request-card-summary>div{display:flex;align-items:center;gap:11px;min-width:0}.request-card-summary p{display:flex;flex-direction:column;margin:0;min-width:0}.request-card-summary small{font-size:10px;color:#778790}.request-card-summary strong{font-size:12px;color:#23454d}.request-card-summary span{font-size:10px;color:#6c7c85}.request-card-details{padding-top:17px;border-top:1px solid #edf1f2;cursor:default}.request-card-details[hidden]{display:none}.request-description,.request-approval-box,.request-cancellation{margin:0 19px 16px;padding:15px;border:1px solid #dfe8ea;border-radius:13px;background:#fbfdfd}.request-description h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;color:#21464e;font-size:13px}.request-description h3 i{color:#08766f}.request-description p{margin:0;line-height:1.9;color:#536871;font-size:12px;white-space:normal}.request-approval-box>header,.request-cancellation>header{display:flex;align-items:center;margin-bottom:12px}.request-approval-box>header>div,.request-cancellation>header>div{display:flex;align-items:center;gap:9px}.request-approval-box>header i,.request-cancellation>header i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#e7f6f3;color:#08766f}.request-approval-box>header span,.request-cancellation>header span{display:flex;flex-direction:column}.request-approval-box>header strong,.request-cancellation>header strong{font-size:12px;color:#24464e}.request-approval-box>header small,.request-cancellation>header small{font-size:10px;color:#76868f}.request-approval-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px}.request-approval-flow .approval-flow-step{min-height:55px}.request-approval-flow em{display:block;margin-top:3px;font-size:9px;font-style:normal;line-height:1.5}.request-cancellation{background:#f8fbfc}.request-cancellation>p{padding:9px 11px;border-radius:9px;background:#fff;color:#536871;font-size:11px}.request-cancel-result{display:flex;flex-direction:column;gap:3px;margin-top:11px;padding:10px 12px;border-radius:9px;font-size:10px}.request-cancel-result.rejected{background:#fff0ef;color:#913b36;border:1px solid #f3d0cd}.request-card-details>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 19px;background:#fafcfc;border-top:1px solid #edf1f2}.request-card-details>footer>span{display:flex;align-items:center;gap:6px;color:#778790;font-size:10px}.request-card-details>footer>span i{color:#08766f}
@media(max-width:850px){.request-metrics{grid-template-columns:1fr 1fr}.request-card-summary{grid-template-columns:1fr}.request-approval-flow{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.request-metrics{grid-template-columns:1fr}.request-panel>header{align-items:stretch}.request-search{width:100%;flex-basis:auto}.employee-request-list{padding:10px}.employee-request-card>header{align-items:flex-start;flex-wrap:wrap;padding:14px}.request-card-title{flex:1 1 190px}.request-card-tools{width:100%;justify-content:space-between;padding-top:9px;border-top:1px solid #edf1f2}.request-card-toggle span{display:none}.request-card-toggle{width:38px;padding:0;justify-content:center}.request-card-summary{padding:14px;gap:12px}.request-description,.request-approval-box,.request-cancellation{margin:0 13px 13px;padding:12px}.request-approval-flow{grid-template-columns:1fr}.request-card-details>footer{align-items:stretch;flex-direction:column;padding:12px 13px}.request-card-details>footer .leave-actions>*{flex:1}}