/* ── FOUNDATION ──────────────────────────────── */

/* Import Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* CSS Variables — brand colors in one place.
   Change a color here and it updates everywhere. */
:root {
    --navy: #18345B;
    --blue: #2F77B5;
    --green: #61CE70;
    --white: #ffffff;
    --light: #f4f7fb;
    --text: #333333;
    --border: #e0e0e0;
}

/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--light);
    color: var(--text);
    font-size: 15px;
}

/* Reusable container — centers content, limits width */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── HEADER ──────────────────────────────────── */

.header {
    background-color: var(--white);
    height: 60px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    height: 36px;
    width: auto;
}

.tagline {
    display: none;
}

/* ── APP LAYOUT ──────────────────────────────── */

.app-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* ── SIDEBAR ─────────────────────────────────── */

.sidebar {
    width: 220px;
    min-width: 220px;
    background: linear-gradient(175deg, #0d2040 0%, #1b3b6e 100%);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
}

.sidebar-menu {
    list-style: none;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.tab-item:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--white);
}

.tab-item.active {
    background: linear-gradient(90deg, rgba(97,206,112,0.18) 0%, rgba(97,206,112,0.04) 100%);
    color: var(--white);
    border-left: 3px solid var(--green);
    font-weight: 600;
}

.tab-item i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

/* ── SIDEBAR: COLLAPSIBLE MENU GROUP ─────────── */

/* Wrapper <li> — no padding of its own */
.menu-group { list-style: none; }

/* Clickable group header row */
.menu-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.menu-group-header:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

/* Active parent — a child inside is currently selected */
.menu-group-header.group-active {
    color: var(--white);
    font-weight: 600;
    border-left-color: var(--green);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Rotating chevron */
.menu-group-chevron {
    margin-left: auto;
    font-size: 11px !important;
    width: auto !important;
    transition: transform 0.25s ease;
    opacity: 0.7;
}

.menu-group.open .menu-group-chevron {
    transform: rotate(180deg);
}

/* Children container — animated open/close */
.menu-group-children {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    background: rgba(0, 0, 0, 0.18);
}

.menu-group.open .menu-group-children {
    max-height: 300px;
}

/* Child tab items — indented */
.tab-child {
    padding-left: 48px;
    font-size: 13.5px;
}

.tab-child i {
    font-size: 13px !important;
}

/* ── PROFILE CARD IN SIDEBAR ─────────────────── */

.profile-card {
    padding: 28px 16px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(0,0,0,0.22);
}

.profile-photo-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 14px;
}

.profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--green);
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background-color: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--white);
    border: 2px solid var(--navy);
    transition: background-color 0.2s ease;
}

.photo-overlay:hover {
    background-color: var(--blue);
}

.profile-info {
    width: 100%;
}

.profile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.profile-designation {
    font-size: 11px;
    color: var(--green);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.profile-mobile,
.profile-email {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    word-break: break-all;
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    margin: 0 0 12px;
}

/* ── ADMIN PROFILE PREVIEW ───────────────────── */

.form-note {
    background-color: #e8f0fe;
    color: var(--navy);
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-preview-admin {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.preview-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 16px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.preview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

/* ── CONTENT AREA ────────────────────────────── */

.content {
    flex: 1;
    padding: 32px;
    background-color: var(--light);
    overflow-y: auto;
}

/* Tab panels — hidden by default */
.tab-panel {
    display: none;
}

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

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeef5;
}

/* ── DASHBOARD ───────────────────────────────── */

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 20px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.card {
    background: var(--white);
    border-radius: 12px;
    padding: 22px 18px 18px;
    text-align: center;
    border: none;
    box-shadow: 0 2px 16px rgba(24, 52, 91, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--blue);
    opacity: 0.45;
    border-radius: 0 0 12px 12px;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(24, 52, 91, 0.13);
}

.total-card {
    background: linear-gradient(145deg, #f0fff4 0%, #e8f9ed 100%);
}

.total-card::after {
    background: var(--green);
    opacity: 0.7;
}

.card-label {
    font-size: 11px;
    color: #999;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.card-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

/* ── FORM ────────────────────────────────────── */

.form-card {
    background-color: var(--white);
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

/* Mandatory field asterisk — auto-applied via :has(), no HTML changes needed */
.form-group:has(input[required]) > label::after,
.form-group:has(select[required]) > label::after {
    content: ' *';
    color: #e53935;
    font-weight: 700;
    font-size: 13px;
}

input,
select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--text);
    background-color: var(--white);
    outline: none;
    transition: border-color 0.2s ease;
}

input:focus,
select:focus {
    border-color: var(--blue);
}

.btn-add {
    background-color: var(--navy);
    color: var(--white);
    border: none;
    padding: 12px 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover {
    background-color: var(--blue);
}

.btn-cancel {
    background-color: transparent;
    color: #999;
    border: 1px solid #ccc;
    padding: 12px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background-color: #f5f5f5;
    color: var(--text);
}

/* ── TABLE ───────────────────────────────────── */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

thead {
    background-color: var(--navy);
}

thead th {
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.5px;
}

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s ease;
}

tbody tr:hover {
    background-color: #f0f5ff;
}

tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
}

tbody tr:last-child {
    border-bottom: none;
}

.no-data {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 40px !important;
}

/* ── DELETE BUTTON ───────────────────────────── */

.btn-delete {
    background-color: transparent;
    color: #e53935;
    border: 1px solid #e53935;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover {
    background-color: #e53935;
    color: var(--white);
}

/* ── ACTION COLUMN ALIGNMENT ─────────────────── */

thead th:last-child {
    text-align: center;
}

tbody td:last-child {
    text-align: center;
}

/* ── EDIT BUTTON ─────────────────────────────── */

.btn-edit {
    background-color: transparent;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 5px 12px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
}

.btn-edit:hover {
    background-color: var(--blue);
    color: var(--white);
}

/* ── ADMIN LINK IN HEADER ────────────────────── */

.admin-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    border: 1.5px solid #ddd;
    padding: 7px 18px;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-link:hover {
    border-color: var(--navy);
    color: var(--navy);
    background-color: var(--light);
}

/* ── FILTER BAR ──────────────────────────────── */

.filter-bar {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

.filter-group select {
    padding: 8px 12px;
    min-width: 160px;
}

/* ── PROJECT BADGE IN TABLE ──────────────────── */

.project-badge {
    background-color: #e8f0fe;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── STATUS BADGES (Admin Page) ──────────────── */

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.badge-active {
    background-color: #e6f9ec;
    color: #2e7d32;
}

.badge-upcoming {
    background-color: #fff8e1;
    color: #f57f17;
}

.badge-closed,
.badge-expired {
    background-color: #fce4e4;
    color: #c62828;
}

.badge-depthead {
    background-color: #ede7f6;
    color: #4527a0;
}

.badge-hr {
    background-color: #fce4ec;
    color: #880e4f;
}

.badge-finance {
    background-color: #e0f2f1;
    color: #00695c;
}

/* ── FIELD HINT ──────────────────────────────── */

.field-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f57f17;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 5px;
    padding: 6px 10px;
    margin-top: 4px;
}

.field-hint i {
    font-size: 12px;
    color: #f57f17;
}

/* ── PHONE FIELD ─────────────────────────────── */

.phone-group .phone-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.country-code-select {
    flex: 0 0 110px;
    min-width: 0;
}

.phone-group #emp-phone {
    flex: 1;
    min-width: 0;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #c62828;
    background: #fdecea;
    border-radius: 4px;
    padding: 5px 10px;
    margin-top: 4px;
}

.field-error i {
    font-size: 12px;
    color: #c62828;
}

/* ── DEPT DATE CONTROLLER ────────────────────── */

.dept-date-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dept-date-bar i {
    color: var(--blue);
    font-size: 16px;
}

.dept-date-bar label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

.dept-date-bar input[type="date"] {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--text);
}

.dept-date-hint {
    font-size: 12px;
    color: var(--blue);
    font-weight: 600;
}

/* ── ORG CHART ───────────────────────────────── */

/* Outer scroll wrapper — centers the tree */
.org-tree-wrap {
    overflow-x: auto;
    padding: 24px 16px 12px;
    text-align: center;
}

/* Root <ul> — inline-flex so it auto-sizes to content and stays centered */
.org-tree {
    display: inline-flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Every <li> — column layout, children centered under their node */
.org-tree li {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Child <ul> — equal-width flex row so bar segments tile seamlessly */
.org-tree li > ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;   /* gap = parent stem length */
    position: relative;
}

/* Parent stem: 20px drop from parent node bottom to the horizontal bar */
.org-tree li > ul::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: #4a90d9;
}

/* Each child <li> — equal flex share ensures bar segments line up */
.org-tree li > ul > li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 0;
    position: relative;
}

/* Horizontal bar segment: each li draws its full-width section.
   First child trims its left half; last child trims its right half. */
.org-tree li > ul > li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #4a90d9;
}
.org-tree li > ul > li:first-child::before { left:  50%; }
.org-tree li > ul > li:last-child::before  { right: 50%; }

/* Vertical drop: from the bar down to the child node */
.org-tree li > ul > li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: #4a90d9;
}

/* Single child: hide the bar segment entirely, keep only the drop */
.org-tree li > ul > li:only-child::before { display: none; }

/* ── ORG NODE CARD ────────────────────────────── */

.org-node {
    display: inline-flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-top: 4px solid var(--blue);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 180px;
    max-width: 220px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
    text-align: left;
}

.org-node:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}

.org-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.org-dept-id {
    background-color: var(--navy);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.org-dept-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-node-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.org-head,
.org-emp-count {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-head i     { color: var(--blue); }
.org-emp-count i { color: var(--green); }

/* ── INSIGHTS SECTION ────────────────────────── */

/* Smart text insight cards */
.insight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.insight-card {
    background-color: var(--light);
    border-left: 4px solid var(--blue);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.insight-card.highlight {
    border-left-color: var(--green);
}

.insight-card.warning {
    border-left-color: #f57f17;
}

.insight-icon {
    font-size: 22px;
    margin-top: 2px;
}

.insight-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}

.insight-text strong {
    color: var(--navy);
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

/* Charts row */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.chart-card {
    background-color: var(--light);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.chart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 20px;
}

.chart-container {
    position: relative;
    height: 280px;
}

/* ── WORKFLOW ROLES ──────────────────────────── */

/* Employee chip selector */
.wf-emp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 14px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 56px;
    align-items: flex-start;
}

.emp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--white);
    transition: all 0.15s ease;
    user-select: none;
}

.emp-chip input[type="checkbox"] {
    display: none;
}

.emp-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.emp-chip.checked {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.emp-chip.checked i { color: var(--green); }

.emp-chip.disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.wf-count-hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    margin-left: 2px;
}

.wf-count-hint.maxed { color: #e53935; }

/* Role cards grid */
#wf-roles-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.wf-role-card {
    border-radius: 12px;
    border: 1px solid;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wf-role-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

.wf-role-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    gap: 12px;
}

.wf-role-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wf-role-header-left > i {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    flex-shrink: 0;
}

.wf-role-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-role-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wf-role-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wf-btn-edit,
.wf-btn-delete {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.15s ease;
}

.wf-btn-edit:hover   { background: rgba(255,255,255,0.30); }
.wf-btn-delete:hover { background: rgba(220,53,69,0.55); }

.wf-role-body {
    padding: 16px 18px;
}

.wf-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.wf-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.wf-role-footer {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.wf-role-footer i    { color: var(--green); }
.wf-role-footer code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
}

/* Empty state */
.wf-empty {
    text-align: center;
    padding: 60px 20px;
    color: #bbb;
}

.wf-empty i    { font-size: 48px; margin-bottom: 14px; display: block; }
.wf-empty p    { font-size: 14px; }

/* ── MOBILE RESPONSIVE ───────────────────────── */

@media (max-width: 768px) {

    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: unset;
        padding: 0;
    }

    .sidebar-menu {
        display: flex;
        overflow-x: auto;
    }

    .tab-item {
        flex-direction: column;
        gap: 4px;
        padding: 12px 16px;
        font-size: 11px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .tab-item.active {
        border-left: none;
        border-bottom: 3px solid var(--green);
    }

    .content {
        padding: 20px 16px;
    }

    .charts-row {
        grid-template-columns: 1fr;
    }
}


/* ── REFERENCE DATA TAB ──────────────────────── */

.ref-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.ref-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 20px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ref-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-card-title i {
    color: var(--blue);
    font-size: 14px;
}

.ref-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ref-inline-form input[type="text"] {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.ref-inline-form input[type="text"]:focus {
    border-color: var(--blue);
}

.ref-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 380px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

.ref-value-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: var(--text);
    transition: background 0.15s;
}

.ref-value-item:hover {
    background: #f8fafc;
}

.ref-value-text {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Compact ID chip shown beside each reference data label */
.ref-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e8f0fe;
    color: #1a56db;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

/* Secondary label shown under location name (country mapping) */
.ref-value-sub {
    font-size: 11px;
    color: #999;
    font-weight: 400;
}

/* Two-column form row inside ref-inline-form (submit + cancel buttons) */
.ref-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ref-value-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ref-value-item:hover .ref-value-actions {
    opacity: 1;
}

.ref-btn-edit,
.ref-btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    transition: background 0.15s;
}

