/* ==========================================================================
   GrandHorizon HMS - Realistic Hospitality Executive Theme
   Palette: Warm Espresso, Antique Linen, Rich Bronze/Amber, Forest Sage & Emerald
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

:root {
    /* Base Surfaces */
    --hms-bg: #f5f3ec;
    --hms-bg-subtle: #ede9de;
    --hms-surface: #ffffff;
    --hms-surface-card: #fdfcf9;
    --hms-surface-elevated: #ffffff;
    
    /* Borders & Dividers */
    --hms-border: #e4dfd3;
    --hms-border-focus: #c49746;
    --hms-border-subtle: #eeebe3;
    
    /* Typography Colors */
    --hms-text-primary: #211c16;
    --hms-text-secondary: #5e5446;
    --hms-text-muted: #8c806f;
    --hms-text-inverse: #fdfcf9;
    
    /* Brand Accent: Hospitality Cognac & Warm Bronze */
    --hms-brand: #b8862d;
    --hms-brand-dark: #8c6218;
    --hms-brand-light: #dfb25d;
    --hms-brand-tint: #fbf5e8;
    --hms-brand-gradient: linear-gradient(135deg, #a37525 0%, #c8983e 50%, #e0b45c 100%);
    
    /* Operational Palettes (Realistic Semantic Colors) */
    /* Sage & Forest Emerald (Success, Present, Active, Fresh Ingredients) */
    --hms-emerald: #1b6348;
    --hms-emerald-dark: #124431;
    --hms-emerald-tint: #edf7f2;
    --hms-emerald-border: #bce3d0;
    
    /* Warm Terracotta & Crimson (Warnings, Late, Rejections, Waste) */
    --hms-crimson: #a63228;
    --hms-crimson-tint: #fdf0ee;
    --hms-crimson-border: #f8c9c4;
    
    /* Amber & Ochre (Pending, In Progress, Reorder Alert) */
    --hms-amber: #b86214;
    --hms-amber-tint: #fef5ea;
    --hms-amber-border: #fed8aa;
    
    /* Muted Slate Teal (Delivery, Logistics, Vehicles) */
    --hms-teal: #1f6b75;
    --hms-teal-tint: #eaf6f7;
    --hms-teal-border: #bee2e6;
    
    /* Deep Mulberry / Plum (Partners, Franchises, Royal VIP) */
    --hms-plum: #6b325c;
    --hms-plum-tint: #f8eef5;
    --hms-plum-border: #e7c8df;
    
    /* Sidebar Palette (Deep Espresso Onyx with Warm Gold Accents) */
    --hms-sidebar-bg: #1c1815;
    --hms-sidebar-surface: #27221d;
    --hms-sidebar-hover: #332d26;
    --hms-sidebar-border: #3b342d;
    --hms-sidebar-text: #c9c1b5;
    --hms-sidebar-text-active: #ffffff;
    
    /* Shadows */
    --hms-shadow-xs: 0 1px 2px rgba(33, 28, 22, 0.04);
    --hms-shadow-sm: 0 2px 6px rgba(33, 28, 22, 0.06), 0 1px 2px rgba(33, 28, 22, 0.03);
    --hms-shadow-md: 0 8px 20px -4px rgba(33, 28, 22, 0.08), 0 3px 8px -2px rgba(33, 28, 22, 0.04);
    --hms-shadow-lg: 0 18px 36px -8px rgba(33, 28, 22, 0.12), 0 8px 16px -4px rgba(33, 28, 22, 0.06);
    
    /* Radius */
    --hms-radius-sm: 6px;
    --hms-radius-md: 10px;
    --hms-radius-lg: 16px;
    --hms-radius-xl: 22px;
    
    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset & Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--hms-bg);
    color: var(--hms-text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--hms-text-primary);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ==========================================================================
   Main App Layout (Sidebar + Header + Content Area)
   ========================================================================== */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.app-sidebar {
    width: 270px;
    background: var(--hms-sidebar-bg);
    color: var(--hms-sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--hms-sidebar-border);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: transform 0.25s ease;
}

.sidebar-brand {
    padding: 24px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--hms-sidebar-border);
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--hms-radius-md);
    background: var(--hms-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a150e;
    font-weight: 800;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(184, 134, 45, 0.35);
}

.brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f5f2eb;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: 0.72rem;
    color: var(--hms-brand-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-section-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8c8274;
    padding: 12px 12px 6px 12px;
    font-weight: 700;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--hms-radius-sm);
    color: var(--hms-sidebar-text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.18s ease;
}

