:root {
    --navy: #06255f;
    --navy-2: #0a377f;
    --blue: #1f66ff;
    --green: #20bd67;
    --orange: #ff9228;
    --purple: #7b48f4;
    --red: #ff334b;
    --ink: #081735;
    --muted: #66718c;
    --line: #e2e9f5;
    --bg: #f5f8fd;
    --shadow: 0 12px 32px rgba(19, 42, 86, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--bg);
    font-family: "DM Sans", Inter, "Segoe UI", Arial, sans-serif;
}

button,
input {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 30px 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(47, 92, 170, .22), transparent 30%),
        linear-gradient(180deg, #071a3f 0%, #092655 48%, #061b43 100%);
    overflow: hidden;
}

.logo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 32px;
}

.logo span {
    font-size: 43px;
    line-height: .85;
    font-weight: 900;
    letter-spacing: -.05em;
}

.logo i {
    width: 36px;
    height: 26px;
    display: block;
    background: conic-gradient(from 205deg, #1b70ff, #24c76d, #ff9f28, #7d4df4, #1b70ff);
    clip-path: polygon(0 72%, 100% 0, 83% 100%);
}

.sidebar-nav {
    display: grid;
    gap: 9px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 56px;
    padding: 0 17px;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    border-radius: 13px;
    font-weight: 650;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(58, 101, 220, .86), rgba(45, 76, 170, .82));
    box-shadow: 0 10px 24px rgba(9, 23, 58, .24);
}

.sidebar-nav i {
    width: 24px;
    font-size: 22px;
    text-align: center;
}

.ai-card {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 16px;
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 0 34px rgba(80, 109, 170, .12);
}

.ai-card strong {
    display: block;
    margin-bottom: 8px;
}

.ai-card p {
    max-width: 130px;
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.5;
}

.bot-face {
    position: absolute;
    right: 12px;
    bottom: 46px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #eef6ff 0 30%, #6d87ff 31% 42%, #eaf2ff 43%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.bot-face span {
    position: absolute;
    inset: 27px 19px 23px;
    border-radius: 18px;
    background: #0b2a74;
}

.bot-face span:before,
.bot-face span:after {
    content: "";
    position: absolute;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38f3ff;
}

.bot-face span:before {
    left: 10px;
}

.bot-face span:after {
    right: 10px;
}

.ai-card button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    color: #fff;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(66, 95, 190, .9), rgba(47, 72, 150, .9));
    font-weight: 700;
}

.ai-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(66, 95, 190, .9), rgba(47, 72, 150, .9));
    font-weight: 800;
    text-decoration: none;
}

.main-content {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 82px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 34px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.menu-btn,
.icon-btn,
.plain-chevron {
    border: 0;
    background: transparent;
    color: #0c1d45;
}

.logout-link {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #334467;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.menu-btn {
    font-size: 31px;
}

.search-box {
    width: min(620px, 100%);
    height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
}

.search-box i {
    font-size: 22px;
    color: #253964;
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    font-size: 16px;
}

.search-box input::placeholder {
    color: #8b95ad;
}

.top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    text-decoration: none;
}

.notification span {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--red);
    font-size: 11px;
    font-weight: 800;
}

.divider {
    width: 1px;
    height: 38px;
    background: var(--line);
}

.user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.user-meta strong {
    display: block;
    font-size: 17px;
}

.user-meta span {
    color: var(--muted);
    font-size: 14px;
}

.plain-chevron {
    font-size: 18px;
    color: #405172;
}

.dashboard-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 24px;
    padding: 34px 34px 24px;
}

.dashboard-left {
    min-width: 0;
}

.welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 25px;
}

.welcome-row h1 {
    margin: 0 0 9px;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -.02em;
}

.welcome-row p {
    margin: 0;
    color: #4f5e7a;
}

.month-btn {
    width: 220px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #172348;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    font-weight: 700;
    box-shadow: var(--shadow);
    text-decoration: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.stat-card,
.dash-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

.stat-card {
    position: relative;
    min-height: 166px;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    padding: 28px 22px 15px;
    overflow: hidden;
}

.stat-icon,
.quick-grid span,
.approval-list span,
.announcement-list span {
    display: grid;
    place-items: center;
    border-radius: 17px;
}

.stat-icon {
    width: 58px;
    height: 58px;
    font-size: 28px;
}

.blue,
.primary {
    color: #0c61ff;
    background: #e9f1ff;
}

.green,
.success {
    color: #12a85c;
    background: #e5f8ed;
}

.orange,
.warning {
    color: #f27e15;
    background: #fff0de;
}

.purple,
.secondary {
    color: #743df1;
    background: #f0e9ff;
}

.red,
.danger {
    color: var(--red);
    background: #ffe9ed;
}

.stat-card p {
    margin: 3px 0 7px;
    color: #1b294c;
    font-weight: 650;
}

.stat-card h2 {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 850;
}

.stat-card span {
    font-size: 14px;
    font-weight: 800;
}

.stat-card .up {
    color: #0ca85a;
}

.stat-card .down {
    color: var(--red);
}

.stat-spark {
    position: absolute;
    left: 22px;
    right: 18px;
    bottom: 15px;
    width: calc(100% - 40px) !important;
    height: 36px !important;
}

.dash-card {
    padding: 22px 24px;
}

.dash-card h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.01em;
}

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.card-title-row a {
    color: #075cff;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
}

.card-title-row button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #10224a;
    background: #fff;
    font-weight: 700;
    font-size: 13px;
}

.distribution-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 24px;
    min-height: 220px;
}

.donut-holder {
    position: relative;
    width: 210px;
    height: 210px;
}

.donut-holder canvas {
    width: 210px !important;
    height: 210px !important;
}

.donut-holder div {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.donut-holder strong {
    grid-area: 1 / 1;
    margin-top: -8px;
    font-size: 31px;
    font-weight: 850;
}

.donut-holder small {
    grid-area: 1 / 1;
    margin-top: 42px;
    color: var(--muted);
}

.legend-list {
    display: grid;
    gap: 18px;
}

.legend-list div {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.legend-list span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--dot);
}

.line-canvas {
    height: 235px !important;
}

.dept-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.dept-row {
    display: grid;
    grid-template-columns: 145px 1fr 40px;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.dept-row div {
    height: 10px;
    border-radius: 999px;
    background: #edf2f8;
    overflow: hidden;
}

.dept-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.dept-row strong {
    text-align: right;
}

.person-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.person-row {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 13px;
}

.person-row img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.person-row strong {
    display: block;
    font-size: 14px;
}

.person-row span,
.person-row small {
    color: var(--muted);
    font-size: 13px;
}

.birthday-card {
    position: relative;
    overflow: hidden;
}

.party {
    position: absolute;
    right: 54px;
    bottom: 22px;
    font-size: 43px;
    transform: rotate(-12deg);
}

.dashboard-right {
    display: grid;
    align-content: start;
    gap: 24px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 18px;
    padding: 20px 4px 6px;
}

.quick-grid button,
.quick-grid a {
    display: grid;
    justify-items: center;
    gap: 12px;
    border: 0;
    color: #13244a;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.quick-grid span {
    width: 62px;
    height: 62px;
    font-size: 28px;
}

.approval-list {
    display: grid;
    gap: 13px;
}

.approval-list div {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
}

.approval-list span {
    width: 34px;
    height: 34px;
}

.approval-list p {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}

.approval-list strong {
    min-width: 48px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--red);
    background: #ffe4eb;
    font-weight: 850;
}

.announcement-list {
    display: grid;
    gap: 12px;
}

.announcement-list article {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 13px;
    min-height: 70px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(19, 42, 86, .05);
}

.announcement-list article.featured {
    border: 0;
    background: linear-gradient(100deg, #ffd9e9, #ffe9f2 70%, #ffd5ec);
}

.announcement-list span {
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.announcement-list strong,
.announcement-list small {
    display: block;
}

.announcement-list small {
    margin-top: 3px;
    color: #435274;
}

.attendance-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    align-items: stretch;
    gap: 38px;
    padding: 26px 30px;
}

.attendance-circles {
    border-right: 1px solid var(--line);
    padding-right: 30px;
}

.circle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 23px;
}

.circle-stat {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--ring) 0 78%, #eef2f7 78% 100%);
}

.circle-stat > div {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.circle-stat small {
    grid-area: 1 / 1;
    margin-top: -24px;
    color: #52617e;
}

.circle-stat strong {
    grid-area: 1 / 1;
    margin-top: 20px;
    font-size: 26px;
    font-weight: 850;
}

.attendance-chart canvas {
    height: 170px !important;
}

.chart-keys {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5b78;
    font-size: 13px;
}

.chart-keys span {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 3px;
}

.chart-keys .present {
    background: var(--green);
}

.chart-keys .absent {
    margin-left: 14px;
    background: var(--red);
}

@media (max-width: 1500px) {
    .dashboard-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-right {
        grid-template-columns: repeat(3, 1fr);
    }

    .attendance-card {
        grid-template-columns: 1fr;
    }

    .attendance-circles {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 0 0 25px;
    }
}

@media (max-width: 1180px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-right {
        grid-template-columns: 1fr;
    }

    .quick-grid {
        grid-template-columns: repeat(4, minmax(100px, 1fr));
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 20px;
    }

    .topbar {
        height: auto;
        flex-wrap: wrap;
        padding: 18px;
    }

    .top-actions {
        width: 100%;
        margin-left: 0;
    }

    .dashboard-wrap {
        padding: 18px;
    }

    .welcome-row,
    .distribution-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .month-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .stats-grid,
    .circle-grid {
        grid-template-columns: 1fr;
    }

    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-card {
        padding: 20px;
    }

    .circle-stat {
        margin: auto;
    }

    .user-meta,
    .plain-chevron,
    .divider {
        display: none;
    }
}

/* Refined compact type and related pages */
body {
    font-size: 14px;
}

.app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
}

.sidebar {
    padding: 24px 18px;
}

.logo {
    margin-bottom: 24px;
}

.logo span {
    font-size: 35px;
}

.logo i {
    width: 29px;
    height: 21px;
}

.sidebar-nav {
    gap: 6px;
}

.sidebar-nav a {
    min-height: 45px;
    gap: 12px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 14px;
}

.sidebar-nav i {
    font-size: 18px;
}

.ai-card {
    left: 18px;
    right: 18px;
    padding: 15px;
}

.topbar {
    height: 70px;
    padding: 0 26px;
    gap: 17px;
}

.menu-btn {
    font-size: 25px;
}

.search-box {
    height: 46px;
    max-width: 560px;
    border-radius: 16px;
}

.search-box input {
    font-size: 14px;
}

.icon-btn {
    width: 43px;
    height: 43px;
    font-size: 18px;
}

.user-avatar {
    width: 45px;
    height: 45px;
}

.user-meta strong {
    font-size: 14px;
}

.user-meta span {
    font-size: 12px;
}

.dashboard-wrap {
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 20px;
    padding: 26px 26px 22px;
}

.welcome-row {
    margin-bottom: 19px;
}

.welcome-row h1 {
    font-size: 24px;
}

.welcome-row p {
    font-size: 13px;
}

.wave-mark {
    display: inline-grid;
    place-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #0d5cff;
    background: #eaf1ff;
    font-size: 12px;
    vertical-align: middle;
}

.month-btn {
    width: 175px;
    height: 45px;
    border-radius: 11px;
    font-size: 13px;
}

.stats-grid {
    gap: 16px;
}

.stat-card {
    min-height: 132px;
    grid-template-columns: 56px 1fr;
    padding: 21px 18px 12px;
    border-radius: 15px;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 22px;
}

.stat-card p {
    margin-bottom: 5px;
    font-size: 13px;
}

.stat-card h2 {
    margin-bottom: 5px;
    font-size: 26px;
}

.stat-card span {
    font-size: 12px;
}

.stat-spark {
    height: 28px !important;
}

.dash-card {
    padding: 18px 20px;
    border-radius: 15px;
}

.dash-card h3 {
    font-size: 16px;
}

.distribution-layout {
    grid-template-columns: 170px 1fr;
    gap: 18px;
    min-height: 180px;
}

.donut-holder,
.donut-holder canvas {
    width: 165px !important;
    height: 165px !important;
}

.donut-holder strong {
    font-size: 24px;
}

.legend-list {
    gap: 13px;
}

.legend-list div,
.dept-row,
.person-row strong,
.approval-list p {
    font-size: 13px;
}

.line-canvas {
    height: 200px !important;
}

.dept-row {
    grid-template-columns: 122px 1fr 34px;
}

.person-row {
    grid-template-columns: 38px 1fr auto;
}

.person-row img {
    width: 38px;
    height: 38px;
}

.person-row span,
.person-row small {
    font-size: 12px;
}

.quick-grid {
    gap: 20px 12px;
}

.quick-grid span {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 23px;
}

.quick-grid button,
.quick-grid a {
    font-size: 12px;
}

.stat-link {
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.stat-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(19, 42, 86, .12);
}

.internal-back {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #12305f;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.internal-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}
.internal-hero-actions .module-new-btn { margin: 0; }

/* Social wall post card - Keka-style */
.post-card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.post-card:hover { box-shadow: 0 4px 18px rgba(15, 33, 60, .06); }

.post-header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px 10px;
}
.post-avatar, .post-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.post-avatar-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}
.post-meta p { margin: 0; color: #061833; font-size: 14px; line-height: 1.3; }
.post-meta p strong { font-weight: 700; }
.post-meta p span { color: #6d7896; font-weight: 500; }
.post-meta small { color: #8390ad; font-size: 12px; }
.post-menu {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8390ad;
    cursor: pointer;
}
.post-menu:hover { background: #f1f4fa; color: #0d4ea6; }

.post-body { padding: 0 18px 14px; }
.post-title { margin: 0 0 8px; color: #061833; font-size: 16px; font-weight: 700; line-height: 1.4; }
.post-text {
    margin: 0 0 8px;
    color: #344561;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}
.post-image-wrap {
    margin: 12px -18px 0;
    background: #f5f7fb;
    border-top: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}
.post-image {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: #f5f7fb;
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 18px 12px;
    border-top: 1px solid #eef1f6;
    flex-wrap: wrap;
}
.post-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.post-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3b4d6e;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.post-action:hover { background: #f1f4fa; color: #0d4ea6; }
.post-action i { font-size: 16px; }
.post-action .emoji { font-size: 16px; }
.post-action.is-active { color: #0d68cc; }

.reaction-trigger-wrap { position: relative; }
.reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    display: none;
    gap: 4px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 28px;
    box-shadow: 0 10px 28px rgba(15, 33, 60, .14);
    z-index: 10;
    animation: rxPickerIn .15s ease-out;
}
@keyframes rxPickerIn {
    from { opacity: 0; transform: translateY(6px) scale(.94); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.reaction-trigger-wrap:hover .reaction-picker,
.reaction-picker:hover { display: flex; }
.reaction-pick {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.reaction-pick:hover { transform: scale(1.3); background: #f1f4fa; }

.post-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d7896;
    font-size: 13px;
}
.post-stats a {
    color: #2f71ff;
    text-decoration: none;
    font-weight: 600;
}
.post-stats a:hover { text-decoration: underline; }
.dot-sep { color: #b0becc; }
.reaction-stack {
    display: inline-flex;
    align-items: center;
}
.rx-bubble {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(15, 33, 60, .12);
    font-size: 12px;
    margin-left: -6px;
}
.rx-bubble:first-child { margin-left: 0; }

/* Post comments */
.post-comments {
    padding: 12px 18px 14px;
    border-top: 1px solid #eef1f6;
    background: #fafbfd;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.post-comments[hidden] { display: none; }
.post-comment {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
}
.post-comment-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.post-comment-body { min-width: 0; }
.post-comment-bubble {
    display: inline-block;
    max-width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 14px;
}
.post-comment-bubble strong {
    display: block;
    color: #061833;
    font-size: 13px;
    font-weight: 800;
}
.post-comment-bubble p {
    margin: 2px 0 0;
    color: #344561;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}
.post-comment-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 3px 0 0 10px;
}
.post-comment-meta small { color: #8390ad; font-size: 11.5px; }
.post-comment-delete {
    border: 0;
    background: transparent;
    color: #b0becc;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.post-comment-delete:hover { color: #c03737; text-decoration: underline; }

.post-comment-form {
    display: grid;
    grid-template-columns: 32px 1fr 38px;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}
.post-comment-form input[type="text"] {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #d6dde8;
    border-radius: 19px;
    background: #fff;
    color: #061833;
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s ease;
}
.post-comment-form input[type="text"]:focus { border-color: #2f71ff; }
.post-comment-form button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #2f71ff;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.post-comment-form button:hover { background: #1855d6; }

@media (max-width: 600px) {
    .post-header { grid-template-columns: 40px 1fr auto; padding: 12px 14px 8px; }
    .post-avatar, .post-avatar-fallback { width: 40px; height: 40px; font-size: 16px; }
    .post-body { padding: 0 14px 12px; }
    .post-image-wrap { margin: 10px -14px 0; }
    .post-footer { padding: 8px 14px 10px; }
    .post-action { padding: 6px 10px; font-size: 13px; }
    .post-comments { padding: 10px 14px 12px; }
}

/* HR social post composer */
.hr-post-console {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .75fr);
    gap: 18px;
    margin-bottom: 22px;
}

.hr-post-composer,
.hr-post-engagement {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(11, 33, 79, .06);
}

.hr-post-composer {
    padding: 18px;
}

.hr-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1f7;
}

.hr-post-author > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061833;
    background: #ffb25f;
    font-size: 17px;
    font-weight: 900;
}

.hr-post-author strong {
    display: block;
    color: #061833;
    font-size: 16px;
    font-weight: 900;
}

.hr-post-author small {
    display: block;
    max-width: 760px;
    color: #66718c;
    font-size: 12px;
    font-weight: 700;
}

.hr-post-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.hr-post-form label {
    display: grid;
    gap: 6px;
}

.hr-post-form label span {
    color: #53617c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.hr-post-form input,
.hr-post-form select,
.hr-post-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    padding: 10px 12px;
    color: #061833;
    background: #fbfdff;
    font-size: 13px;
    font-weight: 700;
}

.hr-post-form textarea {
    min-height: 112px;
    resize: vertical;
}

.hr-post-form input:focus,
.hr-post-form select:focus,
.hr-post-form textarea:focus {
    border-color: #126bc8;
    outline: 3px solid rgba(18, 107, 200, .12);
    background: #fff;
}

.hr-post-wide,
.hr-post-options,
.hr-post-actions {
    grid-column: 1 / -1;
}

.hr-post-options {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.hr-post-check {
    min-height: 42px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    background: #fbfdff;
}

.hr-post-check input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.hr-post-check span {
    text-transform: none !important;
}

.hr-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.hr-post-actions a,
.hr-post-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.hr-post-actions a {
    border: 1px solid #cfd9ea;
    color: #126bc8;
    background: #fff;
}

.hr-post-actions button {
    border: 1px solid #126bc8;
    color: #fff;
    background: #126bc8;
    box-shadow: 0 10px 24px rgba(18, 107, 200, .18);
}

.hr-post-engagement {
    padding: 18px;
}

.hr-post-engagement .card-title-row {
    margin-bottom: 14px;
}

.hr-post-engagement .card-title-row span {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #126bc8;
    background: #eaf3ff;
    font-size: 12px;
    font-weight: 900;
}

.hr-comment-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #edf1f7;
}

.hr-comment-row:first-of-type {
    border-top: 0;
}

.hr-comment-row > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #126bc8;
    background: #eaf3ff;
    font-size: 12px;
    font-weight: 900;
}

.hr-comment-row p {
    min-width: 0;
    margin: 0;
    color: #061833;
    font-size: 13px;
    font-weight: 800;
}

.hr-comment-row small {
    display: block;
    margin-top: 2px;
    color: #8390ad;
    font-size: 11px;
    font-weight: 700;
}

.hr-comment-row em {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: #53617c;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .hr-post-console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .hr-post-form,
    .hr-post-options {
        grid-template-columns: 1fr;
    }

    .hr-post-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hr-post-actions a,
    .hr-post-actions button {
        width: 100%;
    }
}

/* Employee dashboard home refresh */
.emp-tab-panel[data-portal-panel="home"] {
    padding: 26px;
    background: #f4f7fb;
}

.emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 860px);
    gap: 24px;
    align-items: start;
}

.emp-tab-panel[data-portal-panel="home"] .employee-home-left {
    gap: 16px;
}

.emp-tab-panel[data-portal-panel="home"] .welcome-banner,
.emp-tab-panel[data-portal-panel="home"] .home-tile,
.emp-tab-panel[data-portal-panel="home"] .celebration-card,
.emp-tab-panel[data-portal-panel="home"] .post-card {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .06);
}

.emp-tab-panel[data-portal-panel="home"] .welcome-banner {
    min-height: 92px;
    height: auto;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(18, 107, 200, .92), rgba(6, 24, 51, .94)),
        #123b64;
}

.emp-tab-panel[data-portal-panel="home"] .welcome-banner h1 {
    font-size: 20px;
    letter-spacing: 0;
}

.emp-tab-panel[data-portal-panel="home"] .welcome-banner small {
    display: inline-block;
    margin-top: 4px;
    color: rgba(255,255,255,.84);
    font-weight: 800;
}

.emp-tab-panel[data-portal-panel="home"] .home-section-title {
    margin: 4px 0 -4px;
    color: #061833;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-tab-panel[data-portal-panel="home"] .home-tile {
    min-height: 118px;
    padding: 18px;
    overflow: hidden;
}

.emp-tab-panel[data-portal-panel="home"] .inbox-tile {
    background: linear-gradient(135deg, #8169c9, #9a74d1);
}

.emp-tab-panel[data-portal-panel="home"] .holiday-tile {
    background: linear-gradient(135deg, #18a8c8, #42c4df);
}

.emp-tab-panel[data-portal-panel="home"] .leave-today-tile {
    background: linear-gradient(135deg, #b65abb, #d071be);
}

.emp-tab-panel[data-portal-panel="home"] .time-tile {
    background: linear-gradient(135deg, #f7a928, #ffc73c);
}

.emp-tab-panel[data-portal-panel="home"] .employee-home-feed {
    max-width: 860px;
    gap: 16px;
}

.emp-tab-panel[data-portal-panel="home"] .celebration-card {
    overflow: hidden;
    background: #fff;
}

.emp-tab-panel[data-portal-panel="home"] .celebration-tabs {
    border-bottom: 1px solid #e3e9f3;
}

.emp-tab-panel[data-portal-panel="home"] .celebration-tabs span {
    padding: 18px;
    color: #061833;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="home"] .post-card {
    margin-bottom: 0;
    overflow: hidden;
    background: #fff;
}

.emp-tab-panel[data-portal-panel="home"] .post-header {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    padding: 18px 18px 10px;
}

.emp-tab-panel[data-portal-panel="home"] .post-body {
    padding: 0 18px 16px;
}

.emp-tab-panel[data-portal-panel="home"] .post-title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="home"] .post-text {
    color: #1d2c49;
    font-size: 14px;
}

.emp-tab-panel[data-portal-panel="home"] .post-image-wrap {
    margin: 16px -18px 0;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e3e9f3;
    border-bottom: 1px solid #e3e9f3;
    background: #edf2f8;
    overflow: hidden;
}

.emp-tab-panel[data-portal-panel="home"] .post-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.emp-tab-panel[data-portal-panel="home"] .post-footer {
    padding: 10px 18px 14px;
    background: #fbfdff;
}

.emp-tab-panel[data-portal-panel="home"] .post-actions {
    gap: 8px;
}

.emp-tab-panel[data-portal-panel="home"] .post-action {
    min-height: 36px;
    border-radius: 8px;
    color: #23385f;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="home"] .post-action.is-active {
    color: #126bc8;
    background: #eaf3ff;
}

.emp-tab-panel[data-portal-panel="home"] .post-comments {
    background: #fbfdff;
}

@media (max-width: 1180px) {
    .emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }
}

@media (max-width: 920px) {
    .emp-tab-panel[data-portal-panel="home"] {
        padding: 18px;
    }

    .emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
        grid-template-columns: 1fr;
    }

    .emp-tab-panel[data-portal-panel="home"] .employee-home-feed {
        max-width: none;
    }
}

/* Leave types editable side panel */
.leave-types-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.leave-type-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e9f3;
    border-radius: 8px;
    background: #fbfcff;
    transition: border-color .15s ease, background .15s ease;
}
.leave-type-row:hover { border-color: #bcd6ff; background: #f5f9ff; }
.leave-type-row > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.leave-type-meta { display: flex; flex-direction: column; min-width: 0; }
.leave-type-meta strong { color: #061833; font-size: 13.5px; font-weight: 800; }
.leave-type-meta small { color: #6d7896; font-size: 11.5px; margin-top: 2px; }
.leave-type-row .row-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d6dde8;
    border-radius: 6px;
    background: #fff;
    color: #344561;
}
.leave-type-row .row-btn:hover { border-color: #bcd6ff; color: #0d4ea6; }

.internal-panel {
    max-width: 1120px;
}

.internal-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.internal-form label {
    display: grid;
    gap: 7px;
    color: #405172;
    font-size: 13px;
    font-weight: 800;
}

.internal-form input {
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: 0;
    color: var(--ink);
    background: #fbfcff;
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-actions button,
.internal-panel .card-title-row button {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #0d5cff;
    border-radius: 10px;
    color: #fff;
    background: #0d5cff;
    font-size: 13px;
    font-weight: 850;
}

.form-actions .ghost-btn {
    color: #12305f;
    border-color: var(--line);
    background: #fff;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.step-grid div {
    min-height: 128px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcff;
}

.step-grid span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #fff;
    background: #0d5cff;
    font-weight: 900;
}

.step-grid strong,
.step-grid small {
    display: block;
}

.step-grid small {
    margin-top: 5px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .internal-form,
    .step-grid {
        grid-template-columns: 1fr;
    }
}

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background:
        linear-gradient(90deg, rgba(13, 104, 204, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(13, 104, 204, .07) 1px, transparent 1px),
        #f4f7fb;
    background-size: 34px 34px;
}

.login-shell {
    width: min(1080px, 100%);
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr);
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 33, 60, .14);
}

.login-brand {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 32px;
    padding: 38px;
    color: #fff;
    background:
        linear-gradient(145deg, #082235 0%, #0d3a61 55%, #075aa9 100%);
    isolation: isolate;
}

.login-brand:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, .08) 48% 67%, transparent 67%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 42%);
}

.login-brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.login-brand-top .logo {
    width: auto;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    margin: 0;
    color: #fff;
    background: transparent;
}

.login-brand-top .logo span {
    font-size: 42px;
}

.login-brand-top .logo i {
    width: 32px;
    height: 24px;
    background: conic-gradient(from 210deg, #fff, #c5e4ff, #79c7ff, #fff);
}

.login-brand-top > span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .1);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.login-brand-copy {
    max-width: 520px;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 4px;
    color: #dff0ff;
    background: rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 800;
}

.login-brand h1 {
    max-width: 470px;
    margin: 20px 0 14px;
    font-size: 39px;
    line-height: 1.08;
    font-weight: 850;
}

.login-brand p {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.6;
}

.login-preview {
    width: min(480px, 100%);
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
}

.preview-topbar {
    height: 42px;
    display: grid;
    grid-template-columns: 1fr auto 32px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-radius: 6px;
    color: #24364f;
    background: #fff;
}

.preview-topbar span {
    width: 112px;
    height: 10px;
    border-radius: 999px;
    background: #dfe7f1;
}

.preview-topbar strong {
    font-size: 12px;
    font-weight: 850;
}

.preview-topbar i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0d68cc;
    background: #e9f3fc;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.preview-grid article {
    min-height: 116px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px;
    border-radius: 6px;
    color: #10264a;
    background: #fff;
}

.preview-grid i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 10px;
    font-size: 17px;
}

.preview-grid article:nth-child(1) i {
    color: #0d68cc;
    background: #e9f3fc;
}

.preview-grid article:nth-child(2) i {
    color: #12a85c;
    background: #e5f8ed;
}

.preview-grid article:nth-child(3) i {
    color: #e87800;
    background: #fff3df;
}

.preview-grid strong {
    color: #061833;
    font-size: 27px;
    font-weight: 850;
}

.preview-grid span {
    color: #60708b;
    font-size: 12px;
}

.preview-activity {
    padding: 16px;
    border-radius: 6px;
    color: #10264a;
    background: #fff;
}

.preview-activity strong {
    display: block;
    margin-bottom: 10px;
    color: #061833;
    font-size: 14px;
}

.preview-activity p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid #eef2f6;
    color: #53617c;
    font-size: 12px;
}

.preview-activity span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20bd67;
}

.login-card {
    display: grid;
    align-content: center;
    padding: 54px 50px;
    background: #fff;
}

.login-card-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.login-card-head > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0d68cc;
    background: #e9f3fc;
    font-size: 24px;
}

.login-card h2 {
    margin: 0 0 7px;
    color: #061833;
    font-size: 28px;
    font-weight: 800;
}

.login-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.login-card form,
.login-card label {
    display: grid;
    gap: 9px;
}

.login-card form {
    margin-top: 28px;
    gap: 16px;
}

.login-card label {
    color: #344561;
    font-size: 12px;
    font-weight: 800;
}

.login-card label > span {
    letter-spacing: .02em;
}

.login-field {
    height: 48px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    border: 1px solid #dfe6ef;
    border-radius: 6px;
    background: #fbfcff;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-field:focus-within {
    border-color: #0d68cc;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(13, 104, 204, .11);
}

.login-field i {
    color: #7b8aa3;
    text-align: center;
    font-size: 17px;
}

.login-field input {
    width: 100%;
    height: 100%;
    padding: 0 14px 0 0;
    border: 0;
    color: #061833;
    background: transparent;
    outline: 0;
}

.login-card form button {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #0d68cc;
    font-weight: 850;
    box-shadow: 0 12px 22px rgba(13, 104, 204, .2);
    cursor: pointer;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.login-card form button:hover {
    background: #075aa9;
    box-shadow: 0 14px 26px rgba(7, 90, 169, .24);
    transform: translateY(-1px);
}

.login-error {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #ffd0da;
    border-radius: 6px;
    color: #bf1f35;
    background: #ffe8ed;
    font-weight: 800;
}

.demo-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #edf1f5;
}

.demo-title span {
    color: #061833;
    font-weight: 850;
}

.demo-title small {
    color: #71809a;
    font-size: 12px;
}

.demo-users {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.demo-users button {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px;
    border: 1px solid #e3e9f1;
    border-radius: 6px;
    color: #10264a;
    background: #fbfcff;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.demo-users button:hover {
    border-color: #bcd6ff;
    background: #f5f9ff;
    transform: translateY(-1px);
}

.demo-users button > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0d68cc;
    background: #e9f3fc;
    font-size: 17px;
}

.demo-users button span {
    min-width: 0;
}

.demo-users strong,
.demo-users small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-users small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.employee-wrap {
    padding: 26px;
}

.employee-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0a2d69, #164a9f);
    box-shadow: var(--shadow);
}