.ref-btn-edit  { color: var(--blue); }
.ref-btn-delete { color: #d32f2f; }

.ref-btn-edit:hover  { background: #e8f0fe; }
.ref-btn-delete:hover { background: #fdecea; }

.ref-empty {
    font-size: 13px;
    color: #aaa;
    padding: 14px 0;
    text-align: center;
}

@media (max-width: 1024px) {
    .ref-data-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .ref-data-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   EMPLOYEE FORM — REDESIGN
   ═══════════════════════════════════════════════ */

.emp-form-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(24, 52, 91, 0.10);
    overflow: hidden;
    border: 1px solid #dce8f4;
}

/* ── Form header ─────────────────────────────── */

.emp-form-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 28px;
    background: linear-gradient(135deg, var(--navy) 0%, #2a5298 100%);
    color: var(--white);
}

.emp-form-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}

.emp-form-header-text h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}

.emp-form-header-text p {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* ── Sections ────────────────────────────────── */

.emp-section {
    padding: 20px 28px 8px;
    border-bottom: 1px solid #f0f4fa;
}

.emp-section:last-of-type {
    border-bottom: none;
}

.emp-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f8;
}

.emp-section-label i {
    font-size: 12px;
}

/* ── Field grid ──────────────────────────────── */

.emp-field-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 12px;
}

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

/* ── Label icons ─────────────────────────────── */

.emp-form-card label {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.emp-form-card label i.fa-fw {
    color: var(--blue);
    font-size: 11px;
    opacity: 0.8;
}

/* ── Input styling ───────────────────────────── */

.emp-form-card input,
.emp-form-card select {
    padding: 9px 13px;
    border: 1.5px solid #d8e3ef;
    border-radius: 7px;
    font-size: 13.5px;
    background: #fafcff;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.emp-form-card input:focus,
.emp-form-card select:focus {
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(47, 119, 181, 0.13);
    outline: none;
}

.emp-form-card input:hover,
.emp-form-card select:hover {
    border-color: #9db8d8;
}

/* ── Action footer ───────────────────────────── */

.emp-form-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 28px 20px;
    background: #f7fafd;
    border-top: 1px solid #edf2f9;
}

.emp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--navy) 0%, #2a5298 100%);
    color: var(--white);
    border: none;
    padding: 11px 28px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(24, 52, 91, 0.25);
}

.emp-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(24, 52, 91, 0.30);
}

.emp-btn-primary:active {
    transform: translateY(0);
}

.emp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.emp-btn-ghost:hover {
    border-color: #9ca3af;
    color: var(--text);
    background: #f9fafb;
}

@media (max-width: 1024px) {
    .emp-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .emp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .emp-grid-4,
    .emp-grid-3,
    .emp-grid-2 { grid-template-columns: 1fr; }
    .emp-form-header { padding: 16px 20px; }
    .emp-section    { padding: 16px 20px 4px; }
    .emp-form-footer { padding: 14px 20px 16px; }
}

/* ═══════════════════════════════════════════════
   EMPLOYEE TABLE FILTER BAR
   ═══════════════════════════════════════════════ */

/* ── EMPLOYEE FILTER BAR ─────────────────────── */

.emp-filter-bar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* Row 1: all five filter fields, equal width */
.emp-filter-fields {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-filter-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f4f7fb;
    border: 1.5px solid #dce8f4;
    border-radius: 8px;
    padding: 7px 12px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.emp-filter-field:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47, 119, 181, 0.10);
    background: var(--white);
}

.emp-filter-field i {
    color: #9aafca;
    font-size: 12px;
    flex-shrink: 0;
}

.emp-filter-field input,
.emp-filter-field select {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: var(--text);
    outline: none;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    font-family: 'Poppins', sans-serif;
}

.emp-filter-field select { cursor: pointer; }

/* Row 2: count on left, actions on right */
.emp-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f4fa;
}

.emp-filter-count {
    font-size: 12px;
    color: #7a8fa6;
    font-weight: 600;
    margin-right: auto;
    white-space: nowrap;
}

.emp-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff0f0;
    color: #c62828;
    border: 1px solid #ffcdd2;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}

.emp-filter-clear:hover { background: #ffcdd2; }

@media (max-width: 900px) {
    .emp-filter-fields { flex-wrap: wrap; }
    .emp-filter-field  { flex: 1 1 160px; }
}

/* ── EMPLOYEE TABLE ───────────────────────────── */

.emp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(24,52,91,0.08);
}

/* Header */
.emp-table thead {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}

.emp-table thead th {
    padding: 13px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    border-bottom: none;
}

.emp-th-num { width: 42px; text-align: center !important; }

/* Body rows */
.emp-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.15s, transform 0.1s;
    position: relative;
}

.emp-table tbody tr:last-child { border-bottom: none; }

/* Alternating subtle tint */
.emp-table tbody tr:nth-child(even) { background: #fafcff; }

/* Hover: left accent + lift */
.emp-table tbody tr:hover {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--blue);
}

.emp-table tbody td {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text);
    vertical-align: middle;
}

/* Row number column */
.emp-td-num {
    text-align: center;
    font-size: 11px;
    color: #aab8cc;
    font-weight: 600;
    width: 42px;
}

/* Employee name cell */
.emp-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.emp-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.emp-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.emp-name-primary {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}

.emp-name-id {
    font-size: 11px;
    color: #8fa3bc;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Designation cell — slightly muted */
.emp-td-desg {
    color: #4a6080;
    font-size: 12.5px;
}

/* Manager tag */
.emp-manager-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #3a5270;
}

.emp-dash { color: #c0cad8; }

/* Passport alert icon inline with name */
.emp-passport-icon {
    font-size: 11px;
    vertical-align: middle;
}
.emp-passport-expired  { color: #c62828; }
.emp-passport-critical { color: #e65100; }
.emp-passport-warning  { color: #f59e0b; }

/* Action buttons — icon-only, grouped */
.emp-action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.emp-table .btn-edit,
.emp-table .btn-delete {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}

.emp-table .btn-edit {
    background: #e8f0fe;
    color: var(--blue);
}

.emp-table .btn-edit:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-1px);
}

.emp-table .btn-delete {
    background: #fde8e8;
    color: #c62828;
}

.emp-table .btn-delete:hover {
    background: #c62828;
    color: #fff;
    transform: translateY(-1px);
}

/* ── EXPORT BUTTONS ───────────────────────────── */

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1d7a45 0%, #27a85e 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px 7px 12px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(29, 122, 69, 0.30);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    text-align: left;
}

/* Two-line inner layout */
.btn-export-inner {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.btn-export-main {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.btn-export-sub {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.82;
    line-height: 1.2;
}

/* Download arrow sits to the right */
.btn-export-dl {
    font-size: 11px;
    opacity: 0.85;
    margin-left: 2px;
}

.btn-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 122, 69, 0.40);
}

.btn-export:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(29, 122, 69, 0.25);
}

/* ── TABLE SECTION HEADER (dept + future tables) ── */

.table-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #f4f7fb;
    border: 1px solid #e4eaf4;
    border-radius: 8px;
}

.table-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.table-section-count {
    display: inline-block;
    background: #e0eaf7;
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 20px;
    margin-left: 2px;
}

/* ── EXPORT TOAST ─────────────────────────────── */

.export-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #1a2e4a;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 9999;
    max-width: 420px;
}

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

.export-toast i {
    color: #4cdc85;
    font-size: 16px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   CREATE REPORT MODAL
   ══════════════════════════════════════════════════════════════════ */

.exp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(3px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.exp-modal-overlay.exp-modal--open {
    opacity: 1;
}
.exp-modal-overlay.exp-modal--open .exp-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.exp-modal-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10,22,40,0.22), 0 4px 12px rgba(10,22,40,0.10);
    width: 100%;
    max-width: 480px;
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(.2,.8,.4,1), opacity 0.22s ease;
}

/* Header */
.exp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #eef2f8;
}
.exp-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.exp-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy) 0%, #2a4a80 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.exp-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2f4e;
    margin: 0;
}
.exp-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a9ab0;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}
.exp-modal-close:hover { background: #f0f4f8; color: #1a2f4e; }

/* Body */
.exp-modal-body {
    padding: 20px 22px 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.exp-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.exp-modal-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4a5e78;
    letter-spacing: 0.2px;
}
.exp-modal-req {
    color: #e53e3e;
    margin-left: 2px;
}
.exp-modal-optional {
    font-size: 11px;
    font-weight: 400;
    color: #9aabb8;
    margin-left: 4px;
    background: #f0f4f8;
    border-radius: 4px;
    padding: 1px 6px;
}
.exp-modal-input {
    padding: 9px 12px;
    border: 1.5px solid #d8e2f0;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: #1a2f4e;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.exp-modal-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.exp-modal-input--error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.10) !important;
}
.exp-modal-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}
.exp-modal-err {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #c53030;
    font-weight: 500;
}
.exp-modal-hint {
    font-size: 11.5px;
    color: #9aabb8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.exp-modal-hint kbd {
    background: #f0f4f8;
    border: 1px solid #d8e2f0;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: monospace;
    color: #4a5e78;
}

/* Footer */
.exp-modal-footer {
    padding: 16px 22px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.exp-modal-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.exp-modal-btn--cancel {
    background: #f0f4f8;
    color: #4a5e78;
    border: 1.5px solid #d8e2f0;
}
.exp-modal-btn--cancel:hover { background: #e4eaf2; }
.exp-modal-btn--create {
    background: linear-gradient(135deg, var(--navy) 0%, #2a4a80 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(26,47,78,0.25);
}
.exp-modal-btn--create:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(26,47,78,0.30);
}
.exp-modal-btn--create:active { transform: translateY(0); }

/* ── Empty state (report list) ───────────────────────────────────── */
.exp-empty-state {
    text-align: center;
    padding: 56px 24px !important;
}
.exp-empty-icon {
    font-size: 36px;
    color: #c8d8ec;
    margin-bottom: 14px;
}
.exp-empty-msg {
    font-size: 13.5px;
    color: #6b7fa3;
    margin: 0 0 20px;
    line-height: 1.65;
}
.exp-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--navy) 0%, #2a4a80 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(26,47,78,0.22);
    transition: transform 0.15s, box-shadow 0.15s;
}
.exp-empty-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(26,47,78,0.30);
}

/* ── Inline rename in report list ────────────────────────────────── */
.exp-report-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.exp-rename-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #b0c0d8;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0;
    transition: color 0.15s, opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.exp-report-row:hover .exp-rename-btn { opacity: 1; }