.nav-link:hover {
    background: var(--hms-sidebar-hover);
    color: #ffffff;
    transform: translateX(2px);
}

.nav-link.active {
    background: var(--hms-sidebar-surface);
    color: #ffffff;
    font-weight: 600;
    border-left: 3px solid var(--hms-brand);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.nav-icon {
    font-size: 1.15rem;
    width: 22px;
    display: inline-flex;
    justify-content: center;
    opacity: 0.9;
}

.sidebar-footer {
    padding: 18px 16px;
    border-top: 1px solid var(--hms-sidebar-border);
    background: var(--hms-sidebar-surface);
}

.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3a3229;
    border: 2px solid var(--hms-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hms-brand-light);
    font-weight: 700;
    font-size: 0.9rem;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role-tag {
    font-size: 0.72rem;
    color: var(--hms-brand-light);
    font-weight: 600;
    text-transform: capitalize;
}

/* Main Workspace */
.app-main {
    margin-left: 270px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.app-header {
    height: 72px;
    background: var(--hms-surface);
    border-bottom: 1px solid var(--hms-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: var(--hms-shadow-xs);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-title-group h1 {
    font-size: 1.35rem;
    color: var(--hms-text-primary);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.page-title-group p {
    font-size: 0.8rem;
    color: var(--hms-text-muted);
    margin: 0;
}

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

/* Quick Role Switcher (Crucial for Pairing & Multi-Level Review) */
.role-switcher-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hms-brand-tint);
    border: 1px solid rgba(184, 134, 45, 0.25);
    padding: 6px 12px;
    border-radius: var(--hms-radius-md);
    font-size: 0.82rem;
}

.role-switcher-dropdown label {
    font-weight: 600;
    color: var(--hms-brand-dark);
}

.role-select {
    background: #ffffff;
    border: 1px solid #d4cbb8;
    border-radius: var(--hms-radius-sm);
    padding: 4px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--hms-text-primary);
    cursor: pointer;
    font-weight: 600;
}

/* Content Container */
.app-content {
    padding: 32px;
    flex: 1;
}

/* Alerts */
.alert {
    padding: 14px 18px;
    border-radius: var(--hms-radius-md);
    margin-bottom: 24px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
}

.alert-success {
    background: var(--hms-emerald-tint);
    color: var(--hms-emerald-dark);
    border-color: var(--hms-emerald-border);
}

.alert-error, .alert-danger {
    background: var(--hms-crimson-tint);
    color: var(--hms-crimson);
    border-color: var(--hms-crimson-border);
}

.alert-warning {
    background: var(--hms-amber-tint);
    color: var(--hms-amber);
    border-color: var(--hms-amber-border);
}

.alert-info {
    background: var(--hms-brand-tint);
    color: var(--hms-brand-dark);
    border-color: rgba(184, 134, 45, 0.3);
}

/* ==========================================================================
   Stat KPI Cards (Rich Warm Realistic Visual Texture)
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-lg);
    padding: 22px;
    box-shadow: var(--hms-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hms-shadow-md);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hms-border);
}

.stat-card.stat-brand::before { background: var(--hms-brand); }
.stat-card.stat-emerald::before { background: var(--hms-emerald); }
.stat-card.stat-amber::before { background: var(--hms-amber); }
.stat-card.stat-crimson::before { background: var(--hms-crimson); }
.stat-card.stat-teal::before { background: var(--hms-teal); }
.stat-card.stat-plum::before { background: var(--hms-plum); }

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hms-text-muted);
}

.stat-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: var(--hms-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.stat-brand .stat-icon-wrapper { background: var(--hms-brand-tint); color: var(--hms-brand-dark); }
.stat-emerald .stat-icon-wrapper { background: var(--hms-emerald-tint); color: var(--hms-emerald); }
.stat-amber .stat-icon-wrapper { background: var(--hms-amber-tint); color: var(--hms-amber); }
.stat-crimson .stat-icon-wrapper { background: var(--hms-crimson-tint); color: var(--hms-crimson); }
.stat-teal .stat-icon-wrapper { background: var(--hms-teal-tint); color: var(--hms-teal); }
.stat-plum .stat-icon-wrapper { background: var(--hms-plum-tint); color: var(--hms-plum); }

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--hms-text-primary);
    line-height: 1.1;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
}

.stat-subtext {
    font-size: 0.78rem;
    color: var(--hms-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Cards, Panels & Containers
   ========================================================================== */

.card {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-lg);
    box-shadow: var(--hms-shadow-sm);
    margin-bottom: 28px;
    overflow: hidden;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--hms-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hms-surface-card);
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hms-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-description {
    font-size: 0.8rem;
    color: var(--hms-text-muted);
    margin-top: 2px;
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--hms-border-subtle);
    background: var(--hms-surface-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   Data Tables
   ========================================================================== */

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.table th {
    background: #f7f5ef;
    padding: 12px 16px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hms-text-secondary);
    border-bottom: 1px solid var(--hms-border);
    white-space: nowrap;
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hms-border-subtle);
    color: var(--hms-text-primary);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: #faf8f2;
}