.employee-hero span {
    color: #bcd4ff;
    font-weight: 850;
}

.employee-hero h1 {
    margin: 6px 0;
    font-size: 28px;
    font-weight: 900;
}

.employee-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .76);
}

.employee-hero a {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 11px;
    color: #0a2d69;
    background: #fff;
    text-decoration: none;
    font-weight: 900;
}

.employee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.employee-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.employee-profile img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.employee-profile h3 {
    margin-bottom: 3px;
}

.employee-profile p {
    margin: 0;
    color: var(--muted);
}

.profile-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.profile-facts small {
    display: block;
    color: var(--muted);
}

.employee-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.employee-form select,
.employee-form input,
.employee-form button {
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 0 12px;
}

.employee-form select {
    grid-column: 1 / -1;
}

.employee-form button {
    grid-column: 1 / -1;
    color: #fff;
    border-color: #0d5cff;
    background: #0d5cff;
    font-weight: 900;
}

.document-list {
    display: grid;
    gap: 10px;
}

.document-list a {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: #fbfcff;
    text-decoration: none;
}

.document-list span {
    color: #0d5cff;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .login-shell,
    .employee-grid {
        grid-template-columns: 1fr;
    }

    .login-body {
        padding: 18px;
        align-items: flex-start;
    }

    .login-shell {
        min-height: 0;
    }

    .login-brand,
    .login-card {
        padding: 30px;
    }

    .login-brand h1 {
        font-size: 34px;
    }

    .login-preview {
        width: 100%;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-grid article {
        min-height: 78px;
        grid-template-columns: 42px 1fr auto;
        align-items: center;
        align-content: center;
    }

    .preview-grid i {
        grid-row: span 2;
        margin: 0;
    }

    .preview-grid strong {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 560px) {
    .login-body {
        padding: 0;
        background: #fff;
    }

    .login-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-brand {
        padding: 24px;
    }

    .login-brand-top .logo span {
        font-size: 34px;
    }

    .login-brand h1 {
        font-size: 30px;
    }

    .login-brand p {
        font-size: 14px;
    }

    .login-brand-top {
        align-items: flex-start;
    }

    .login-brand-top > span {
        display: none;
    }

    .preview-topbar {
        grid-template-columns: 1fr 32px;
    }

    .preview-topbar strong {
        display: none;
    }

    .login-card {
        padding: 26px 20px 30px;
    }

    .login-card-head {
        grid-template-columns: 1fr;
    }

    .demo-users {
        grid-template-columns: 1fr;
    }
}

.emp-portal-body {
    margin: 0;
    background: #f4f6f8;
}

.emp-portal {
    display: block;
    min-height: 100vh;
    background: #f4f6f8;
}

.emp-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100vh;
    height: 100dvh;
    z-index: 30;
    display: grid;
    align-content: start;
    background: #082235;
}

.emp-rail-logo {
    height: 50px;
    min-height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px !important;
    color: #fff !important;
    background: #075aa9;
}

.emp-rail-logo span {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.emp-rail-logo i {
    width: 18px;
    height: 14px;
    display: block;
    background: conic-gradient(from 210deg, #fff, #b9dbff, #fff);
    clip-path: polygon(0 72%, 100% 0, 83% 100%);
}

.emp-rail a {
    position: relative;
    min-height: 74px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    color: #86a9bf;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.15;
    transition: background .16s ease, color .16s ease;
}

.emp-rail a:not(.emp-rail-logo) span {
    margin-top: 0;
}

.emp-rail a:hover,
.emp-rail a.active {
    color: #fff;
    background: #123f5e;
}

.emp-rail a.active:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: #2d9cff;
}

.emp-rail a:hover i,
.emp-rail a.active i {
    color: #ffffff;
    transform: translateY(-1px);
}

.emp-rail i {
    font-size: 19px;
    transition: transform .16s ease, color .16s ease;
}

.rail-svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease, color .16s ease;
}

.emp-rail a:hover .rail-svg,
.emp-rail a.active .rail-svg {
    transform: translateY(-1px);
}

.emp-rail .rail-logout {
    /* margin-top: auto removed - logout packs tight with other items */
}

.emp-main {
    min-width: 0;
    margin-left: 100px;
}

.emp-header {
    height: 50px;
    display: grid;
    grid-template-columns: 170px minmax(320px, 400px) 1fr auto 34px 38px;
    align-items: center;
    gap: 16px;
    padding: 0 12px 0 0;
    color: #fff;
    background: #126bc8;
}

.emp-header > strong {
    font-size: 14px;
    font-weight: 750;
}

.emp-header-search {
    height: 36px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    color: #66718c;
    background: #fff;
}

.emp-header-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #25364f;
    font-size: 12px;
}

.emp-header-search kbd {
    padding: 4px 8px;
    border-radius: 999px;
    color: #111f35;
    background: #f1f3f6;
    font: 700 11px "DM Sans", Inter, sans-serif;
}

.emp-header-bell {
    justify-self: end;
    color: #fff;
    font-size: 20px;
}

.emp-header img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .45);
}

.emp-account {
    justify-self: end;
}

.emp-account-trigger {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid;
    grid-template-columns: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.emp-account-trigger img {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, .58);
    box-shadow: 0 0 0 2px rgba(11, 33, 79, .1);
}

.emp-account-trigger i {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 2px solid #126bc8;
    border-radius: 50%;
    color: #126bc8;
    background: #fff;
    font-size: 9px;
}

.emp-account-menu {
    width: 286px;
    padding: 10px;
    margin-top: 10px !important;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11, 33, 79, .16);
}

.emp-account-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    border-left: 1px solid #dfe6f1;
    border-top: 1px solid #dfe6f1;
    background: #fff;
    transform: rotate(45deg);
}

.emp-account-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 8px 12px;
    border-bottom: 1px solid #edf1f7;
}

.emp-account-head img {
    width: 44px;
    height: 44px;
    border: 2px solid #ffe0ec;
    border-radius: 50%;
    object-fit: cover;
}

.emp-account-head strong,
.emp-account-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-account-head strong {
    color: #061833;
    font-size: 15px;
    font-weight: 900;
}

.emp-account-head span {
    margin-top: 2px;
    color: #66718c;
    font-size: 12px;
    font-weight: 700;
}

.emp-account-list {
    padding: 8px 0;
}

.emp-account-footer {
    padding-top: 8px;
    border-top: 1px solid #edf1f7;
}

.emp-account-list a,
.emp-account-footer a {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.emp-account-list a i,
.emp-account-footer a i {
    width: 18px;
    color: #152a4d;
    font-size: 15px;
    text-align: center;
}

.emp-account-list a:hover,
.emp-account-footer a:hover {
    color: #0d4ea6;
    background: #f3f7fd;
}

.emp-account-list a:hover i {
    color: #0d4ea6;
}

.emp-account-footer a.danger,
.emp-account-footer a.danger i,
.emp-account-footer a.danger:hover,
.emp-account-footer a.danger:hover i {
    color: #ef3444;
}

.emp-tab-panel[data-portal-panel="me"] > .portal-summary-grid,
.emp-tab-panel[data-portal-panel="me"] > .emp-card.emp-table-card {
    display: none;
}

.emp-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(11, 33, 79, .06);
}

.emp-profile-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.emp-profile-photo {
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    border: 4px solid #ffe0ec;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .12);
}

.emp-profile-title {
    min-width: 0;
}

.emp-profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0d66c8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-profile-title h2 {
    margin: 8px 0 3px;
    color: #061833;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0;
}

.emp-profile-title p {
    margin: 0;
    color: #50607f;
    font-size: 14px;
    font-weight: 700;
}

.emp-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.emp-profile-tags span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #dfe6f1;
    border-radius: 999px;
    color: #25364f;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 800;
}

.emp-profile-tags .is-active {
    color: #087047;
    border-color: #bdebd6;
    background: #effbf5;
}

.emp-profile-edit,
.emp-profile-section-head button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #126bc8;
    font-size: 12px;
    font-weight: 900;
}

.emp-profile-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.emp-profile-metrics article {
    min-width: 0;
    padding: 18px;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
}

.emp-profile-metrics article > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 8px;
    color: #0d66c8;
    background: #eaf3ff;
}

.emp-profile-metrics small,
.emp-profile-detail-grid small {
    display: block;
    margin-bottom: 5px;
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-profile-metrics strong {
    display: block;
    overflow: hidden;
    color: #061833;
    font-size: 20px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-profile-metrics p {
    margin: 4px 0 0;
    color: #50607f;
    font-size: 13px;
}

.emp-profile-details {
    margin-top: 16px;
    padding: 0;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f7;
}

.emp-profile-section-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-profile-section-head > div > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0d66c8;
    background: #eaf3ff;
}

.emp-profile-section-head h2 {
    margin: 0;
    color: #061833;
    font-size: 17px;
    font-weight: 900;
}

.emp-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emp-profile-detail-grid > div {
    min-width: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #edf1f7;
}

.emp-profile-detail-grid > div:nth-child(odd) {
    border-right: 1px solid #edf1f7;
}

.emp-profile-detail-grid strong {
    display: block;
    overflow-wrap: anywhere;
    color: #061833;
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .emp-profile-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .emp-profile-main {
        align-items: flex-start;
    }

    .emp-profile-photo {
        width: 68px;
        height: 68px;
    }

    .emp-profile-title h2 {
        font-size: 24px;
    }

    .emp-profile-edit {
        width: 100%;
    }

    .emp-profile-metrics,
    .emp-profile-detail-grid {
        grid-template-columns: 1fr;
    }

    .emp-profile-detail-grid > div:nth-child(odd) {
        border-right: 0;
    }
}

.emp-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 28px;
    height: 48px;
    padding: 0 20px;
    border-top: 7px solid #0d68cc;
    border-bottom: 1px solid #dfe4ea;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.d-none {
    display: none !important;
}

.emp-tabs button {
    position: relative;
    border: 0;
    color: #2d405f;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.emp-tabs button i,
.emp-card h2 i,
.logs-head h2 i,
.table-toolbar h2 i,
.emp-subtabs button i,
.emp-attendance-table th i,
.table-toolbar a i,
.table-toolbar button i,
.post-tabs button i,
.emp-action-links a i,
.portal-app-grid a i,
.document-list a i {
    margin-right: 7px;
    color: #0d68cc;
}

.emp-tabs button.active {
    color: #071a33;
}

.welcome-dot {
    position: absolute;
    top: 9px;
    right: -7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f26d7d;
}

.emp-tab-panel {
    display: none;
    padding: 26px 20px;
}

.employee-home-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.employee-home-layout.single {
    display: block;
}

.employee-home-left {
    display: grid;
    align-content: start;
    gap: 22px;
}

.welcome-banner {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    border-radius: 3px;
    color: #fff;
    background:
        radial-gradient(circle at 35% 35%, rgba(43, 164, 236, .55), transparent 32%),
        linear-gradient(135deg, #1d2434, #124c73 46%, #2d3038);
    overflow: hidden;
}

.welcome-banner h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}

.home-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.home-tile {
    position: relative;
    min-height: 118px;
    padding: 16px;
    color: #fff;
    overflow: hidden;
}

.home-tile h3,
.home-tile strong,
.home-tile span {
    position: relative;
    z-index: 1;
}

.home-tile h3 {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 750;
}

.inbox-tile {
    background: #9b86cc;
}

.inbox-tile div {
    display: grid;
    grid-template-columns: 74px 1fr;
    column-gap: 16px;
    align-items: center;
}

.inbox-tile i {
    grid-row: span 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 40px;
}

.inbox-tile span {
    font-size: 12px;
    font-weight: 800;
}

.holiday-tile {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #43c8ed 0%, #2ba8d0 100%);
    color: #fff;
    min-height: 138px;
}

.holiday-tile:after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -20px;
    width: 180px;
    height: 70px;
    border-top: 10px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    box-shadow: -18px 12px 0 #f6a800, -10px 24px 0 #18b957;
    transform: rotate(-8deg);
    pointer-events: none;
    opacity: .85;
}

.tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tile-head > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: .9;
}

.tile-head a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    opacity: .95;
}

.tile-head a:hover {
    opacity: 1;
    text-decoration: underline;
}

.holiday-tile button {
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 21px;
    z-index: 1;
}

.holiday-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.holiday-date-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    padding: 8px 12px;
    min-width: 62px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.holiday-date-badge .day {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
}

.holiday-date-badge .month {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-top: 3px;
    opacity: .95;
}

.holiday-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.holiday-meta strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holiday-meta .dow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holiday-meta .away-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

.holiday-meta .away-pill i {
    font-size: 12px;
}

.holiday-body.empty .holiday-meta strong {
    font-size: 18px;
    font-weight: 600;
    opacity: .95;
}

.leave-today-tile {
    background: #cc73c0;
}

.leave-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.leave-avatar-row span,
.leave-avatar-row b {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #39aee2;
    font-size: 13px;
    font-weight: 800;
    position: relative;
}

.leave-avatar-row span:not(.initial) {
    background: transparent;
    font-size: 28px;
}