.exp-rename-btn:hover { color: var(--blue); background: #e8f0fe; }

/* Delete report button — hover-reveal, red tint */
.exp-delete-report-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #b0c0d8;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0;
    transition: color 0.15s, opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.exp-report-row:hover .exp-delete-report-btn { opacity: 1; }
.exp-delete-report-btn:hover { color: #c0392b; background: #fdecea; }

/* Delete confirmation strip */
.exp-delete-confirm-strip {
    display: flex;
    align-items: center;
    background: #fff5f5;
    border-top: 1px solid #f5c6cb;
    border-bottom: 1px solid #f5c6cb;
    border-radius: 0 0 10px 10px;
    padding: 12px 20px;
    animation: exp-strip-slide 0.22s ease-out;
}
.exp-delete-confirm-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-wrap: wrap;
}
.exp-delete-confirm-icon {
    color: #c0392b;
    font-size: 17px;
    flex-shrink: 0;
}
.exp-delete-confirm-msg {
    flex: 1;
    font-size: 13.5px;
    color: #5a1a1a;
    font-weight: 500;
    min-width: 200px;
}
.exp-delete-confirm-msg strong { font-weight: 700; }
.exp-delete-confirm-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.exp-delete-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: #f0f4fa;
    color: #1a2f4e;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-delete-btn-cancel:hover { background: #e0e8f8; }
.exp-delete-btn-yes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-delete-btn-yes:hover { background: #a93226; }

.exp-inline-rename-input {
    flex: 1;
    padding: 4px 8px;
    border: 1.5px solid var(--blue);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    min-width: 0;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}
.exp-inline-rename-save,
.exp-inline-rename-cancel {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.exp-inline-rename-save   { color: #15803d; }
.exp-inline-rename-save:hover   { background: #dcfce7; }
.exp-inline-rename-cancel { color: #b91c1c; }
.exp-inline-rename-cancel:hover { background: #fee2e2; }

/* ── OPTIONAL SECTION TAG ─────────────────────── */

.section-optional-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #e8f4fd;
    color: #2F77B5;
    border: 1px solid #b3d6f5;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── PASSPORT ALERTS PANEL ────────────────────── */

.passport-alerts-card {
    background: #fffdf5;
    border: 1.5px solid #f5c518;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(245, 197, 24, 0.15);
}

.pa-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
    border-bottom: 1px solid #f5c518;
    font-size: 13px;
    font-weight: 700;
    color: #7a5a00;
}

.pa-header i {
    color: #f5a623;
    font-size: 15px;
}

.pa-total-badge {
    background: #f5a623;
    color: #fff;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}

.pa-header-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: #a07020;
    white-space: nowrap;
}

.pa-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.pa-title-expired  { background: #fff0f0; color: #c62828; border-bottom: 1px solid #ffcdd2; }
.pa-title-critical { background: #fff3e0; color: #e65100; border-bottom: 1px solid #ffe0b2; }
.pa-title-warning  { background: #fffde7; color: #a07020; border-bottom: 1px solid #fff9c4; }

.pa-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 16px;
    border-bottom: 1px solid #f5f0e0;
    flex-wrap: wrap;
}

.pa-row:last-child { border-bottom: none; }
.pa-row:hover { background: #fffbee; }

.pa-emp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.pa-emp-info strong {
    font-size: 13px;
    color: var(--navy);
}

.pa-empid {
    font-size: 11px;
    color: #888;
    background: #f0f4fa;
    border-radius: 4px;
    padding: 1px 5px;
}

.pa-passport-info {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    font-size: 12px;
    color: #555;
    flex-wrap: wrap;
}

.pa-flag { font-size: 16px; }

.pa-sep { color: #bbb; }

.pa-days-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pa-level-expired  { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.pa-level-critical { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.pa-level-warning  { background: #fffde7; color: #a07020; border: 1px solid #fff176; }

.pa-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(21, 101, 192, 0.30);
}

.pa-notify-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.40);
}

/* Sidebar alert badge */
.passport-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: auto;
    line-height: 1;
}

/* ── EMPLOYEE IDENTIFICATION SECTION ─────────── */

/* Mini ID records table inside the form */
.emp-id-records-list {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dce8f4;
}

.emp-id-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.emp-id-table thead {
    background: linear-gradient(135deg, #2a4a7a 0%, #2F77B5 100%);
}

.emp-id-table thead th {
    padding: 8px 12px;
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.emp-id-table tbody tr {
    border-bottom: 1px solid #eef2f8;
    transition: background 0.12s;
}

.emp-id-table tbody tr:last-child { border-bottom: none; }
.emp-id-table tbody tr:hover { background: #f4f8ff; }

.emp-id-table tbody td {
    padding: 8px 12px;
    color: var(--text);
    vertical-align: middle;
}

/* Row action buttons inside the ID mini table */
.emp-id-row-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.emp-id-edit-btn,
.emp-id-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.14s, transform 0.1s;
}

.emp-id-edit-btn   { background: #e8f0fe; color: var(--blue); }
.emp-id-edit-btn:hover   { background: var(--blue); color: #fff; transform: translateY(-1px); }
.emp-id-delete-btn { background: #fde8e8; color: #c62828; }
.emp-id-delete-btn:hover { background: #c62828; color: #fff; transform: translateY(-1px); }

/* Add / edit sub-form action row */
.emp-id-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.emp-id-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--navy) 0%, #2F77B5 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(24,52,91,0.22);
    transition: transform 0.15s, box-shadow 0.15s;
}

.emp-id-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(24,52,91,0.30);
}

.emp-id-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    color: #c62828;
    border: 1px solid #ffcdd2;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.14s;
}

.emp-id-cancel-btn:hover { background: #fff0f0; }

/* ID sub-form two-row grids */
.emp-id-grid-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}

.emp-id-grid-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

/* Primary / Secondary record type badges in mini-table */
.id-primary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff8e1;
    color: #b7791f;
    border: 1px solid #f6c94b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.id-primary-badge i { font-size: 9px; }

.id-secondary-badge {
    display: inline-block;
    background: #f1f4fa;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ID Status badges */
.id-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.id-badge-active   { background: #e6f9ec; color: #2e7d32; }
.id-badge-expiring { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.id-badge-expired  { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* ID alert panel accent colour (re-uses passport-alerts-card) */
.id-alerts-card {
    border-color: #b0bec5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.id-alerts-card .pa-header {
    background: linear-gradient(135deg, #eceff1 0%, #f5f5f5 100%);
    border-bottom-color: #b0bec5;
    color: #37474f;
}

.id-alerts-card .pa-header i { color: #546e7a; }
.id-alerts-card .pa-total-badge { background: #546e7a; }

/* Alert level classes for ID rows */
.id-alert-expired  { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.id-alert-expiring { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

/* Country tag chip inside ID type list items */
.id-type-country-tag {
    display: inline-block;
    background: #e8f0fe;
    color: var(--navy);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Small hint text in ref card title */
.ref-card-hint {
    font-size: 10px;
    font-weight: 400;
    color: #8fa3bc;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* Stacked ref-inline-form for ID Types (two inputs) */
.ref-inline-form--stacked {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ref-inline-form--stacked select,
.ref-inline-form--stacked input[type="text"] {
    flex: 1;
    min-width: 120px;
}

/* ── Relationship Type active/inactive toggle ───── */
.ref-btn-toggle {
    background: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ref-btn-toggle.is-active {
    background: #e6f7ef;
    color: #22a06b;
    border-color: #b7efd8;
}
.ref-btn-toggle.is-active:hover {
    background: #cdf0e0;
}
.ref-btn-toggle.is-inactive {
    background: #f4f5f7;
    color: #8a9ab0;
    border-color: #dde2ea;
}
.ref-btn-toggle.is-inactive:hover {
    background: #e8eaee;
}


/* ═══════════════════════════════════════════════
   ORG CHART  (tab: emp-org-chart)
   ═══════════════════════════════════════════════ */

/* ── Toolbar ──────────────────────────────────── */
.oc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
}

.oc-toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.oc-toolbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.oc-search-wrap {
    position: relative;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.oc-search-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.oc-search-wrap input {
    width: 100%;
    padding: 7px 30px 7px 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color .2s;
    background: var(--light);
}
.oc-search-wrap input:focus { border-color: var(--blue); background: var(--white); }

.oc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 13px;
    padding: 0;
    line-height: 1;
    display: none;
}
.oc-search-clear.visible { display: block; }

.oc-filter-select {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    background: var(--light);
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
    min-width: 150px;
}
.oc-filter-select:focus { border-color: var(--blue); background: var(--white); }

/* Generic toolbar buttons */
.oc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background .18s, border-color .18s, color .18s;
    white-space: nowrap;
}
.oc-btn-ghost {
    background: var(--white);
    color: var(--navy);
}
.oc-btn-ghost:hover { background: var(--light); border-color: var(--blue); color: var(--blue); }

.oc-btn-primary {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.oc-btn-primary:hover { background: var(--navy); border-color: var(--navy); }

/* Zoom controls */
.oc-zoom-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 4px;
}

.oc-zoom-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--navy);
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background .15s;
}
.oc-zoom-btn:hover { background: var(--white); color: var(--blue); }

.oc-zoom-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    min-width: 38px;
    text-align: center;
}

/* Focus bar */
.oc-focus-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: #e8f4ff;
    border-bottom: 1px solid #b3d9ff;
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
}
.oc-focus-bar.visible { display: flex; }
.oc-focus-bar i { color: var(--blue); }
.oc-focus-bar strong { color: var(--blue); }

.oc-focus-clear {
    margin-left: auto;
    background: none;
    border: 1px solid var(--blue);
    color: var(--blue);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.oc-focus-clear:hover { background: var(--blue); color: var(--white); }

/* ── Legend ───────────────────────────────────── */
.oc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 18px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.eoc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-weight: 500;
}

.eoc-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Viewport & Canvas ────────────────────────── */
.oc-viewport {
    position: relative;
    overflow: hidden;
    background: #f0f4fa;
    min-height: 520px;
    cursor: grab;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--border);
    border-top: none;
    background-image: none;
}
.oc-viewport:active { cursor: grabbing; }

.oc-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    padding: 48px 48px 80px;
    /* wide enough for large trees; shrinks to content */
    min-width: max-content;
}

/* SVG connector overlay */
.oc-canvas svg.eoc-svg-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.oc-canvas svg.eoc-svg-lines line,
.oc-canvas svg.eoc-svg-lines path {
    stroke: #b0c4de;
    stroke-width: 1.8;
    fill: none;
    transition: stroke .2s;
}

/* ── Root row ─────────────────────────────────── */
.eoc-roots-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

/* Each root tree (column) */
.eoc-root-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── Node wrapper ─────────────────────────────── */
.eoc-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── Card ─────────────────────────────────────── */
.eoc-card {
    position: relative;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px 12px;
    width: 180px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s, opacity .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    user-select: none;
    text-align: center;
}
.eoc-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 16px rgba(47,119,181,0.18);
    transform: translateY(-2px);
}

/* Selected card */
.eoc-card--selected {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(47,119,181,0.22), 0 4px 16px rgba(47,119,181,0.2) !important;
    background: #f0f7ff !important;
}

/* Ancestor/descendant chain highlight */
.eoc-card--chain {
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 3px rgba(255,152,0,0.22) !important;
    background: #fff8f0 !important;
}

/* Subordinates highlight */
.eoc-card--sub {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 2px rgba(97,206,112,0.22) !important;
    background: #f4fff5 !important;
}

/* Dimmed nodes */
.eoc-card--dimmed {
    opacity: 0.28;
    filter: grayscale(60%);
    pointer-events: none;
}

/* Avatar */
.eoc-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.5);
}

/* Card body text */
.eoc-card-body { text-align: center; }

.eoc-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
}
.eoc-card-desg {
    font-size: 11px;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
}
.eoc-card-dept {
    font-size: 10px;
    color: #888;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
}
.eoc-card-id {
    font-size: 10px;
    color: #aaa;
    font-family: monospace;
}

/* Team size badge */
.eoc-team-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    color: #555;
    font-weight: 600;
}
.eoc-team-badge i { font-size: 9px; color: var(--blue); }

/* "You" badge */
.eoc-you-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Expand/collapse toggle button */
.eoc-toggle-btn {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--blue);
    color: var(--blue);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.eoc-toggle-btn:hover { background: var(--blue); color: var(--white); }

/* ── Children row ─────────────────────────────── */
.eoc-children-row {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 36px;
    position: relative;
}

/* Individual child column */
.eoc-child-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── Details Panel ────────────────────────────── */
.oc-details-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--white);
    box-shadow: -4px 0 24px rgba(0,0,0,0.13);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: right .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid var(--blue);
    overflow: hidden;
}
.eoc-details-panel--open { right: 0 !important; }

.oc-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--light);
    flex-shrink: 0;
}

.oc-details-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.oc-details-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s, color .15s;
    line-height: 1;
}
.oc-details-close:hover { background: #f0f0f0; color: var(--navy); }

.oc-details-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Hero section at top of details */
.eoc-det-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    text-align: center;
}

.eoc-det-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.eoc-det-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

.eoc-det-desg {
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
}

.eoc-det-id {
    font-size: 11px;
    color: #aaa;
    font-family: monospace;
}

/* Details grid rows */
.eoc-det-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eoc-det-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.eoc-det-row:last-child { border-bottom: none; }

.eoc-det-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 1px;
}

.eoc-det-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
    margin-bottom: 1px;
}

.eoc-det-value {
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
}

/* Section heading inside details */
.eoc-det-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.eoc-det-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin-bottom: 10px;
}

/* Reporting chain pills */
.eoc-chain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.eoc-chain-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.eoc-chain-pill:hover { background: #e8f4ff; border-color: var(--blue); color: var(--blue); }
.eoc-chain-pill span.eoc-cp-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eoc-chain-arrow {
    font-size: 12px;
    color: #bbb;
}

/* Action buttons at bottom of details */
.eoc-det-actions {
    display: flex;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.eoc-det-actions button {
    flex: 1;
    padding: 9px 0;
    border-radius: 7px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s;
}
.eoc-det-actions .btn-focus-mode {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}
.eoc-det-actions .btn-focus-mode:hover { background: var(--blue); border-color: var(--blue); }
.eoc-det-actions .btn-close-details {
    background: var(--white);
    color: #666;
}
.eoc-det-actions .btn-close-details:hover { background: var(--light); border-color: #aaa; }

/* ── Empty state ──────────────────────────────── */
.eoc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}
.eoc-empty i {
    font-size: 48px;
    margin-bottom: 14px;
    display: block;
    opacity: 0.35;
}
.eoc-empty p {
    font-size: 14px;
    color: #999;
}

/* ── Responsive tweaks ────────────────────────── */
@media (max-width: 640px) {
    .oc-toolbar { flex-direction: column; align-items: stretch; }
    .oc-toolbar-left,
    .oc-toolbar-right { flex-wrap: wrap; }
    .oc-details-panel { width: 100%; right: -100%; border-left: none; border-top: 3px solid var(--blue); }
    .eoc-card { width: 148px; }
    .eoc-card-name, .eoc-card-desg, .eoc-card-dept { max-width: 120px; }
}



/* ═══════════════════════════════════════════════
   EMPLOYEE ORG CHART  (index.html, tab: org-chart)
   Uses poc-* prefix (Personal Org Chart)
   Card/avatar styles reuse eoc-* from admin CSS
   ═══════════════════════════════════════════════ */

.poc-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ── Ancestor breadcrumb chain ───────────────── */
.poc-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 24px;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.poc-chain-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.poc-chain-pill:hover { background: #e8f4ff; border-color: var(--blue); color: var(--blue); }

.poc-chain-pill--active {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    cursor: default;
    pointer-events: none;
}
.poc-chain-pill--active:hover { background: var(--navy); }

.poc-cp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.poc-chain-arrow {
    font-size: 16px;
    color: #bbb;
    line-height: 1;
    padding: 0 1px;
}

/* ── Section labels ───────────────────────────── */
.poc-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.poc-section-label i { color: var(--blue); font-size: 12px; }

.poc-count-badge {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    border-radius: 10px;
    padding: 0px 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}

/* ── Vertical connector line ─────────────────── */
.poc-connector {
    width: 2px;
    height: 32px;
    background: #b0c4de;
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Manager row ──────────────────────────────── */
.poc-manager-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.poc-mgr-card {
    width: 190px !important;
    opacity: 0.92;
    border-color: #b0c4de !important;
}
.poc-mgr-card:hover { opacity: 1; }

/* ── Self / focus section ─────────────────────── */
.poc-self-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Make the focused (self) card wider and more prominent */
.poc-focus-card {
    width: 220px !important;
    box-shadow: 0 4px 20px rgba(47,119,181,0.20) !important;
    padding: 18px 18px 14px !important;
}
.poc-focus-card .eoc-card-name { font-size: 14px !important; max-width: 180px !important; }
.poc-focus-card .eoc-card-desg { font-size: 12px !important; max-width: 180px !important; }
.poc-focus-card .eoc-card-dept { max-width: 180px !important; }

/* ── Reports row ──────────────────────────────── */
.poc-reports-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.poc-reports-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.poc-reports-row .eoc-card {
    width: 168px;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.poc-reports-row .eoc-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(47,119,181,0.18);
    transform: translateY(-2px);
}

/* ── "No direct reports" note ────────────────── */
.poc-no-reports {
    margin-top: 8px;
    font-size: 13px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 6px;
}
.poc-no-reports i { color: var(--green); }

/* ── "Back to My Position" button ────────────── */
.poc-back-btn {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
    box-shadow: 0 2px 8px rgba(24,52,91,0.18);
}
.poc-back-btn:hover { background: var(--blue); }

/* ── Empty state ──────────────────────────────── */
.poc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
    width: 100%;
}
.poc-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.3;
    color: var(--blue);
}
.poc-empty p {
    font-size: 14px;
    color: #999;
    line-height: 1.7;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 560px) {
    .poc-focus-card  { width: 180px !important; }
    .poc-mgr-card    { width: 160px !important; }
    .poc-reports-row .eoc-card { width: 145px; }
}


/* ── Dept details panel – employee list ────────── */
.doc-emp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.doc-emp-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 6px;
    gap: 8px;
}
.doc-emp-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-emp-list-id {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Employee popover card (dept details panel) ── */
.doc-emp-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: transparent;
}
.doc-emp-popover {
    position: fixed;
    z-index: 1200;
    width: 300px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    overflow: hidden;
    animation: docPopoverIn .18s ease;
}
@keyframes docPopoverIn {
    from { opacity: 0; transform: scale(0.93) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
.doc-emp-popover-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border: none;
    background: rgba(0,0,0,0.07);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: #555;
    transition: background .15s;
    z-index: 1;
}
.doc-emp-popover-close:hover { background: rgba(0,0,0,0.15); }

/* Hero strip */
.dep-pop-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 16px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    color: #fff;
    text-align: center;
}
.dep-pop-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    color: #fff;
    border: 3px solid rgba(255,255,255,0.35);
    margin-bottom: 10px;
    flex-shrink: 0;
}
.dep-pop-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.dep-pop-id {
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: 6px;
}
.dep-pop-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Info rows */
.dep-pop-body {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dep-pop-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}
.dep-pop-row-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--light);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}
.dep-pop-row-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #aaa;
    line-height: 1;
    margin-bottom: 2px;
}
.dep-pop-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