.table-sm th, .table-sm td {
    padding: 8px 12px;
}

/* ==========================================================================
   Realistic Badges & Status Chips
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Roles */
.badge-role-super_admin { background: #fdf5e8; color: #8c6218; border-color: #eeddbb; }
.badge-role-admin { background: #f4ecfb; color: #6b325c; border-color: #e2ccee; }
.badge-role-supervisor { background: #edf7f2; color: #124431; border-color: #bce3d0; }
.badge-role-accountant { background: #eaf6f7; color: #1f6b75; border-color: #bee2e6; }
.badge-role-kitchen { background: #fff2ea; color: #a34e12; border-color: #fed0b4; }
.badge-role-delivery { background: #f0f4fc; color: #2d548b; border-color: #c9d8f3; }
.badge-role-partner { background: #fcf1f5; color: #882b54; border-color: #f3c7dc; }

/* Statuses */
.badge-success, .badge-present, .badge-approved, .badge-in-service, .badge-passed, .badge-in-stock, .badge-paid {
    background: var(--hms-emerald-tint);
    color: var(--hms-emerald-dark);
    border-color: var(--hms-emerald-border);
}

.badge-warning, .badge-late, .badge-pending, .badge-pending-approval, .badge-low-stock, .badge-draft {
    background: var(--hms-amber-tint);
    color: var(--hms-amber);
    border-color: var(--hms-amber-border);
}

.badge-danger, .badge-absent, .badge-out-of-stock, .badge-rejected, .badge-needs-repair, .badge-discrepancy {
    background: var(--hms-crimson-tint);
    color: var(--hms-crimson);
    border-color: var(--hms-crimson-border);
}

.badge-info, .badge-half-day, .badge-in-transit, .badge-ordered, .badge-inspected {
    background: var(--hms-teal-tint);
    color: var(--hms-teal);
    border-color: var(--hms-teal-border);
}

.badge-neutral {
    background: #f0ede5;
    color: #635b4f;
    border-color: #ded8cb;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--hms-radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.3;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--hms-brand);
    color: #ffffff;
    border-color: var(--hms-brand-dark);
    box-shadow: 0 2px 4px rgba(184, 134, 45, 0.25);
}

.btn-primary:hover {
    background: var(--hms-brand-dark);
    color: #ffffff;
}

.btn-emerald {
    background: var(--hms-emerald);
    color: #ffffff;
    border-color: var(--hms-emerald-dark);
}

.btn-emerald:hover {
    background: var(--hms-emerald-dark);
    color: #ffffff;
}

.btn-secondary {
    background: #ffffff;
    color: var(--hms-text-primary);
    border-color: var(--hms-border);
    box-shadow: var(--hms-shadow-xs);
}

.btn-secondary:hover {
    background: #f7f4ed;
    border-color: #d1c9b8;
}

.btn-outline-primary {
    background: transparent;
    color: var(--hms-brand-dark);
    border-color: var(--hms-brand);
}

.btn-outline-primary:hover {
    background: var(--hms-brand-tint);
}

.btn-danger {
    background: var(--hms-crimson);
    color: #ffffff;
    border-color: #83251d;
}

.btn-danger:hover {
    background: #83251d;
    color: #ffffff;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: var(--hms-radius-sm);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: var(--hms-radius-md);
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hms-text-secondary);
    margin-bottom: 6px;
}

.form-control, .form-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--hms-radius-sm);
    border: 1px solid var(--hms-border);
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--hms-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--hms-brand);
    box-shadow: 0 0 0 3px rgba(184, 134, 45, 0.15);
}

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

.form-text {
    font-size: 0.74rem;
    color: var(--hms-text-muted);
    margin-top: 4px;
}

/* File Upload Zone (For Biometric Fingerprint Excel/CSV) */
.dropzone-box {
    border: 2px dashed #cfc7b4;
    border-radius: var(--hms-radius-lg);
    background: #faf8f2;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.dropzone-box:hover, .dropzone-box.drag-over {
    border-color: var(--hms-brand);
    background: var(--hms-brand-tint);
}

.dropzone-icon {
    font-size: 2.8rem;
    margin-bottom: 12px;
    color: var(--hms-brand);
}

.dropzone-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hms-text-primary);
    margin-bottom: 6px;
}

.dropzone-desc {
    font-size: 0.85rem;
    color: var(--hms-text-muted);
}

.dropzone-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Filter Toolbar
   ========================================================================== */

.filter-toolbar {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-md);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: var(--hms-shadow-xs);
}