.leave-avatar-row small {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.leave-avatar-row b {
    color: #006bdc;
    background: #fff;
    border: 2px solid #006bdc;
}

.remote-tile {
    background: #9abc27;
}

.remote-tile strong,
.remote-tile span {
    display: block;
    margin-top: 10px;
}

.remote-tile > i {
    position: absolute;
    right: 74px;
    bottom: 17px;
    color: rgba(0, 0, 0, .34);
    font-size: 62px;
}

.time-tile {
    background: #ffc22b;
}

.time-tile small,
.time-tile strong {
    display: block;
}

.time-tile strong {
    font-size: 30px;
    font-weight: 500;
}

.time-tile em {
    margin-left: 3px;
    font-size: 12px;
    font-style: normal;
}

.time-tile div:last-child {
    position: absolute;
    right: 12px;
    bottom: 32px;
    display: flex;
    gap: 4px;
}

.time-tile button {
    height: 26px;
    border: 0;
    border-radius: 4px;
    color: #52617e;
    background: #fff;
    font-size: 12px;
}

.employee-home-feed {
    display: grid;
    align-content: start;
    gap: 20px;
}

.org-switch {
    display: flex;
}

.org-switch button {
    min-width: 112px;
    height: 40px;
    border: 1px solid #dfe4ea;
    color: #25364f;
    background: #fff;
}

.org-switch .active {
    border-color: #0d68cc;
    background: #f7fbff;
}

.post-box {
    padding: 0;
}

.post-tabs {
    display: flex;
    height: 48px;
    border-bottom: 1px solid #e0e5eb;
}

.post-tabs button {
    padding: 0 20px;
    border: 0;
    background: #fff;
    color: #61708a;
}

.post-tabs .active {
    color: #25364f;
}

.post-box textarea {
    width: 100%;
    height: 88px;
    padding: 14px 12px;
    border: 0;
    outline: 0;
    resize: none;
    font: inherit;
}

.announcement-mini {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #53617c;
}

.announcement-mini button {
    width: 30px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #0d68cc;
    font-size: 19px;
    line-height: 1;
}

.celebration-card {
    padding: 0;
}

.celebration-tabs {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 18px;
    border-bottom: 1px solid #e0e5eb;
    color: #60708b;
}

.celebration-tabs span {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.celebration-tabs .active {
    color: #25364f;
}

.celebration-tabs > i {
    margin-left: auto;
}

.celebration-card p,
.birthday-person {
    margin: 18px;
}

.birthday-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.birthday-person b {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #77c95f;
}

.birthday-person span,
.birthday-person a {
    display: block;
}

.birthday-person a {
    color: #006bdc;
    text-decoration: none;
    font-size: 12px;
}

.feed-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-head {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    gap: 12px;
    align-items: start;
}

.feed-head > i {
    font-size: 38px;
    color: #9a86cc;
}

.feed-head span,
.feed-head small {
    display: block;
    color: #60708b;
}

.feed-head button {
    border: 0;
    color: #8390a5;
    background: transparent;
}

.feed-post p {
    margin: 4px 0 0;
    line-height: 1.5;
}

.feed-post small.text-muted {
    line-height: 1.5;
}

.feed-post a {
    color: #006bdc;
    text-decoration: none;
}

.birthday-art {
    width: 280px;
    height: 150px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 4px;
    background:
        radial-gradient(circle at 16% 20%, #111 0 9px, transparent 10px),
        radial-gradient(circle at 82% 18%, #d7ab32 0 10px, transparent 11px),
        radial-gradient(circle at 75% 35%, #111 0 10px, transparent 11px),
        #fff8eb;
}

.birthday-art strong {
    color: #d71920;
    font-size: 26px;
}

.birthday-art span {
    font-size: 24px;
}

.employee-home-tree {
    position: relative;
    min-height: 650px;
}

.employee-home-tree:before {
    content: "";
    position: absolute;
    right: -40px;
    top: 150px;
    width: 360px;
    height: 520px;
    opacity: .5;
    background:
        radial-gradient(ellipse at 45% 12%, #d7dde3 0 18px, transparent 19px),
        radial-gradient(ellipse at 70% 24%, #d7dde3 0 16px, transparent 17px),
        radial-gradient(ellipse at 38% 44%, #d7dde3 0 18px, transparent 19px),
        radial-gradient(ellipse at 82% 52%, #d7dde3 0 16px, transparent 17px),
        linear-gradient(80deg, transparent 45%, #d7dde3 46% 49%, transparent 50%);
    border-bottom-right-radius: 80%;
}

.welcome-message {
    max-width: 760px;
}

.welcome-message h2 {
    font-size: 24px;
}

.welcome-message a {
    display: inline-flex;
    margin-top: 16px;
    color: #006bdc;
    text-decoration: none;
    font-weight: 800;
}

@media (max-width: 1300px) {
    .employee-home-layout {
        grid-template-columns: 420px minmax(0, 1fr);
    }

    .employee-home-tree {
        display: none;
    }
}

@media (max-width: 900px) {
    .employee-home-layout {
        grid-template-columns: 1fr;
    }
}

.emp-tab-panel.active {
    display: block;
}

.emp-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.04fr;
    gap: 20px;
}

.emp-card {
    border: 1px solid #dfe4ea;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 31, 53, .03);
}

.emp-card h2,
.logs-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.emp-card {
    padding: 20px;
}

.emp-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #071a33;
    font-size: 12px;
}

.attendance-stat-row {
    display: grid;
    grid-template-columns: 42px 1fr 100px 100px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    border-bottom: 1px solid #e7ebf0;
}

.attendance-stat-row:last-child {
    border-bottom: 0;
}

.attendance-stat-row small {
    display: block;
    color: #6c7890;
    font-size: 10px;
    text-transform: uppercase;
}

.attendance-stat-row b {
    font-size: 20px;
    font-weight: 500;
}

.round-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
}

.round-icon.yellow {
    background: #f8b51f;
}

.round-icon.blue {
    background: #5ca6dd;
}

.week-dots {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.week-dots span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #e3e7ec;
    border-radius: 50%;
    color: #677188;
    font-size: 11px;
}

.week-dots .active {
    color: #fff;
    border-color: #62c6d5;
    background: #62c6d5;
}

.timing-bar-wrap {
    margin-top: 86px;
}

.timing-bar-wrap p,
.date-line {
    margin: 0 0 7px;
    font-size: 12px;
}

.timing-bar {
    position: relative;
    height: 10px;
    border-radius: 3px;
    background: #c7dfe5;
    overflow: hidden;
}

.timing-bar span {
    display: block;
    height: 100%;
    background: #63c3d1;
}

.timing-bar i {
    position: absolute;
    top: 0;
    width: 55px;
    height: 100%;
    background: #f4f6f8;
}

.timing-meta {
    display: flex;
    justify-content: space-between;
    color: #69758b;
    font-size: 11px;
    margin-top: 6px;
}

.clock-box {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 18px;
    padding: 8px 17px;
    border: 1px solid #e2e6ec;
    border-radius: 4px;
    font-size: 18px;
}

.clock-box small {
    font-size: 12px;
}

.emp-action-links {
    display: grid;
    gap: 8px;
    margin-left: 180px;
    margin-top: -58px;
}

.emp-action-links a {
    color: #006bdc;
    text-decoration: none;
    font-size: 13px;
}

.logs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32px 0 14px;
}

.logs-head label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.logs-head input {
    accent-color: #0d68cc;
}

.logs-head label span {
    width: 30px;
    height: 16px;
    display: inline-block;
    border-radius: 999px;
    background: #dce2e8;
    position: relative;
}

.logs-head label span:after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.logs-head input {
    position: absolute;
    opacity: 0;
}

.logs-head input:checked + span {
    background: #0d68cc;
}

.logs-head input:checked + span:after {
    left: 16px;
}

.emp-subtabs {
    display: flex;
    border: 1px solid #e0e5eb;
    background: #fff;
}

.emp-subtabs button {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-right: 1px solid #e0e5eb;
    color: #4a5872;
    background: #fff;
    font-size: 13px;
}

.emp-subtabs .active {
    color: #111f35;
    background: #eef7ff;
}

.att-subtab-panel {
    display: none;
}

.att-subtab-panel.active {
    display: block;
}

.emp-table-card {
    margin-top: 20px;
    padding: 0;
    overflow: hidden;
}

.table-toolbar {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #e0e5eb;
}

.table-toolbar h2 {
    margin: 0;
    font-size: 16px;
}

.table-toolbar div {
    display: flex;
}

.table-toolbar button,
.table-toolbar a {
    min-width: 74px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #e0e5eb;
    color: #006bdc;
    background: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.table-toolbar .active {
    color: #fff;
    border-color: #0d68cc;
    background: #0d68cc;
}

.emp-attendance-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.emp-attendance-table th {
    height: 34px;
    padding: 0 20px;
    color: #0b1830;
    background: #eceeef;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.emp-attendance-table th i {
    font-size: 11px;
}

.emp-attendance-table td {
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e9ee;
    font-size: 13px;
}

.visual-scale {
    width: 265px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: center;
}

.visual-scale span {
    height: 10px;
    border-left: 1px solid #e0e5eb;
}

.visual-scale b {
    height: 10px;
    border-radius: 3px;
    background: #63c3d1;
}

.teal-dot {
    margin-right: 12px;
    color: #63c3d1;
    font-size: 13px;
}

.warning-text {
    margin-right: 12px;
    color: #ffae28;
}

.ok-text {
    margin-right: 12px;
    color: #52b66b;
}

.portal-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.portal-summary-grid strong {
    display: block;
    margin-top: 16px;
    font-size: 32px;
}

.goal-line {
    width: 220px;
    height: 8px;
    border-radius: 999px;
    background: #e3e9ef;
}

.goal-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #19ad63;
}

.portal-app-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 16px;
}

.portal-app-grid a {
    min-height: 120px;
    display: grid;
    place-items: center;
    gap: 10px;
    border: 1px solid #dfe4ea;
    color: #0b1830;
    background: #fff;
    text-decoration: none;
    font-weight: 800;
}

.portal-app-grid i {
    color: #0d68cc;
    font-size: 26px;
}

.leave-summary-tab {
    display: inline-flex;
    align-items: center;
    height: 42px;
    margin: -26px 0 26px;
    padding: 0 20px;
    color: #051833;
    background: #fff;
    font-size: 13px;
}

.leave-section-title,
.leave-card-head,
.leave-balance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.leave-section-title {
    margin-bottom: 20px;
}

.leave-section-title h2,
.leave-heading {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.leave-section-title button {
    height: 40px;
    padding: 0 18px;
    border: 1px solid #006bdc;
    border-radius: 4px;
    color: #006bdc;
    background: #fff;
    font-weight: 700;
}

.leave-pending-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    margin-bottom: 28px;
}

.leave-empty-card {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.leave-empty-card > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0d68cc;
    background: #eef7ff;
    font-size: 24px;
}

.leave-empty-card strong,
.leave-empty-card small {
    display: block;
}

.leave-empty-card small {
    margin-top: 6px;
    color: #60708b;
}

.leave-actions-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 22px 20px;
    border-radius: 14px;
    background: linear-gradient(150deg, #f3f7ff 0%, #ffffff 60%);
    border: 1px solid #e3ebf9;
}

.leave-actions-card .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f71ff 0%, #1d6df1 60%, #0d4ea6 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(13, 78, 166, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.leave-actions-card .primary i { font-size: 15px; color: #e8f0ff; }
.leave-actions-card .primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(13, 78, 166, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
    filter: brightness(1.05);
}
.leave-actions-card .primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(13, 78, 166, .25), inset 0 1px 2px rgba(0, 0, 0, .12);
    filter: brightness(.96);
}
.leave-actions-card .primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 113, 255, .35), 0 6px 14px rgba(13, 78, 166, .28);
}

.leave-actions-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid #d6e1f5;
    background: #fff;
    color: #2f71ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.leave-actions-card a::before {
    content: "\F4D6"; /* bi-file-earmark-text */
    font-family: "bootstrap-icons";
    font-size: 15px;
    line-height: 1;
}
.leave-actions-card a:hover {
    border-color: #2f71ff;
    background: #f5f9ff;
    color: #0d4ea6;
    transform: translateY(-1px);
}

.leave-heading {
    margin: 24px 0 18px;
}

.leave-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.9fr;
    gap: 20px;
}

.leave-chart-card {
    height: 160px;
}

.leave-card-head h3,
.leave-balance-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.leave-card-head i {
    color: #8291aa;
}

.weekly-bars,
.monthly-bars {
    height: 86px;
    display: grid;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
    padding: 0 18px;
    border-top: 1px solid #edf0f3;
}

.weekly-bars {
    grid-template-columns: repeat(7, 1fr);
}

.monthly-bars {
    grid-template-columns: repeat(12, 1fr);
}

.weekly-bars div,
.monthly-bars div {
    height: 68px;
    display: grid;
    align-items: end;
    gap: 6px;
}

.weekly-bars span,
.monthly-bars span {
    display: block;
    min-height: 2px;
    background: #9a86cc;
}

.weekly-bars small,
.monthly-bars small {
    text-align: center;
    font-size: 11px;
}

.leave-type-donut {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    margin: 10px auto 0;
    border-radius: 50%;
    background: conic-gradient(#f5c22c 0 25%, #9abd2d 25% 73%, #e98282 73% 77%, #9a86cc 77% 100%);
}

.leave-type-donut:before {
    content: "";
    position: absolute;
}

.leave-type-donut strong {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #000764;
    background: #fff;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

.leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.leave-balance-card {
    position: relative;
    padding: 18px 18px 16px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e6ebf3;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    --ring-color: #2f71ff;
    --ring-pct: 0%;
}
.leave-balance-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: var(--ring-color);
    opacity: .85;
}
.leave-balance-card:hover {
    border-color: #cdd9ee;
    box-shadow: 0 10px 24px rgba(15, 30, 60, .09);
    transform: translateY(-1px);
}

.leave-balance-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.leave-balance-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f1e3c;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-balance-head a {
    color: #006bdc;
    text-decoration: none;
    font-size: 13px;
}
.leave-balance-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ring-color);
    flex: 0 0 10px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-color) 18%, transparent);
}
.leave-balance-pct {
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ring-color) 12%, #ffffff 88%);
    color: var(--ring-color);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Circular ring: conic-gradient fill + masked center via inner white circle */
.leave-ring {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 14px auto 16px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) 0 var(--ring-pct), #eef2f8 var(--ring-pct) 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ring-color) 12%, transparent);
}
.leave-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffffff 0%, #fbfcfe 60%, #f4f6fb 100%);
}
.leave-ring-inner {
    position: relative;
    text-align: center;
    line-height: 1;
}
.leave-ring-inner strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: var(--ring-color);
    font-variant-numeric: tabular-nums;
}
.leave-ring-inner small {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #6d7896;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.leave-balance-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.leave-balance-stats .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f7f9fc;
    border: 1px solid #eef2f8;
}
.leave-balance-stats .stat i {
    font-size: 15px;
    color: #6d7896;
}
.leave-balance-stats .stat.used i  { color: #d97706; }
.leave-balance-stats .stat.total i { color: var(--ring-color); }
.leave-balance-stats .stat small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #6d7896;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.leave-balance-stats .stat b {
    display: block;
    margin-top: 1px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f1e3c;
}

/* Backward-compat: legacy donut markup still found on a few pages */
.balance-donut {
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    margin: 24px auto;
    border-radius: 50%;
    background: conic-gradient(var(--ring, #2f71ff) 0 var(--fill, 0%), var(--rest, #ecedf3) var(--fill, 0%) 100%);
}
.balance-donut strong {
    width: 88px; height: 88px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #000764;
    font-size: 13px; font-weight: 600;
    text-align: center;
}
.balance-donut small { font-size: 12px; font-weight: 500; }
.balance-meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e3e7ec; }
.balance-meta div, .annual-quota { padding: 12px 16px; }
.balance-meta div + div { border-left: 1px solid #e3e7ec; }
.balance-meta small, .annual-quota small { display: block; color: #60708b; font-size: 11px; }
.balance-meta b, .annual-quota b { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; }

.other-leaves {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    padding: 28px;
}

.leave-history-card {
    margin-top: 0;
}

.leave-filter-row {
    height: 48px;
    display: grid;
    grid-template-columns: 200px 200px 1fr;
    border-bottom: 1px solid #e1e5ea;
}

.leave-filter-row button,
.leave-filter-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid #e1e5ea;
    color: #53617c;
    background: #fff;
    font-size: 13px;
}

.leave-filter-row label input {
    width: 100%;
    border: 0;
    outline: 0;
}

.leave-total {
    padding: 20px;
    color: #60708b;
    font-size: 12px;
    text-align: right;
}

.leave-history-table td {
    vertical-align: middle;
    height: 64px;
}

@media (max-width: 1200px) {
    .leave-stats-grid,
    .leave-pending-grid {
        grid-template-columns: 1fr;
    }

    .leave-balance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .leave-balance-grid,
    .leave-filter-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Proper monthly calendar (employee Attendance tab) ===== */
.emp-calendar {
    padding: 18px 20px 22px;
}
.emp-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.emp-calendar-weekdays span {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #6d7896;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 6px 0;
}
.emp-calendar-weekdays span:first-child,
.emp-calendar-weekdays span:last-child { color: #d35454; }

.emp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.cal-cell {
    position: relative;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px 8px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    color: #0f1e3c;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    overflow: hidden;
}
.cal-cell.empty {
    border: 1px dashed #ecf0f6;
    background: #fafbfd;
    box-shadow: none;
}
.cal-cell:not(.empty):hover {
    border-color: #c9d6ee;
    box-shadow: 0 4px 10px rgba(15, 30, 60, .06);
    transform: translateY(-1px);
}
.cal-cell .cal-day {
    font-size: 14px;
    font-weight: 700;
}
.cal-cell .cal-status,
.cal-cell .cal-holiday-name {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: inherit;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cal-cell.is-weekend { background: #f4f6fb; color: #5b6480; }
.cal-cell.is-holiday {
    background: #fdecec;
    border-color: #f3b8b8;
    color: #c0392b;
}
.cal-cell.is-holiday .cal-day { color: #c0392b; }

.cal-cell.is-present {
    background: #eaf8f0;
    border-color: #ccebd9;
    color: #158a4f;
}
.cal-cell.is-late {
    background: #fff3df;
    border-color: #ffdfaa;
    color: #bd6b00;
}
.cal-cell.is-absent {
    background: #fde9e8;
    border-color: #f5c0bc;
    color: #b3271a;
}

.cal-cell.is-today {
    border-color: #2f71ff;
    box-shadow: 0 0 0 2px rgba(47, 113, 255, .18);
}
.cal-cell.is-today .cal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2f71ff;
    color: #fff;
    font-size: 12.5px;
    margin: -2px 0 0 -2px;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: #4d5b73;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.cal-legend .dot.today    { background: #2f71ff; }
.cal-legend .dot.present  { background: #1ea25e; }
.cal-legend .dot.late     { background: #f0a23c; }
.cal-legend .dot.absent   { background: #d8423a; }
.cal-legend .dot.holiday  { background: #c0392b; }
.cal-legend .dot.weekend  { background: #b0b8cc; }

@media (max-width: 720px) {
    .cal-cell { min-height: 52px; padding: 4px 6px; }
    .cal-cell .cal-status,
    .cal-cell .cal-holiday-name { font-size: 9.5px; }
}
@media (max-width: 480px) {
    .emp-calendar { padding: 12px 10px 16px; }
    .emp-calendar-weekdays, .emp-calendar-grid { gap: 4px; }
    .cal-cell { min-height: 44px; font-size: 12px; }
    .cal-cell .cal-status,
    .cal-cell .cal-holiday-name { display: none; }
}

.emp-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    min-width: 230px;
    padding: 13px 16px;
    border-radius: 8px;
    color: #fff;
    background: #082235;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.emp-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.action-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.action-modal.show {
    display: flex;
}

.action-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 23, 53, .42);
    backdrop-filter: blur(6px);
}

.action-modal-card {
    position: relative;
    width: min(440px, 100%);
    padding: 24px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #10264a;
    background: #fff;
    box-shadow: 0 22px 60px rgba(13, 33, 66, .24);
    outline: 0;
}

.action-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #51627c;
    background: #fff;
}

.action-modal-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf4ff;
    font-size: 20px;
}

.action-modal h2 {
    margin: 0 40px 6px 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.action-modal p {
    margin: 0 0 18px;
    color: #66718c;
    font-size: 13px;
}

.action-modal-form {
    display: grid;
    gap: 12px;
}

.action-modal-form label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.action-modal-form input,
.action-modal-form select,
.action-modal-form textarea {
    width: 100%;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #10264a;
    background: #fff;
    outline: 0;
    font: inherit;
    font-size: 13px;
}

.action-modal-form input:focus,
.action-modal-form select:focus,
.action-modal-form textarea:focus {
    border-color: #126bc8;
    box-shadow: 0 0 0 3px rgba(18, 107, 200, .12);
}

.action-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.action-modal-actions button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #126bc8;
    font-weight: 800;
}

.action-modal-actions .ghost-btn {
    border: 1px solid #dbe4f0;
    color: #475569;
    background: #fff;
}

@media (max-width: 1100px) {
    .emp-top-grid,
    .portal-summary-grid,
    .portal-app-grid {
        grid-template-columns: 1fr;
    }

    .emp-action-links {
        margin: 16px 0 0;
    }
}

@media (max-width: 700px) {
    .emp-portal {
        grid-template-columns: 1fr;
    }

    .emp-rail {
        position: static;
        width: auto;
        height: auto;
        grid-template-columns: repeat(4, 1fr);
    }

    .emp-main {
        margin-left: 0;
    }

    .emp-tabs {
        overflow-x: auto;
    }

    .emp-header {
        grid-template-columns: 1fr auto 34px 38px;
    }

    .emp-header > strong {
        display: none;
    }

    .emp-header-search {
        min-width: 0;
    }

    .task-tracker-badge { padding: 5px 9px; font-size: 11.5px; }
    .task-tracker-badge i { font-size: 12px; }
}

.attendance-card {
    grid-template-columns: 470px minmax(0, 1fr);
}

.circle-stat {
    width: 98px;
    height: 98px;
}

.circle-stat > div {
    width: 78px;
    height: 78px;
}

.circle-stat strong {
    font-size: 21px;
}

.party {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    right: 40px;
    color: #fff;
    background: linear-gradient(135deg, #ff9b29, #ff4f7b);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.module-wrap {
    padding: 26px;
}

.module-hero {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff, #f8fbff);
    box-shadow: var(--shadow);
}

.module-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #0d5cff;
    background: #eaf1ff;
    font-size: 24px;
}

.module-hero h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 850;
}

.module-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.module-hero button,
.module-tools button {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #12305f;
    background: #fff;
    font-weight: 750;
    font-size: 13px;
}

.module-hero button {
    color: #fff;
    border-color: #0d5cff;
    background: #0d5cff;
}

.module-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 13px;
}

.mini-stat > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #0d5cff;
    background: #eaf1ff;
    font-size: 20px;
}

.mini-stat small,
.module-side-list small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.mini-stat strong {
    display: block;
    font-size: 21px;
    line-height: 1.1;
}

.module-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.module-grid.is-single-panel {
    grid-template-columns: 1fr;
}

.module-tools {
    display: flex;
    gap: 8px;
}

.module-table {
    margin: 0;
    font-size: 13px;
}

.module-table th {
    color: #66718c;
    border-bottom-color: var(--line);
    font-size: 12px;
    font-weight: 800;
}

.module-table td {
    padding: 14px 8px;
    border-bottom-color: #edf2f8;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #0ca85a;
    background: #e9f9ef;
    font-size: 12px;
    font-weight: 800;
}

.module-side-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.module-side-list div {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid #edf2f8;
    border-radius: 12px;
    background: #fbfcff;
}

.module-side-list span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #0d5cff;
    background: #eaf1ff;
    font-weight: 850;
}

.module-side-list p {
    margin: 0;
    font-weight: 750;
}

.module-tabs {
    display: flex;
    gap: 28px;
    min-height: 46px;
    align-items: center;
    margin: -8px 0 18px;
    padding: 0 4px;
    border-bottom: 1px solid #dfe4ea;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.module-tabs::-webkit-scrollbar { display: none; }

.module-tabs button {
    position: relative;
    min-height: 46px;
    padding: 0;
    border: 0;
    color: #344561;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.module-tabs button.active {
    color: #061833;
}

[data-admin-panel].is-hidden,
.module-grid.is-hidden,
.module-feature-grid.is-hidden {
    display: none !important;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-admin-panel].panel-fade-in {
    animation: panelFadeIn .22s ease-out;
}

.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 16px;
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    color: #842029;
    font-size: 13.5px;
    font-weight: 700;
    animation: panelFadeIn .18s ease-out;
}
.bulk-action-bar #bulkSelectedCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: #842029;
    color: #fff;
    font-size: 12px;
}
.bulk-action-bar button { margin-left: auto; }
.bulk-action-bar button + button { margin-left: 0; }
input.bulk-row-cb,
#bulkSelectAll {
    width: 16px;
    height: 16px;
    accent-color: #0d6efd;
    cursor: pointer;
}

.module-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr) minmax(280px, .7fr);
    gap: 18px;
    margin-top: 18px;
}

.internal-feature-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}

.module-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-action-grid button {
    min-height: 86px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5ebf3;
    border-radius: 6px;
    color: #10264a;
    background: #fff;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
}

.module-action-grid span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 17px;
}

.module-action-grid .blue {
    color: #0d5cff;
    background: #eaf1ff;
}

.module-action-grid .green {
    color: #13a45a;
    background: #e9f9ef;
}

.module-action-grid .orange {
    color: #e87800;
    background: #fff3df;
}

.module-action-grid .purple {
    color: #743df2;
    background: #f0e9ff;
}

.module-workflow-list {
    display: grid;
    gap: 10px;
}