/* Clickable employee list items */
.doc-emp-list-item {
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.doc-emp-list-item:hover {
    background: #e8f4ff;
    border-color: var(--blue);
    transform: translateX(2px);
}

/* ── Employee form – photo upload avatar ────────── */
.emp-form-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    cursor: pointer;
}
.emp-form-avatar-wrap .emp-form-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.emp-form-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    color: #fff;
    font-size: 16px;
    pointer-events: none;
}
.emp-form-avatar-wrap:hover .emp-form-avatar-overlay { opacity: 1; }

/* Popover avatar as photo */
.dep-pop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Org chart – date filter bar ────────────────── */
.oc-date-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f0f7ff;
    border: 1px solid #cce0ff;
    border-radius: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.oc-date-bar > i {
    color: var(--blue);
    font-size: 14px;
    flex-shrink: 0;
}
.oc-date-bar label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    margin: 0;
    cursor: default;
}
.oc-date-input {
    padding: 5px 10px;
    border: 1px solid #b3d0f5;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.oc-date-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.oc-date-viewing {
    font-size: 12px;
    color: #5a7fa8;
    font-style: italic;
    margin-left: 4px;
}

/* ── Org chart card – photo avatar ─────────────── */
.eoc-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE FORM — PROGRESS TRACKER
   ═══════════════════════════════════════════════════════════════ */