.filter-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.search-input {
    min-width: 240px;
}

/* ==========================================================================
   Modal Dialogs
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 21, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.modal-backdrop.active, .modal-backdrop:target {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-lg);
    box-shadow: var(--hms-shadow-lg);
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.2s ease;
}

.modal-backdrop.active .modal-card, .modal-backdrop:target .modal-card {
    transform: translateY(0);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--hms-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hms-surface-card);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--hms-text-muted);
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: var(--hms-crimson);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--hms-border-subtle);
    background: var(--hms-surface-card);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ==========================================================================
   Official Printable Payslip & PO Layout
   ========================================================================== */

.payslip-sheet, .document-sheet {
    background: #ffffff;
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-lg);
    padding: 40px;
    max-width: 820px;
    margin: 0 auto 30px auto;
    box-shadow: var(--hms-shadow-md);
}

.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 2px solid #211c16;
    margin-bottom: 28px;
}

.doc-brand-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #211c16;
    letter-spacing: -0.02em;
}

.doc-badge-pill {
    padding: 6px 14px;
    background: var(--hms-brand-tint);
    border: 1px solid #d4cbb8;
    color: var(--hms-brand-dark);
    font-weight: 700;
    border-radius: 9999px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.doc-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
    background: #faf8f2;
    padding: 18px 22px;
    border-radius: var(--hms-radius-md);
    border: 1px solid var(--hms-border-subtle);
}

.doc-meta-item {
    font-size: 0.88rem;
}

.doc-meta-item strong {
    color: var(--hms-text-secondary);
    display: inline-block;
    width: 140px;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.doc-table th {
    background: #211c16;
    color: #ffffff;
    padding: 10px 14px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

.doc-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e7e2d6;
    font-size: 0.9rem;
}

.doc-table tr.total-row td {
    font-weight: 800;
    font-size: 1.05rem;
    background: #faf8f2;
    border-top: 2px solid #211c16;
}

.doc-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 50px;
    padding-top: 20px;
}

.sig-line {
    border-top: 1px solid #8c806f;
    padding-top: 8px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--hms-text-muted);
}

/* ==========================================================================
   Print Stylesheet
   ========================================================================== */

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .app-sidebar, .app-header, .btn, .filter-toolbar, .no-print {
        display: none !important;
    }
    .app-main {
        margin-left: 0 !important;
    }
    .app-content {
        padding: 0 !important;
    }
    .payslip-sheet, .document-sheet {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .app-sidebar {
        transform: translateX(-100%);
    }
    .app-sidebar.show {
        transform: translateX(0);
    }
    .app-main {
        margin-left: 0;
    }
    .app-header {
        padding: 0 16px;
    }
    .app-content {
        padding: 18px 14px;
    }
}

/* ==========================================================================
   Executive Luxury Pagination
   ========================================================================== */

.hms-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 0;
}

.hms-pagination-summary {
    font-size: 0.85rem;
    color: var(--hms-text-muted);
    font-weight: 500;
}

.hms-pagination-summary strong {
    color: var(--hms-text-primary);
    font-weight: 700;
}

.hms-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hms-page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    border-radius: var(--hms-radius-sm);
    border: 1px solid var(--hms-border);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--hms-text-primary);
    text-decoration: none;
    background: #ffffff;
    cursor: pointer;
    transition: var(--hms-transition-fast);
    user-select: none;
}

.hms-page-item:hover:not(.disabled):not(.active) {
    border-color: var(--hms-brand);
    color: var(--hms-brand-dark);
    background: var(--hms-brand-tint);
}

.hms-page-item.active {
    background: var(--hms-brand-gradient);
    border-color: var(--hms-brand-dark);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(184, 134, 45, 0.35);
}

.hms-page-item.disabled {
    color: var(--hms-text-muted);
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--hms-border-subtle);
}

.hms-page-item.ellipsis {
    border: none;
    background: transparent;
    cursor: default;
    color: var(--hms-text-muted);
    min-width: 24px;
    padding: 0 4px;
}

/* Global SVG Safeguard against unstyled default pagination SVGs */
nav[role="navigation"] svg,
.pagination svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.card-footer .hms-pagination {
    margin: 0;
}