.module-workflow-list div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #edf2f8;
    border-radius: 6px;
    background: #fbfcff;
}

.module-workflow-list span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #0d5cff;
    background: #eaf1ff;
}

.module-workflow-list p,
.module-activity-card p {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
}

.module-workflow-list small,
.module-activity-card small {
    display: block;
    margin-top: 3px;
    color: #66718c;
    font-size: 12px;
    font-weight: 500;
}

.module-activity-card {
    display: grid;
    gap: 12px;
    align-content: start;
}

.module-activity-card > div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f8;
}

.module-activity-card > div:last-child {
    border-bottom: 0;
}

.module-activity-card > div > span {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #0d68cc;
}

.team-summary-page {
    display: grid;
    gap: 28px;
}

.team-alert-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: 20px;
}

.team-status-card {
    min-height: 128px;
    padding: 20px;
    border-radius: 3px;
    box-shadow: none;
}

.team-status-card h2,
.team-section-title {
    margin: 0 0 16px;
    color: #061833;
    font-size: 18px;
    font-weight: 500;
}

.team-empty-alert {
    padding: 11px 14px;
    border: 1px solid #f3bf66;
    border-radius: 3px;
    color: #7a4a00;
    background: #fff4d8;
    font-size: 13px;
}

.team-avatar-mini {
    display: inline-grid;
    gap: 5px;
    justify-items: center;
}

.team-avatar-mini span,
.team-cal-name i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #5fc1d0;
    font-style: normal;
    font-weight: 800;
}

.team-avatar-mini small {
    color: #25364f;
    font-size: 12px;
}

.team-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.team-metric {
    position: relative;
    min-height: 96px;
    padding: 22px 18px 16px 36px;
    border-radius: 3px;
    box-shadow: none;
}

.team-metric:before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    background: #5fc1d0;
}

.team-metric.pink:before {
    background: #ca6bc4;
}

.team-metric.green:before {
    background: #98b92b;
}

.team-metric.amber:before {
    background: #ffb528;
}

.team-metric span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
}

.team-metric strong {
    display: block;
    color: #061833;
    font-size: 28px;
    line-height: 1;
}

.team-metric a {
    position: absolute;
    right: 18px;
    bottom: 18px;
    color: #006bdc;
    font-size: 13px;
    text-decoration: none;
}

.team-calendar-card {
    padding: 20px 18px 24px;
    border-radius: 3px;
    box-shadow: none;
    overflow-x: auto;
}

.team-calendar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.team-calendar-head button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #0d68cc;
    font-size: 12px;
}

.team-calendar-head strong {
    font-size: 14px;
    font-weight: 500;
}

.team-calendar-table {
    min-width: 1140px;
}

.team-cal-row {
    display: grid;
    grid-template-columns: 260px repeat(30, 26px);
    align-items: center;
    min-height: 36px;
    column-gap: 5px;
}

.team-cal-row + .team-cal-row {
    border-top: 1px solid #eef1f5;
}

.team-cal-days {
    min-height: 32px;
}

.team-cal-days b {
    position: relative;
    color: #061833;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.team-cal-days b:nth-child(2):after,
.team-cal-days b:nth-child(3):after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0d68cc;
    transform: translateX(-50%);
}

.team-cal-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #061833;
    font-size: 13px;
}

.team-cal-name i {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.team-cal-row:nth-child(3) .team-cal-name i {
    background: #7ebd58;
}

.team-cal-row small {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #41506a;
    font-size: 11px;
}

.team-cal-row small.weekly {
    color: #fff;
    background: #f7bb26;
    font-weight: 800;
}

.team-cal-row small.paid {
    color: #fff;
    background: #63c3d1;
    font-weight: 800;
}

.team-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px 18px;
    margin-top: 22px;
    color: #53617c;
    font-size: 12px;
}

.team-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.team-legend i {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #9b88cb;
}

.team-legend .purple i { background: #c86ec0; }
.team-legend .cyan i { background: #63c3d1; }
.team-legend .sand i { background: #c7bda3; }
.team-legend .red i { background: #e97979; }
.team-legend .yellow i { background: #f7bb26; }
.team-legend .olive i { background: #93b52e; }
.team-legend .blue-dot i,
.team-legend .red-dot i,
.team-legend .purple-dot i {
    width: 4px;
    height: 4px;
}
.team-legend .blue-dot i { background: #0d68cc; }
.team-legend .red-dot i { background: #ef4d4d; }
.team-legend .purple-dot i { background: #9b88cb; }

.peer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.peer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 18px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6ebf3;
    text-align: center;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.peer-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(135deg, #eaf1ff 0%, #f5f9ff 60%, #ffffff 100%);
    z-index: 0;
}
.peer-card:hover {
    border-color: #cdd9ee;
    box-shadow: 0 12px 26px rgba(15, 30, 60, .08);
    transform: translateY(-2px);
}

.peer-status {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    background: #eafaf0;
    color: #158a4f;
}

.peer-avatar {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(15, 30, 60, .14), 0 0 0 1px rgba(15, 30, 60, .04);
    margin-top: 6px;
}
.peer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.peer-avatar.initial {
    display: grid;
    place-items: center;
    color: #fff;
    background: #2f71ff;
    font-size: 26px;
    font-weight: 700;
}

.peer-info {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}
.peer-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #0f1e3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peer-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3edff;
    color: #5c2bcc;
    font-size: 11.5px;
    font-weight: 600;
    max-width: 100%;
}
.peer-role i { font-size: 11px; }
.peer-role span,
.peer-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.peer-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #4d5b73;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
}
.peer-email i { color: #2f71ff; font-size: 13px; flex: 0 0 13px; }
.peer-email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-email:hover { color: #2f71ff; }

.peer-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed #e8edf3;
    width: 100%;
    justify-content: center;
}
.peer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #d6e1f5;
    background: #fff;
    color: #2f71ff;
    text-decoration: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}
.peer-btn:hover {
    border-color: #2f71ff;
    background: #2f71ff;
    color: #fff;
    transform: translateY(-1px);
}
.peer-btn i { font-size: 14px; }

.finance-panel {
    display: none;
}

.finance-panel.active {
    display: block;
}

.finance-summary-panel {
    padding-top: 14px;
}

.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.finance-card {
    min-height: 266px;
    padding: 0;
    border: 1px solid #dfe4ea;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
}

.finance-card h2 {
    margin: 0;
    padding: 18px 16px;
    border-bottom: 1px solid #e1e5ea;
    color: #061833;
    font-size: 16px;
    font-weight: 500;
}

.finance-card-body {
    padding: 26px 16px 18px;
}

.finance-field small {
    display: block;
    margin-bottom: 6px;
    color: #53617c;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.finance-field strong {
    display: block;
    color: #061833;
    font-size: 13px;
    font-weight: 500;
}

.finance-field.full {
    margin-bottom: 24px;
}

.finance-card h3 {
    margin: 0 0 18px;
    color: #061833;
    font-size: 16px;
    font-weight: 500;
}

.finance-bank-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 46px;
}

.identity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e1e5ea;
}

.identity-row strong {
    color: #061833;
    font-size: 13px;
    font-weight: 700;
}

.flag-india {
    width: 20px;
    height: 14px;
    display: grid;
    border: 1px solid #e1e5ea;
}

.flag-india i,
.flag-india b,
.flag-india em {
    display: block;
}

.flag-india i {
    background: #ff8a32;
}

.flag-india b {
    position: relative;
    background: #fff;
}

.flag-india b:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #174a9c;
    transform: translate(-50%, -50%);
}

.flag-india em {
    background: #178f45;
}

.verified-pill {
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff;
    background: #70bd58;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-muted-line {
    margin: 18px 0 12px;
    color: #061833;
    font-size: 13px;
}

.tax-warning {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 20px;
    padding: 10px 14px;
    border: 1px solid #f3bf66;
    border-radius: 3px;
    color: #704200;
    background: #fff4d8;
    font-size: 13px;
    line-height: 1.55;
}

.tax-warning i {
    color: #ffad24;
    font-size: 17px;
}

.tax-warning a {
    color: #006bdc;
    text-decoration: none;
}

.finance-pay-card,
.finance-tax-card {
    max-width: 1120px;
}

.finance-pay-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 22px;
    align-items: center;
    padding: 22px 16px;
    border-bottom: 1px solid #e1e5ea;
}

.finance-pay-head small,
.tax-status-box small {
    display: block;
    color: #53617c;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.finance-pay-head strong,
.tax-status-box strong {
    display: block;
    margin-top: 6px;
    color: #061833;
    font-size: 16px;
    font-weight: 500;
}

.finance-pay-head a,
.tax-status-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #0d68cc;
    border-radius: 3px;
    color: #fff;
    background: #0d68cc;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.finance-salary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 18px 16px 24px;
}

.finance-salary-grid h3,
.finance-tax-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 500;
}

.finance-salary-grid p,
.tax-list p {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
    color: #53617c;
    font-size: 13px;
}

.finance-salary-grid p:last-child,
.tax-list p:last-child {
    border-bottom: 0;
}

.finance-salary-grid p strong,
.tax-list p strong {
    color: #061833;
    font-weight: 500;
}

.finance-tax-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    padding: 22px 16px 24px;
}

.tax-status-box {
    padding: 18px;
    border: 1px solid #dfe4ea;
    border-radius: 3px;
    background: #fbfcff;
}

.tax-status-box span {
    display: block;
    margin: 8px 0 18px;
    color: #53617c;
    font-size: 13px;
}

.tax-list {
    border: 1px solid #e1e5ea;
    border-radius: 3px;
    padding: 4px 16px;
}

.org-panel,
.org-employee-panel {
    display: none;
}

.org-panel.active,
.org-employee-panel.active {
    display: block;
}

.org-subtabs {
    display: flex;
    gap: 44px;
    height: 40px;
    align-items: stretch;
    margin: -26px -20px 24px;
    padding: 0 20px;
    border-bottom: 1px solid #dfe4ea;
    background: #fff;
}

.org-subtabs.single {
    margin-bottom: 26px;
}

.org-subtabs button {
    position: relative;
    border: 0;
    color: #344561;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
}

.org-subtabs button.active {
    color: #061833;
}

.org-page-title {
    margin: 0 0 22px;
    color: #061833;
    font-size: 20px;
    font-weight: 600;
}

.org-page-copy {
    margin: -14px 0 22px;
    color: #4b5870;
    font-size: 13px;
}

.org-filter-card,
.org-person-card,
.org-doc-folders,
.org-doc-head,
.org-tree-card {
    border-radius: 3px;
    box-shadow: none;
}

.org-filter-card {
    padding: 0;
    margin-bottom: 20px;
}

.org-filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 200px)) minmax(220px, 1fr) 48px;
    min-height: 48px;
    border-bottom: 1px solid #e1e5ea;
}

.org-filter-row button,
.org-filter-row label,
.org-filter-row a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid #e1e5ea;
    color: #53617c;
    background: #fff;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
}

.org-filter-row button {
    justify-content: space-between;
}

.org-filter-row button small {
    display: block;
    color: #53617c;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.org-filter-row label {
    gap: 12px;
}

.org-filter-row input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #061833;
    font-size: 13px;
}

.org-filter-row a {
    justify-content: center;
    border-right: 0;
    font-size: 18px;
}

.org-showing {
    padding: 16px 20px;
    color: #53617c;
    font-size: 12px;
    text-align: right;
}

.org-employee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.org-person-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 18px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6ebf3;
    text-align: center;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.org-person-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(135deg, #e8f5ee 0%, #f3fbf6 60%, #ffffff 100%);
    z-index: 0;
}
.org-person-card:hover {
    border-color: #c6e5d3;
    box-shadow: 0 12px 26px rgba(15, 30, 60, .08);
    transform: translateY(-2px);
}

.org-person-avatar {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: #1ea25e;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(15, 30, 60, .14), 0 0 0 1px rgba(15, 30, 60, .04);
    margin-top: 6px;
    font-size: 26px;
    font-weight: 500;
    overflow: hidden;
}

.org-person-avatar.initial-cyan {
    background: #5ec1cf;
}

.org-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-person-info {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}

.org-person-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #0f1e3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-person-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f5ee;
    color: #157a44;
    font-size: 11.5px;
    font-weight: 600;
    max-width: 100%;
}
.org-person-role i { font-size: 11px; }

.org-person-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
}
.org-person-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 11.5px;
    color: #4d5b73;
    font-weight: 500;
}
.org-person-meta i { font-size: 12px; color: #8590a8; flex: 0 0 12px; }

.org-person-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #4d5b73;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
}
.org-person-email i { color: #2f71ff; font-size: 13px; flex: 0 0 13px; }
.org-person-email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-person-email:hover { color: #2f71ff; }

.org-person-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed #e8edf3;
    width: 100%;
    justify-content: center;
}

/* legacy support — unused dummy button selector */
.org-person-info h3 button {
    display: none;
    font-size: 10px;
}

.org-person-info p {
    margin: 0 0 14px;
    color: #061833;
    font-size: 12px;
}

.org-person-info small {
    display: block;
    margin-top: 9px;
    color: #344561;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-tree-card {
    min-height: 430px;
    padding: 28px;
    overflow-x: auto;
}

.org-node {
    position: relative;
    z-index: 1;
    min-width: 178px;
    padding: 14px 16px;
    border: 1px solid #dfe4ea;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff, #fbfcff);
    box-shadow: 0 8px 18px rgba(15, 33, 60, .06);
    text-align: center;
}

.org-node.ceo {
    border-color: #bcd6ff;
    background: #f5f9ff;
}

.org-node.compact {
    min-width: 166px;
    padding: 12px 14px;
}

.org-node > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    color: #fff;
    background: #5ec1cf;
    font-size: 12px;
    font-weight: 800;
}

.org-node.ceo > span {
    background: #0d68cc;
}

.org-node strong,
.org-node small {
    display: block;
}

.org-node small {
    margin-top: 4px;
    color: #53617c;
}

.org-chart-tree {
    min-width: 930px;
    padding: 6px 0 20px;
}

.org-chart-tree ul {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 32px 0 0;
    list-style: none;
}

.org-chart-tree > ul {
    padding-top: 0;
}

.org-chart-tree li {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 0 10px;
}

.org-chart-tree li:before,
.org-chart-tree li:after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 24px;
    border-top: 1px solid #cad4e1;
}

.org-chart-tree li:before {
    right: 50%;
}

.org-chart-tree li:after {
    left: 50%;
    border-left: 1px solid #cad4e1;
}

.org-chart-tree li:only-child:before,
.org-chart-tree li:only-child:after {
    display: none;
}

.org-chart-tree li:first-child:before,
.org-chart-tree li:last-child:after {
    border-top: 0;
}

.org-chart-tree li:last-child:before {
    border-right: 1px solid #cad4e1;
    border-radius: 0 4px 0 0;
}

.org-chart-tree li:first-child:after {
    border-radius: 4px 0 0 0;
}

.org-chart-tree ul ul:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 32px;
    background: #cad4e1;
}

.org-chart-tree > ul > li:before,
.org-chart-tree > ul > li:after {
    display: none;
}

.org-doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
}

.org-doc-folders {
    align-self: start;
    padding: 10px;
}

.org-doc-folders label {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid #dfe4ea;
    border-radius: 3px;
    color: #71809a;
}

.org-doc-folders input {
    width: 100%;
    border: 0;
    outline: 0;
    font-size: 13px;
}

.org-doc-folders button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border: 0;
    border-radius: 3px;
    color: #061833;
    background: #e9f3fc;
    text-align: left;
    font-size: 12px;
}

.org-doc-folders button i {
    color: #0d68cc;
    font-size: 18px;
}

.org-doc-folders button small {
    display: block;
    color: #53617c;
}

.org-doc-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 74px;
    margin-bottom: 12px;
    padding: 16px;
}

.org-doc-head > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #5ec1cf;
    font-size: 18px;
}

.org-doc-head strong,
.org-doc-head small {
    display: block;
}

.org-doc-head strong {
    color: #061833;
    font-size: 16px;
    font-weight: 600;
}

.org-doc-head small {
    margin-top: 4px;
    color: #53617c;
    font-size: 12px;
}

.org-doc-table-card {
    margin-top: 0;
    border-radius: 3px;
    box-shadow: none;
}

.org-doc-table {
    min-width: 980px;
}

.org-doc-table th {
    height: 32px;
}

.org-doc-table td {
    height: 64px;
}

.org-doc-table a {
    color: #006bdc;
    text-decoration: none;
    font-weight: 500;
}

.org-doc-pager {
    display: flex;
    justify-content: flex-end;
    gap: 52px;
    padding: 18px 28px;
    color: #061833;
    border-top: 1px solid #e1e5ea;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .stats-grid,
    .module-stats,
    .module-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-wrap {
        grid-template-columns: 1fr;
    }

    .dashboard-right {
        grid-template-columns: 1fr;
    }

    .module-feature-grid,
    .internal-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .team-alert-grid,
    .team-metric-grid,
    .peer-grid,
    .finance-summary-grid,
    .org-employee-grid {
        grid-template-columns: 1fr 1fr;
    }

    .finance-bank-grid,
    .finance-pay-head,
    .finance-salary-grid,
    .finance-tax-layout,
    .org-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .org-doc-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-shell,
    .module-stats,
    .module-grid,
    .module-hero {
        grid-template-columns: 1fr;
    }

    .module-feature-grid,
    .internal-feature-grid,
    .module-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-wrap {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .attendance-card {
        grid-template-columns: 1fr;
    }

    .team-alert-grid,
    .team-metric-grid,
    .peer-grid,
    .finance-summary-grid,
    .finance-bank-grid,
    .finance-pay-head,
    .finance-salary-grid,
    .finance-tax-layout,
    .org-employee-grid,
    .org-filter-row {
        grid-template-columns: 1fr;
    }

    .org-subtabs {
        gap: 22px;
        overflow-x: auto;
    }

    .org-filter-row button,
    .org-filter-row label,
    .org-filter-row a {
        min-height: 44px;
        border-right: 0;
        border-bottom: 1px solid #e1e5ea;
    }

    .org-person-card {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .org-person-avatar {
        width: 64px;
        height: 64px;
        font-size: 22px;
    }

    .team-calendar-card {
        padding: 16px 12px 20px;
    }

    .team-calendar-table {
        min-width: 980px;
    }

    .team-cal-row {
        grid-template-columns: 220px repeat(30, 24px);
        column-gap: 4px;
    }

    .peer-card {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .peer-avatar {
        width: 68px;
        height: 68px;
    }

    .peer-tags {
        grid-column: 2;
    }
}

@media (max-width: 640px) {
    .stats-grid,
    .module-stats {
        grid-template-columns: 1fr;
    }
}

/* Employee portal overflow guard */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.emp-portal,
.emp-main,
.emp-tab-panel,
.employee-home-layout,
.employee-home-left,
.employee-home-feed,
.emp-card,
.home-tile {
    min-width: 0;
}

.emp-header {
    grid-template-columns: 170px minmax(260px, 400px) minmax(0, 1fr) auto 34px 38px;
}

.emp-header-search,
.emp-header-search input {
    min-width: 0;
}

.emp-tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.emp-tabs::-webkit-scrollbar {
    height: 0;
}

.employee-home-layout {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 32px);
    align-items: start;
    overflow: visible;
}

.employee-home-tree {
    min-width: 0;
    overflow: hidden;
}

.employee-home-tree:before {
    right: 0;
    max-width: 100%;
}

.emp-table-card {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.emp-attendance-table {
    min-width: 900px;
}

.leave-history-table {
    min-width: 1280px;
}

.table-toolbar,
.leave-filter-row,
.other-leaves {
    min-width: 0;
}

@media (max-width: 1300px) {
    .employee-home-layout {
        grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .employee-home-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .emp-header {
        grid-template-columns: minmax(0, 1fr) auto 34px 38px;
    }

    .emp-header > strong {
        display: none;
    }
}

/* Admin shell aligned with employee portal */
.app-shell {
    display: block;
    background: #f4f6f8;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    width: 100px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #082235;
    overflow: hidden;
    transition: transform .2s ease;
}

body.sidebar-closed .sidebar {
    transform: translateX(-100%);
}

.logo {
    height: 50px;
    min-height: 50px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0;
    background: #075aa9;
}

.logo span {
    font-size: 25px;
    line-height: 1;
}

.logo i {
    width: 18px;
    height: 14px;
    background: conic-gradient(from 210deg, #fff, #b9dbff, #fff);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    gap: 0;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-nav a {
    position: relative;
    min-height: 62px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: 0 6px;
    border-radius: 0;
    color: #8bb0c8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.12;
    text-align: center;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: #fff;
    background: #123f5e;
    box-shadow: none;
    transform: none;
}

.sidebar-nav a.active:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: #2d9cff;
}

.sidebar-nav i {
    width: auto;
    font-size: 18px;
}

.ai-card {
    position: static;
    margin: 0;
    padding: 8px 8px 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0;
    background: #082235;
    box-shadow: none;
    text-align: center;
}

.ai-card strong,
.ai-card p,
.bot-face {
    display: none;
}

.ai-logout {
    min-height: 58px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #b6d6e9;
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.ai-logout i {
    font-size: 19px;
}

.ai-logout:hover,
.ai-logout:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, .2);
    background: #123f5e;
    outline: 0;
}

.main-content {
    min-width: 0;
    margin-left: 100px;
    transition: margin-left .2s ease;
}

body.sidebar-closed .main-content {
    margin-left: 0;
}

.topbar {
    height: 50px;
    padding: 0 14px 0 16px;
    gap: 16px;
    color: #fff;
    background: #126bc8;
    box-shadow: none;
}

.menu-btn {
    color: #fff;
    background: transparent;
    font-size: 22px;
}

.search-box {
    height: 36px;
    max-width: 480px;
    border: 0;
    border-radius: 999px;
    color: #66718c;
    background: #fff;
    box-shadow: none;
}

.search-box input {
    color: #25364f;
    font-size: 12px;
}

.top-actions {
    margin-left: auto;
}

.icon-btn {
    width: 34px;
    height: 34px;
    color: #fff;
    border: 0;
    background: rgba(255, 255, 255, .08);
    font-size: 17px;
    box-shadow: none;
}

.icon-btn.notification span {
    top: -3px;
    right: -3px;
}

.divider {
    background: rgba(255, 255, 255, .28);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, .45);
}

.user-meta strong,
.user-meta span,
.plain-chevron,
.logout-link {
    color: #fff;
}

.logout-link {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    text-decoration: none;
    font-size: 12px;
}

.account-dropdown {
    position: relative;
}

.account-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.account-trigger:hover,
.account-trigger.show {
    background: rgba(255, 255, 255, .2);
}

.account-trigger .user-meta {
    text-align: left;
    line-height: 1.1;
}

.account-trigger .user-meta strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger .user-meta span {
    display: block;
    max-width: 150px;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger > i {
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
}

.account-menu {
    width: 286px;
    padding: 10px;
    margin-top: 10px !important;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11, 33, 79, .16);
}

.account-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    border-left: 1px solid #dfe6f1;
    border-top: 1px solid #dfe6f1;
    background: #fff;
    transform: rotate(45deg);
}

.account-menu-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 8px 12px;
    border-bottom: 1px solid #edf1f7;
}

.account-menu-avatar {
    width: 42px;
    height: 42px;
    border: 2px solid #ffe0ec;
    border-radius: 50%;
    object-fit: cover;
}