.emp-form-progress {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    background: #f4f8fd;
    border-bottom: 1px solid #e2eaf5;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.emp-form-progress::-webkit-scrollbar { display: none; }

.efp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 58px;
    cursor: pointer;
    padding: 5px 4px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.efp-step:hover { background: #eaf2ff; }

.efp-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #e4ecf6;
    color: #93afc8;
    position: relative;
    transition: background 0.25s, color 0.25s;
}

/* optional sections get amber tint */
.efp-step.efp-optional .efp-icon {
    background: #fef9ec;
    color: #d49c1a;
}
.efp-step.efp-optional .efp-label { color: #c48a10; }

/* completed state */
.efp-step.efp-done .efp-icon {
    background: #e6f7ef;
    color: #22a06b;
}
.efp-step.efp-done .efp-icon::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 7px;
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 13px;
    height: 13px;
    background: #22a06b;
    color: #fff;
    border-radius: 50%;
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 10px;
    text-align: center;
}

.efp-label {
    font-size: 9.5px;
    color: #8aaccc;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.3px;
}
.efp-step.efp-done .efp-label { color: #22a06b; }

.efp-connector {
    flex: 1;
    height: 2px;
    background: #dce9f6;
    border-radius: 1px;
    min-width: 8px;
    transition: background 0.35s;
}
.efp-connector.efp-done { background: #22a06b; }

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE FORM — SECTION COLLAPSE & COMPLETION
   ═══════════════════════════════════════════════════════════════ */

/* Section label is now interactive */
.emp-section-label {
    cursor: pointer;
    user-select: none;
}

/* Icon wrapped in a small coloured bubble */
.esc-icon-bubble {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(47, 119, 181, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.esc-icon-bubble i { font-size: 12px; color: var(--blue); transition: color 0.2s; }

/* Right-side wrapper (check + chevron) */
.esc-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Completion check */
.esc-check {
    display: none;
    color: #22a06b;
    font-size: 14px;
    flex-shrink: 0;
}
.emp-section.esc-complete .esc-check { display: inline-block; }

/* When complete: icon bubble and label go green */
.emp-section.esc-complete .esc-icon-bubble { background: rgba(34, 160, 107, 0.1); }
.emp-section.esc-complete .esc-icon-bubble i { color: #22a06b; }
.emp-section.esc-complete .emp-section-label { color: #22a06b; }

/* Chevron */
.esc-chevron {
    color: #b0c8e0;
    font-size: 11px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.emp-section.esc-collapsed .esc-chevron { transform: rotate(-90deg); }

/* Collapsible body */
.emp-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 3000px;
    opacity: 1;
}
.emp-section.esc-collapsed .emp-section-body {
    max-height: 0;
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE FORM — INPUT SUCCESS STATE
   ═══════════════════════════════════════════════════════════════ */

/* Text / email / number / date inputs that have a valid value */
.emp-form-card input[required]:not(:placeholder-shown):valid {
    border-color: #5ecb8e;
    background: #f4fdf8;
}
/* Select success class applied by JS */
.emp-form-card select[required].efp-valid {
    border-color: #5ecb8e;
    background: #f4fdf8;
}
/* Date inputs — :placeholder-shown doesn't work for dates; use a JS-added class */
.emp-form-card input[type="date"][required].efp-valid {
    border-color: #5ecb8e;
    background: #f4fdf8;
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE FORM — SCROLL-TO-ERROR SHAKE
   ═══════════════════════════════════════════════════════════════ */

@keyframes efp-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}
.efp-shake { animation: efp-shake 0.38s ease; }

/* ═══════════════════════════════════════════════════════════════════
   EMPLOYEE VIEW PANEL
   ═══════════════════════════════════════════════════════════════════ */

/* ── View button in employee table ── */
.emp-table .btn-view {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, transform 0.1s;
    padding: 0;
    background: #e6f7ef;
    color: #22a06b;
}
.emp-table .btn-view:hover {
    background: #22a06b;
    color: #fff;
    transform: translateY(-1px);
}

/* ── Overlay backdrop ── */
.ev-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 50, 0.5);
    z-index: 2100;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ev-overlay.ev-open {
    opacity: 1;
    pointer-events: all;
}

/* ── Slide-in panel ── */
.ev-panel {
    width: 780px;
    max-width: 100vw;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(10, 25, 50, 0.2);
}
.ev-overlay.ev-open .ev-panel {
    transform: translateX(0);
}

/* ── Sticky header ── */
.ev-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 18px 24px;
    background: linear-gradient(135deg, var(--navy) 0%, #2a5298 100%);
    color: #fff;
    flex-shrink: 0;
}

.ev-header-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgba(255,255,255,0.9);
    flex-shrink: 0;
    overflow: hidden;
}
.ev-header-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ev-header-info {
    flex: 1;
    min-width: 0;
}
.ev-header-name {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.ev-header-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    flex-wrap: wrap;
}
.ev-header-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Global edit button */
.ev-edit-btn {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}
.ev-edit-btn:hover { background: rgba(255,255,255,0.28); }

/* Close button */
.ev-close {
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}
.ev-close:hover { background: rgba(255,255,255,0.3); }

/* ── Tab navigation ── */
.ev-tabs {
    display: flex;
    border-bottom: 2px solid #eef2f8;
    background: #f8fafd;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.ev-tabs::-webkit-scrollbar { display: none; }

.ev-tab {
    padding: 11px 16px;
    font-size: 11.5px;
    font-weight: 600;
    color: #7a94b0;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    background: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
    font-family: inherit;
}
.ev-tab:hover { color: var(--blue); background: #eef5ff; }
.ev-tab.ev-tab-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    background: #fff;
}

/* ── Scrollable content area ── */
.ev-content {
    flex: 1;
    overflow-y: auto;
    padding: 26px 28px 32px;
}

/* ── Section title ── */
.ev-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-bottom: 18px;
    padding-bottom: 9px;
    border-bottom: 1.5px solid #eef2f8;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ev-section-title i { font-size: 12px; opacity: 0.85; }

/* ── Field grid ── */
.ev-field-grid {
    display: grid;
    gap: 20px 28px;
    margin-bottom: 24px;
}
.ev-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ev-grid-3 { grid-template-columns: repeat(3, 1fr); }

.ev-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a9ab8;
    margin-bottom: 5px;
}
.ev-field-value {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.45;
}
.ev-field-value.ev-empty {
    color: #bcc8d8;
    font-style: italic;
    font-weight: 400;
}

/* ── Inline badges ── */
.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.ev-badge-active   { background: #e6f7ef; color: #22a06b; }
.ev-badge-inactive { background: #f4f5f7; color: #7a8a9a; }
.ev-badge-primary  { background: #fff3e0; color: #e65100; }
.ev-badge-warning  { background: #fffde7; color: #f57f17; }
.ev-badge-expired  { background: #fdecea; color: #c62828; }

/* ── Passport alert banner ── */
.ev-passport-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 20px;
}
.ev-passport-alert.expired  { background: #fdecea; color: #c62828; border: 1px solid #ffcdd2; }
.ev-passport-alert.critical { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
.ev-passport-alert.warning  { background: #fffde7; color: #f57f17; border: 1px solid #fff9c4; }

/* ── Identification table ── */
.ev-id-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid #e8f0f8;
    border-radius: 8px;
    overflow: hidden;
}
.ev-id-table th {
    background: #f4f8fd;
    padding: 10px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a9ab8;
    border-bottom: 2px solid #dde8f4;
}
.ev-id-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f4fa;
    color: var(--text);
}
.ev-id-table tr:last-child td { border-bottom: none; }
.ev-id-table tr:hover td { background: #fafcff; }
.ev-id-table .ev-mono { font-family: 'Courier New', monospace; font-size: 12.5px; letter-spacing: 0.5px; }

/* ── Empty state ── */
.ev-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #b8c8d8;
}
.ev-empty-state i   { font-size: 36px; margin-bottom: 12px; display: block; }
.ev-empty-state p   { font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .ev-panel          { width: 100vw; }
    .ev-grid-2         { grid-template-columns: 1fr; }
    .ev-content        { padding: 18px 16px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MY PROFILE  –  inline view in employee portal (tab-panel)
   ═══════════════════════════════════════════════════════════════════ */

.mp-header {
    background: linear-gradient(135deg, #18345B 0%, #2F77B5 100%);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: 0 4px 18px rgba(47, 119, 181, 0.25);
}

.mp-header-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.45);
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
}

.mp-header-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-header-info { flex: 1; min-width: 0; }

.mp-header-name {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 2px;
}

.mp-header-meta span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-header-meta i { font-size: 11px; opacity: 0.75; }

/* Not-found / not-linked state */
.mp-not-found {
    text-align: center;
    padding: 60px 20px;
    color: #8a9ab0;
}

.mp-not-found i {
    font-size: 52px;
    margin-bottom: 16px;
    display: block;
    color: #c5d0de;
}

.mp-not-found h3 {
    font-size: 17px;
    color: #546e7a;
    margin: 0 0 8px;
}

.mp-not-found p {
    font-size: 13.5px;
    max-width: 360px;
    margin: 0 auto;
}

/* ── One-pager layout ─────────────────────────────────────────────── */

/* Self-contained scroll container — sticky works relative to this.
   CSS fallback keeps it scrollable even before JS runs.
   JS overrides with exact remaining-viewport height after paint. */
.mp-scroll-container {
    overflow-y: auto;
    border-radius: 12px;
    height: calc(100vh - 200px);   /* fallback: viewport − 60px header − page-title − padding */
}
.mp-scroll-container::-webkit-scrollbar { width: 6px; }
.mp-scroll-container::-webkit-scrollbar-track { background: #f0f4fa; border-radius: 3px; }
.mp-scroll-container::-webkit-scrollbar-thumb { background: #c5d3e8; border-radius: 3px; }

.mp-page { position: relative; }

/* Sticky nav — sticks inside .mp-scroll-container */
.mp-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 2px solid #e8edf4;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 10px rgba(30, 50, 90, 0.07);
    padding: 0 6px;
}
.mp-sticky-nav::-webkit-scrollbar { display: none; }

.mp-nav-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 16px 12px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6b7a8d;
    white-space: nowrap;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.mp-nav-btn i { font-size: 11.5px; opacity: 0.8; }
.mp-nav-btn:hover { color: var(--blue); background: #f4f7fc; }
.mp-nav-btn.mp-nav-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}
.mp-nav-btn.mp-nav-active i { opacity: 1; }

/* Sections stacked vertically */
.mp-sections {
    background: #fff;
    border-radius: 0 0 12px 12px;
    border: 1px solid #e8edf4;
    border-top: none;
    box-shadow: 0 2px 8px rgba(30, 50, 90, 0.05);
}

.mp-section {
    padding: 26px 28px 28px;
    border-bottom: 1px solid #f0f4fa;
    scroll-margin-top: 52px;   /* offset for sticky nav height */
}
.mp-section:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════
   EXPENSE REPORT MODULE
   ════════════════════════════════════════════════════════════════ */

.exp-module {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* ── Section A: Report List ─────────────────────────────────────── */

/* ── KPI Summary Strip ───────────────────────────────────────────── */
.exp-kpi-strip {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.exp-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 20px;
    flex: 1;
    box-shadow: 0 1px 8px rgba(24,52,91,0.06);
    transition: box-shadow 0.15s, transform 0.15s;
}
.exp-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(24,52,91,0.11);
    transform: translateY(-1px);
}

.exp-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #EEF4FF;
    color: #1976D2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.exp-kpi-card--pending .exp-kpi-icon { background: #FFF8E1; color: #F59E0B; }
.exp-kpi-card--approved .exp-kpi-icon { background: #E8F5E9; color: #2E7D32; }

.exp-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.exp-kpi-value {
    font-size: 20px;
    font-weight: 800;
    color: #0D2B55;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.exp-kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #8a9ab0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

/* ── Status Filter Chips ─────────────────────────────────────────── */
.exp-filter-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.exp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #546e7a;
    cursor: pointer;
    transition: all 0.15s;
}
.exp-filter-chip:hover {
    background: #eef4ff;
    border-color: #90caf9;
    color: #1976D2;
}
.exp-filter-chip--active {
    background: #1976D2;
    color: #fff;
    border-color: #1976D2;
    box-shadow: 0 2px 8px rgba(25,118,210,0.3);
}
.exp-filter-chip--active:hover { background: #1565C0; }

.exp-filter-chip-count {
    background: rgba(0,0,0,0.10);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}
.exp-filter-chip--active .exp-filter-chip-count { background: rgba(255,255,255,0.25); }

/* ── Status Age Badge ────────────────────────────────────────────── */
.exp-status-age-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
}

.exp-age-badge {
    font-size: 11px;
    font-weight: 600;
    color: #8a9ab0;
    background: #f0f4f8;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}
.exp-age-badge--warn {
    color: #7a5200;
    background: #FFF8E1;
    border: 1px solid #F59E0B40;
}
.exp-age-badge--alert {
    color: #B71C1C;
    background: #FEE2E2;
    border: 1px solid #EF9A9A;
}

.exp-report-list-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 28px;
    overflow-y: auto;
}

.exp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.exp-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-btn-new-report {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(25,118,210,0.35);
    letter-spacing: 0.2px;
}
.exp-btn-new-report:hover {
    background: #1565C0;
    box-shadow: 0 4px 14px rgba(25,118,210,0.45);
    transform: translateY(-1px);
}
.exp-btn-new-report:active {
    background: #0D47A1;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(25,118,210,0.3);
}

.exp-report-table-wrap {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 16px rgba(24,52,91,0.08);
}

.exp-report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    background: #fff;
}

/* ── Dark navy gradient header — matches Admin dept/employees tables */
.exp-report-table thead {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}

.exp-report-table thead th {
    background: transparent;
    padding: 13px 16px;
    text-align: left;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: none;
    white-space: nowrap;
}
.exp-report-table thead th:first-child { border-radius: 11px 0 0 0; }
.exp-report-table thead th:last-child  { border-radius: 0 11px 0 0; }

/* ── Body rows */
.exp-report-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.12s;
}
.exp-report-table tbody tr:last-child { border-bottom: none; }
.exp-report-table tbody tr:nth-child(even) { background: #fafcff; }

.exp-report-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid #f0f4fb;
    color: var(--dark);
    vertical-align: middle;
}
.exp-report-table tbody tr:last-child td { border-bottom: none; }

/* ── Row states */
.exp-report-row {
    cursor: pointer;
}
.exp-report-row:hover {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--blue);
}
.exp-report-row--active {
    background: #e5edff !important;
    box-shadow: inset 3px 0 0 var(--blue);
}
.exp-report-row--active .exp-report-name-cell { font-weight: 700; color: var(--blue); }

/* ── Cell typography */
.exp-report-name-cell { font-weight: 600; color: #1a2f4e; }
.exp-total-cell  { font-weight: 700; color: #1a3a6e; font-variant-numeric: tabular-nums; }
.exp-date-cell   { color: #8a9ab0; font-size: 12.5px; }

/* ── Status Badges ──────────────────────────────────────────────── */

.exp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
}
/* Filled semantic colours — optimised for light surface */
.exp-status-draft     { background: #E5E7EB; color: #374151; }
.exp-status-submitted { background: #E3F2FD; color: #1976D2; }
.exp-status-approved  { background: #E8F5E9; color: #2E7D32; }
.exp-status-rejected  { background: #FEE2E2; color: #D32F2F; }

/* ── Section B: Report Detail ───────────────────────────────────── */

.exp-report-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── SAP Fiori Object Header — cool tinted surface ───────────────── */
.exp-report-header {
    background: linear-gradient(120deg, #E8F2FF 0%, #F0F7FF 100%);
    border-left: 4px solid #1976D2;
    border-bottom: 1px solid #DBEAFE;
    box-shadow: 0 2px 12px rgba(25,118,210,0.10);
    flex-shrink: 0;
    padding: 20px 28px 0;
}

/* Row 1: Title area (left) + right panel (status + flow) */
.exp-obj-row-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
}

.exp-obj-title-area {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.exp-btn-back {
    background: #fff;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 7px 11px;
    color: #1976D2;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(25,118,210,0.10);
}
.exp-btn-back:hover {
    background: #EEF4FF;
    border-color: #93C5FD;
    color: #1565C0;
}

.exp-report-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

/* Subtitle: "Expense Report" */
.exp-report-label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7fa3;
    letter-spacing: 0.2px;
}

/* Report title — primary visual focus */
.exp-report-name-input {
    border: none;
    outline: none;
    font-size: 22px;
    font-weight: 700;
    color: #1a2f4e;
    font-family: 'Poppins', sans-serif;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: border-color 0.18s;
    min-width: 160px;
    width: 100%;
    padding: 1px 0;
    line-height: 1.2;
}
.exp-report-name-input:not([readonly]):focus { border-bottom-color: #1976D2; }
.exp-report-name-input.exp-readonly {
    color: #1a2f4e;
    cursor: default;
}

/* ── Right panel: status badge stacked above approval flow ──────── */
.exp-obj-right-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Row 2: Key attribute chips */
.exp-obj-row-attrs {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border-top: 1px solid #DBEAFE;
    padding: 12px 0;
    flex-wrap: wrap;
}

/* Individual attribute info block — clean label/value on light background */
.exp-obj-attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 16px 6px 0;
    min-width: 84px;
    border-right: 1px solid #DBEAFE;
}
.exp-obj-attr:last-child { border-right: none; }

.exp-obj-attr-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8a9ab0;
    white-space: nowrap;
}

.exp-obj-attr-value {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a2f4e;
    white-space: nowrap;
}

/* Separators not needed — chips provide their own visual boundary */
.exp-obj-attr-sep { display: none; }

/* ── Approval flow stepper ──────────────────────────────────────── */
.exp-approval-flow {
    flex-shrink: 0;
}

.exp-flow-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.exp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 56px;
}

.exp-flow-step i {
    font-size: 18px;
    line-height: 1;
}

.exp-flow-step span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* State colours — tuned for light tinted header */
.exp-flow-step--done    i    { color: #2E7D32; }
.exp-flow-step--done    span { color: #2E7D32; }
.exp-flow-step--active  i    { color: #1976D2; }
.exp-flow-step--active  span { color: #1976D2; font-weight: 700; }
.exp-flow-step--pending i    { color: #BFCFE8; }
.exp-flow-step--pending span { color: #A0B4CC; }

/* Connector line between steps */
.exp-flow-connector {
    width: 36px;
    height: 2px;
    background: #BFDBFE;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.exp-flow-connector--done { background: #2E7D32; }

/* MIDDLE: Line Items */
.exp-line-items-section {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exp-line-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}

.exp-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a2f4e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-section-title i {
    color: #1976D2;
    font-size: 14px;
}

.exp-btn-add-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #1976D2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(25,118,210,0.35);
    letter-spacing: 0.2px;
}
.exp-btn-add-item:hover {
    background: #1565C0;
    box-shadow: 0 4px 14px rgba(25,118,210,0.45);
    transform: translateY(-1px);
}
.exp-btn-add-item:active {
    background: #0D47A1;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(25,118,210,0.3);
}

/* Inline expense form */
.exp-item-form-wrap {
    background: #f7faff;
    border: 1px solid #d0e2ff;
    border-radius: 10px;
    padding: 18px 20px;
}

.exp-item-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 16px;
}

.exp-rate-group { position: relative; }

.exp-rate-input {
    background: #f0f4fa !important;
    color: #546e7a !important;
    cursor: not-allowed !important;
    font-style: italic;
}

.exp-rate-hint {
    font-size: 10.5px;
    color: #8a9ab0;
    margin-left: 4px;
}

.exp-note-group {
    grid-column: span 2;
}

.exp-rate-error {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fdecea;
    color: #c62828;
    border-radius: 6px;
    font-size: 12.5px;
    border-left: 3px solid #e53935;
}

/* ── Inline field validation ──────────────────────────────────────── */

/* Error state on the parent form-group */
.form-group--error input:not([readonly]),
.form-group--error select {
    border-color: #e53935 !important;
    background-color: #fff8f8;
    box-shadow: 0 0 0 2px rgba(229,57,53,0.12);
}

/* Inline error message text */
.exp-field-error {
    display: none;                  /* shown by JS via expSetFieldError() */
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: #c62828;
    line-height: 1.3;
}
.exp-field-error::before {
    content: '\f071';               /* fa-triangle-exclamation unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
    font-size: 10px;
}

/* ── Duplicate expense warning banner (non-blocking) ─────────────── */
.exp-dup-warning {
    display: none;                  /* shown by JS when duplicate detected */
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-left: 4px solid #f9a825;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #6d4c00;
    line-height: 1.4;
}
.exp-dup-warning i {
    color: #f9a825;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.exp-item-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.exp-btn-save-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-btn-save-item:hover { background: #2263a0; }

.exp-btn-cancel-item {
    padding: 8px 16px;
    background: none;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    color: #546e7a;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.exp-btn-cancel-item:hover { background: #f0f4fa; }

/* Line items table */
.exp-items-table-wrap {
    border-radius: 10px;
    border: 1px solid #e8edf5;
    overflow-x: auto;
    background: #fff;
    box-shadow: 0 1px 8px rgba(24,52,91,0.05);
}

.exp-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 800px;
}

.exp-items-table thead th {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
    padding: 11px 13px;
    text-align: left;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: none;
    white-space: nowrap;
    /* sticky header */
    position: sticky;
    top: 0;
    z-index: 5;
}
/* First and last header cells get rounded corners */
.exp-items-table thead th:first-child { border-radius: 9px 0 0 0; }
.exp-items-table thead th:last-child  { border-radius: 0 9px 0 0; }

.exp-items-table tbody td {
    padding: 12px 13px;
    border-bottom: 1px solid #F0F4FB;
    color: #2d3a4a;
    vertical-align: middle;
    transition: background 0.12s;
}

.exp-items-table tbody tr:last-child td { border-bottom: none; }
.exp-items-table tbody tr:hover td {
    background: #EEF4FF;
}
.exp-items-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #1976D2;
}

/* BOTTOM: Total + Actions */
.exp-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 -2px 10px rgba(24,52,91,0.07);
    flex-shrink: 0;
    gap: 20px;
}

.exp-total-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.exp-total-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a9ab0;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.exp-total-amount {
    font-size: 26px;
    font-weight: 800;
    color: #0D2B55;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.exp-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp-btn-save-draft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #f0f4fa;
    color: #1a2f4e;
    border: 1px solid #dde5f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.exp-btn-save-draft:hover { background: #e2eaff; border-color: #b3c9f5; }

.exp-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: #1e6f38;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-btn-submit:hover { background: #165a2d; }

.exp-workflow-info {
    font-size: 12.5px;
    color: #6b7fa3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.exp-workflow-approved { color: #2e7d32; }

/* ══════════════════════════════════════════════════════════════════
   EXPENSE ENTRY UX ENHANCEMENTS
   ══════════════════════════════════════════════════════════════════ */

/* Toast: fix .show alias for expShowToast */
.export-toast.show,
.export-toast.export-toast--show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* (7) Sticky Total Bar */
.exp-report-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #F8FAFC;           /* keep background when sticky */
}

/* (10) Foreign currency row highlight */
.exp-items-table tbody tr.exp-row-fx td {
    background: #FFF8EE;
}
.exp-items-table tbody tr.exp-row-fx:hover td {
    background: #FFF1D6;
}
.exp-items-table tbody tr.exp-row-fx:hover td:first-child {
    box-shadow: inset 3px 0 0 #F59E0B;
}
.er-currency-badge--fx {
    background: #fff0cc;
    color: #865200;
    border-color: #f0c96a;
    font-weight: 700;
}

/* (13) Row flash animation after save */
@keyframes exp-row-flash {
    0%   { background: #d4edda; }
    60%  { background: #d4edda; }
    100% { background: transparent; }
}
.exp-row-flash {
    animation: exp-row-flash 1.6s ease-out forwards;
}
.exp-row-fx.exp-row-flash {
    animation: none;
    background: #d4edda;
    transition: background 1.6s ease-out;
}

/* (9) Line Items empty state */
.exp-items-empty-state {
    padding: 40px 20px;
    text-align: center;
}
.exp-items-empty-icon {
    font-size: 36px;
    color: #c8d6e8;
    margin-bottom: 10px;
}
.exp-items-empty-msg {
    font-size: 14px;
    color: #8a9bb8;
    margin-bottom: 16px;
    line-height: 1.5;
}
.exp-items-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.exp-items-empty-cta:hover { opacity: 0.88; }

/* (5) Duplicate button */
.exp-item-dup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #c8d6ee;
    border-radius: 6px;
    color: #5b7aab;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
    margin: 0 2px;
}
.exp-item-dup-btn:hover {
    background: #e8f0fd;
    color: #1a4a8a;
    border-color: #9ab6e0;
}
.exp-item-actions-cell {
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   EXPENSE ATTACHMENT FEATURE
   ══════════════════════════════════════════════════════════════════ */

/* ── Attachment cell in table ───────────────────────────────────── */
.exp-att-cell {
    text-align: center;
    white-space: nowrap;
}

/* Paperclip toggle button */
.exp-att-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: #94A3B8;
    font-size: 13px;
    transition: all 0.15s;
}
.exp-att-btn:hover {
    background: #f0f7ff;
    border-color: #90caf9;
    color: #1976D2;
}
/* Has attachments — blue filled */
.exp-att-btn--has {
    color: #1976D2;
    border-color: #BFDBFE;
    background: #EFF6FF;
}
.exp-att-btn--has:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
}

.exp-att-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 14px;
}

/* ── Modal overlay ──────────────────────────────────────────────── */
.exp-att-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,37,68,0.50);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: exp-overlay-in 0.15s ease;
}
@keyframes exp-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal container ────────────────────────────────────────────── */
.exp-att-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15,37,68,0.25);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: exp-modal-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes exp-modal-in {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Modal header ───────────────────────────────────────────────── */
.exp-att-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.exp-att-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2f4e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-att-modal-title i { color: #1976D2; }

.exp-att-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #546e7a;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.exp-att-modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Modal body ─────────────────────────────────────────────────── */
.exp-att-modal-body {
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Upload zone ────────────────────────────────────────────────── */
.exp-att-upload-zone {
    border: 2px dashed #BFDBFE;
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    background: #F8FAFF;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.exp-att-upload-zone:hover,
.exp-att-upload-zone.exp-att-drag-over {
    border-color: #1976D2;
    background: #EFF6FF;
}
.exp-att-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.exp-att-upload-icon {
    font-size: 28px;
    color: #93C5FD;
    margin-bottom: 8px;
}
.exp-att-upload-text {
    font-size: 13px;
    font-weight: 600;
    color: #1976D2;
    margin-bottom: 4px;
}
.exp-att-upload-hint {
    font-size: 11.5px;
    color: #94A3B8;
}

/* Readonly (submitted/approved) upload zone */
.exp-att-upload-zone--readonly {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    border-style: solid;
}

/* ── Validation error ───────────────────────────────────────────── */
.exp-att-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    background: #FEE2E2;
    border-left: 4px solid #D32F2F;
    border-radius: 7px;
    font-size: 12.5px;
    color: #7F1D1D;
    font-weight: 500;
}
.exp-att-error i { flex-shrink: 0; margin-top: 1px; }

/* ── File list ──────────────────────────────────────────────────── */
.exp-att-file-list-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a9ab0;
    margin-bottom: 8px;
}

.exp-att-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-att-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    transition: background 0.12s;
}
.exp-att-file-item:hover { background: #EFF6FF; border-color: #BFDBFE; }

.exp-att-file-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.exp-att-file-icon--pdf { color: #EF4444; }
.exp-att-file-icon--img { color: #3B82F6; }
.exp-att-file-icon--other { color: #94A3B8; }

.exp-att-file-info {
    flex: 1;
    min-width: 0;
}
.exp-att-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2f4e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-att-file-size {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 1px;
}

.exp-att-file-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.exp-att-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.exp-att-file-btn--view {
    background: #EFF6FF;
    color: #1976D2;
    border-color: #BFDBFE;
}
.exp-att-file-btn--view:hover { background: #DBEAFE; border-color: #93C5FD; }
.exp-att-file-btn--del {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}
.exp-att-file-btn--del:hover { background: #FEE2E2; border-color: #FCA5A5; }
.exp-att-file-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Empty attachments state ────────────────────────────────────── */
.exp-att-empty {
    text-align: center;
    padding: 12px 0 4px;
    font-size: 12.5px;
    color: #94A3B8;
}

/* (12) Status awareness banner */
.exp-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;          /* match header side padding */
    font-size: 13px;
    font-weight: 500;
    border-left: 4px solid transparent;
    margin: 0;
}
.exp-status-banner i { font-size: 15px; flex-shrink: 0; }
.exp-status-banner strong { font-weight: 700; }

/* Draft — noticeably blue, matches header accent */
.exp-status-banner--draft {
    background: #E3F2FD;
    color: #1E3A8A;
    border-color: #1976D2;
}
/* Submitted — warm amber */
.exp-status-banner--submitted {
    background: #FFF8E1;
    color: #7a5200;
    border-color: #F59E0B;
}
/* Approved — clear green */
.exp-status-banner--approved {
    background: #E8F5E9;
    color: #1B5E20;
    border-color: #2E7D32;
}
/* Rejected — clear red */
.exp-status-banner--rejected {
    background: #FEE2E2;
    color: #7F1D1D;
    border-color: #D32F2F;
}

/* (4) Auto-fill badge on Exchange Rate label */
.exp-autofill-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: #e8f4e8;
    color: #2a6e32;
    border: 1px solid #a8d8a8;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-left: 4px;
}

/* (11) "Base" tag in Converted label */
.exp-base-tag {
    font-size: 11px;
    font-weight: 500;
    color: #8a9bb8;
}

/* (8) Submit Confirmation Strip */
.exp-submit-confirm-strip {
    display: flex;
    align-items: center;
    background: #fffbf0;
    border-top: 1px solid #f0c050;
    border-bottom: 1px solid #f0c050;
    padding: 12px 24px;
    animation: exp-strip-slide 0.22s ease-out;
}
@keyframes exp-strip-slide {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.exp-submit-confirm-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-wrap: wrap;
}
.exp-submit-confirm-icon {
    color: #c27c00;
    font-size: 18px;
    flex-shrink: 0;
}
.exp-submit-confirm-msg {
    flex: 1;
    font-size: 13.5px;
    color: #5a3c00;
    font-weight: 500;
    min-width: 200px;
}
.exp-submit-confirm-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.exp-submit-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: #f0f4fa;
    color: #1a2f4e;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-submit-btn-cancel:hover { background: #e0e8f8; }
.exp-submit-btn-yes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    background: #1e6f38;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-submit-btn-yes:hover { background: #165a2d; }

/* (6) Expandable Row Edit */
.exp-expand-edit-row {
    background: #f5f8ff;
    box-shadow: inset 0 3px 8px rgba(24,52,91,0.07);
}
.exp-expand-edit-row td {
    padding: 0 !important;
    border-bottom: 2px solid #c8d6ee !important;
}
.exp-expand-form {
    padding: 16px 20px;
}
.exp-expand-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}
.exp-expand-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #dde5f5;
    padding-top: 10px;
}
.exp-expand-rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: #e8f4e8;
    color: #2a6e32;
    border: 1px solid #a8d8a8;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ── Exchange Rates Admin Tab ────────────────────────────────────── */

.er-form-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(24,52,91,0.05);
    max-width: 860px;
}

.er-form-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a2f4e;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* er-form-grid columns defined in the "wow" block further below */

.er-form-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}

.er-table-wrap {
    border-radius: 10px;
    border: 1px solid #e8edf5;
    overflow: hidden;
    background: #fff;
    max-width: 860px;
    box-shadow: 0 2px 10px rgba(24,52,91,0.05);
}

.er-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.er-table thead {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}

.er-table thead th {
    padding: 13px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    border-bottom: none;
}

.er-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f4fb;
    color: #2d3a4a;
    vertical-align: middle;
}

.er-table tbody tr:last-child td { border-bottom: none; }
.er-table tbody tr:hover { background: #f7faff; }

.er-currency-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #e8f0fe;
    color: #1a56db;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.er-rate-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1a3a6e;
}

/* Muted badge for the auto-calculated reverse direction */
.er-badge-muted {
    background: #f0f4f8;
    color: #7a8fa8;
}

/* Warning badge — shown when a currency code is missing in a record */
.er-badge-warn {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffb74d;
}

/* Arrow between currency badges in direction cells */
.er-direction-arrow {
    font-size: 13px;
    color: #a0b0c8;
    margin: 0 4px;
    vertical-align: middle;
}

/* Auto-calculated rate cell */
.er-rate-derived {
    color: #7a8fa8;
    font-style: italic;
}

.er-auto-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    background: #e8f4fd;
    color: #4a90b8;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Actions cell in exchange rate table */
.er-actions {
    white-space: nowrap;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Helper text below form title */
.er-helper-text {
    font-size: 12.5px;
    color: #5b7299;
    background: #f0f6ff;
    border: 1px solid #d0e4ff;
    border-radius: 7px;
    padding: 9px 14px;
    margin: -6px 0 16px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}

.er-helper-text i {
    color: #4a90d8;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Wider table for new columns */
.er-table-wrap { max-width: 1000px; }
.er-form-card  { max-width: 1000px; }

/* ── Exchange-rates table: undo Admin-Report table-layout overrides ──
   Both tables share .er-table but the Admin Report block sets
   table-layout:fixed + text-overflow:ellipsis, which crushes the
   badge pairs in the exchange rates direction columns.              */
.er-table-wrap .er-table {
    table-layout: auto;           /* let columns size to their content */
}
.er-table-wrap .er-table td {
    overflow: visible;            /* don't clip badge pairs            */
    text-overflow: clip;          /* no ellipsis                       */
    white-space: nowrap;          /* keep each badge pair on one line  */
}

/* ── Currency pair group with swap button ────────────────────────── */
.er-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    align-items: end;
}
.er-pair-group {
    display: flex;
    align-items: flex-end;
    gap: 0;
}
.er-pair-group .form-group {
    flex: 1;
}
.er-swap-btn {
    flex-shrink: 0;
    width: 36px;
    height: 38px;
    margin-bottom: 1px;
    background: #f0f6ff;
    border: 1.5px solid #c4d9f5;
    border-radius: 8px;
    color: #4a90d8;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    margin: 0 6px 1px;
}
.er-swap-btn:hover {
    background: #4a90d8;
    color: #fff;
    border-color: #4a90d8;
    transform: scale(1.08);
}
.er-swap-btn:active { transform: scale(0.94); }

/* ── Toast notification system ───────────────────────────────────── */
.er-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.er-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 420px;
    padding: 12px 14px 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
    pointer-events: all;
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.8,.4,1);
}
.er-toast--visible {
    opacity: 1;
    transform: translateX(0);
}
.er-toast--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.er-toast--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.er-toast--warning { background: #fffbea; border: 1px solid #fde68a; color: #92400e; }
.er-toast--info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.er-toast > i:first-child { font-size: 15px; flex-shrink: 0; }
.er-toast > span { flex: 1; line-height: 1.45; }
.er-toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: inherit;
    opacity: 0.5;
    font-size: 12px;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.er-toast-close:hover { opacity: 1; }

/* ── New row highlight animation ─────────────────────────────────── */
@keyframes er-row-flash {
    0%   { background-color: #d1fae5; }
    60%  { background-color: #d1fae5; }
    100% { background-color: transparent; }
}
.er-row-new {
    animation: er-row-flash 1.6s ease forwards;
}

/* ── Rate trend indicator ────────────────────────────────────────── */
.er-trend {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.3;
}
.er-trend--up   { color: #15803d; background: #dcfce7; }
.er-trend--down { color: #b91c1c; background: #fee2e2; }
.er-trend--same { color: #6b7280; background: #f3f4f6; }

/* ── Live reverse rate preview ───────────────────────────────────── */
.er-reverse-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #3a6fa8;
    background: #f0f6ff;
    border: 1px dashed #b8d4f8;
    border-radius: 7px;
    padding: 8px 14px;
    margin: 10px 0 4px;
    font-weight: 500;
    flex-wrap: wrap;
}
.er-reverse-preview i {
    color: #4a90d8;
    font-size: 13px;
}
.er-preview-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.er-reverse-preview strong {
    font-size: 14px;
    color: #1a3a6e;
    font-variant-numeric: tabular-nums;
}

/* ── Inline warnings ─────────────────────────────────────────────── */
.er-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    border-radius: 7px;
    padding: 8px 14px;
    margin: 6px 0 4px;
    line-height: 1.5;
}
/* Blocking warning — reverse duplicate (red/amber) */
.er-inline-warning--block {
    background: #fff4f4;
    border: 1px solid #f8c8c8;
    color: #b91c1c;
}
.er-inline-warning--block i {
    color: #dc2626;
    margin-top: 2px;
    flex-shrink: 0;
}
/* Informational warning — date notices (amber) */
.er-inline-warning--info {
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #92400e;
}
.er-inline-warning--info i {
    color: #d97706;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Effective date tip icon ─────────────────────────────────────── */
.er-date-tip {
    display: inline-block;
    margin-left: 4px;
    color: #8aabcc;
    font-size: 11px;
    cursor: default;
    font-weight: 400;
}
.er-date-tip:hover { color: #4a90d8; }

/* ── Smart empty state ───────────────────────────────────────────── */
.er-empty-state {
    text-align: center;
    padding: 48px 24px !important;
}
.er-empty-icon {
    font-size: 32px;
    color: #c8d8ec;
    margin-bottom: 14px;
}
.er-empty-msg {
    font-size: 13.5px;
    color: #6b7fa3;
    margin: 0 0 18px;
    line-height: 1.6;
}
.er-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    font-size: 13px;
}

/* ── Inline edit row ─────────────────────────────────────────────── */
.er-editing {
    background: #f5f9ff !important;
}
.er-inline-input {
    padding: 5px 9px;
    border: 1.5px solid #4a90d8;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
}
.er-inline-input:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(74,144,216,0.15);
}
.er-il-save-btn {
    background: #e6f4ea !important;
    color: #1e7e34 !important;
    border-color: #a8d5b5 !important;
}
.er-il-save-btn:hover {
    background: #c8e6ce !important;
}
.er-il-cancel-btn {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}
.er-il-cancel-btn:hover {
    background: #fee2e2 !important;
}

.page-subtitle {
    font-size: 13px;
    color: #6b7fa3;
    margin: -12px 0 22px;
    font-weight: 400;
}

/* ── field-hint (for Base Currency label) ───────────────────────── */
.field-hint {
    font-size: 10.5px;
    color: #8a9ab0;
    font-weight: 400;
    margin-left: 6px;
}

@media (max-width: 640px) {
    .exp-report-list-panel { padding: 16px; }
    .exp-report-header           { padding: 14px 16px 0; }
    .exp-obj-row-title           { flex-wrap: wrap; gap: 12px; }
    .exp-obj-right-panel         { width: 100%; align-items: flex-start; }
    .exp-approval-flow           { overflow-x: auto; padding-bottom: 4px; }
    .exp-obj-row-attrs           { gap: 6px; }
    .exp-obj-attr                { padding: 6px 10px; min-width: 72px; }
    .exp-line-items-section { padding: 14px 16px; }
    .exp-report-footer     { padding: 12px 16px; }
    .exp-item-form-grid    { grid-template-columns: 1fr 1fr; }
    .exp-note-group        { grid-column: span 2; }
    .er-form-grid          { grid-template-columns: 1fr 1fr; }
    .er-pair-group         { flex-direction: column; gap: 8px; }
    .er-swap-btn           { align-self: center; transform: rotate(90deg); }
    .er-swap-btn:hover     { transform: rotate(90deg) scale(1.08); }
}

/* ══════════════════════════════════════════════════════════════
   Reference Data Module — Generic Picklist UI  (rd-* classes)
══════════════════════════════════════════════════════════════ */

/* Page-level containers */
#rd-page1,
#rd-page2 {
    padding: 0;
}

/* Header bar: title + action button */
.rd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}

.rd-header .page-title {
    margin: 0;
}

/* Breadcrumb row on page 2 */
.rd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rd-back-btn {
    background: none;
    border: 1.5px solid #c7d2de;
    color: #344e68;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rd-back-btn:hover {
    background: #f0f4f8;
    border-color: #a0b2c6;
}

.rd-page2-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2b3c;
}

/* Inline form card (add/edit picklist or value) */
.rd-form-card {
    background: #f8fafc;
    border: 1px solid #dde4ec;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 18px;
}

.rd-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.rd-form-row .form-group {
    flex: 1 1 160px;
    min-width: 130px;
    margin: 0;
}

.rd-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Filter bar above values table */
.rd-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #555;
}

.rd-filter-bar select {
    padding: 6px 10px;
    border: 1px solid #c7d2de;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

/* Picklist / value table */
.rd-table-wrap {
    overflow-x: auto;
    border: 1px solid #dde4ec;
    border-radius: 10px;
}

.rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rd-table thead tr {
    background: #f0f4f8;
}

.rd-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: #344e68;
    border-bottom: 1px solid #dde4ec;
    white-space: nowrap;
}

.rd-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #edf0f5;
    vertical-align: middle;
    color: #2c3e50;
}

.rd-table tbody tr:last-child td {
    border-bottom: none;
}

.rd-table tbody tr:hover td {
    background: #f8fafd;
}

.rd-empty {
    text-align: center;
    color: #98a8b8;
    font-style: italic;
    padding: 28px 0;
}

/* Picklist ID / Value ID badge */
.rd-id-badge {
    display: inline-block;
    background: #e8f0fb;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Count badge in # Values column */
.rd-count-badge {
    display: inline-block;
    background: #f0f4f8;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 28px;
    text-align: center;
}

/* Action cell buttons */
.rd-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.rd-btn-values {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid #c7d2de;
    color: #344e68;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rd-btn-values:hover {
    background: #e8f0fb;
    border-color: #91afd6;
    color: #1e40af;
}

.rd-btn-edit-pl,
.rd-btn-del-pl,
.rd-btn-edit-val,
.rd-btn-del-val {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}

.rd-btn-edit-pl,
.rd-btn-edit-val {
    color: #2563eb;
}
.rd-btn-edit-pl:hover,
.rd-btn-edit-val:hover {
    background: #e8f0fb;
}

.rd-btn-del-pl,
.rd-btn-del-val {
    color: #e53e3e;
}
.rd-btn-del-pl:hover,
.rd-btn-del-val:hover {
    background: #fef2f2;
}

/* Active/inactive toggle inside values table */
.rd-toggle-btn {
    background: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.rd-toggle-btn.is-active {
    background: #e6f7ef;
    color: #22a06b;
    border-color: #b7efd8;
}
.rd-toggle-btn.is-active:hover {
    background: #cdf0e0;
}
.rd-toggle-btn.is-inactive {
    background: #f4f5f7;
    color: #8a9ab0;
    border-color: #dde2ea;
}
.rd-toggle-btn.is-inactive:hover {
    background: #e8eaee;
}

/* Breadcrumb separator */
.rd-bc-sep {
    color: #b0bec5;
    font-size: 12px;
}

/* Column alignment helpers */
.rd-th-center { text-align: center; }
.rd-th-right  { text-align: right; }
.rd-table td:has(> .rd-count-badge) { text-align: center; }
.rd-table td:last-child.rd-actions { text-align: right; justify-content: flex-end; }

/* Responsive */
@media (max-width: 768px) {
    .rd-form-row { flex-direction: column; }
    .rd-form-row .form-group { min-width: 0; }
    .rd-table { font-size: 13px; }
    .rd-table th, .rd-table td { padding: 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REPORTS MODULE — SAP Fiori-style table
   ═══════════════════════════════════════════════════════════════════ */

/* Full-page: cancel .content's 32px padding, go edge-to-edge */
.tab-reports-full {
    padding: 0 !important;
    margin: -32px !important;
    width: calc(100% + 64px) !important;
    max-width: none !important;
    box-sizing: border-box;
    background: #f5f7fa;
}

/* ── Title bar ───────────────────────────────────────────────────── */
.rpt-title-bar {
    padding: 22px 28px 14px;
    background: #fff;
    border-bottom: 1px solid #eef2fa;
}
.rpt-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a2f4e;
    margin: 0 0 3px;
    line-height: 1.2;
}
.rpt-subtitle {
    font-size: 12.5px;
    color: #6b7fa3;
    margin: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */
.rpt-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: #fff;
    border-bottom: 1px solid #eef2fa;
    gap: 12px;
    flex-wrap: wrap;
}

/* Search */
.rpt-list-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fc;
    border: 1px solid #dde5f5;
    border-radius: 7px;
    padding: 5px 11px;
    height: 32px;
    box-sizing: border-box;
    flex: 0 1 260px;
    transition: border-color 0.15s, background 0.15s;
}
.rpt-list-search:focus-within { border-color: var(--navy); background: #fff; }
.rpt-list-search i { color: #9aadc8; font-size: 11px; flex-shrink: 0; }
.rpt-list-search-inp {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12.5px;
    color: #2d3a4a;
    width: 100%;
    font-family: inherit;
    line-height: 1;
}
.rpt-list-search-inp::placeholder { color: #b0bcd4; }

/* Toolbar right side */
.rpt-list-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rpt-list-count {
    font-size: 12px;
    color: #8a9bb8;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Table frame (owns its own vertical scroll) ──────────────────── */
.rpt-list-table-frame {
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    max-height: calc(100vh - 240px);
    scroll-behavior: smooth;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(24,52,91,0.08);
    margin: 20px 28px 28px;
}

/* ── Design-system-aligned table (matches emp-table) ────────────── */
.rpt-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    table-layout: fixed;
    background: var(--white);
    border-radius: 12px;
}

.rpt-list-table thead {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}

/* ── STICKY HEADER (z-index 10, below toolbar) ───────────────────── */
.rpt-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: transparent;
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 13px 16px;
    text-align: left;
    border-bottom: none;
    white-space: nowrap;
    user-select: none;
}

/* Column widths */
.col-name    { width: 200px; }
.col-desc    { /* auto flex */ }
.col-roles   { width: 180px; }
.col-status  { width: 90px; }
.col-updated { width: 120px; }
.col-action  { width: 110px; text-align: right !important; }
.col-action  { text-align: right; }

/* ── Rows ────────────────────────────────────────────────────────── */
.rpt-list-row {
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.12s;
}
.rpt-list-row:last-child { border-bottom: none; }
.rpt-list-table tbody tr:nth-child(even) { background: #fafcff; }
.rpt-list-row:hover {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--blue);
}

.rpt-list-table td {
    padding: 11px 16px;
    vertical-align: middle;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Name cell ───────────────────────────────────────────────────── */
.rpt-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.rpt-name-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #1a2f4e, #2c4f8a);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    flex-shrink: 0;
}
.rpt-name-text {
    font-weight: 700;
    color: #1a2f4e;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Description cell (editable) ────────────────────────────────── */
.rpt-list-td-desc { min-width: 180px; }

.rpt-card-desc-area { position: relative; }

.rpt-card-desc {
    font-size: 13px;
    color: #6b7fa3;
    margin: 0;
    line-height: 1.5;
    padding-right: 22px;
    white-space: normal;
    word-break: break-word;
}

/* Pencil — appears on row hover */
.rpt-pen-btn {
    position: absolute;
    top: 0; right: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #c8d6ea;
    font-size: 11px;
    padding: 2px 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}
.rpt-list-row:hover .rpt-pen-btn { opacity: 1; }
.rpt-pen-btn:hover { color: var(--navy); }

/* Inline description editing */
.rpt-desc-edit-wrap { display: none; }

.rpt-desc-ta {
    width: 100%;
    font-size: 13px;
    color: #374151;
    border: 1px solid #bfd0ee;
    border-radius: 6px;
    padding: 6px 9px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    background: #f8fbff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.rpt-desc-ta:focus { border-color: var(--navy); background: #fff; }

.rpt-desc-edit-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.rpt-desc-save {
    font-size: 11.5px;
    padding: 3px 9px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
}
.rpt-desc-save:hover { opacity: 0.85; }
.rpt-desc-cancel {
    font-size: 11.5px;
    padding: 3px 7px;
    background: none;
    color: #8a9bb8;
    border: 1px solid #dde6f0;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.rpt-desc-cancel:hover { background: #f0f4ff; color: #1a2f4e; }

/* ── Roles cell ──────────────────────────────────────────────────── */
.rpt-roles-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rpt-role-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: capitalize;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e8f0ff;
    color: #2a4a7f;
    border: 1px solid #c5d8ff;
    white-space: nowrap;
}

/* ── Status cell ─────────────────────────────────────────────────── */
.rpt-list-status {
    font-size: 12.5px;
    font-weight: 600;
}
.rpt-list-status-active   { color: #1a7a4a; }
.rpt-list-status-inactive { color: #8a9bb8; }

/* ── Date cell ───────────────────────────────────────────────────── */
.rpt-list-td-date {
    font-size: 12.5px;
    color: #4a5568;
    white-space: nowrap;
}

/* ── Action cell ─────────────────────────────────────────────────── */
.rpt-list-td-action { text-align: right; }

.rpt-list-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: linear-gradient(135deg, var(--navy) 0%, #2c4f8a 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.2px;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
}
.rpt-list-view-btn:hover { opacity: 0.88; transform: translateX(2px); }
.rpt-list-view-btn i { font-size: 10px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.rpt-list-empty {
    text-align: center;
    padding: 64px 24px;
    color: #8a9bb8;
    background: #fff;
}
.rpt-list-empty i {
    font-size: 30px;
    color: #c8d6ea;
    display: block;
    margin-bottom: 12px;
}
.rpt-list-empty p { font-size: 13.5px; margin: 0; }

/* ── Detail panel ────────────────────────────────────────────────── */
#rpt-detail-panel,
#rpt-detail-content {
    width: 100%;
    box-sizing: border-box;
}

/* ── Detail panel header ─────────────────────────────────────────── */
.rpt-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;          /* matches er-toolbar horizontal padding */
    background: #fff;
    border-bottom: 1px solid #eef2fa;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.rpt-detail-title { margin: 0; font-size: 17px; }

.rpt-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #f0f4fa;
    color: #1a2f4e;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.rpt-back-btn:hover { background: #e2eaff; border-color: #b3c9f5; }

/* ── Placeholder card ────────────────────────────────────────────── */
.rpt-placeholder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background: #fff;
    border: 2px dashed #d0dcee;
    border-radius: 14px;
    text-align: center;
    max-width: 520px;
    margin: 40px auto;
}
.rpt-placeholder-icon  { font-size: 40px; color: #b8cce8; margin-bottom: 16px; }
.rpt-placeholder-title { font-size: 18px; font-weight: 700; color: #1a2f4e; margin: 0 0 10px; }
.rpt-placeholder-msg   { font-size: 13.5px; color: #8a9bb8; line-height: 1.6; margin: 0; }

.rpt-not-implemented {
    color: #8a9bb8;
    font-size: 14px;
    padding: 40px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   EXPENSE REPORT — SAP Fiori-style full-screen layout
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────── */
.er-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;            /* clip overflow without creating scroll container — preserves position:sticky on descendants */
    background: #f5f7fa;
    min-height: 100%;
}

/* ═══════════════════════════════════════════════
   STICKY TOOLBAR  (z-index 200 — two-row layout)
   ═══════════════════════════════════════════════ */
.er-toolbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #ffffff;
    border-bottom: 1px solid #dde5f0;
    box-shadow: 0 2px 8px rgba(26,47,78,0.07);
    padding: 10px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row 1: search + multi-selects + date ranges */
.er-filters-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Row 2: currency toggle + apply/reset + count + export */
.er-filters-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Currency group */
.er-ccy-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.er-ccy-label {
    font-size: 12px;
    color: #6b7fa3;
    font-weight: 600;
    white-space: nowrap;
}

/* Apply Filters button */
.er-apply-btn {
    height: 30px;
    padding: 0 14px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.1s;
}
.er-apply-btn:hover { background: #243f6e; transform: translateY(-1px); }

/* Reset button */
.er-reset-btn {
    height: 30px;
    padding: 0 12px;
    background: #f0f4fa;
    color: #4a5568;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.er-reset-btn:hover { background: #e2e8f5; }

.er-row-count {
    font-size: 12px;
    color: #6b7fa3;
    white-space: nowrap;
    font-weight: 600;
}

/* ── Charts section ──────────────────────────────────────────────── */
.er-charts-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* minmax(0) prevents grid blowout */
    align-items: stretch;                               /* all cards same height in a row */
    gap: 12px;
    padding: 14px 16px 8px;
    background: #f5f7fa;
    box-sizing: border-box;
    width: 100%;
}

.er-chart-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(24,52,91,0.07);
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;                /* allow card to shrink within grid column */
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}
.er-chart-card:hover {
    box-shadow: 0 4px 20px rgba(24,52,91,0.13);
}

.er-chart-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.er-chart-body {
    flex: 1;
    position: relative;
    min-height: 160px;   /* lets body grow with card; Chart.js fills via maintainAspectRatio:false */
}

/* ── KPI tile ────────────────────────────────────────────────────── */
.er-kpi-card {
    justify-content: flex-start;  /* title at top, body flows naturally */
}

.er-kpi-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  /* optical: anchor content ~40% from top */
    gap: 4px;
    padding: 20% 0 0;             /* ~40% optical centre — pushes amount off dead-centre */
}

.er-kpi-amount {
    font-size: clamp(1.4rem, 2.2vw, 2rem);  /* scales down if value is long */
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.er-kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7fa3;           /* slightly more contrast vs #8a9bb5 */
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-top: 4px;
}

/* ── Charts section responsive ───────────────────────────────────── */
@media (max-width: 900px) {
    .er-charts-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 540px) {
    .er-charts-section {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Pagination ──────────────────────────────────────────────────── */
.er-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}
.er-pg-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #dde5f0;
    border-radius: 6px;
    background: #f4f7fc;
    color: #4a5568;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.12s;
}
.er-pg-btn:hover:not(:disabled) { background: #e2e8f5; }
.er-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.er-pg-info {
    font-size: 12px;
    color: #4a5568;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}
.er-pg-size {
    height: 28px;
    border: 1px solid #dde5f0;
    border-radius: 6px;
    background: #f4f7fc;
    color: #4a5568;
    font-size: 12px;
    padding: 0 6px;
    cursor: pointer;
}

/* ── Generic filter chip ─────────────────────────────────────────── */
.er-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fc;
    border: 1px solid #dde5f5;
    border-radius: 7px;
    padding: 4px 10px;
    height: 30px;
    font-size: 12px;
    color: #2d3a4a;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.er-chip:focus-within { border-color: var(--navy); background: #fff; }
.er-chip-icon { color: #6b7fa3; font-size: 12px; flex-shrink: 0; }

/* ── Search chip ─────────────────────────────────────────────────── */
.er-chip-search { min-width: 200px; flex: 0 1 220px; }

.er-search-inp {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #2d3a4a;
    width: 100%;
    font-family: inherit;
    line-height: 1;
}
.er-search-inp::placeholder { color: #b0bcd4; }

/* ── Multi-select chip ───────────────────────────────────────────── */
.er-chip-ms {
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    height: auto;
}

.er-ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fc;
    border: 1px solid #dde5f5;
    border-radius: 7px;
    padding: 5px 10px;
    height: 34px;
    font-size: 12.5px;
    color: #2d3a4a;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}
.er-ms-btn:hover { border-color: #b5c9f0; background: #edf2ff; }
.er-ms-btn-active {
    background: #e8f0ff !important;
    border-color: var(--navy) !important;
    color: var(--navy);
    font-weight: 600;
}
.er-ms-btn-active .er-chip-icon { color: var(--navy); }

.er-ms-lbl { flex: 1; }
.er-ms-caret {
    font-size: 9px;
    color: #9aadc8;
    margin-left: 2px;
}

/* Multi-select dropdown panel */
.er-ms-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    background: #fff;
    border: 1px solid #dde5f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(26,47,78,0.14);
    min-width: 210px;
    max-width: 280px;
    overflow: hidden;
}

.er-ms-search {
    padding: 8px 10px;
    border-bottom: 1px solid #eef2fa;
}
.er-ms-search-inp {
    width: 100%;
    border: 1px solid #dde5f5;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    outline: none;
    font-family: inherit;
    color: #2d3a4a;
    background: #f8fbff;
    box-sizing: border-box;
}
.er-ms-search-inp:focus { border-color: var(--navy); background: #fff; }

.er-ms-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
}
.er-ms-list li { display: block; }

.er-ms-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: #2d3a4a;
    cursor: pointer;
    transition: background 0.12s;
}
.er-ms-item:hover { background: #f0f5ff; }
.er-ms-item input[type=checkbox] {
    accent-color: var(--navy);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Date range chip ─────────────────────────────────────────────── */
.er-chip-date { gap: 5px; }

.er-date-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #8a9bb8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.er-date-inp {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #2d3a4a;
    font-family: inherit;
    cursor: pointer;
    width: 100px;
    padding: 0;
}

.er-date-sep { color: #b0bcd4; font-size: 12px; }

/* ── Currency toggle chip ────────────────────────────────────────── */
.er-chip-ccy { gap: 6px; }

.er-ccy-toggle {
    display: flex;
    gap: 2px;
    background: #eef2fa;
    border-radius: 6px;
    padding: 2px;
}

.er-ccy-btn {
    border: none;
    background: none;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7fa3;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
}
.er-ccy-active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 1px 4px rgba(26,47,78,0.18);
}

/* ── Toolbar action buttons ──────────────────────────────────────── */
.er-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #dde5f0;
    background: #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7fa3;
    cursor: pointer;
    font-family: inherit;
    height: 34px;
    transition: border-color 0.15s, color 0.15s;
}
.er-clear-btn:hover { border-color: #b5c9f0; color: var(--navy); }

.er-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #1a7a4a 0%, #228b4e 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    height: 34px;
    letter-spacing: 0.2px;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(26,122,74,0.22);
}
.er-export-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════
   TABLE FRAME — own scroll container
   (thead sticky within it — z-index 100)
   ═══════════════════════════════════════════════ */
.er-table-frame {
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    border-radius: 0 0 12px 12px;   /* top corners belong to er-thead-wrap */
    box-shadow: 0 4px 16px rgba(24,52,91,0.08);
    /* height set dynamically by JS; fallback: */
    min-height: 200px;
    max-height: calc(100vh - 320px);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ── Table (matches emp-table design system) ─────────────────────── */
.er-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: fixed;
    background: var(--white);
    border-radius: 12px;
}

.er-table thead {
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}

/* ── Sticky header wrapper (lives outside scroll frame) ──────────── */
.er-thead-wrap {
    position: sticky;
    top: 0;                      /* overridden by JS to toolbar.offsetHeight */
    z-index: 150;                /* above rows, below toolbar (200) */
    overflow: hidden;            /* clips the translateX'd inner table */
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 16px rgba(24,52,91,0.08);
    background: linear-gradient(135deg, var(--navy) 0%, #243f6e 100%);
}
.er-thead-wrap .er-table {
    border-radius: 12px 12px 0 0;
    /* transform: translateX() applied by JS for horizontal sync */
}

/* ── Header cells ────────────────────────────────────────────────── */
.er-table thead th {
    background: transparent;     /* gradient comes from .er-thead-wrap */
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 13px 14px;
    text-align: left;
    border-bottom: none;
    white-space: nowrap;
    user-select: none;
}

/* Column widths — explicit only where content demands a specific size.
   Remaining columns (dept, rpt, cat, proj) share leftover space via
   table-layout:fixed. JS (_erSyncColWidths) reads body widths after
   render and forces the sticky header table to match exactly.         */
.er-th-num    { width: 44px;  text-align: right; }
.er-th-emp    { width: 180px; }
.er-th-date   { width: 100px; }           /* exp date, submitted, approved */
.er-th-amt    { width: 110px; text-align: right; }   /* amount + converted */
.er-th-ccy    { width: 68px;  text-align: center; }
.er-th-status { width: 90px;  text-align: center; }
.er-th-note   { width: 160px; }

/* ── Table body rows (z-index 0 — lowest) ───────────────────────── */
.er-row {
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.12s;
}
.er-row:last-child { border-bottom: none; }
.er-table tbody tr:nth-child(even) { background: #fafcff; }
.er-row:hover {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--blue);
}

/* FX row — subtle amber tint */
.er-row-fx { background: #fffdf7; }
.er-row-fx:hover { background: #fff8ec !important; box-shadow: inset 3px 0 0 #f59e0b; }

.er-table td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column-specific td styles */
.er-td-num  { text-align: right; color: #9aadc8; font-size: 12px; }
.er-td-date { font-size: 12.5px; color: #4a5568; }
.er-td-amt  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.er-td-note { color: #6b7fa3; font-size: 12px; }
.er-td-report .er-report-name { font-size: 12.5px; color: #1a2f4e; }

/* Employee cell */
.er-td-emp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: nowrap;
}
.er-emp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), #2c4f8a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.er-emp-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.er-emp-name { font-size: 12.5px; font-weight: 600; color: #1a2f4e; overflow: hidden; text-overflow: ellipsis; }
.er-emp-id   { font-size: 10.5px; color: #8a9bb8; overflow: hidden; text-overflow: ellipsis; }

/* Status badge */
.er-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.er-badge-draft     { background: #f0f0f0; color: #757575; border: 1px solid #d0d0d0; }
.er-badge-submitted { background: #E3F2FD; color: #1565C0; border: 1px solid #90CAF9; }
.er-badge-approved  { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.er-badge-rejected  { background: #FFEBEE; color: #C62828; border: 1px solid #EF9A9A; }

/* Currency pill */
.er-ccy-pill {
    display: inline-block;
    padding: 2px 7px;
    background: #f0f4fa;
    border: 1px solid #dde5f5;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #3a5280;
    letter-spacing: 0.3px;
}

/* Cross-converted tilde — shown when INR is the intermediate pivot */
.er-fx-note {
    font-size: 10px;
    color: #f59e0b;
    margin-left: 2px;
    font-weight: 700;
    cursor: help;
}

/* Base currency annotation */
.er-base-ccy {
    font-size: 10px;
    color: #9aadc8;
    margin-left: 2px;
    font-weight: 400;
}

/* Empty state */
.er-empty {
    text-align: center;
    padding: 56px 24px;
    color: #8a9bb8;
    font-size: 14px;
}
.er-empty i { font-size: 28px; display: block; margin-bottom: 10px; color: #c8d6ea; }
.er-empty span { display: block; }

/* Loading spinner row */
.er-loading {
    text-align: center;
    padding: 40px;
    color: #9aadc8;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════
   FOOTER — pagination + totals bar
   ═══════════════════════════════════════════════ */
.er-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    background: #fff;
    border-top: 1px solid #e8eef8;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.er-footer-count {
    font-size: 12px;
    color: #6b7fa3;
    font-weight: 600;
}

.er-footer-totals {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: #4a5568;
}
.er-footer-totals strong { color: #1a2f4e; font-weight: 700; }
.er-footer-sep { color: #c8d6ea; font-size: 14px; }

/* ── Responsive: small screens ───────────────────────────────────── */
@media (max-width: 900px) {
    .er-toolbar { padding: 8px 16px; gap: 8px; }
    .er-chip-search { min-width: 150px; flex: 0 1 160px; }
    .er-date-inp { width: 80px; }
    .er-table { table-layout: auto; }
    .er-td-emp { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 600px) {
    .er-toolbar-right { width: 100%; justify-content: flex-end; }
    .er-filters { gap: 6px; }
    .er-chip { height: 30px; font-size: 12px; }
}

/* ── Scrollbar styling for table frame ───────────────────────────── */
.er-table-frame::-webkit-scrollbar { width: 6px; height: 6px; }
.er-table-frame::-webkit-scrollbar-track { background: #f5f7fa; }
.er-table-frame::-webkit-scrollbar-thumb { background: #c8d6ea; border-radius: 3px; }
.er-table-frame::-webkit-scrollbar-thumb:hover { background: #8aadd4; }