.account-menu-head strong,
.account-menu-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-head strong {
    color: #061833;
    font-size: 15px;
    font-weight: 900;
}

.account-menu-head span {
    margin-top: 2px;
    color: #66718c;
    font-size: 12px;
    font-weight: 700;
}

.account-menu-list {
    padding: 8px 0;
}

.account-menu-footer {
    padding-top: 8px;
    border-top: 1px solid #edf1f7;
}

.account-menu-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.account-menu-item i {
    width: 18px;
    color: #152a4d;
    font-size: 15px;
    text-align: center;
}

.account-menu-item:hover {
    color: #0d4ea6;
    background: #f3f7fd;
}

.account-menu-item:hover i {
    color: #0d4ea6;
}

.account-menu-danger,
.account-menu-danger i,
.account-menu-danger:hover,
.account-menu-danger:hover i {
    color: #ef3444;
}

.dashboard-wrap {
    padding: 24px 20px;
}

.admin-options-card {
    grid-column: 1 / -1;
}

.admin-option-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}

.admin-option-grid a {
    min-height: 92px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 12px 8px;
    border: 1px solid #e5ebf3;
    border-radius: 6px;
    color: #10264a;
    background: #fff;
    text-align: center;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.admin-option-grid a:hover {
    border-color: #bcd6ff;
    box-shadow: 0 10px 22px rgba(15, 33, 60, .08);
    transform: translateY(-1px);
}

.admin-option-grid span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
}

.admin-option-grid span.blue {
    color: #0d5cff;
    background: #eaf1ff;
}

.admin-option-grid span.green {
    color: #13a45a;
    background: #e9f9ef;
}

.admin-option-grid span.orange {
    color: #e87800;
    background: #fff3df;
}

.admin-option-grid span.purple {
    color: #743df2;
    background: #f0e9ff;
}

.admin-option-grid span.red {
    color: #ff334b;
    background: #ffe9ed;
}

.admin-option-grid strong {
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1300px) {
    .admin-option-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        width: 76px;
        top: 50px;
        height: calc(100vh - 50px);
        height: calc(100dvh - 50px);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 16px 0 30px rgba(8, 34, 53, .22);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-nav a {
        min-height: 58px;
        font-size: 10px;
    }

    .main-content {
        margin-left: 0;
    }

    .topbar {
        gap: 8px;
        z-index: 40;
    }

    .search-box {
        max-width: none;
    }

    .top-actions .logout-link,
    .top-actions .user-meta,
    .top-actions .plain-chevron {
        display: none;
    }

    .admin-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Login page matched to the modern Keka reference */
body.login-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 28px clamp(22px, 6vw, 130px);
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 125, 255, .12), transparent 28%),
        radial-gradient(circle at 88% 28%, rgba(10, 86, 188, .09), transparent 30%),
        #f4f8ff;
    overflow-x: hidden;
}

body.login-body .login-shell {
    width: min(1640px, 100%);
    min-height: 800px;
    display: grid;
    grid-template-columns: 1.08fr .97fr;
    overflow: hidden;
    border: 1px solid #e8eef8;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(27, 52, 109, .16);
}

body.login-body .login-brand {
    position: relative;
    min-height: 800px;
    display: grid;
    align-content: start;
    padding: 78px 86px 52px;
    color: #fff;
    background:
        radial-gradient(circle at 94% 2%, rgba(51, 123, 255, .2), transparent 38%),
        radial-gradient(circle at 78% 95%, rgba(31, 102, 255, .32), transparent 44%),
        linear-gradient(150deg, #061148 0%, #061d67 52%, #0537b3 100%);
    overflow: hidden;
}

body.login-body .login-brand:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
    background:
        radial-gradient(circle at 84% 10%, rgba(255, 255, 255, .38) 0 1px, transparent 2px) 0 0 / 18px 18px,
        repeating-radial-gradient(circle at 62% -8%, transparent 0 132px, rgba(255, 255, 255, .11) 133px 134px);
}

body.login-body .login-brand:after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -22%;
    height: 52%;
    opacity: .32;
    background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 24px, rgba(80, 160, 255, .28) 25px 26px);
}

body.login-body .login-brand > * {
    position: relative;
    z-index: 1;
}

body.login-body .login-brand-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 48px;
}

body.login-body .login-brand-top .logo {
    height: auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    margin: 0;
    color: #fff;
    background: transparent;
}

body.login-body .login-brand-top .logo span {
    font-size: 42px;
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.05em;
}

body.login-body .login-brand-top .logo i {
    width: 30px;
    height: 25px;
    background: linear-gradient(135deg, #70c8ff, #2f78ff);
    clip-path: polygon(0 68%, 100% 0, 76% 100%);
}

body.login-body .login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    color: #eef6ff;
    background: rgba(48, 125, 255, .32);
    font-size: 15px;
    font-weight: 850;
}

body.login-body .login-brand-copy {
    max-width: 630px;
}

body.login-body .login-brand h1 {
    max-width: 630px;
    margin: 36px 0 26px;
    color: #fff;
    font-size: clamp(42px, 3.15vw, 62px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
}

body.login-body .login-brand h1 span {
    display: block;
    color: #52b8ff;
}

body.login-body .login-brand p {
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 19px;
    line-height: 1.58;
}

body.login-body .login-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: min(530px, 100%);
    margin-top: 28px;
}

body.login-body .login-stats article {
    min-height: 154px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 22px 28px;
    border: 1px solid rgba(99, 154, 255, .32);
    border-radius: 14px;
    background: rgba(22, 65, 166, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

body.login-body .login-stats i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 13px;
    color: #cfe5ff;
    background: #1459dc;
    font-size: 23px;
}

body.login-body .login-stats article:nth-child(2) i {
    background: #6d32dc;
}

body.login-body .login-stats article:nth-child(3) i {
    background: #139578;
}

body.login-body .login-stats strong {
    color: #fff;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

body.login-body .login-stats span {
    color: #fff;
    font-size: 15px;
    font-weight: 750;
}

body.login-body .login-art {
    position: absolute;
    left: 280px;
    right: 100px;
    bottom: 62px;
    height: 180px;
    z-index: 1;
    pointer-events: none;
}

body.login-body .art-card {
    position: absolute;
    border: 1px solid rgba(117, 164, 255, .22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(88, 116, 255, .25), rgba(23, 54, 151, .32));
    box-shadow: 0 24px 46px rgba(0, 0, 0, .22);
}

body.login-body .art-chart {
    left: 0;
    bottom: 0;
    width: 280px;
    height: 118px;
    transform: rotate(26deg);
}

body.login-body .art-chart span {
    position: absolute;
    bottom: 30px;
    width: 18px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #4d86ff, #123bd6);
}

body.login-body .art-chart span:nth-child(1) {
    left: 46px;
    height: 42px;
}

body.login-body .art-chart span:nth-child(2) {
    left: 78px;
    height: 58px;
}

body.login-body .art-chart span:nth-child(3) {
    left: 110px;
    height: 72px;
}

body.login-body .art-chart span:nth-child(4) {
    left: 142px;
    height: 84px;
}

body.login-body .art-chart i {
    position: absolute;
    right: 34px;
    bottom: 30px;
    width: 64px;
    height: 64px;
    border: 18px solid #435cff;
    border-radius: 50%;
}

body.login-body .art-list {
    right: 0;
    bottom: 22px;
    width: 230px;
    height: 148px;
    padding: 36px 26px;
    transform: rotate(25deg);
}

body.login-body .art-list p {
    height: 13px;
    margin: 0 0 17px;
    border-radius: 999px;
    background: rgba(95, 135, 255, .34);
}

body.login-body .art-list p:nth-child(1) {
    width: 48%;
}

body.login-body .art-list p:nth-child(2) {
    width: 82%;
}

body.login-body .art-list p:nth-child(3) {
    width: 68%;
}

body.login-body .login-card {
    position: relative;
    display: grid;
    align-content: start;
    padding: 52px 72px 48px;
    background: #fff;
}

body.login-body .language-btn {
    position: absolute;
    top: 36px;
    right: 42px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid #dce5f2;
    border-radius: 10px;
    color: #081746;
    background: #fff;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(15, 33, 60, .04);
}

body.login-body .login-card-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    padding-top: 0;
}

body.login-body .login-card-head > span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    color: #1359ff;
    background: #eaf2ff;
    font-size: 23px;
}

body.login-body .login-card-head > div {
    grid-column: 1 / -1;
}

body.login-body .login-card h2 {
    margin: 0 0 12px;
    color: #07124a;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

body.login-body .login-card p {
    max-width: 460px;
    margin: 0;
    color: #7381a4;
    font-size: 16px;
    line-height: 1.45;
}

body.login-body .login-card p strong {
    color: #075cff;
}

body.login-body .login-error {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #ffd0da;
    border-radius: 8px;
    color: #bf1f35;
    background: #ffe8ed;
    font-weight: 800;
}

body.login-body .login-card form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

body.login-body .login-card label {
    display: grid;
    gap: 9px;
    color: #53628a;
    font-size: 14px;
    font-weight: 850;
}

body.login-body .login-field {
    height: 50px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    align-items: center;
    border: 1px solid #cbd7e8;
    border-radius: 7px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.login-body .login-field:focus-within {
    border-color: #155cff;
    box-shadow: 0 0 0 4px rgba(21, 92, 255, .1);
}

body.login-body .login-field i {
    color: #23335f;
    text-align: center;
    font-size: 17px;
}

body.login-body .login-field i:last-child {
    color: #6d7896;
}

body.login-body .login-field input {
    width: 100%;
    height: 100%;
    padding: 0 8px;
    border: 0;
    outline: 0;
    color: #06133f;
    background: transparent;
    font-weight: 650;
}

body.login-body .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: -2px;
}

body.login-body .login-options label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
    color: #07124a;
    font-size: 14px;
    font-weight: 800;
}

body.login-body .login-options input {
    width: 20px;
    height: 20px;
    accent-color: #155cff;
}

body.login-body .login-options a {
    color: #075cff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

body.login-body .login-card form > button {
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: #1359f5;
    box-shadow: 0 10px 18px rgba(19, 89, 245, .18);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

body.login-body .demo-title {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    margin-top: 32px;
    padding-top: 0;
    border-top: 0;
    color: #687799;
}

body.login-body .demo-title:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 1px;
    background: #dce5f2;
}

body.login-body .demo-title span,
body.login-body .demo-title small {
    position: relative;
    z-index: 1;
    padding: 0 24px;
    background: #fff;
}

body.login-body .demo-title span {
    color: #617099;
    font-size: 17px;
    font-weight: 850;
}

body.login-body .demo-title small {
    color: #617099;
    font-size: 14px;
}

body.login-body .demo-users {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

body.login-body .demo-users button {
    min-height: 47px;
    display: grid;
    grid-template-columns: 34px minmax(130px, 1fr) minmax(150px, 1fr) 26px;
    align-items: center;
    gap: 14px;
    padding: 6px 13px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #07124a;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 33, 60, .025);
}

body.login-body .demo-users button:hover {
    border-color: #b9cef4;
    background: #f8fbff;
}

body.login-body .demo-users button > i:first-child {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0a49ba;
    background: #eef5ff;
    font-size: 16px;
}

body.login-body .demo-users strong {
    min-width: 0;
    overflow: hidden;
    color: #07124a;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.login-body .demo-users small {
    min-width: 0;
    overflow: hidden;
    color: #6b789c;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.login-body .demo-users button > i:last-child {
    color: #43547d;
    font-size: 18px;
}

body.login-body .login-footer {
    width: min(1500px, 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    color: #6b789c;
    font-size: 14px;
}

body.login-body .login-footer span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.login-body .login-footer span:first-child i {
    color: #155cff;
}

body.login-body .login-footer nav {
    display: flex;
    justify-content: flex-start;
    gap: 34px;
}

body.login-body .login-footer a {
    color: #075cff;
    text-decoration: none;
    font-weight: 750;
}

@media (max-width: 1180px) {
    body.login-body {
        padding: 18px;
    }

    body.login-body .login-shell {
        grid-template-columns: 1fr;
    }

    body.login-body .login-brand,
    body.login-body .login-shell {
        min-height: 0;
    }

    body.login-body .login-brand {
        padding: 46px;
    }

    body.login-body .login-art {
        display: none;
    }

    body.login-body .login-card {
        padding: 52px 46px;
    }

    body.login-body .login-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 680px) {
    body.login-body {
        padding: 0;
        gap: 0;
        background: #fff;
    }

    body.login-body .login-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.login-body .login-brand {
        padding: 30px 22px;
    }

    body.login-body .login-brand h1 {
        font-size: 35px;
    }

    body.login-body .login-brand p {
        font-size: 16px;
    }

    body.login-body .login-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.login-body .login-stats article {
        min-height: 86px;
        grid-template-columns: 48px 1fr;
        align-items: center;
        align-content: center;
    }

    body.login-body .login-stats i {
        grid-row: span 2;
        margin: 0;
    }

    body.login-body .login-card {
        padding: 30px 20px 34px;
    }

    body.login-body .language-btn {
        position: static;
        justify-self: end;
        margin-bottom: 22px;
    }

    body.login-body .login-card h2 {
        font-size: 30px;
    }

    body.login-body .login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    body.login-body .demo-users button {
        grid-template-columns: 34px minmax(0, 1fr) 24px;
    }

    body.login-body .demo-users small {
        grid-column: 2;
    }

    body.login-body .demo-users button > i:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    body.login-body .login-footer {
        display: none;
    }
}

/* Exact screenshot alignment pass */
@media (min-width: 1181px) {
    body.login-body {
        justify-content: flex-start;
        gap: 18px;
        padding: 0;
        background:
            radial-gradient(circle at 9% 8%, rgba(68, 121, 255, .16), transparent 30%),
            radial-gradient(circle at 94% 23%, rgba(22, 91, 202, .08), transparent 34%),
            #f4f8ff;
    }

    body.login-body .login-shell {
        width: 100%;
        height: calc(100vh - 52px);
        min-height: 760px;
        grid-template-columns: minmax(620px, 52vw) minmax(520px, 1fr);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.login-body .login-brand {
        min-height: 0;
        height: 100%;
        padding: 76px 82px 50px;
        background:
            radial-gradient(circle at 87% 5%, rgba(56, 119, 255, .18), transparent 30%),
            radial-gradient(circle at 72% 96%, rgba(27, 83, 255, .4), transparent 45%),
            linear-gradient(151deg, #071253 0%, #061e6c 55%, #053cb9 100%);
    }

    body.login-body .login-brand-top {
        margin-bottom: 55px;
    }

    body.login-body .login-brand-top .logo span {
        font-size: 42px;
    }

    body.login-body .login-eyebrow {
        min-height: 42px;
        padding: 0 17px;
        border-radius: 9px;
        font-size: 15px;
    }

    body.login-body .login-brand h1 {
        max-width: 630px;
        margin: 34px 0 24px;
        font-size: 52px;
        line-height: 1.17;
        font-weight: 900;
    }

    body.login-body .login-brand p {
        max-width: 460px;
        font-size: 19px;
        line-height: 1.52;
    }

    body.login-body .login-stats {
        width: 522px;
        gap: 28px;
        margin-top: 27px;
    }

    body.login-body .login-stats article {
        min-height: 152px;
        padding: 22px 26px;
        border-radius: 14px;
    }

    body.login-body .login-art {
        left: 235px;
        right: 102px;
        bottom: 48px;
        height: 190px;
        opacity: .82;
    }

    body.login-body .art-chart {
        width: 292px;
        height: 125px;
    }

    body.login-body .art-list {
        width: 230px;
        height: 150px;
        right: 12px;
        bottom: 31px;
    }

    body.login-body .login-card {
        height: 100%;
        padding: 48px 66px 42px;
        overflow: hidden;
    }

    body.login-body .language-btn {
        top: 30px;
        right: 38px;
        height: 44px;
        border-radius: 11px;
    }

    body.login-body .login-card-head {
        margin-top: 0;
    }

    body.login-body .login-card-head > span {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    body.login-body .login-card h2 {
        margin-bottom: 13px;
        font-size: 34px;
    }

    body.login-body .login-card p {
        max-width: 480px;
        font-size: 16px;
    }

    body.login-body .login-card form {
        gap: 17px;
        margin-top: 27px;
    }

    body.login-body .login-card label {
        gap: 8px;
        font-size: 14px;
    }

    body.login-body .login-field,
    body.login-body .login-card form > button {
        height: 48px;
    }

    body.login-body .login-options {
        margin: -1px 0 0;
    }

    body.login-body .demo-title {
        gap: 7px;
        margin-top: 32px;
    }

    body.login-body .demo-title:before {
        top: 10px;
    }

    body.login-body .demo-users {
        gap: 8px;
        margin-top: 14px;
    }

    body.login-body .demo-users button {
        min-height: 46px;
        grid-template-columns: 34px minmax(170px, 1fr) minmax(190px, 1fr) 24px;
        padding: 6px 13px;
        border-radius: 8px;
    }

    body.login-body .login-footer {
        width: 100%;
        padding: 0 70px;
        min-height: 34px;
        grid-template-columns: 1fr auto 1fr;
        font-size: 14px;
    }
}

/* ============== HR app additions (CRUD wiring) ============== */
.status-pill.pill-green { color: #0ca85a; background: #e9f9ef; }
.status-pill.pill-blue  { color: #1f66ff; background: #e7eeff; }
.status-pill.pill-red   { color: #c1273f; background: #fde6ea; }
.status-pill.pill-orange{ color: #c66600; background: #fff1d8; }
.status-pill.pill-grey  { color: #66718c; background: #eef2f7; }

.module-table .row-action { display: inline-block; margin: 0 2px; }
.module-table .row-btn,
.module-table .row-action .row-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #66718c;
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.module-table .row-btn:hover,
.module-table .row-action .row-btn:hover {
    background: #eef2fb;
    color: #1f66ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31,102,255,.12);
}
.module-table .row-btn:focus-visible,
.module-table .row-action .row-btn:focus-visible {
    outline: none;
    background: #eef2fb;
    color: #1f66ff;
    box-shadow: 0 0 0 3px rgba(31,102,255,.18);
}
.module-table .row-btn[aria-expanded="true"] {
    background: #1f66ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(31,102,255,.28);
}
.module-table .row-action .row-btn.success { color: #0ca85a; }
.module-table .row-action .row-btn.success:hover { background: #e9f9ef; color: #0ca85a; }
.module-table .row-action .row-btn.danger  { color: #c1273f; }
.module-table .row-action .row-btn.danger:hover { background: #fdebee; color: #c1273f; }
.module-table .row-action .row-btn.primary { color: #1f66ff; }
.module-table .row-action .row-btn.primary:hover { background: #e7eeff; color: #1f66ff; }

.module-table th:last-child { text-align: right; padding-right: 16px; }
.module-table td:last-child { padding-right: 16px; }

.module-new-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #1f66ff; color: #fff !important;
    padding: 10px 16px; border-radius: 10px;
    font-weight: 700; text-decoration: none;
}
.module-new-btn:hover { background: #1855d6; color: #fff; }

.module-wrap > .alert {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 600;
}
.module-wrap > .alert-success { background: #e9f9ef; color: #0ca85a; border: 1px solid #cdeed9; }
.module-wrap > .alert-danger  { background: #fdebee; color: #c1273f; border: 1px solid #f6cdd4; }
.module-wrap > .alert-info    { background: #e7eeff; color: #1f66ff; border: 1px solid #c8d6f5; }

.module-action-grid a {
    text-decoration: none;
    color: inherit;
}

.internal-form select,
.internal-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e3e9f3;
    border-radius: 10px;
    background: #fbfcff;
    font: inherit;
    color: #1f2840;
}
.internal-form select:focus,
.internal-form textarea:focus,
.internal-form input:focus { outline: none; border-color: #1f66ff; background: #fff; }

/* ============== Add-new modal popup ============== */
.module-tools .tool-add-btn {
    background: #1f66ff;
    color: #fff;
    border: 1px solid #1f66ff;
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.module-tools .tool-add-btn:hover { background: #1855d6; border-color: #1855d6; }

.keka-modal .modal-dialog { max-width: 720px; }
.keka-modal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(11,33,79,.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.keka-modal .modal-form {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    grid-template-columns: none !important;
    gap: 0 !important;
}
.keka-modal .modal-header {
    background: linear-gradient(135deg,#1f66ff 0%,#3d7bff 100%);
    color: #fff;
    padding: 18px 24px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.keka-modal .modal-header .modal-title {
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.keka-modal .modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: .9;
    margin: 0;
}
.keka-modal .modal-body {
    padding: 24px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    max-height: 70vh;
    overflow-y: auto;
}
.keka-modal .modal-body > label {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    color: #405172;
    font-weight: 700;
    font-size: 12px;
}
.keka-modal .modal-body > label > span {
    display: block;
    color: #66718c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.keka-modal .modal-body > label:has(textarea) {
    grid-column: 1 / -1;
}
.keka-modal .modal-body input,
.keka-modal .modal-body select,
.keka-modal .modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    height: auto;
    min-height: 42px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fbfcff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1f2840;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.keka-modal .modal-body textarea { min-height: 80px; resize: vertical; }
.keka-modal .modal-body input:focus,
.keka-modal .modal-body select:focus,
.keka-modal .modal-body textarea:focus {
    outline: none;
    border-color: #1f66ff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,102,255,.14);
}
.keka-modal .modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #edf2f8;
    background: #fafbfd;
    gap: 8px;
    justify-content: flex-end;
    display: flex;
}
.keka-modal .modal-footer .ghost-btn {
    background: #fff;
    color: #4a5777;
    border: 1px solid #dbe4f0;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.keka-modal .modal-footer .ghost-btn:hover { background: #f1f4fa; }
.keka-modal .modal-footer .primary-btn {
    background: #1f66ff;
    color: #fff;
    border: 1px solid #1f66ff;
    padding: 9px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.keka-modal .modal-footer .primary-btn:hover { background: #1855d6; border-color: #1855d6; }

@media (max-width: 720px) {
    .keka-modal .modal-body { grid-template-columns: 1fr; }
}

/* ============== Employee row action dropdown ============== */
.emp-actions-menu {
    min-width: 200px;
    border: 1px solid #e3e9f3;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(11,33,79,.12);
    padding: 6px;
}
.emp-actions-menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.emp-actions-menu .dropdown-item:hover { background: #f1f5fb; }
.emp-actions-menu .dropdown-item i { font-size: 15px; min-width: 18px; text-align: center; }
.emp-actions-menu form { display: block; margin: 0; padding: 0; }
.emp-actions-menu form .dropdown-item { width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; }
.emp-actions-menu .dropdown-divider { margin: 4px 0; }

/* View Employee detail grid */
.keka-modal .view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    padding: 24px;
    background: #fff;
}
.keka-modal .view-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #edf2f8;
    border-radius: 10px;
    background: #fbfcff;
}
.keka-modal .view-grid > div small {
    color: #66718c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.keka-modal .view-grid > div strong {
    color: #1f2840;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

/* ============== Sidebar fix: pack items tight regardless of role item count ============== */
.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    gap: 4px !important;
    padding: 12px 8px !important;
}
.sidebar-nav a {
    flex: 0 0 auto;
    min-height: 56px;
    margin: 0;
}

/* ============== Pagination + tool buttons ============== */
.pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 0;
    border-top: 1px solid #edf2f8;
    margin-top: 8px;
}
.pagination-row .pagination .page-link {
    color: #1f66ff;
    border-color: #e3e9f3;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}
.pagination-row .pagination .page-item.active .page-link {
    background: #1f66ff;
    border-color: #1f66ff;
    color: #fff;
}
.module-tools .btn-link-tool {
    border: 1px solid #e3e9f3;
    background: #fbfcff;
    color: #4a5777;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.module-tools .btn-link-tool:hover { background: #eef2fb; color: #1f66ff; border-color: #c8d6f5; }
.module-tools .dropdown > button { background: #fbfcff; border: 1px solid #e3e9f3; color: #4a5777; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.module-tools .dropdown > button:hover { background: #eef2fb; color: #1f66ff; }

/* ============== Employee portal rail: pack items tight from top, NO auto gap ============== */
.emp-rail {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}
.emp-rail::-webkit-scrollbar { width: 0; }
.emp-rail a {
    flex: 0 0 auto !important;
    min-height: 60px !important;
    margin: 0 !important;
}
.emp-rail .emp-rail-logo {
    flex: 0 0 auto !important;
    min-height: 50px !important;
}
.emp-rail .rail-logout {
    margin-top: 4px !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ============== Mobile responsive sweep ============== */
@media (max-width: 768px) {
    .app-shell { display: block; }
    .sidebar {
        position: fixed; left: -110px; top: 0; bottom: 0;
        width: 100px; z-index: 1050;
        transition: left .2s;
    }
    body.sidebar-open .sidebar { left: 0; box-shadow: 0 0 0 9999px rgba(8,23,53,.42); }
    .main-content { margin-left: 0; }
    .topbar { padding: 6px 10px; gap: 10px; }
    .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e3e9f3; background: #fff; color: #1f2840; border-radius: 8px; font-size: 18px; }
    .search-box { display: none !important; }
    .top-actions .user-meta, .top-actions .plain-chevron, .top-actions .divider { display: none; }
    .top-actions .logout-link { padding: 6px 8px; font-size: 12px; }

    .module-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
    .module-hero > div { flex: 1 1 100%; }
    .module-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .module-stats { grid-template-columns: repeat(2, 1fr); }
    .module-grid { grid-template-columns: 1fr; }
    .module-feature-grid { grid-template-columns: 1fr; }

    .dashboard-wrap { grid-template-columns: 1fr; padding: 12px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .module-table th, .module-table td { white-space: nowrap; font-size: 12px; padding: 10px 8px; }

    .keka-modal .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .keka-modal .modal-body { grid-template-columns: 1fr; padding: 16px; }

    .emp-rail span { font-size: 10px; }
    .emp-rail a { min-height: 60px; }
    .emp-header { grid-template-columns: 100px 1fr 34px 38px; padding: 0 8px; gap: 8px; }
    .emp-header > strong, .emp-header-search { display: none; }
    .employee-home-layout { grid-template-columns: 1fr; }
    .peer-grid, .org-employee-grid { grid-template-columns: 1fr; }
    .leave-balance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stats-grid, .module-stats { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr; }
    .emp-rail { width: 88px; }
    .emp-main { margin-left: 88px; }
}

.menu-btn { display: none; }
@media (max-width: 768px) { .menu-btn { display: inline-flex; } }

/* ===== Task Tracker config card (HR-only on my-tasks.php) ===== */
.tt-config-card {
    border-left: 4px solid #2f71ff;
}
.tt-config-card .badge.bg-info {
    background: #e0f0fd !important;
    color: #0d4ea6 !important;
    font-weight: 700;
    font-size: 11px;
}
.tt-config-card .badge.bg-purple {
    background: #efe4ff !important;
    color: #5c2bcc !important;
    font-weight: 700;
    font-size: 11px;
}
.tt-config-card .badge.bg-light-secondary {
    background: #f1f4fa !important;
    color: #6d7896 !important;
    font-weight: 700;
    font-size: 11px;
}
.tt-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tt-preset {
    padding: 8px 12px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #3b4d6e;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tt-preset:hover { border-color: #2f71ff; color: #0d4ea6; }
.tt-preset.is-active {
    background: #2f71ff;
    border-color: #2f71ff;
    color: #fff;
}
.tt-config-summary {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f5f9ff;
    border: 1px solid #d6e6fb;
    border-radius: 8px;
    color: #0d4ea6;
    font-size: 13px;
}

/* ===== Task Tracker (periodic prompt + countdown badge) ===== */
.task-tracker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    width: auto;
    flex: 0 0 auto;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    user-select: none;
    transition: background .15s ease, transform .12s ease;
    line-height: 1;
}
.task-tracker-badge:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    transform: translateY(-1px);
}
.task-tracker-badge i { font-size: 14px; color: #fff; }

/* Light topbars (admin) need a darker chip */
.topbar .task-tracker-badge {
    background: #f1f4fa;
    color: #1f2a44;
    border: 1px solid #e3e9f3;
}
.topbar .task-tracker-badge:hover { background: #e6ecf6; color: #0d4ea6; }
.topbar .task-tracker-badge i { color: #2f71ff; }

.task-tracker-badge.overdue {
    background: #c0392b !important;
    color: #fff !important;
    border-color: #c0392b !important;
    animation: ttPulse 1.2s ease-in-out infinite;
}
.task-tracker-badge.overdue i { color: #fff !important; }
@keyframes ttPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); }
    50%      { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

.task-tracker-modal[hidden] { display: none !important; }
.task-tracker-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
}
.task-tracker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 24, 51, .65);
    backdrop-filter: blur(4px);
    animation: ttFadeIn .25s ease-out;
}
@keyframes ttFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ttSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.task-tracker-dialog {
    position: relative;
    width: 92%;
    max-width: 520px;
    padding: 28px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 33, 60, .35);
    animation: ttSlideIn .3s ease-out;
}
.task-tracker-header {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
.task-tracker-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9228 0%, #ffb15c 100%);
    color: #fff;
    font-size: 26px;
    animation: ttRing .6s ease-in-out infinite alternate;
}
@keyframes ttRing {
    from { transform: rotate(-8deg); }
    to   { transform: rotate(8deg); }
}
.task-tracker-header h3 {
    margin: 0;
    color: #061833;
    font-size: 19px;
    font-weight: 800;
}
.task-tracker-header small {
    color: #6d7896;
    font-size: 13px;
}
.task-tracker-idle-corner {
    position: absolute;
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: #fdecec;
    border: 1px solid #f3b8b8;
    border-radius: 999px;
    color: #c0392b;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    animation: ttIdlePulse 1.4s ease-in-out infinite;
}
.task-tracker-idle-corner i { color: #c0392b; font-size: 13px; }
.task-tracker-idle-corner span { font-variant-numeric: tabular-nums; }
@keyframes ttIdlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

.task-tracker-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #1f2a44;
    margin: 12px 0 6px;
    letter-spacing: .02em;
}
.task-tracker-label:first-of-type { margin-top: 4px; }
.task-tracker-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6dde8;
    border-radius: 10px;
    background: #fafbfd;
    font-size: 14px;
    color: #0f1e3c;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236d7896' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.task-tracker-select:focus {
    outline: none;
    border-color: #2f71ff;
    background-color: #fff;
}

/* Today's Time Summary card on the employee Attendance tab */
.today-time-card .time-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 10px 4px 4px;
}
.today-time-card .time-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f9fc;
    border: 1px solid #e8edf3;
}
.today-time-card .time-stat-icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 30, 60, .06);
    font-size: 20px;
    color: #2f71ff;
    flex: 0 0 44px;
}
.today-time-card .time-stat.idle .time-stat-icon { color: #d97706; background: #fff7ed; }
.today-time-card .time-stat.productive .time-stat-icon { color: #16a34a; background: #ecfdf5; }
.today-time-card .time-stat.working .time-stat-icon { color: #2f71ff; background: #eaf1ff; }
.today-time-card .time-stat.tracked .time-stat-icon { color: #7b48f4; background: #f3edff; }
.today-time-card .time-stat.break .time-stat-icon { color: #c2410c; background: #fff1e6; }

/* Request Leave right-side drawer */
.request-leave-drawer {
    width: 480px !important;
    max-width: 100%;
}
.request-leave-head {
    padding: 18px 24px;
    border-bottom: 1px solid #eef1f6;
    background: #fff;
}
.request-leave-head .offcanvas-title {
    color: #061833;
    font-size: 17px;
    font-weight: 800;
}
.request-leave-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 24px;
    background: #fff;
    overflow-y: auto;
}

.rl-daterange {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    border: 1px solid #d6dde8;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.rl-daterange-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
}
.rl-daterange-cell--right { text-align: right; }
.rl-daterange-cell small {
    color: #6d7896;
    font-size: 12px;
    font-weight: 600;
}
.rl-daterange-cell input[type="date"] {
    border: 0;
    background: transparent;
    color: #061833;
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
    font-family: inherit;
    padding: 0;
}
.rl-daterange-cell--right input[type="date"] {
    text-align: right;
}
.rl-daterange-divider {
    display: grid;
    place-items: center;
    padding: 0 8px;
    border-left: 1px solid #eef1f6;
    border-right: 1px solid #eef1f6;
    background: #fafbfd;
}
.rl-days-pill {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #d6dde8;
    border-radius: 14px;
    color: #061833;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.rl-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rl-field label {
    color: #061833;
    font-size: 13.5px;
    font-weight: 700;
}
.rl-field select,
.rl-field input[type="text"],
.rl-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #061833;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rl-field select:focus,
.rl-field input[type="text"]:focus,
.rl-field textarea:focus {
    border-color: #2f71ff;
    box-shadow: 0 0 0 4px rgba(47, 113, 255, .1);
}
.rl-field textarea { resize: vertical; min-height: 80px; }
.rl-available-hint {
    margin-top: 2px;
    color: #155cff;
    font-size: 12px;
    font-weight: 600;
}
.rl-available-hint.over { color: #c0392b; font-weight: 700; }

.rl-halfday {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f7f9fc;
    border: 1px solid #eef1f6;
    border-radius: 8px;
}
.rl-halfday-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #061833;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.rl-halfday-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #155cff;
    cursor: pointer;
}
.rl-halfday-options {
    display: inline-flex;
    gap: 14px;
}
.rl-halfday-options[hidden] { display: none; }
.rl-halfday-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3b4d6e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.rl-halfday-options input[type="radio"] {
    accent-color: #155cff;
    cursor: pointer;
}

.rl-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
}
.rl-cancel {
    padding: 10px 22px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #3b4d6e;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.rl-cancel:hover { border-color: #8390ad; background: #f7f9fc; }
.rl-submit {
    padding: 10px 26px;
    border: 0;
    border-radius: 8px;
    background: #155cff;
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.rl-submit:hover { background: #1855d6; transform: translateY(-1px); }

/* Monthly calendar (Keka-style large cells with shift hours / W-OFF pill) */
.cal-month-card { padding: 0; overflow: hidden; }
.cal-month-toolbar {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px;
    background: #fff;
}
.cal-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cal-month-arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #8390ad;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.cal-month-arrow:hover { background: #eef1f6; color: #0d4ea6; }
.cal-month-pill {
    padding: 6px 14px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #061833;
    font-size: 13.5px;
    font-weight: 800;
    min-width: 110px;
    text-align: center;
}
.cal-today-link {
    width: auto;
    padding: 0 12px;
    border-radius: 16px;
    background: #eaf1ff;
    color: #0d4ea6;
    font-size: 12px;
    font-weight: 700;
}
.cal-today-link:hover { background: #d6e6fb; color: #0d4ea6; }

.cal-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f7f9fc;
    border-top: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}
.cal-month-weekdays span {
    padding: 12px 0;
    text-align: center;
    color: #8390ad;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.mcell {
    position: relative;
    min-height: 120px;
    padding: 10px 12px;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.mcell.empty { background: #fafbfd; }
.mcell:nth-child(7n) { border-right: 0; }
.mcell.is-weekend { background: #fafbfd; }
.mcell.is-holiday { background: #fff7ed; }
.mcell.is-leave   { background: #eef2ff; }

.mcell-day {
    color: #2f71ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.mcell.is-weekend .mcell-day { color: #8390ad; }
.mcell.is-holiday .mcell-day { color: #c2410c; }

.mcell-shift {
    margin-top: auto;
    color: #6d7896;
    font-size: 12px;
    font-weight: 600;
}

.mcell-pill {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.mcell-pill.weekend {
    background: #d6cfb8;
    color: #5a4d2e;
}
.mcell-pill.holiday {
    background: #ffe5d4;
    color: #9a3412;
}
.mcell-pill.holiday i { font-size: 10px; margin-right: 3px; }
.mcell-pill.leave   { background: #e0e7ff; color: #3730a3; }
.mcell-pill.leave i { font-size: 10px; margin-right: 3px; }
.mcell-pill.late    { background: #fef3c7; color: #92400e; }
.mcell-pill.present { background: #d1fae5; color: #065f46; }
.mcell-pill.absent  { background: #fee2e2; color: #991b1b; }

/* Today: subtle blue triangle in top-left corner */
.mcell.is-today { background: #f5f9ff; }
.mcell-today-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 18px solid #2f71ff;
    border-right: 18px solid transparent;
    z-index: 1;
}
.mcell.is-today .mcell-day { color: #0d4ea6; }

@media (max-width: 900px) {
    .mcell { min-height: 96px; padding: 8px 10px; }
    .mcell-shift { font-size: 11px; }
}
@media (max-width: 600px) {
    .cal-month-weekdays span { font-size: 10px; padding: 8px 0; }
    .mcell { min-height: 78px; padding: 6px 8px; gap: 4px; }
    .mcell-day { font-size: 12px; }
    .mcell-shift { font-size: 10px; }
    .mcell-pill { padding: 2px 7px; font-size: 9.5px; }
}

/* Today card break bar + list */
.break-bar {
    margin-top: 12px;
    padding: 6px 12px 6px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}
.break-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #fdba74, #fb923c);
    opacity: .35;
    transition: width .25s ease;
    z-index: 0;
}
.break-bar span {
    position: relative;
    z-index: 1;
}
.break-bar.over { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.break-bar.over .break-bar-fill { background: linear-gradient(90deg, #fca5a5, #ef4444); opacity: .35; }

.break-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.break-list li {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #f1ddc3;
    border-radius: 6px;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 600;
}
.break-list li i { color: #c2410c; font-size: 13px; }
.break-list li small { color: #9a3412; font-size: 11px; font-weight: 700; }
.today-time-card .time-stat small {
    display: block;
    font-size: 11.5px;
    color: #6d7896;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.today-time-card .time-stat strong {
    display: block;
    font-size: 20px;
    color: #0f1e3c;
    font-weight: 800;
    margin-top: 2px;
}
.today-time-card .time-stat em {
    display: block;
    font-size: 12px;
    color: #8590a8;
    font-style: normal;
    margin-top: 2px;
}

.time-tile .time-tile-stats {
    display: flex;
    gap: 10px;
    margin: 6px 0 8px;
    flex-wrap: wrap;
}
.time-tile .time-tile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #0f1e3c;
}
.time-tile .time-tile-stats i { font-size: 12px; color: #2f71ff; }
.time-tile .time-tile-stats span:nth-child(2) i { color: #d97706; }
.task-tracker-dialog textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d6dde8;
    border-radius: 10px;
    background: #fafbfd;
    color: #061833;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.task-tracker-dialog textarea:focus {
    border-color: #2f71ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 113, 255, .12);
}
.task-tracker-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.task-tracker-snooze {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #3b4d6e;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.task-tracker-snooze:hover { border-color: #2f71ff; background: #f5f9ff; color: #0d4ea6; }
.task-tracker-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.task-tracker-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.task-tracker-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fdecea;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    color: #842029;
    font-size: 13px;
}

@media (max-width: 600px) {
    .task-tracker-badge { bottom: 16px; right: 16px; padding: 7px 12px; font-size: 12.5px; }
    .task-tracker-dialog { padding: 22px; }
    .task-tracker-header { grid-template-columns: 48px 1fr; gap: 12px; }
    .task-tracker-icon { width: 48px; height: 48px; font-size: 22px; }
}

/* ===== Login: 2FA demo hint + alt links ===== */
body.login-body .login-hint {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 22px !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f9ff 100%) !important;
    border: 1px solid #d6e6fb !important;
    border-radius: 10px !important;
}
body.login-body .login-hint-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #d6e6fb !important;
    color: #0d68cc !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}
body.login-body .login-hint-icon i { color: #0d68cc !important; font-size: 17px !important; }
body.login-body .login-hint-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}
body.login-body .login-hint-body strong {
    color: #061833 !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}
body.login-body .login-hint-body small {
    color: #4a5e7c !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
body.login-body .login-hint-body code {
    background: #ffffff !important;
    border: 1px solid #cfe0f7 !important;
    color: #0d4ea6 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    font-family: 'SF Mono', Consolas, Menlo, monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin: 0 2px !important;
}

body.login-body .login-altlinks {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #edf1f5 !important;
    flex-wrap: wrap !important;
}
body.login-body .login-altlinks a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 16px !important;
    border: 1px solid #e3e9f1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #3b4d6e !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.login-body .login-altlinks a:hover {
    border-color: #bcd6ff !important;
    background: #f5f9ff !important;
    color: #0d4ea6 !important;
}
body.login-body .login-altlinks a i { font-size: 14px !important; }

/* ============== Daily Tasks (employee portal) ============== */
.task-subtabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e3e9f3;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 33, 60, .04);
}
.task-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #53628a;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.task-subtab:hover { background: #f1f4fa; color: #0d4ea6; }
.task-subtab i { font-size: 15px; }
.task-subtab.active {
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 104, 204, .25);
}
.task-subtab.active i { color: #fff; }
.task-subtab-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.task-subtab:not(.active) .task-subtab-badge {
    background: #ffe1cc;
    color: #c1450b;
}
.task-subpanel { display: none; }
.task-subpanel.active { display: block; animation: ttSubFade .2s ease-out; }
@keyframes ttSubFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.daily-tasks-card { padding: 22px 24px; }
.task-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.task-head-actions .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #3b4d6e;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.task-head-actions .ghost-btn:hover { border-color: #2f71ff; background: #f5f9ff; color: #0d4ea6; }

/* Share Tasks offcanvas (right drawer) */
.share-tasks-drawer {
    width: 440px !important;
    max-width: 100%;
}
.share-tasks-drawer .offcanvas-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    border-bottom: 1px solid #0d4ea6;
}
.share-tasks-drawer .offcanvas-title {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-tasks-drawer .btn-close {
    filter: brightness(0) invert(1);
    opacity: .9;
}
.share-tasks-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px;
    overflow-y: auto;
}
.share-section { display: flex; flex-direction: column; gap: 8px; }

.share-saved-strip { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.share-saved-label {
    color: #6d7896;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.share-saved-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.share-saved-chip {
    display: inline-flex;
    align-items: center;
    background: #f1f4fa;
    border: 1px solid #d6dde8;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.share-saved-chip:hover { border-color: #2f71ff; background: #eaf1ff; }
.share-saved-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border: 0;
    background: transparent;
    color: #1f2a44;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.share-saved-pick i { color: #2f71ff; font-size: 12px; }
.share-saved-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    border: 0;
    border-left: 1px solid #d6dde8;
    background: transparent;
    color: #8390ad;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.share-saved-remove:hover { background: #fde8e8; color: #c03737; }
.share-saved-remove i { font-size: 12px; }
.share-label {
    color: #061833;
    font-size: 13px;
    font-weight: 800;
}
.share-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fafbfd;
    color: #061833;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.share-input:focus {
    border-color: #2f71ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 113, 255, .1);
}
textarea.share-input { resize: vertical; min-height: 80px; }

.share-select-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.share-selectall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2f71ff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.share-task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    background: #fafbfd;
}
.share-task-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
}
.share-task-row:hover { background: #fff; }
.share-task-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #2f71ff;
    cursor: pointer;
}
.share-subtask-row { padding-left: 30px; background: rgba(15, 33, 60, .02); }
.share-task-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.share-task-body strong { color: #061833; font-size: 13.5px; font-weight: 700; }
.share-task-body small { color: #6d7896; font-size: 11.5px; }
.share-task-meta {
    color: #8390ad;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.share-empty {
    padding: 24px;
    text-align: center;
    color: #8390ad;
    font-size: 13px;
}

.share-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid #eef1f6;
    flex-wrap: wrap;
}
.share-count {
    color: #6d7896;
    font-size: 13px;
    font-weight: 700;
}
.share-count #shareSelectedCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 8px;
    background: #2f71ff;
    color: #fff;
    border-radius: 11px;
    font-size: 12px;
    margin-right: 4px;
}
.share-actions { display: flex; gap: 8px; }
.share-actions .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f71ff 0%, #0d68cc 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease;
}
.share-actions .primary-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.share-actions .primary-btn:disabled {
    background: #c5cdd9;
    cursor: not-allowed;
    transform: none;
}
.share-actions .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #d6dde8;
    border-radius: 8px;
    background: #fff;
    color: #3b4d6e;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.share-actions .ghost-btn:hover { border-color: #2f71ff; color: #0d4ea6; }

.task-log-card { padding: 22px 24px; margin-top: 18px; border-left: 4px solid #0d68cc; }
.task-log-list { gap: 10px; }
.task-log-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    background: #fafbfd;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.task-log-item:hover { border-color: #d6e6fb; background: #f5f9ff; }
.task-log-time {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #344561;
    font-size: 13px;
}
.task-log-time i { color: #2f71ff; margin-right: 4px; }
.task-log-time strong { color: #061833; font-weight: 700; }
.task-log-time small { color: #8390ad; font-size: 11.5px; }
.task-log-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.task-log-body p {
    margin: 0;
    color: #061833;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.task-log-meta {
    align-self: flex-start;
    padding: 2px 8px;
    background: #e8f0fb;
    color: #0d4ea6;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 12px;
}
.task-log-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 10px;
    background: #f3edff;
    border: 1px solid #ddd0ff;
    border-radius: 999px;
    color: #5c2bcc;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    max-width: 100%;
}
.task-log-link i { font-size: 12px; color: #7b48f4; }
.task-log-link .task-log-parent { display: inline-flex; align-items: center; gap: 5px; }
.task-log-link .task-log-arrow { font-size: 11px; opacity: .65; }
.task-log-link .task-log-sub { color: #3f1e9e; font-weight: 700; }
@media (max-width: 700px) {
    .task-log-item { grid-template-columns: 1fr auto; }
    .task-log-time { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
}

.task-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.task-card-head h2 { margin: 0 0 4px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.task-card-head h2 i { color: #1d6df1; }
.task-card-head small { font-size: 12px; }

.task-date-picker label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #4d5b73;
}
.task-date-picker input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #d8dfeb;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2a3d;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.task-date-picker input[type="date"]:focus {
    outline: none;
    border-color: #2f71ff;
    box-shadow: 0 0 0 3px rgba(47, 113, 255, .15);
}

.task-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f71ff 0%, #1d6df1 60%, #0d4ea6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(13, 78, 166, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.task-filter-btn i { font-size: 13px; color: #d6e6ff; }
.task-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13, 78, 166, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
    filter: brightness(1.05);
}
.task-filter-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(13, 78, 166, .25), inset 0 1px 2px rgba(0, 0, 0, .12);
    filter: brightness(.96);
}
.task-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 113, 255, .35), 0 4px 10px rgba(13, 78, 166, .25);
}

/* My Profile — summary header card with Edit Profile / Change Password actions */
.profile-summary-card { padding: 20px 22px; }
.profile-summary-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.profile-summary-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(13, 33, 84, .12);
    flex: 0 0 84px;
}
.profile-summary-info { flex: 1 1 auto; min-width: 0; }
.profile-summary-info h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #0f1e3c;
}
.profile-summary-info p { font-size: 13px; }
.profile-summary-info .badge { font-weight: 700; font-size: 11px; padding: 4px 9px; }
.profile-summary-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-summary-actions .primary-btn,
.profile-summary-actions .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease;
}
.profile-summary-actions .primary-btn {
    background: linear-gradient(135deg, #2f71ff 0%, #1d6df1 60%, #0d4ea6 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 4px 10px rgba(13, 78, 166, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.profile-summary-actions .primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13, 78, 166, .32);
    filter: brightness(1.05);
}
.profile-summary-actions .ghost-btn {
    background: #fff;
    color: #2f71ff;
    border: 1px solid #cdd9ee;
}
.profile-summary-actions .ghost-btn:hover {
    border-color: #2f71ff;
    background: #f5f9ff;
    color: #0d4ea6;
}
@media (max-width: 600px) {
    .profile-summary-row { gap: 14px; }
    .profile-summary-actions { width: 100%; }
    .profile-summary-actions .primary-btn,
    .profile-summary-actions .ghost-btn { flex: 1 1 auto; justify-content: center; }
}

.task-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #f7f9fc;
    border: 1px solid #e9eef7;
    border-radius: 12px;
}
.task-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e3e9f3;
    border-radius: 10px;
}
.task-pill strong { font-size: 18px; font-weight: 800; color: #1f2a3d; line-height: 1; }
.task-pill span { font-size: 11px; color: #6e7a90; text-transform: uppercase; letter-spacing: .6px; margin-top: 3px; }
.task-pill.open strong { color: #f08a1c; }
.task-pill.done strong { color: #18b957; }

.task-progress {
    position: relative;
    flex: 1;
    min-width: 180px;
    height: 28px;
    background: #fff;
    border: 1px solid #e3e9f3;
    border-radius: 999px;
    overflow: hidden;
}
.task-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #43c8ed 0%, #18b957 100%);
    transition: width .3s ease;
}
.task-progress span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 800;
    color: #1f2a3d;
}

.task-add-form {
    display: grid;
    grid-template-columns: 1fr 110px 1fr auto;
    gap: 10px;
    margin-bottom: 18px;
}
.task-add-form input,
.task-add-form select {
    padding: 10px 12px;
    border: 1px solid #d8dfeb;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2a3d;
    background: #fff;
    min-width: 0;
}
.task-add-form input:focus,
.task-add-form select:focus { outline: none; border-color: #1d6df1; box-shadow: 0 0 0 3px rgba(29, 109, 241, .12); }
.task-add-form .primary-btn {
    background: #1d6df1;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.task-add-form .primary-btn:hover { background: #1855d6; }

.task-list { display: flex; flex-direction: column; gap: 10px; }

.task-empty {
    text-align: center;
    padding: 40px 16px;
    color: #6e7a90;
}
.task-empty i { font-size: 42px; color: #c8d0e0; display: block; margin-bottom: 10px; }
.task-empty p { margin: 0; font-size: 14px; }

.task-item {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e3e9f3;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.task-item:hover { border-color: #c8d3e6; box-shadow: 0 2px 6px rgba(20, 40, 80, .04); }
.task-item.done { background: #f5fbf7; border-color: #d6eede; }

.task-check-form { margin: 0; display: inline; }
.task-check {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 20px;
    color: #6e7a90;
    cursor: pointer;
    line-height: 1;
}
.task-check:hover { color: #1d6df1; }
.task-item.done .task-check,
.subtask-item.done .task-check { color: #18b957; }

.task-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.task-title-row strong {
    font-size: 14px;
    color: #1f2a3d;
    font-weight: 700;
    word-break: break-word;
}
.task-item.done .task-title-row strong { text-decoration: line-through; color: #8390a5; }

.task-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.task-priority.low { background: #eef3ff; color: #3d6ad6; }
.task-priority.normal { background: #fff5e6; color: #b3700e; }
.task-priority.high { background: #ffe5e6; color: #c0353a; }

.task-notes { color: #6e7a90; font-size: 12px; }

.subtask-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid #e3e9f3;
    padding-left: 12px;
}
.subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.subtask-text {
    flex: 1;
    font-size: 13px;
    color: #3a4660;
    word-break: break-word;
}
.subtask-item.done .subtask-text { text-decoration: line-through; color: #8390a5; }
.subtask-item .task-check { font-size: 17px; }

.subtask-add-form {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.subtask-add-form input {
    flex: 1;
    padding: 6px 10px;
    border: 1px dashed #c8d3e6;
    border-radius: 6px;
    font-size: 12px;
    color: #1f2a3d;
    background: #fafbfd;
}
.subtask-add-form input:focus { outline: none; border-style: solid; border-color: #1d6df1; background: #fff; }
.subtask-add-form .ghost-btn {
    background: transparent;
    border: 1px solid #c8d3e6;
    color: #4d5b73;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.subtask-add-form .ghost-btn:hover { border-color: #1d6df1; color: #1d6df1; }

.task-delete-form { margin: 0; display: inline; }
.task-icon-btn {
    background: transparent;
    border: 0;
    color: #b9c2d3;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.task-icon-btn:hover { color: #c0353a; background: #ffeaeb; }

@media (max-width: 720px) {
    .task-add-form { grid-template-columns: 1fr; }
    .task-card-head { flex-direction: column; align-items: stretch; }
}

/* Daily Tasks redesign */
.emp-tab-panel[data-portal-panel="tasks"] {
    max-width: 100%;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-subtabs {
    width: fit-content;
    min-height: 48px;
    gap: 4px;
    padding: 5px;
    margin-bottom: 18px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(11, 33, 79, .08);
}

.emp-tab-panel[data-portal-panel="tasks"] .task-subtab {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 6px;
    color: #445170;
    font-size: 13px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-subtab.active {
    color: #fff;
    background: #126bc8;
    box-shadow: 0 8px 18px rgba(18, 107, 200, .24);
}

.emp-tab-panel[data-portal-panel="tasks"] .task-subtab-badge {
    min-width: 22px;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
}

.emp-tab-panel[data-portal-panel="tasks"] .daily-tasks-card {
    padding: 24px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 33, 79, .07);
}

.emp-tab-panel[data-portal-panel="tasks"] .task-card-head {
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf2f8;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-card-head h2 {
    gap: 10px;
    color: #061833;
    font-size: 20px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-card-head h2 i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
    font-size: 17px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-card-head small {
    display: block;
    margin-top: 6px;
    color: #66718c !important;
    font-size: 13px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-date-picker label {
    gap: 10px;
    color: #25364f;
    font-size: 12px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-date-picker input[type="date"] {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #061833;
    font-size: 13px;
    font-weight: 800;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-summary {
    display: grid;
    grid-template-columns: repeat(3, 92px) minmax(180px, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #e5ecf6;
    border-radius: 8px;
    background: #f8fbff;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-pill {
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid #dfe7f3;
    border-radius: 8px;
    background: #fff;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-pill strong {
    color: #061833;
    font-size: 19px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-pill span {
    color: #66718c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-progress {
    height: 24px;
    min-width: 0;
    border: 1px solid #dbe4f2;
    border-radius: 999px;
    background: #fff;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-progress-bar {
    background: #12b981;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-progress span {
    color: #061833;
    font-size: 12px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-add-form {
    grid-template-columns: minmax(220px, 1.3fr) 120px minmax(220px, 1fr) auto;
    gap: 10px;
    margin-bottom: 18px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-add-form input,
.emp-tab-panel[data-portal-panel="tasks"] .task-add-form select {
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    background: #fff;
    color: #061833;
    font-size: 13px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-add-form .primary-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    background: #126bc8;
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-list {
    gap: 12px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-item {
    grid-template-columns: 30px minmax(0, 1fr) 32px;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(11, 33, 79, .04);
}

.emp-tab-panel[data-portal-panel="tasks"] .task-item:hover {
    border-color: #b9c9e2;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .08);
}

.emp-tab-panel[data-portal-panel="tasks"] .task-item.done {
    border-color: #bdebd6;
    background: #f6fcf9;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #51617d;
    font-size: 20px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-title-row {
    gap: 10px;
    min-height: 24px;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-title-row strong {
    color: #061833;
    font-size: 15px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-priority {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-priority.high {
    color: #c22232;
    background: #ffe8eb;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-priority.normal {
    color: #a85c00;
    background: #fff2dc;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-priority.low {
    color: #175fc7;
    background: #eaf3ff;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-list {
    gap: 6px;
    margin-top: 10px;
    padding: 8px 0 0 14px;
    border-left: 2px solid #dbe4f2;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-item {
    min-height: 28px;
    padding: 2px 0;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-text {
    color: #25364f;
    font-size: 13px;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-add-form {
    gap: 8px;
    margin-top: 12px;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-add-form input {
    min-height: 34px;
    padding: 0 11px;
    border: 1px dashed #bccbe2;
    border-radius: 8px;
    background: #fbfdff;
}

.emp-tab-panel[data-portal-panel="tasks"] .subtask-add-form .ghost-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #25364f;
    background: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.emp-tab-panel[data-portal-panel="tasks"] .task-icon-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
    color: #9aa8be;
}

@media (max-width: 900px) {
    .emp-tab-panel[data-portal-panel="tasks"] .task-summary,
    .emp-tab-panel[data-portal-panel="tasks"] .task-add-form {
        grid-template-columns: 1fr;
    }

    .emp-tab-panel[data-portal-panel="tasks"] .task-progress {
        min-width: 100%;
    }
}

@media (max-width: 560px) {
    .emp-tab-panel[data-portal-panel="tasks"] .daily-tasks-card {
        padding: 16px;
    }

    .emp-tab-panel[data-portal-panel="tasks"] .task-subtabs {
        width: 100%;
    }

    .emp-tab-panel[data-portal-panel="tasks"] .task-subtab {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 10px;
    }

    .emp-tab-panel[data-portal-panel="tasks"] .task-item {
        grid-template-columns: 26px minmax(0, 1fr) 28px;
        padding: 14px;
    }
}

/* Employee Inbox redesign */
.emp-tab-panel[data-portal-panel="inbox"] > .emp-card.emp-table-card {
    display: none;
}

.emp-inbox-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 33, 79, .07);
}

.emp-inbox-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-inbox-hero h2 {
    margin: 8px 0 4px;
    color: #061833;
    font-size: 26px;
    font-weight: 900;
}

.emp-inbox-hero p {
    margin: 0;
    color: #66718c;
    font-size: 13px;
}

.emp-inbox-hero button,
.emp-inbox-panel-head button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #126bc8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.emp-inbox-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.emp-inbox-metrics article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 33, 79, .05);
}

.emp-inbox-metrics article > span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.emp-inbox-metrics small {
    align-self: end;
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-inbox-metrics strong {
    align-self: start;
    color: #061833;
    font-size: 22px;
    font-weight: 900;
}

.emp-inbox-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 16px;
    margin-top: 16px;
}

.emp-inbox-panel {
    min-width: 0;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-inbox-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f8;
}

.emp-inbox-panel-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.emp-inbox-panel-head > div > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.emp-inbox-panel-head h3 {
    margin: 0;
    color: #061833;
    font-size: 16px;
    font-weight: 900;
}

.emp-inbox-panel-head a {
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.emp-inbox-head-form,
.emp-inbox-row-action {
    margin: 0;
}

.emp-inbox-head-form button,
.emp-inbox-row-action button,
.emp-tab-panel[data-portal-panel="inbox"] .emp-inbox-read-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #126bc8;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    font-family: inherit;
    box-shadow: none;
    cursor: pointer;
}

.emp-inbox-head-form button:hover,
.emp-inbox-row-action button:hover,
.emp-tab-panel[data-portal-panel="inbox"] .emp-inbox-read-btn:hover {
    border-color: #126bc8;
    background: #eaf3ff;
}

.emp-inbox-row-action {
    margin-top: 10px;
}

.emp-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.emp-inbox-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #fff;
}

.emp-inbox-row.is-unread {
    border-color: #bcd5f4;
    background: #f7fbff;
}

.emp-inbox-row-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.emp-inbox-row-icon.message {
    color: #087047;
    background: #effbf5;
}

.emp-inbox-row-body {
    min-width: 0;
}

.emp-inbox-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.emp-inbox-row-top strong,
.emp-inbox-row-top a {
    min-width: 0;
    color: #061833;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.emp-inbox-row p {
    margin: 5px 0;
    color: #445170;
    font-size: 13px;
    line-height: 1.45;
}

.emp-inbox-row small {
    color: #7b879f;
    font-size: 12px;
    font-weight: 700;
}

.emp-inbox-empty {
    padding: 32px 16px;
    text-align: center;
    color: #7b879f;
}

.emp-inbox-empty i {
    display: block;
    margin-bottom: 8px;
    color: #b5c1d3;
    font-size: 34px;
}

.emp-inbox-empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.emp-inbox-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #edf2f8;
}

.emp-inbox-pagination small {
    color: #66718c;
    font-size: 12px;
    font-weight: 800;
}

.emp-inbox-pagination div {
    display: flex;
    gap: 8px;
}

.emp-inbox-pagination a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #25364f;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 980px) {
    .emp-inbox-grid,
    .emp-inbox-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .emp-inbox-hero,
    .emp-inbox-panel-head,
    .emp-inbox-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .emp-inbox-hero button,
    .emp-inbox-panel-head button {
        width: 100%;
    }

    .emp-inbox-row-top {
        flex-direction: column;
    }
}

/* Employee team / peers redesign */
.emp-team-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 33, 79, .07);
}

.emp-team-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-team-hero h2 {
    margin: 8px 0 4px;
    color: #061833;
    font-size: 26px;
    font-weight: 900;
}

.emp-team-hero p {
    margin: 0;
    color: #66718c;
    font-size: 13px;
}

.emp-team-hero > a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 8px;
    color: #fff;
    background: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.emp-team-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.emp-team-stats article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 33, 79, .05);
}

.emp-team-stats article > span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.emp-team-stats small {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-team-stats strong {
    color: #061833;
    font-size: 22px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="team"] .team-metric-grid {
    display: none;
}

.emp-tab-panel[data-portal-panel="team"] .team-section-title {
    margin: 20px 0 12px;
    color: #061833;
    font-size: 18px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="team"] .peer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.emp-tab-panel[data-portal-panel="team"] .peer-card {
    position: relative;
    min-height: 132px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-tab-panel[data-portal-panel="team"] .peer-card::before {
    content: none;
}

.emp-tab-panel[data-portal-panel="team"] .peer-card:hover {
    border-color: #b9c9e2;
    box-shadow: 0 12px 30px rgba(11, 33, 79, .09);
    transform: none;
}

.emp-tab-panel[data-portal-panel="team"] .peer-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="team"] .peer-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #eaf3ff;
}

.emp-tab-panel[data-portal-panel="team"] .peer-avatar img {
    width: 58px;
    height: 58px;
    border: 3px solid #eaf3ff;
    border-radius: 50%;
    object-fit: cover;
}

.emp-tab-panel[data-portal-panel="team"] .peer-info h3 {
    margin: 0 0 7px;
    color: #061833;
    font-size: 16px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="team"] .peer-role {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #445170;
    background: #f4f7fb;
    font-size: 12px;
    font-weight: 800;
}

.emp-tab-panel[data-portal-panel="team"] .peer-email {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.emp-tab-panel[data-portal-panel="team"] .peer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center;
}

.emp-tab-panel[data-portal-panel="team"] .peer-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #126bc8;
    background: #fff;
    text-decoration: none;
}

.emp-tab-panel[data-portal-panel="team"] .peer-btn:hover {
    border-color: #126bc8;
    color: #fff;
    background: #126bc8;
}

.emp-tab-panel[data-portal-panel="team"] > .emp-card.text-center {
    margin-top: 16px;
    border: 1px dashed #cfd9ea;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 760px) {
    .emp-team-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .emp-team-hero > a {
        width: 100%;
    }

    .emp-team-stats {
        grid-template-columns: 1fr;
    }

    .emp-tab-panel[data-portal-panel="team"] .peer-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .emp-tab-panel[data-portal-panel="team"] .peer-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Employee finances redesign */
.emp-finance-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 33, 79, .07);
}

.emp-finance-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-finance-hero h2 {
    margin: 8px 0 4px;
    color: #061833;
    font-size: 26px;
    font-weight: 900;
}

.emp-finance-hero p {
    margin: 0;
    color: #66718c;
    font-size: 13px;
}

.emp-finance-hero button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #126bc8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.emp-finance-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.emp-finance-stats article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 33, 79, .05);
}

.emp-finance-stats article > span {
    grid-row: span 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #087047;
    background: #effbf5;
}

.emp-finance-stats small {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-finance-stats strong {
    overflow: hidden;
    color: #061833;
    font-size: 20px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-finance-stats p {
    margin: 0;
    color: #66718c;
    font-size: 12px;
    font-weight: 700;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-summary-grid {
    gap: 16px;
    margin-top: 16px;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-card {
    min-height: 0;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-card h2 {
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f8;
    color: #061833;
    font-size: 17px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-card-body {
    padding: 18px;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-field {
    min-width: 0;
    padding: 12px;
    border: 1px solid #edf2f8;
    border-radius: 8px;
    background: #fbfdff;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-field small {
    margin-bottom: 5px;
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-field strong {
    overflow-wrap: anywhere;
    color: #061833;
    font-size: 14px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-card .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px !important;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-pay-card {
    margin-top: 16px !important;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid {
    gap: 16px;
    padding: 18px;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid section {
    padding: 16px;
    border: 1px solid #edf2f8;
    border-radius: 8px;
    background: #fbfdff;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid h3 {
    color: #061833;
    font-size: 15px;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid p {
    padding: 10px 0;
    color: #445170;
    font-size: 13px;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid p strong {
    color: #061833;
    font-weight: 900;
}

.emp-tab-panel[data-portal-panel="finances"] .finance-pay-card > p.text-center {
    margin: 0;
    padding: 16px 18px 20px;
    border-top: 1px solid #edf2f8;
    color: #087047;
    font-size: 16px;
}

.emp-tab-panel[data-portal-panel="finances"] > .emp-table-card {
    margin-top: 16px !important;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-tab-panel[data-portal-panel="finances"] > .emp-table-card .table-toolbar {
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f8;
}

.emp-tab-panel[data-portal-panel="finances"] .emp-attendance-table th {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-tab-panel[data-portal-panel="finances"] .emp-attendance-table td {
    color: #061833;
    font-size: 13px;
}

.emp-tab-panel[data-portal-panel="finances"] .emp-attendance-table .btn {
    border-radius: 8px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .emp-finance-stats,
    .emp-tab-panel[data-portal-panel="finances"] .finance-summary-grid,
    .emp-tab-panel[data-portal-panel="finances"] .finance-salary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .emp-finance-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .emp-finance-hero button {
        width: 100%;
    }

    .emp-tab-panel[data-portal-panel="finances"] .finance-bank-grid {
        grid-template-columns: 1fr;
    }
}

/* Employee organization redesign */
.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 33, 79, .07);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero h2 {
    margin: 8px 0 4px;
    color: #061833;
    font-size: 26px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero p {
    margin: 0;
    color: #66718c;
    font-size: 13px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero form {
    min-width: 280px;
    height: 40px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #66718c;
    background: #fbfdff;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero form input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #061833;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 33, 79, .05);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats article > span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats small {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats strong {
    overflow: hidden;
    color: #061833;
    font-size: 20px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-page-title {
    margin: 20px 0 12px;
    color: #061833;
    font-size: 18px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-employee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 136px;
    padding: 18px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-card::before {
    content: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-card:hover {
    border-color: #b9c9e2;
    box-shadow: 0 12px 30px rgba(11, 33, 79, .09);
    transform: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-avatar,
.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-avatar img {
    border: 3px solid #eaf3ff;
    object-fit: cover;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-info h3 {
    margin: 0 0 7px;
    color: #061833;
    font-size: 16px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-role {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #445170;
    background: #f4f7fb;
    font-size: 12px;
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #66718c;
    font-size: 12px;
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-email {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .peer-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #126bc8;
    background: #fff;
    text-decoration: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .peer-btn:hover {
    border-color: #126bc8;
    color: #fff;
    background: #126bc8;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-doc-table-card {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 33, 79, .05);
    overflow: hidden;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-doc-table th {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-doc-table td {
    color: #061833;
    font-size: 13px;
}

@media (max-width: 860px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-hero form {
        min-width: 0;
        width: 100%;
    }

    .emp-portal-body .emp-tab-panel[data-portal-panel="org"] .emp-org-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .emp-portal-body .emp-tab-panel[data-portal-panel="org"] .org-person-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Admin organization redesign */
.module-wrap.org-admin-page .module-hero {
    grid-template-columns: 58px minmax(0, 1fr) minmax(280px, 420px);
    align-items: stretch;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 107, 200, .08), rgba(0, 169, 130, .07)),
        #fff;
    box-shadow: 0 12px 30px rgba(11, 33, 79, .07);
}

.module-wrap.org-admin-page .module-hero .module-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.module-wrap.org-admin-page .module-hero h1 {
    color: #061833;
    font-size: 28px;
    letter-spacing: 0;
}

.module-wrap.org-admin-page .module-hero p {
    max-width: 620px;
    color: #53617c;
    font-weight: 700;
}

.module-wrap.org-admin-page .module-hero-actions {
    width: 100%;
}

.module-wrap.org-admin-page .module-new-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(18, 107, 200, .18);
}

.org-admin-snapshot {
    flex: 1 1 220px;
    min-width: 220px;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.org-admin-snapshot span {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.org-admin-snapshot strong {
    color: #061833;
    font-size: 20px;
    font-weight: 900;
}

.org-admin-snapshot small {
    color: #53617c;
    font-size: 12px;
    font-weight: 700;
}

.module-wrap.org-admin-page .module-stats .mini-stat {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 33, 79, .05);
}

.module-wrap.org-admin-page .module-stats .mini-stat span {
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.org-admin-location-list {
    display: grid;
    gap: 10px;
}

.org-admin-location,
.org-admin-empty {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #f8fbff;
}

.org-admin-empty {
    grid-template-columns: 1fr;
    color: #66718c;
    font-size: 13px;
    font-weight: 800;
}

.org-admin-location > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
}

.org-admin-location strong {
    display: block;
    overflow: hidden;
    color: #061833;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-admin-location small {
    color: #66718c;
    font-size: 12px;
    font-weight: 800;
}

.org-admin-location em {
    min-width: 32px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #00856b;
    background: #e7f8f3;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.org-admin-table-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #e3e9f3;
}

.org-admin-table-footer a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #cfd9ea;
    border-radius: 8px;
    color: #126bc8;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.org-admin-table-footer a:hover {
    border-color: #126bc8;
    color: #fff;
    background: #126bc8;
}

.module-wrap.org-admin-page .module-table tbody tr {
    transition: background .15s ease, transform .15s ease;
}

.module-wrap.org-admin-page .module-table tbody tr:hover {
    background: #f8fbff;
}

@media (max-width: 980px) {
    .module-wrap.org-admin-page .module-hero {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .module-wrap.org-admin-page .module-hero-actions {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
    }
}

@media (max-width: 560px) {
    .module-wrap.org-admin-page .module-hero {
        grid-template-columns: 1fr;
    }

    .module-wrap.org-admin-page .module-new-btn,
    .org-admin-snapshot,
    .org-admin-table-footer a {
        width: 100%;
    }
}

/* HR Sent Task Logs audit - expandable detail rows */
.tlshares-table .tlshares-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1eeff;
    color: #5c2bcc;
    border: 1px solid #d9c8ff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.tlshares-table .tlshares-toggle:hover { background: #e5dcff; }

.tlshares-detail-inner {
    border-left: 3px solid #7b48f4;
    padding: 4px 0 4px 14px;
}
.tlshares-detail-head {
    font-size: 13px;
    font-weight: 700;
    color: #061833;
    margin-bottom: 10px;
}
.tlshares-detail-head i { color: #7b48f4; margin-right: 6px; }

.tlshares-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tlshares-detail-list li {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    padding: 10px 12px;
}
.tlshares-detail-meta {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.tlshares-detail-body {
    font-size: 13.5px;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Final employee dashboard home overrides */
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] {
    padding: 26px;
    background: #f4f7fb;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 860px);
    gap: 24px;
    align-items: start;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-left {
    gap: 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner,
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .home-tile,
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .celebration-card,
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-card {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .06);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner {
    min-height: 92px;
    height: auto;
    padding: 20px;
    background: linear-gradient(135deg, rgba(18, 107, 200, .92), rgba(6, 24, 51, .94)), #123b64;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner h1 {
    font-size: 20px;
    letter-spacing: 0;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner small {
    display: inline-block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .84);
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .home-section-title {
    margin: 4px 0 -4px;
    color: #061833;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .home-tile {
    min-height: 118px;
    padding: 18px;
    overflow: hidden;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .inbox-tile {
    background: linear-gradient(135deg, #8169c9, #9a74d1);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-tile {
    background: linear-gradient(135deg, #18a8c8, #42c4df);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-today-tile {
    background: linear-gradient(135deg, #b65abb, #d071be);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile {
    background: linear-gradient(135deg, #f7a928, #ffc73c);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-feed {
    max-width: 860px;
    gap: 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .celebration-card,
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-card {
    overflow: hidden;
    background: #fff;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .celebration-tabs {
    border-bottom: 1px solid #e3e9f3;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .celebration-tabs span {
    padding: 18px;
    color: #061833;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-card {
    margin-bottom: 0;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-header {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    padding: 18px 18px 10px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-body {
    padding: 0 18px 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-image-wrap {
    margin: 16px -18px 0;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e3e9f3;
    border-bottom: 1px solid #e3e9f3;
    background: #edf2f8;
    overflow: hidden;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-footer,
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-comments {
    background: #fbfdff;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-footer {
    padding: 10px 18px 14px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-action {
    min-height: 36px;
    border-radius: 8px;
    color: #23385f;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .post-action.is-active {
    color: #126bc8;
    background: #eaf3ff;
}

@media (max-width: 1180px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }
}

@media (max-width: 920px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="home"] {
        padding: 18px;
    }

    .emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-layout {
        grid-template-columns: 1fr;
    }

    .emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-feed {
        max-width: none;
    }
}

/* Final employee home left column polish */
.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-left {
    position: sticky;
    top: 70px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner h1 {
    max-width: 190px;
    line-height: 1.12;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .welcome-banner small {
    min-width: 110px;
    max-width: 130px;
    margin-top: 0;
    line-height: 1.35;
    text-align: left;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .inbox-tile div {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .inbox-tile i {
    width: 54px;
    height: 54px;
    font-size: 34px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .inbox-tile strong {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.3;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .inbox-tile span {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .tile-head a {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-date-badge {
    width: 64px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-meta {
    min-width: 0;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-meta strong {
    display: block;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .holiday-meta .dow {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .away-pill {
    width: fit-content;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-today-tile {
    min-height: 128px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-today-tile .text-muted {
    color: rgba(255, 255, 255, .82) !important;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-avatar-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 58px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-avatar-row span {
    position: relative;
    width: 64px;
    height: 60px;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #061833;
    background: transparent;
    border-radius: 0;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-avatar-row img {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(11, 33, 79, .12);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .leave-avatar-row small {
    position: static;
    max-width: 58px;
    margin-top: 4px;
    color: rgba(255, 255, 255, .92);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    transform: none;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile {
    min-height: 214px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile > small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .9);
    font-size: 12px;
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile > strong {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 12px;
    color: #fff;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.08;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile > strong em {
    margin-left: 0;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile .time-tile-stats {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile .time-tile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #26334a;
    background: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile form {
    position: relative;
    z-index: 1;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="home"] .time-tile button {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    color: #26334a;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 920px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="home"] .employee-home-left {
        position: static;
    }
}

/* Final admin/HR shell repair */
body:not(.emp-portal-body) {
    overflow-x: hidden;
    background: #f3f6fa;
}

body:not(.emp-portal-body) .app-shell {
    display: block;
    min-height: 100vh;
    background: #f3f6fa;
}

body:not(.emp-portal-body) .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 100px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #082235;
    overflow: hidden;
}

body:not(.emp-portal-body) .logo {
    height: 50px;
    min-height: 50px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #075aa9;
}

body:not(.emp-portal-body) .logo span {
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

body:not(.emp-portal-body) .sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

body:not(.emp-portal-body) .sidebar-nav::-webkit-scrollbar {
    display: none;
}

body:not(.emp-portal-body) .sidebar-nav a {
    position: relative;
    min-height: 60px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 0;
    color: #9bc0d7;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

body:not(.emp-portal-body) .sidebar-nav a:hover,
body:not(.emp-portal-body) .sidebar-nav a.active {
    color: #fff;
    background: #123f5e;
    transform: none;
}

body:not(.emp-portal-body) .sidebar-nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: #2d9cff;
}

body:not(.emp-portal-body) .sidebar-nav i {
    width: auto;
    margin: 0;
    color: currentColor;
    font-size: 18px;
}

body:not(.emp-portal-body) .ai-card {
    position: static;
    margin: 0;
    padding: 8px 8px 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0;
    background: #082235;
    box-shadow: none;
}

body:not(.emp-portal-body) .ai-card strong,
body:not(.emp-portal-body) .ai-card p,
body:not(.emp-portal-body) .bot-face {
    display: none;
}

body:not(.emp-portal-body) .ai-logout {
    min-height: 56px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #b6d6e9;
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

body:not(.emp-portal-body) .main-content {
    min-width: 0;
    margin-left: 100px;
    background: #f3f6fa;
}

body:not(.emp-portal-body) .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px 0 16px;
    color: #fff;
    background: #126bc8;
    box-shadow: 0 1px 0 rgba(9, 39, 88, .14);
    overflow: visible;
}

body:not(.emp-portal-body) .menu-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    font-size: 22px;
}

body:not(.emp-portal-body) .search-box {
    width: min(480px, 38vw);
    height: 36px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    flex: 0 1 480px;
    border: 0;
    border-radius: 999px;
    color: #66718c;
    background: #fff;
    box-shadow: none;
}

body:not(.emp-portal-body) .search-box input {
    min-width: 0;
    color: #25364f;
    font-size: 12px;
}

body:not(.emp-portal-body) .top-actions {
    min-width: 0;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

body:not(.emp-portal-body) .icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
}

body:not(.emp-portal-body) .divider {
    width: 1px;
    height: 30px;
    margin: 0 4px;
    background: rgba(255, 255, 255, .25);
}

body:not(.emp-portal-body) .account-dropdown {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
}

body:not(.emp-portal-body) .account-trigger {
    max-width: 190px;
    height: 42px;
    min-height: 42px;
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    outline: 0;
    box-shadow: none;
    overflow: hidden;
}

body:not(.emp-portal-body) .account-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: 2px;
}

body:not(.emp-portal-body) .account-trigger .user-avatar {
    width: 34px;
    height: 34px;
    display: block;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    object-fit: cover;
}

body:not(.emp-portal-body) .account-trigger .user-meta {
    min-width: 0;
    display: block;
    text-align: left;
    line-height: 1.08;
}

body:not(.emp-portal-body) .account-trigger .user-meta strong,
body:not(.emp-portal-body) .account-trigger .user-meta span {
    display: block;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.emp-portal-body) .account-trigger .user-meta strong {
    font-size: 13px;
    font-weight: 900;
}

body:not(.emp-portal-body) .account-trigger .user-meta span {
    margin-top: 2px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 800;
}

body:not(.emp-portal-body) .account-trigger > i {
    color: rgba(255, 255, 255, .9);
    font-size: 12px;
}

body:not(.emp-portal-body) .account-menu {
    width: 286px;
    padding: 10px;
    margin-top: 10px !important;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11, 33, 79, .16);
}

body:not(.emp-portal-body) .account-menu:not(.show) {
    display: none;
}

body:not(.emp-portal-body) .dashboard-wrap,
body:not(.emp-portal-body) .module-wrap,
body:not(.emp-portal-body) .internal-wrap {
    max-width: 100%;
    padding: 24px 20px;
}

body:not(.emp-portal-body) .dash-card,
body:not(.emp-portal-body) .module-hero,
body:not(.emp-portal-body) .internal-panel {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .05);
}

body:not(.emp-portal-body) .dashboard-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
    gap: 20px;
}

@media (max-width: 1180px) {
    body:not(.emp-portal-body) .dashboard-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body:not(.emp-portal-body) .sidebar {
        width: 76px;
        transform: translateX(-100%);
        box-shadow: 16px 0 30px rgba(8, 34, 53, .22);
    }

    body.sidebar-open:not(.emp-portal-body) .sidebar {
        transform: translateX(0);
    }

    body:not(.emp-portal-body) .main-content {
        margin-left: 0;
    }

    body:not(.emp-portal-body) .search-box {
        display: none;
    }

    body:not(.emp-portal-body) .account-trigger {
        width: 42px;
        grid-template-columns: 34px;
        padding: 4px;
    }

    body:not(.emp-portal-body) .account-trigger .user-meta,
    body:not(.emp-portal-body) .account-trigger > i,
    body:not(.emp-portal-body) .divider {
        display: none;
    }

    body:not(.emp-portal-body) .dashboard-wrap,
    body:not(.emp-portal-body) .module-wrap,
    body:not(.emp-portal-body) .internal-wrap {
        padding: 16px 12px;
    }
}

@media (min-width: 761px) {
    body.sidebar-closed:not(.emp-portal-body) .sidebar {
        transform: none;
    }

    body.sidebar-closed:not(.emp-portal-body) .main-content {
        margin-left: 100px;
    }
}

/* Employee Engage page redesign */
.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] {
    padding: 26px;
    background: #f4f7fb;
}

.emp-portal-body .emp-engage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(18, 107, 200, .08), rgba(0, 169, 130, .06)), #fff;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .06);
}

.emp-portal-body .emp-engage-hero span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #126bc8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-engage-hero h2 {
    margin: 8px 0 5px;
    color: #061833;
    font-size: 28px;
    font-weight: 900;
}

.emp-portal-body .emp-engage-hero p {
    max-width: 680px;
    margin: 0;
    color: #66718c;
    font-size: 13px;
    font-weight: 700;
}

.emp-portal-body .emp-engage-metrics {
    display: grid;
    grid-template-columns: repeat(3, 86px);
    gap: 10px;
}

.emp-portal-body .emp-engage-metrics article {
    min-height: 70px;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
}

.emp-portal-body .emp-engage-metrics strong {
    color: #061833;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
}

.emp-portal-body .emp-engage-metrics small {
    color: #66718c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid a {
    min-height: 84px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    place-items: initial;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11, 33, 79, .04);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #126bc8;
    background: #eaf3ff;
    font-size: 21px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid span {
    color: #061833;
    font-size: 14px;
    font-weight: 900;
}

.emp-portal-body .emp-engage-feed-head {
    max-width: 920px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto 12px;
}

.emp-portal-body .emp-engage-feed-head h2 {
    margin: 0;
    color: #061833;
    font-size: 18px;
    font-weight: 900;
}

.emp-portal-body .emp-engage-feed-head span {
    color: #66718c;
    font-size: 12px;
    font-weight: 900;
}

.emp-portal-body .emp-engage-feed {
    max-width: 920px;
    display: grid;
    gap: 16px;
    margin: 0 auto;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11, 33, 79, .06);
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-header {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 18px 18px 10px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-body {
    padding: 0 18px 16px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-image-wrap {
    margin: 16px -18px 0;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e3e9f3;
    border-bottom: 1px solid #e3e9f3;
    background: #edf2f8;
    overflow: hidden;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-footer,
.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-comments {
    background: #fbfdff;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-footer {
    padding: 10px 18px 14px;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-action {
    min-height: 36px;
    border-radius: 8px;
    color: #23385f;
    font-weight: 900;
}

.emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .post-action.is-active {
    color: #126bc8;
    background: #eaf3ff;
}

@media (max-width: 900px) {
    .emp-portal-body .emp-engage-hero {
        grid-template-columns: 1fr;
    }

    .emp-portal-body .emp-engage-metrics,
    .emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .emp-portal-body .emp-tab-panel[data-portal-panel="engage"] {
        padding: 18px;
    }

    .emp-portal-body .emp-engage-metrics,
    .emp-portal-body .emp-tab-panel[data-portal-panel="engage"] .portal-app-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RESPONSIVE: unified tablet + mobile across admin/HR, employee
   and auth portals. Appended to consolidate prior sweeps and
   cover the 769-1024px tablet gap that was previously underserved.
   ============================================================ */

/* ---- Tablet landscape & below (<= 1180px) ---- */
@media (max-width: 1180px) {
    .module-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .module-grid { grid-template-columns: 1fr; }
    .internal-feature-grid,
    .module-feature-grid { grid-template-columns: 1fr; }
}

/* ---- Tablet portrait (<= 1024px) ---- */
@media (max-width: 1024px) {
    body:not(.emp-portal-body) .module-wrap,
    body:not(.emp-portal-body) .dashboard-wrap,
    body:not(.emp-portal-body) .internal-wrap {
        padding: 20px 16px;
    }

    .module-hero,
    .internal-hero { padding: 18px 16px; gap: 14px; }
    .module-hero h1,
    .internal-hero h1 { font-size: 21px; }

    .module-stats { gap: 12px; }

    /* Reduce extreme min-widths so tablets show full table without giant horizontal scroll */
    .emp-attendance-table { min-width: 720px; }
    .leave-history-table  { min-width: 960px; }

    /* Employee portal: keep rail visible but tighter (above its 700px horizontal-bar breakpoint) */
}

@media (min-width: 701px) and (max-width: 1024px) {
    .emp-portal-body .emp-rail { width: 88px; }
    .emp-portal-body .emp-main { margin-left: 88px; }
}

/* ---- Tablet & small laptop (<= 900px) ---- */
@media (max-width: 900px) {
    .module-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Hero actions wrap and grow to share the row */
    .module-hero,
    .internal-hero {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .internal-hero-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .internal-hero-actions .module-new-btn,
    .internal-hero-actions .internal-back {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Card title row stacks; tools wrap onto next line */
    .card-title-row {
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }
    .module-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Internal form drops to single column */
    .internal-form { grid-template-columns: 1fr; }

    /* Keka modal body single column at this width too */
    .keka-modal .modal-body { grid-template-columns: 1fr; }
}

/* ---- Phone (<= 640px) ---- */
@media (max-width: 640px) {
    body:not(.emp-portal-body) .module-wrap,
    body:not(.emp-portal-body) .dashboard-wrap,
    body:not(.emp-portal-body) .internal-wrap {
        padding: 14px 10px;
    }

    .module-hero,
    .internal-hero { padding: 14px; gap: 10px; }
    .module-hero h1,
    .internal-hero h1 { font-size: 18px; }
    .module-hero p,
    .internal-hero p { font-size: 12px; }
    .module-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }

    .module-stats,
    .stats-grid { grid-template-columns: 1fr; }

    /* Form actions stack full width; primary button on top */
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .form-actions > * {
        width: 100%;
        justify-content: center;
    }

    /* Tables: drop hard min-widths so cells reflow; keep horizontal scroll as fallback */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .module-table { font-size: 12px; }
    .module-table th,
    .module-table td { padding: 10px 6px; }
    .emp-attendance-table,
    .leave-history-table { min-width: 0; }

    /* Row action buttons shrink */
    .row-btn { width: 30px; height: 30px; font-size: 13px; }

    /* Bulk action bar wraps */
    .bulk-action-bar { flex-wrap: wrap; gap: 8px; }

    /* Status pills tighter */
    .status-pill { padding: 0 8px; font-size: 11px; min-height: 22px; }

    /* Account dropdown hidden text on phone (handled at 760 too, this is belt+braces) */
    body:not(.emp-portal-body) .account-trigger .user-meta { display: none; }

    /* Modal full bleed */
    .keka-modal .modal-dialog {
        margin: 6px;
        max-width: calc(100vw - 12px);
    }
    .keka-modal .modal-body { padding: 14px; }
    .keka-modal .modal-footer { padding: 12px; flex-wrap: wrap; gap: 8px; }
    .keka-modal .modal-footer > * { flex: 1 1 auto; }
}

/* ---- Small phone (<= 480px) ---- */
@media (max-width: 480px) {
    body:not(.emp-portal-body) .topbar { gap: 8px; padding: 0 8px; }
    body:not(.emp-portal-body) .icon-btn { width: 32px; height: 32px; font-size: 15px; }
    body:not(.emp-portal-body) .divider { display: none; }

    .module-hero h1,
    .internal-hero h1 { font-size: 17px; }
    .module-tabs { gap: 18px; }
    .module-tabs button { font-size: 11px; }

    .internal-hero-actions { gap: 6px; }
    .internal-hero-actions .module-new-btn,
    .internal-hero-actions .internal-back {
        font-size: 12px;
        padding: 7px 10px;
    }

    /* Topbar search hidden on phones (already 760 rule, reinforce) */
    body:not(.emp-portal-body) .search-box { display: none; }
}

/* ---- Stat-card sparkline clip + mobile drawer sidebar ----
   1. The dashboard stat cards have a Chart.js sparkline canvas positioned
      absolutely (style.css:473) with `width: calc(100% - 40px) !important`
      pinned to `left: 22px`. On narrow viewports the absolute-positioned
      canvas can paint past the card's rounded edge. Force max-width on the
      canvas, min-width:0 on grid children, and overflow:hidden on every
      ancestor that could let it escape (including main-content / dashboard
      grids). Also prevent the page from getting horizontally wider than the
      viewport via `max-width: 100vw` on the main content column.
   2. The admin/HR sidebar is 76px wide on mobile (style.css:13049) which is too
      narrow for nav labels like "Organization" / "Department" — they wrap and
      get clipped. When the drawer is open (body.sidebar-open) widen it and
      switch to horizontal icon-left/text-right layout. Also add a backdrop.
*/

/* Quick Actions and Attendance Overview: 2 per row on phones
   (overrides older rules at style.css:8995 / :931 that collapsed them
   to a single column). */
@media (max-width: 760px) {
    .quick-grid,
    .circle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Date-range dropdown on the welcome row */
.month-range-dropdown .month-btn { width: 100%; }
.month-range-dropdown .dropdown-menu { min-width: 200px; }
.month-range-dropdown .dropdown-item.active { background: #0d5cff; color: #fff; }
.month-range-dropdown .dropdown-item.active:hover { background: #0d5cff; color: #fff; }
@media (min-width: 761px) {
    .month-range-dropdown { width: 220px; }
}

/* Inline "selected range" label inside other dash cards */
.dash-range-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f5f7fb;
    color: #1f2840;
    font-size: 12px;
    font-weight: 700;
}
.dash-range-label i { color: #0d5cff; font-size: 13px; }

/* Defensive clip on dashboard cards — overrides any descendant overflow leak */
.stat-card,
.dash-card,
.stat-link {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Sparkline canvas: never wider than the card */
.stat-spark {
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

/* Grid children opt-out of min-content sizing so 1fr columns actually clamp */
.stats-grid > *,
.dashboard-wrap > *,
.module-stats > *,
.module-grid > *,
.dash-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Keep the admin/HR content column inside the viewport on phones */
@media (max-width: 760px) {
    body:not(.emp-portal-body) .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }
    body:not(.emp-portal-body) .dashboard-wrap,
    body:not(.emp-portal-body) .module-wrap,
    body:not(.emp-portal-body) .internal-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Welcome-row stacks so the month-btn doesn't push width on phones */
    .welcome-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .welcome-row h1 { font-size: 22px; }
    .month-btn { width: 100%; height: 44px; }
}

@media (max-width: 760px) {
    body.sidebar-open:not(.emp-portal-body) .sidebar {
        width: 240px;
        box-shadow: 16px 0 30px rgba(8, 34, 53, .22);
    }

    body.sidebar-open:not(.emp-portal-body) .logo {
        height: 56px;
        min-height: 56px;
        justify-content: flex-start;
        padding: 0 18px;
    }

    body.sidebar-open:not(.emp-portal-body) .sidebar-nav a {
        min-height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 18px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
    }

    body.sidebar-open:not(.emp-portal-body) .sidebar-nav i {
        width: 22px;
        font-size: 18px;
        text-align: center;
    }

    body.sidebar-open:not(.emp-portal-body) .sidebar-nav a.active::before {
        top: 8px;
        bottom: 8px;
    }

    body.sidebar-open:not(.emp-portal-body) .ai-card {
        padding: 12px 14px 16px;
    }

    body.sidebar-open:not(.emp-portal-body) .ai-logout {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 14px;
        text-align: left;
        font-size: 13px;
        min-height: 44px;
    }

    /* Backdrop overlay behind the open drawer */
    body.sidebar-open:not(.emp-portal-body)::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 29;
        background: rgba(8, 23, 53, .42);
        pointer-events: none;
    }
}

/* ---- Topbar overflow fix (admin/HR portal) ----
   An older @media (max-width: 900px) block sets `.topbar { flex-wrap: wrap }`
   and `.top-actions { width: 100%; margin-left: 0 }` (style.css:902-911), but
   the admin shell-repair rule pins `.topbar { height: 50px; overflow: visible }`
   (style.css:12857). Result: the bell + avatar wrap to a second row that spills
   out beneath the blue bar onto the page content. Force nowrap and put
   .top-actions back on the right at every breakpoint that triggered the old wrap.
*/
@media (max-width: 900px) {
    body:not(.emp-portal-body) .topbar {
        flex-wrap: nowrap;
        height: 50px;
        padding: 0 14px 0 12px;
    }
    body:not(.emp-portal-body) .top-actions {
        width: auto;
        margin-left: auto;
    }
}

/* ---- Touch device tap targets (independent of width) ---- */
@media (hover: none) and (pointer: coarse) {
    .sidebar-nav a { min-height: 56px; }
    .emp-rail a { min-height: 56px; }
    .module-tabs button { min-height: 44px; }
    .row-btn { min-width: 36px; min-height: 36px; }
    .module-new-btn,
    .internal-back,
    .tool-add-btn,
    .primary-btn,
    .ghost-btn,
    .form-actions button { min-height: 40px; }
}