/**
 * Custom UI/UX Styles
 * WellCare Pharmacy Management System
 * =====================================
 */

/* ========================================
   CSS Variables - Theme Colors
   ======================================== */
:root {
    --theme-primary: #0b6bb8;
    --theme-primary-light: rgba(11, 107, 184, 0.1);
    --theme-primary-dark: #08548f;
    --theme-success: #2db84b;
    --theme-info: #0ea5c6;
    --theme-warning: #f0a202;
    --theme-danger: #e5484d;
    --theme-secondary: #6b7c8f;
    --theme-dark: #1a3348;
    --theme-light: #f3f7fb;
    --theme-border: #e2e8f0;
    --theme-card-bg: #ffffff;
    --theme-text: #5a6b7d;
    --theme-heading: #1e3a5f;
    --theme-label: #8a9aab;
}

/* ========================================
   Common Components
   ======================================== */

/* Back Link */
.back-link {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: #f5f5f9;
    color: #697a8d;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover {
    background: var(--theme-primary);
    color: #ffffff;
}

.back-link i {
    font-size: 1.25rem;
}

/* Form Header */
.form-header,
.user-management-header,
.branch-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-content {
    display: flex;
    flex-direction: column;
}

.form-title,
.user-management-title,
.branch-management-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin: 0;
}

.form-title i,
.user-management-title i,
.branch-management-title i {
    color: var(--theme-primary);
}

.form-subtitle,
.branch-management-subtitle {
    color: var(--theme-label);
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Primary Button */
.btn-create-user,
.btn-create-branch,
.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
    cursor: pointer;
}

.btn-create-user:hover,
.btn-create-branch:hover,
.btn-submit:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 107, 184, 0.4);
}

.btn-create-user i,
.btn-create-branch i,
.btn-submit i {
    font-size: 1.125rem;
}

/* Secondary/Outline Button */
.btn-import-user,
.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-cancel {
    background: #f5f5f9;
    color: #697a8d;
    border: none;
}

.btn-import-user:hover {
    background: rgba(11, 107, 184, 0.08);
}

.btn-cancel:hover {
    background: #e7e7e8;
    color: var(--theme-heading);
}

/* Actions Button */
.btn-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-actions:hover {
    background: rgba(11, 107, 184, 0.08);
}

.btn-actions i {
    font-size: 1rem;
}

/* ========================================
   Form Card Styles
   ======================================== */
.form-grid,
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.profile-card.full-width {
    grid-column: 1 / -1;
}

.form-card,
.profile-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.form-card.full-width {
    grid-column: 1 / -1;
}

.card-header-custom {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--theme-border);
    flex-wrap: wrap;
}

.card-header-custom .pattern-summary-badges {
    margin-left: auto;
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: rgba(11, 107, 184, 0.12);
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}

.card-icon.employment-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.card-icon.emergency-icon { background: rgba(255, 62, 29, 0.12); color: var(--theme-danger); }
.card-icon.days-icon { background: rgba(113, 221, 55, 0.12); color: var(--theme-success); }
.card-icon.financial-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.card-icon.banking-icon { background: rgba(113, 221, 55, 0.12); color: var(--theme-success); }
.card-icon.location-icon { background: rgba(255, 171, 0, 0.12); color: var(--theme-warning); }
.card-icon.leave-icon { background: rgba(255, 171, 0, 0.12); color: var(--theme-warning); }
.card-icon.upload-icon { background: rgba(11, 107, 184, 0.12); color: var(--theme-primary); }
.card-icon.docs-icon { background: rgba(255, 171, 0, 0.12); color: var(--theme-warning); }
.card-icon.balance-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.card-icon.requests-icon { background: rgba(11, 107, 184, 0.12); color: var(--theme-primary); }
.card-icon.total-icon { background: rgba(11, 107, 184, 0.12); color: var(--theme-primary); }
.card-icon.deposit-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.card-icon.discrepancy-icon { background: rgba(255, 171, 0, 0.12); color: var(--theme-warning); }

.card-title-custom {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin: 0;
    flex: 1;
}

.card-subtitle-custom {
    font-size: 0.8125rem;
    color: var(--theme-label);
    margin: 0.125rem 0 0 0;
}

.card-body-custom {
    padding: 1.5rem;
}

/* ========================================
   Form Elements
   ======================================== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group.half {
    flex: 1;
    margin-bottom: 0;
}

.form-label-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-heading);
    margin-bottom: 0.5rem;
}

.form-label-custom i {
    color: var(--theme-primary);
    font-size: 1rem;
}

.required {
    color: var(--theme-danger);
}

.form-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: var(--theme-heading);
    transition: all 0.2s ease;
    background: #ffffff;
}

.form-input:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.form-input::placeholder {
    color: var(--theme-label);
}

.form-input.is-invalid {
    border-color: var(--theme-danger);
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

.error-message {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--theme-danger);
}

.input-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--theme-label);
}

/* Input with Prefix */
.input-with-prefix {
    display: flex;
    align-items: stretch;
}

.input-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    background: #f5f5f9;
    border: 1px solid var(--theme-border);
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
    font-weight: 600;
    color: #697a8d;
}

.form-input.with-prefix {
    border-radius: 0 0.375rem 0.375rem 0;
}

/* Password Input */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #697a8d;
    cursor: pointer;
    padding: 0.25rem;
}

.password-toggle:hover {
    color: var(--theme-primary);
}

/* File Input */
.file-input-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f5f5f9;
    border: 2px dashed var(--theme-border);
    border-radius: 0.375rem;
    color: #697a8d;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-input-label:hover {
    border-color: var(--theme-primary);
    background: rgba(11, 107, 184, 0.05);
    color: var(--theme-primary);
}

.file-input-label i {
    font-size: 1.25rem;
}

/* ========================================
   Toggle Switch
   ======================================== */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.toggle-group.highlight {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.08) 0%, rgba(113, 221, 55, 0.04) 100%);
    border: 1px solid rgba(113, 221, 55, 0.2);
}

.toggle-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.toggle-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.toggle-description {
    font-size: 0.8125rem;
    color: var(--theme-label);
    margin-top: 0.125rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex: 0 0 52px;
    box-sizing: border-box;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d9dee3;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--theme-success) 0%, #56b832 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ========================================
   Day Selector
   ======================================== */
.days-selector,
.days-selector-large {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.days-selector-large {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
}

.day-toggle,
.day-toggle-large {
    position: relative;
    cursor: pointer;
}

.day-toggle input,
.day-toggle-large input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.day-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    background: #f5f5f9;
    border: 2px solid var(--theme-border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-label);
    transition: all 0.2s ease;
}

.day-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    background: #f5f5f9;
    border: 2px solid var(--theme-border);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.day-short {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-label);
}

.day-full {
    font-size: 0.6875rem;
    color: var(--theme-label);
    margin-top: 0.25rem;
}

.day-toggle input:checked + .day-label,
.day-toggle-large input:checked + .day-content {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.day-toggle-large input:checked + .day-content .day-short,
.day-toggle-large input:checked + .day-content .day-full {
    color: #ffffff;
}

.day-toggle:hover .day-label,
.day-toggle-large:hover .day-content {
    border-color: var(--theme-primary);
}

/* ========================================
   Working Pattern Grid
   ======================================== */
.working-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.working-pattern-day {
    background: #f5f5f9;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.working-pattern-day:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.1);
}

.pattern-day-header {
    margin-bottom: 1rem;
}

.pattern-day-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pattern-time-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pattern-time-inputs .form-group {
    margin-bottom: 0;
}

.pattern-time-inputs .form-label-custom {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.pattern-time-inputs .form-input {
    width: 100%;
}

.pattern-icon {
    background: linear-gradient(135deg, #03c3ec 0%, #0b6bb8 100%);
}

/* ========================================
   Working Pattern Modal - Enhanced UI
   ======================================== */
.working-pattern-modal {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.working-pattern-modal-header {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: none;
}

.pattern-header-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pattern-header-icon i {
    font-size: 1.5rem;
    color: #ffffff;
}

.pattern-header-content {
    flex: 1;
}

.pattern-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #ffffff;
}

.pattern-header-subtitle {
    font-size: 0.875rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
}

.pattern-close-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 0.5rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pattern-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.pattern-close-btn i {
    font-size: 1.25rem;
}

.working-pattern-modal-body {
    padding: 2rem;
    background: #f5f5f9;
}

.working-pattern-modal-content {
    min-height: 200px;
}

.pattern-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.pattern-spinner {
    margin-bottom: 1rem;
}

.pattern-loading-text {
    color: var(--theme-text);
    font-size: 0.9375rem;
    margin: 0;
}

.working-pattern-display {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Summary Cards */
.pattern-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.pattern-summary-cards .summary-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--theme-border);
}

.pattern-summary-cards .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon.working-days-icon {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(113, 221, 55, 0.25) 100%);
    color: var(--theme-success);
}

.summary-icon.pattern-icon {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(3, 195, 236, 0.25) 100%);
    color: var(--theme-info);
}

.summary-icon.status-icon {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(11, 107, 184, 0.25) 100%);
    color: var(--theme-primary);
}

.summary-icon i {
    font-size: 1.5rem;
}

.summary-content {
    flex: 1;
}

.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-heading);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.summary-label {
    font-size: 0.8125rem;
    color: var(--theme-text);
    font-weight: 500;
}

/* Section Cards */
.pattern-section-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
}

.pattern-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--theme-border);
}

.section-header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-header-icon i {
    font-size: 1.25rem;
    color: var(--theme-primary);
}

.section-header-text {
    flex: 1;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin: 0 0 0.25rem 0;
}

.section-subtitle {
    font-size: 0.8125rem;
    color: var(--theme-text);
    margin: 0;
}

/* Working Days Grid */
.working-days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.working-day-card {
    background: #f5f5f9;
    border: 2px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.working-day-card.active {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.1) 0%, rgba(113, 221, 55, 0.15) 100%);
    border-color: var(--theme-success);
    box-shadow: 0 2px 8px rgba(113, 221, 55, 0.2);
}

.working-day-card.inactive {
    opacity: 0.6;
}

.working-day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.day-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.working-day-card.active .day-card-icon {
    background: rgba(113, 221, 55, 0.15);
}

.working-day-card.inactive .day-card-icon {
    background: rgba(133, 146, 163, 0.1);
}

.day-card-icon i {
    font-size: 1.5rem;
}

.working-day-card.active .day-card-icon i {
    color: var(--theme-success);
}

.working-day-card.inactive .day-card-icon i {
    color: var(--theme-secondary);
}

.day-card-content {
    flex: 1;
}

.day-card-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-heading);
    margin-bottom: 0.25rem;
}

.day-card-status {
    font-size: 0.75rem;
    color: var(--theme-text);
    font-weight: 500;
}

.working-day-card.active .day-card-status {
    color: var(--theme-success);
}

/* Pattern Times Grid */
.pattern-times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.pattern-time-card {
    background: #f5f5f9;
    border: 2px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.pattern-time-card.active {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.15);
}

.pattern-time-card.inactive {
    opacity: 0.6;
    background: #f5f5f9;
}

.pattern-time-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.time-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border);
}

.time-day-badge {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.time-day-badge.working {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
}

.time-day-badge.off {
    background: var(--theme-border);
    color: var(--theme-secondary);
}

.time-day-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-heading);
}

.time-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.time-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clock-in-icon {
    background: rgba(113, 221, 55, 0.15);
    color: var(--theme-success);
}

.clock-out-icon {
    background: rgba(255, 171, 0, 0.15);
    color: var(--theme-warning);
}

.time-icon i {
    font-size: 1rem;
}

.time-content {
    flex: 1;
}

.time-label {
    font-size: 0.75rem;
    color: var(--theme-text);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.time-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.time-value .not-set {
    color: var(--theme-secondary);
    font-weight: 400;
    font-style: italic;
}

.no-times-message,
.off-day-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(133, 146, 163, 0.1);
    border-radius: 0.5rem;
    color: var(--theme-secondary);
    font-size: 0.875rem;
    justify-content: center;
}

.no-times-message i,
.off-day-message i {
    font-size: 1.125rem;
}

.action-icon.pattern-icon {
    background: linear-gradient(135deg, #03c3ec 0%, #0b6bb8 100%);
}

/* ========================================
   Working Pattern View (Staff Show Page)
   ======================================== */
.pattern-summary-badges {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(11, 107, 184, 0.1);
    color: var(--theme-primary);
}

.working-pattern-display-view {
    margin-top: 1rem;
}

.pattern-times-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.pattern-time-card-view {
    background: #f5f5f9;
    border: 2px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.pattern-time-card-view.active {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.15);
}

.pattern-time-card-view.inactive {
    opacity: 0.6;
}

.time-card-header-view {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border);
}

.time-day-badge-view {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.time-day-badge-view.working {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
}

.time-day-badge-view.off {
    background: var(--theme-border);
    color: var(--theme-secondary);
}

.time-day-name-view {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-heading);
}

.time-card-body-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.time-row-view {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-icon-view {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clock-in-icon-view {
    background: rgba(113, 221, 55, 0.15);
    color: var(--theme-success);
}

.clock-out-icon-view {
    background: rgba(255, 171, 0, 0.15);
    color: var(--theme-warning);
}

.time-icon-view i {
    font-size: 1rem;
}

.time-content-view {
    flex: 1;
}

.time-label-view {
    font-size: 0.75rem;
    color: var(--theme-text);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.time-value-view {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.time-value-view .not-set {
    color: var(--theme-secondary);
    font-weight: 400;
    font-style: italic;
}

.no-times-message-view,
.off-day-message-view {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(133, 146, 163, 0.1);
    border-radius: 0.5rem;
    color: var(--theme-secondary);
    font-size: 0.875rem;
    justify-content: center;
}

.empty-pattern-message {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-pattern-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: rgba(11, 107, 184, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-pattern-icon i {
    font-size: 2rem;
    color: var(--theme-primary);
}

.empty-pattern-message h6 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin-bottom: 0.5rem;
}

.empty-pattern-message p {
    color: var(--theme-text);
    margin-bottom: 1.5rem;
}

.btn-set-pattern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--theme-primary);
    color: #ffffff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-set-pattern:hover {
    background: var(--theme-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

/* ========================================
   Dashboard Working Pattern
   ======================================== */
.pattern-gradient {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(11, 107, 184, 0.2);
}

.dashboard-pattern-badges {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.dashboard-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.8);
    color: var(--theme-primary);
}

.dashboard-working-pattern {
    margin-top: 1rem;
}

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

.dashboard-pattern-card {
    background: #ffffff;
    border: 2px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.dashboard-pattern-card.active {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.15);
}

.dashboard-pattern-card.inactive {
    opacity: 0.6;
    background: #f5f5f9;
}

.dashboard-pattern-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-time-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border);
}

.dashboard-day-badge {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.dashboard-day-badge.working {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
}

.dashboard-day-badge.off {
    background: var(--theme-border);
    color: var(--theme-secondary);
}

.dashboard-day-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-heading);
}

.dashboard-time-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-time-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-time-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-time-icon.clock-in {
    background: rgba(113, 221, 55, 0.15);
    color: var(--theme-success);
}

.dashboard-time-icon.clock-out {
    background: rgba(255, 171, 0, 0.15);
    color: var(--theme-warning);
}

.dashboard-time-icon i {
    font-size: 1rem;
}

.dashboard-time-info {
    flex: 1;
}

.dashboard-time-label {
    font-size: 0.75rem;
    color: var(--theme-text);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.dashboard-time-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.dashboard-time-value .not-set {
    color: var(--theme-secondary);
    font-weight: 400;
    font-style: italic;
}

.dashboard-no-times,
.dashboard-off-day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(133, 146, 163, 0.1);
    border-radius: 0.5rem;
    color: var(--theme-secondary);
    font-size: 0.875rem;
    justify-content: center;
}

.dashboard-empty-pattern {
    text-align: center;
    padding: 3rem 2rem;
}

.dashboard-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: rgba(11, 107, 184, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-empty-icon i {
    font-size: 2rem;
    color: var(--theme-primary);
}

.dashboard-empty-pattern h6 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin-bottom: 0.5rem;
}

.dashboard-empty-pattern p {
    color: var(--theme-text);
    margin: 0;
}

/* ========================================
   Info Box
   ======================================== */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(11, 107, 184, 0.08);
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.info-box.warning {
    background: rgba(255, 171, 0, 0.08);
}

.info-box i {
    color: var(--theme-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-box.warning i {
    color: var(--theme-warning);
}

.info-box span {
    font-size: 0.8125rem;
    color: var(--theme-heading);
    line-height: 1.5;
}

/* ========================================
   Status Badges
   ======================================== */
.status-badge,
.status-active,
.status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.status-active {
    background: rgba(113, 221, 55, 0.16);
    color: var(--theme-success);
}

.status-inactive {
    background: rgba(255, 171, 0, 0.16);
    color: var(--theme-warning);
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.user-status-badge.status-active {
    background: rgba(113, 221, 55, 0.12);
    color: var(--theme-success);
}

.user-status-badge.status-inactive {
    background: rgba(255, 62, 29, 0.12);
    color: var(--theme-danger);
}

/* ========================================
   Table Styles
   ======================================== */
.user-table-card,
.branch-table-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    padding: 1rem;
}

.user-table,
.branch-table,
.leave-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.user-table thead th,
.branch-table thead th,
.leave-table thead th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--theme-heading);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid var(--theme-border);
}

.user-table thead th:first-child,
.branch-table thead th:first-child {
    border-radius: 0.375rem 0 0 0;
}

.user-table thead th:last-child,
.branch-table thead th:last-child {
    border-radius: 0 0.375rem 0 0;
}

.user-table tbody tr,
.branch-table tbody tr,
.leave-table tbody tr {
    transition: background-color 0.15s ease;
}

.user-table tbody tr:hover,
.branch-table tbody tr:hover,
.leave-table tbody tr:hover {
    background-color: rgba(11, 107, 184, 0.04);
}

.user-table tbody td,
.branch-table tbody td,
.leave-table tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
    font-size: 0.9375rem;
}

.user-table tbody tr:last-child td,
.branch-table tbody tr:last-child td,
.leave-table tbody tr:last-child td {
    border-bottom: none;
}

/* User Name Link */
.user-name-link {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.user-name-link:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

/* Company Badge */
.branch-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.company-badge,
.branch-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--theme-info);
    color: #ffffff;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.branch-popover-container {
    display: inline-flex;
}

.branch-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.branch-more-btn:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    transform: translateY(-1px);
}

.no-company {
    color: var(--theme-label);
    font-style: italic;
}

/* ========================================
   Action Dropdown
   ======================================== */
.action-dropdown {
    padding: 0;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(67, 89, 113, 0.2);
    min-width: 240px;
    overflow: hidden;
}

.action-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
}

.action-dropdown-header i {
    font-size: 1.25rem;
}

.action-dropdown-body {
    padding: 0.5rem;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-item:hover {
    background: #f5f5f9;
}

.action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-icon i {
    font-size: 1.125rem;
}

.view-icon { background: rgba(11, 107, 184, 0.12); color: var(--theme-primary); }
.edit-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.password-icon { background: rgba(113, 221, 55, 0.12); color: var(--theme-success); }
.delete-icon { background: rgba(255, 62, 29, 0.12); color: var(--theme-danger); }

.action-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.action-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-heading);
    line-height: 1.3;
}

.action-desc {
    font-size: 0.75rem;
    color: var(--theme-label);
    line-height: 1.3;
}

.action-item:hover .action-title {
    color: var(--theme-primary);
}

.action-delete:hover {
    background: rgba(255, 62, 29, 0.08);
}

.action-delete:hover .action-title,
.action-delete:hover .action-desc {
    color: var(--theme-danger);
}

/* ========================================
   Branch Specific Styles
   ======================================== */

/* Stats Row */
.branch-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--theme-heading);
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--theme-label);
}

/* Branch Info Cell */
.branch-info {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.branch-avatar {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.branch-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.branch-name {
    font-weight: 600;
    color: var(--theme-heading);
    font-size: 0.9375rem;
}

.branch-location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--theme-label);
}

.branch-location i {
    font-size: 0.875rem;
    color: var(--theme-primary);
}

/* Financial Info */
.financial-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.financial-item {
    display: flex;
    flex-direction: column;
}

.financial-label {
    font-size: 0.6875rem;
    color: var(--theme-label);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.financial-value {
    font-weight: 600;
    font-size: 0.9375rem;
}

.financial-value.deposit { color: var(--theme-info); }
.financial-value.positive { color: var(--theme-success); }
.financial-value.negative { color: var(--theme-danger); }

/* Banking Badge */
.banking-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.banking-enabled {
    background: rgba(113, 221, 55, 0.12);
    color: var(--theme-success);
}

.banking-disabled {
    background: rgba(255, 62, 29, 0.12);
    color: var(--theme-danger);
}

/* Days Grid - Operating Days Display */
.days-grid {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.day-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

/* GREEN for Working Days */
.day-badge.day-active {
    background: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important;
}

/* GRAY for Non-Working Days */
.day-badge.day-inactive {
    background: #e9ecef !important;
    color: #6c757d !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   User Profile Styles
   ======================================== */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(11, 107, 184, 0.3);
}

.profile-header .back-link {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.profile-header .back-link:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.user-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
}

.user-basic-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.user-role {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0.25rem 0 0.75rem 0;
}

.user-badges {
    display: flex;
    gap: 0.5rem;
}

.profile-header .status-badge.status-active {
    background: rgba(113, 221, 55, 0.2);
    color: #a3f77d;
}

.profile-header .status-badge.status-inactive {
    background: rgba(255, 62, 29, 0.2);
    color: #ff8066;
}

.employee-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-edit-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    color: var(--theme-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-edit-user:hover {
    background: #f5f5f9;
    color: var(--theme-primary-dark);
    transform: translateY(-2px);
}

/* Info List */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.info-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.375rem;
    background: #f5f5f9;
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--theme-label);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.9375rem;
    color: var(--theme-heading);
    font-weight: 500;
}

.salary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--theme-info);
}

.employment-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(11, 107, 184, 0.12);
    color: var(--theme-primary);
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.branches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.no-data {
    color: var(--theme-label);
    font-style: italic;
}

/* Emergency Contact */
.emergency-contact-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 62, 29, 0.05);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 62, 29, 0.1);
}

.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 62, 29, 0.12);
    color: var(--theme-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--theme-text);
    margin-top: 0.25rem;
}

.contact-phone i {
    color: var(--theme-danger);
}

/* Working Days Display */
.working-days-display {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.day-item .day-label {
    margin-bottom: 0.125rem;
}

.day-item i {
    font-size: 0.875rem;
}

.day-working {
    background: linear-gradient(135deg, var(--theme-success) 0%, #56b832 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(113, 221, 55, 0.3);
}

.day-off {
    background: #f5f5f9;
    color: var(--theme-label);
}

/* ========================================
   Documents Section
   ======================================== */
.documents-section {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.upload-card .card-body-custom {
    padding: 1rem;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upload-area {
    position: relative;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #f8f9fa;
    border: 2px dashed var(--theme-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-label:hover {
    border-color: var(--theme-primary);
    background: rgba(11, 107, 184, 0.05);
}

.upload-label i {
    font-size: 2.5rem;
    color: var(--theme-primary);
    margin-bottom: 0.75rem;
}

.upload-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--theme-heading);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--theme-label);
    margin-top: 0.375rem;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

/* Documents List */
.docs-count,
.requests-count {
    padding: 0.25rem 0.75rem;
    background: #f5f5f9;
    color: var(--theme-text);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.document-item:hover {
    background: #f0f0f5;
}

.doc-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.doc-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-heading);
    text-decoration: none;
}

.doc-name:hover {
    color: var(--theme-primary);
}

.doc-date {
    font-size: 0.75rem;
    color: var(--theme-label);
}

.doc-actions {
    display: flex;
    gap: 0.375rem;
}

.btn-doc-action {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.btn-download {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.btn-download:hover {
    background: var(--theme-primary);
    color: #ffffff;
}

.btn-delete {
    border-color: var(--theme-danger);
    color: var(--theme-danger);
}

.btn-delete:hover {
    background: var(--theme-danger);
    color: #ffffff;
}

.empty-docs,
.empty-balance,
.empty-table {
    text-align: center;
    padding: 2rem;
    color: var(--theme-label);
}

.empty-docs i,
.empty-balance i,
.empty-table i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ========================================
   Leave Section
   ======================================== */
.leave-section {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.total-leave-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.leave-balance-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.balance-item,
.leave-item {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
}

.balance-header,
.leave-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.balance-type,
.leave-type {
    font-weight: 600;
    color: var(--theme-heading);
}

.balance-year {
    font-size: 0.75rem;
    color: var(--theme-label);
    background: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.balance-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat.remaining .stat-value {
    color: var(--theme-success);
}

.stat.used .stat-value {
    color: var(--theme-info);
}

.stat .stat-label {
    font-size: 0.6875rem;
    color: var(--theme-label);
    text-transform: uppercase;
}

.balance-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--theme-border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-info) 0%, #0099cc 100%);
    border-radius: 3px;
}

.progress-label {
    font-size: 0.75rem;
    color: var(--theme-text);
    white-space: nowrap;
}

/* Leave Table Specific */
.leave-type-name {
    font-weight: 600;
    color: var(--theme-heading);
}

.date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.date-range i {
    color: var(--theme-label);
}

.days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0.25rem 0.5rem;
    background: rgba(11, 107, 184, 0.12);
    color: var(--theme-primary);
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.status-badge-table {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge-table.approved {
    background: rgba(113, 221, 55, 0.12);
    color: var(--theme-success);
}

.status-badge-table.pending {
    background: rgba(255, 171, 0, 0.12);
    color: var(--theme-warning);
}

.status-badge-table.rejected {
    background: rgba(255, 62, 29, 0.12);
    color: var(--theme-danger);
}

.status-badge-table.status-deleted {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 62, 29, 0.14);
    color: #e0351a;
    border: 1px solid rgba(255, 62, 29, 0.28);
    box-shadow: 0 1px 2px rgba(255, 62, 29, 0.12);
}

.leave-table tbody tr.leave-row-deleted {
    background-color: #fff5f5;
    box-shadow: inset 4px 0 0 #ff3e1d;
}

.leave-table tbody tr.leave-row-deleted:hover {
    background-color: #ffebeb;
}

.leave-table tbody tr.leave-row-deleted td {
    color: #8a96a3;
}

.leave-table tbody tr.leave-row-bank-holiday {
    background-color: #eef8ff;
    box-shadow: inset 4px 0 0 #03c3ec;
}

.leave-table tbody tr.leave-row-bank-holiday:hover {
    background-color: #e0f2fe;
}

.leave-table tbody tr.leave-row-approved {
    background-color: #f3fbf0;
    box-shadow: inset 4px 0 0 #71dd37;
}

.leave-table tbody tr.leave-row-approved:hover {
    background-color: #e8f7e3;
}

.leave-type-dot.bank-holiday {
    background: #03c3ec;
}

.approver-name {
    color: var(--theme-heading);
}

/* ========================================
   Leave Balance in Forms
   ======================================== */
.leave-balance-card .card-header-custom {
    position: relative;
}

.leave-balance-grid-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.leave-used {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-success);
    background: rgba(113, 221, 55, 0.12);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

.leave-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leave-input {
    width: 80px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-primary);
    text-align: center;
}

.leave-input:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.leave-suffix {
    font-size: 0.75rem;
    color: var(--theme-label);
}

/* ========================================
   Form Actions Footer
   ======================================== */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.page-footer {
    display: flex;
    justify-content: flex-start;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #f5f5f9;
    color: var(--theme-text);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back:hover {
    background: var(--theme-border);
    color: var(--theme-heading);
}

/* ========================================
   DataTables Customization
   ======================================== */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text);
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    color: var(--theme-text);
    background: #ffffff;
    min-width: 70px;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text);
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    width: 250px !important;
    color: var(--theme-text);
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.dataTables_wrapper .dataTables_info {
    color: var(--theme-label);
    font-size: 0.8125rem;
    padding: 1rem 0;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: var(--theme-text) !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: var(--theme-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #d9dee3 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* ========================================
   Select2 Styling
   ======================================== */
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    min-height: 42px;
    padding: 0.25rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--theme-primary);
    border: none;
    border-radius: 0.25rem;
    color: #ffffff;
    padding: 0.25rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    margin-right: 0.375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff;
    background: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.select2-container .select2-selection--single {
    height: 37px !important;
}

/* ========================================
   Popover Styling
   ======================================== */
.popover {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(67, 89, 113, 0.2);
}

.popover-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1rem;
}

.popover-body {
    padding: 0.75rem;
}

.popover-branch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f5f5f9;
    border-radius: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    color: var(--theme-heading);
}

.popover-branch-item:last-child {
    margin-bottom: 0;
}

.popover-branch-item i {
    color: var(--theme-primary);
    font-size: 1rem;
}

/* ========================================
   Responsive Styles
   ======================================== */
@media (max-width: 1200px) {
    .form-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

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

    .documents-section {
        grid-template-columns: 1fr;
    }

    .leave-section {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 992px) {
    .card-header-custom {
        padding: 1rem;
    }

    .card-body-custom {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .form-header,
    .user-management-header,
    .branch-management-header,
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .header-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
    }

    .btn-create-user,
    .btn-create-branch,
    .btn-import-user,
    .btn-edit-user {
        width: 100%;
        justify-content: center;
    }

    .form-row {
        flex-direction: column;
        gap: 1.25rem;
    }

    .form-group.half {
        width: 100%;
    }

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

    .days-selector-large {
        grid-template-columns: repeat(4, 1fr);
    }

    .leave-balance-grid-form {
        grid-template-columns: 1fr;
    }

    .total-leave-badge {
        position: static;
        margin-top: 0.75rem;
    }

    .user-avatar-section {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .working-days-display {
        justify-content: center;
    }

    .date-range {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
    }

    .date-range i {
        display: none;
    }

    .form-actions {
        flex-direction: column;
        padding: 1rem;
    }

    .btn-cancel,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .days-selector-large {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Page-Specific Container Styles
   ======================================== */

/* User Management Container */
.user-management-container {
    padding: 0;
}

/* User Form Container */
.user-form-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* User Profile Container */
.user-profile-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Branch Management Container */
.branch-management-container {
    padding: 0;
}

/* Branch Form Container */
.branch-form-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* User Email */
.user-email {
    color: var(--theme-text);
}

/* User Role */
.user-role {
    color: var(--theme-heading);
    font-weight: 400;
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-number {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--theme-heading);
    font-size: 0.875rem;
}

.contact-number i {
    color: var(--theme-primary);
}

/* Divider */
.divider {
    height: 1px;
    background: var(--theme-border);
    margin: 1.25rem 0;
}

/* Section Label */
.section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin-bottom: 0.25rem;
}

.section-label i {
    color: var(--theme-primary);
}

.section-description {
    font-size: 0.8125rem;
    color: var(--theme-label);
    margin-bottom: 1rem;
}

/* Branch ID Badge */
.branch-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f5f5f9;
    color: var(--theme-text);
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.branch-id-badge i {
    color: var(--theme-primary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state i {
    font-size: 4rem;
    color: var(--theme-border);
    margin-bottom: 1rem;
}

.empty-state h5 {
    color: var(--theme-heading);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--theme-label);
    margin-bottom: 1.5rem;
}

/* ========================================
   Branch Modal Styles
   ======================================== */
.branch-modal {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.branch-modal-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    border: none;
    padding: 1.25rem 1.5rem;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.modal-title {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.125rem 0 0 0;
    font-size: 0.875rem;
}

.branch-modal-body {
    padding: 1.5rem;
}

.branch-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-card {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.detail-card.highlight-card {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.1) 0%, rgba(3, 195, 236, 0.05) 100%);
    border: 1px solid rgba(3, 195, 236, 0.2);
}

.detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: rgba(11, 107, 184, 0.12);
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.deposit-icon-modal {
    background: rgba(3, 195, 236, 0.12);
    color: var(--theme-info);
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--theme-label);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--theme-heading);
}

.detail-value.large {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-info);
}

.operating-days-section {
    border-top: 1px solid var(--theme-border);
    padding-top: 1.25rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin-bottom: 1rem;
}

.section-title i {
    color: var(--theme-primary);
}

.modal-days-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-day-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.modal-day-item.day-active {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.1) 100%);
    color: #56b832;
    border: 1px solid rgba(113, 221, 55, 0.3);
}

.modal-day-item.day-active i {
    color: #71dd37;
}

.modal-day-item.day-inactive {
    background: #f8f8f8;
    color: #b0b0b0;
    border: 1px dashed #d5d5d5;
}

.modal-day-item.day-inactive i {
    color: #cccccc;
}

.branch-modal-footer {
    border-top: 1px solid var(--theme-border);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-modal-close {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f5f5f9;
    color: var(--theme-text);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-close:hover {
    background: var(--theme-border);
}

.btn-modal-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--theme-primary);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-modal-edit:hover {
    background: var(--theme-primary-dark);
    color: #ffffff;
}

/* ========================================
   Standard Dropdown Menu
   ======================================== */
.dropdown-menu:not(.action-dropdown) {
    padding: 0.5rem 0;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
    min-width: 160px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    color: var(--theme-text);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background: rgba(11, 107, 184, 0.08);
    color: var(--theme-primary);
}

.dropdown-item i {
    font-size: 1.125rem;
}

.dropdown-item.text-danger {
    color: var(--theme-danger);
}

.dropdown-item.text-danger:hover {
    background: rgba(255, 62, 29, 0.08);
    color: var(--theme-danger);
}

.dropdown-divider {
    margin: 0.375rem 0;
    border-color: var(--theme-border);
}

/* ========================================
   Leave Balance Form Grid (for forms)
   ======================================== */
.leave-balance-grid,
.leave-balance-grid-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    .leave-balance-grid,
    .leave-balance-grid-form {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .branch-detail-grid {
        grid-template-columns: 1fr;
    }
}

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

/* ========================================
   Leave Balances Section (User Details)
   ======================================== */
.leave-balances-section {
    margin-bottom: 1.5rem;
}

.leave-requests-section {
    margin-bottom: 1.5rem;
}

.leave-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.leave-balance-card-item {
    background: #ffffff;
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(67, 89, 113, 0.08);
}

.leave-balance-card-item:hover {
    box-shadow: 0 4px 16px rgba(67, 89, 113, 0.12);
    transform: translateY(-2px);
}

.leave-card-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--theme-border);
}

.leave-type-info {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.leave-type-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.leave-type-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.leave-type-name-card {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-heading);
}

.leave-year-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: rgba(11, 107, 184, 0.1);
    color: var(--theme-primary);
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    width: fit-content;
}

.leave-card-body {
    padding: 1.25rem;
}

.leave-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.leave-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.leave-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--theme-border);
}

.leave-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.leave-stat.available .leave-stat-value {
    color: var(--theme-success);
}

.leave-stat.used .leave-stat-value {
    color: var(--theme-info);
}

.leave-stat.total .leave-stat-value {
    color: var(--theme-heading);
}

.leave-stat-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-label);
    margin-top: 0.25rem;
}

.leave-stat-label i {
    font-size: 0.875rem;
}

.leave-stat.available .leave-stat-label i {
    color: var(--theme-success);
}

.leave-stat.used .leave-stat-label i {
    color: var(--theme-info);
}

.leave-stat.total .leave-stat-label i {
    color: var(--theme-secondary);
}

.leave-progress-section {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--theme-border);
}

.leave-progress-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #e9ecef;
}

.leave-progress-used {
    background: linear-gradient(90deg, var(--theme-info) 0%, #0099cc 100%);
    transition: width 0.3s ease;
}

.leave-progress-available {
    background: linear-gradient(90deg, var(--theme-success) 0%, #56b832 100%);
    transition: width 0.3s ease;
}

.leave-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.progress-used-label {
    font-size: 0.6875rem;
    color: var(--theme-info);
    font-weight: 500;
}

.progress-available-label {
    font-size: 0.6875rem;
    color: var(--theme-success);
    font-weight: 500;
}

/* Empty Leave Balance */
.empty-leave-balance,
.empty-leave-requests {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-leave-balance .empty-icon,
.empty-leave-requests .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f5f9 0%, #e7e7e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.empty-leave-balance .empty-icon i,
.empty-leave-requests .empty-icon i {
    font-size: 2.5rem;
    color: var(--theme-label);
}

.empty-leave-balance h6,
.empty-leave-requests h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-heading);
    margin: 0 0 0.5rem;
}

.empty-leave-balance p,
.empty-leave-requests p {
    font-size: 0.875rem;
    color: var(--theme-label);
    margin: 0;
}

/* Leave Table Improvements */
.leave-type-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.leave-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-primary);
    flex-shrink: 0;
}

.leave-type-dot.annual-leave,
.leave-type-dot.annual {
    background: var(--theme-warning);
}

.leave-type-dot.sick-leave,
.leave-type-dot.sick {
    background: var(--theme-danger);
}

.leave-type-dot.maternity-leave,
.leave-type-dot.paternity-leave {
    background: var(--theme-info);
}

.leave-type-dot.unpaid-leave,
.leave-type-dot.unpaid {
    background: var(--theme-secondary);
}

.date-range-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-value {
    font-size: 0.8125rem;
    color: var(--theme-heading);
}

.date-arrow {
    color: var(--theme-label);
    font-size: 1rem;
}

.pending-approval {
    color: var(--theme-warning);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Responsive for Leave Cards */
@media (max-width: 768px) {
    .leave-cards-grid {
        grid-template-columns: 1fr;
    }

    .leave-stats-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .leave-stat-divider {
        display: none;
    }

    .leave-stat {
        flex: 0 0 calc(33.333% - 0.75rem);
    }
}

/* ========================================
   Sales Target Module
   ======================================== */

/* Sales Target Container */
.sales-target-container {
    padding: 0;
}

/* Header Section */
.sales-target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.sales-target-header .header-left {
    display: flex;
    flex-direction: column;
}

.sales-target-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    margin: 0;
}

.sales-target-title i {
    color: #0b6bb8;
    font-size: 1.75rem;
}

.sales-target-subtitle {
    color: #a1acb8;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.sales-target-header .header-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-preset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #ffab00 0%, #ff9100 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 171, 0, 0.3);
}

.btn-preset:hover {
    background: linear-gradient(135deg, #e69900 0%, #e68200 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 171, 0, 0.4);
}

.btn-bulk-update {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.btn-bulk-update:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 107, 184, 0.4);
}

/* Stats Row */
.sales-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.sales-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    transition: all 0.2s ease;
}

.sales-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
}

.sales-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
}

.sales-stat-icon.target-icon {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: #0b6bb8;
}

.sales-stat-icon.achieved-icon {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.12) 0%, rgba(86, 184, 50, 0.12) 100%);
    color: #71dd37;
}

.sales-stat-icon.percentage-icon {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.12) 0%, rgba(0, 153, 204, 0.12) 100%);
    color: #03c3ec;
}

.sales-stat-icon.prescription-icon {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.12) 0%, rgba(255, 145, 0, 0.12) 100%);
    color: #ffab00;
}

.sales-stat-content {
    display: flex;
    flex-direction: column;
}

.sales-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
    line-height: 1.2;
}

.sales-stat-label {
    font-size: 0.8125rem;
    color: #a1acb8;
    margin-top: 0.125rem;
}

/* Table Card */
.sales-table-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.sales-table-card .table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.sales-table-card .table-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.sales-table-card .table-card-title i {
    color: #0b6bb8;
}

.selected-count-badge {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.selected-count-badge.show {
    display: inline-flex;
}

.sales-table-card .table-card-body {
    padding: 1.5rem;
}

/* Sales Table Styling */
#sales-total-table {
    width: 100% !important;
}

#sales-total-table thead th {
    padding: 1rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid #e7e7e8;
    white-space: nowrap;
}

#sales-total-table tbody tr {
    transition: background-color 0.15s ease;
}

#sales-total-table tbody tr:hover {
    background-color: rgba(11, 107, 184, 0.04);
}

#sales-total-table tbody td {
    padding: 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e8;
    color: #697a8d;
    font-size: 0.9375rem;
}

#sales-total-table tbody tr:last-child td {
    border-bottom: none;
}

/* Input Styling in Table */
.target-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.currency-prefix {
    font-weight: 600;
    color: #697a8d;
    font-size: 0.875rem;
}

.target-input,
.prescription_target,
.prescription_achieved {
    width: 100px !important;
    padding: 0.5rem 0.625rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #566a7f;
    font-weight: 500;
    text-align: right;
    transition: all 0.2s ease;
}

.target-input:focus,
.prescription_target:focus,
.prescription_achieved:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

/* Store Name Badge */
.store-name-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.store-avatar {
    width: 36px;
    height: 36px;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.store-name {
    font-weight: 500;
    color: #566a7f;
}

/* Period Badge */
.period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.period-badge i {
    font-size: 0.875rem;
}

/* Percentage Badge */
.percentage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 60px;
}

.percentage-badge.excellent {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.percentage-badge.good {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.percentage-badge.warning {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.percentage-badge.danger {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

/* Achieved Value */
.achieved-value {
    font-weight: 600;
    color: #71dd37;
}

/* Sales Checkbox Styling */
#sales-total-table .row-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #0b6bb8;
    cursor: pointer;
}

#sales-total-table #select-all {
    width: 18px;
    height: 18px;
    accent-color: #0b6bb8;
    cursor: pointer;
}

/* Sales Modal Styling */
.sales-modal .modal-content {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.sales-modal .modal-header {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    border: none;
    padding: 1.25rem 1.5rem;
}

.sales-modal .modal-title {
    color: #ffffff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sales-modal .btn-close {
    filter: brightness(0) invert(1);
}

.sales-modal .modal-body {
    padding: 1.5rem;
}

.modal-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-input-group label {
    font-weight: 500;
    color: #566a7f;
    font-size: 0.875rem;
}

.modal-input-group .form-control {
    padding: 0.75rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.modal-input-group .form-control:focus {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.modal-input-hint {
    font-size: 0.75rem;
    color: #a1acb8;
}

.sales-modal .modal-footer {
    border-top: 1px solid #e7e7e8;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

.btn-modal-cancel {
    padding: 0.625rem 1.25rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background: #e7e7e8;
}

.btn-modal-confirm {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-modal-confirm:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

/* Sales DataTables Customization */
.sales-table-card .dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
}

.sales-table-card .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
}

.sales-table-card .dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 0.75rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    color: #697a8d;
    background: #ffffff;
    min-width: 70px;
}

.sales-table-card .dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.sales-table-card .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
}

.sales-table-card .dataTables_wrapper .dataTables_filter input {
    padding: 0.5rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    width: 250px !important;
    color: #697a8d;
    font-size: 0.875rem;
}

.sales-table-card .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.sales-table-card .dataTables_wrapper .dataTables_info {
    color: #a1acb8;
    font-size: 0.8125rem;
    padding: 1rem 0;
}

.sales-table-card .dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

.sales-table-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: #697a8d !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.sales-table-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: #0b6bb8 !important;
}

.sales-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.sales-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0b6bb8 !important;
    color: #ffffff !important;
}

.sales-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #d9dee3 !important;
}

/* Sales Target Responsive */
@media (max-width: 1200px) {
    .sales-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sales-target-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .sales-target-header .header-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-preset,
    .btn-bulk-update {
        width: 100%;
        justify-content: center;
    }

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

    .sales-table-card .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

/* ========================================
   Leave Request Module
   ======================================== */

/* Leave Request Container */
.leave-request-container {
    padding: 0;
}

/* Header Section */
.leave-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.leave-request-header .header-left {
    display: flex;
    flex-direction: column;
}

.leave-request-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    margin: 0;
}

.leave-request-title i {
    color: #0b6bb8;
    font-size: 1.75rem;
}

.leave-request-subtitle {
    color: #a1acb8;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.leave-request-header .header-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-apply-leave {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #0a7bc9 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.btn-apply-leave:hover {
    background: linear-gradient(135deg, #08548f 0%, #0b6bb8 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 107, 184, 0.4);
}

/* Leave Balance Stats Cards */
.leave-balance-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.leave-balance-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    transition: all 0.2s ease;
}

.leave-balance-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
}

.leave-balance-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.leave-balance-stat-icon.primary {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

.leave-balance-stat-icon.warning {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.leave-balance-stat-icon.danger {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.leave-balance-stat-icon.info {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.leave-balance-stat-icon.secondary {
    background: rgba(133, 146, 163, 0.12);
    color: #8592a3;
}

.leave-balance-stat-content {
    display: flex;
    flex-direction: column;
}

.leave-balance-stat-label {
    font-size: 0.8125rem;
    color: #a1acb8;
    font-weight: 500;
}

.leave-balance-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #566a7f;
    margin-top: 0.125rem;
}

/* Filter Card */
.leave-filter-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.filter-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.filter-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.filter-card-title i {
    color: #0b6bb8;
}

.btn-collapse-filter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    color: #697a8d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-collapse-filter:hover {
    background: #f5f5f9;
    color: #0b6bb8;
}

.filter-card-body {
    padding: 1.5rem;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    align-items: end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
}

.filter-label i {
    color: #a1acb8;
    font-size: 1rem;
}

.filter-select,
.filter-input {
    padding: 0.5rem 0.875rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #697a8d;
    background: #ffffff;
    transition: all 0.2s ease;
}

.filter-select:focus,
.filter-input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.filter-actions {
    min-width: 200px;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-filter-apply:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-filter-reset:hover {
    background: #e7e7e8;
    color: #566a7f;
}

/* Leave Table Card */
.leave-table-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.leave-table-card .table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.leave-table-card .table-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.leave-table-card .table-card-title i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
    border-radius: 0.5rem;
    font-size: 1.125rem;
}

.table-card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.records-count {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #a1acb8;
}

.records-count i {
    color: #0b6bb8;
}

.leave-table-card .table-card-body {
    padding: 1.5rem;
}

/* Leave Requests Table Styling */
#leave-requests-table {
    width: 100% !important;
}

#leave-requests-table thead th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid #e7e7e8;
    white-space: nowrap;
}

#leave-requests-table tbody tr {
    transition: background-color 0.15s ease;
}

#leave-requests-table tbody tr:hover {
    background-color: rgba(11, 107, 184, 0.04);
}

#leave-requests-table tbody tr.highlight-row {
    background-color: rgba(11, 107, 184, 0.08) !important;
}

#leave-requests-table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e8;
    color: #697a8d;
    font-size: 0.875rem;
}

#leave-requests-table tbody tr:last-child td {
    border-bottom: none;
}

/* Leave Status Badge */
.leave-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.leave-status-badge.pending {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.leave-status-badge.approved {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.leave-status-badge.rejected {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.leave-status-badge.hold {
    background: rgba(133, 146, 163, 0.12);
    color: #8592a3;
}

/* Leave Modal Styling */
.leave-modal .modal-content {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.leave-modal .modal-header {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    border: none;
    padding: 1.25rem 1.5rem;
}

.leave-modal .modal-header.view-modal-header {
    background: linear-gradient(135deg, #03c3ec 0%, #0099cc 100%);
}

.leave-modal .modal-header.status-modal-header {
    background: linear-gradient(135deg, #ffab00 0%, #ff9100 100%);
}

.leave-modal .modal-title {
    color: #ffffff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leave-modal .btn-close {
    filter: brightness(0) invert(1);
}

.leave-modal .modal-body {
    padding: 1.5rem;
}

.leave-modal .modal-footer {
    border-top: 1px solid #e7e7e8;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

/* Leave Detail Grid (View Modal) */
.leave-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.leave-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.leave-detail-item .detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.leave-detail-item .detail-content {
    display: flex;
    flex-direction: column;
}

.leave-detail-item .detail-label {
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leave-detail-item .detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    margin-top: 0.125rem;
}

.leave-reason-section {
    background: #f8f9fa;
    border-radius: 0.5rem;
    overflow: hidden;
}

.leave-reason-section .reason-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e7e7e8;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.875rem;
}

.leave-reason-section .reason-content {
    padding: 1rem;
    color: #697a8d;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Status Form (Status Modal) */
.status-form-group {
    margin-bottom: 1.25rem;
}

.status-form-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.75rem;
}

.status-form-label i {
    color: #0b6bb8;
}

.required-star {
    color: #ff3e1d;
}

.status-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.status-option {
    position: relative;
    cursor: pointer;
}

.status-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.status-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #697a8d;
    transition: all 0.2s ease;
}

.status-option input:checked + .status-option-label.pending {
    background: rgba(255, 171, 0, 0.12);
    border-color: #ffab00;
    color: #ffab00;
}

.status-option input:checked + .status-option-label.approved {
    background: rgba(113, 221, 55, 0.12);
    border-color: #71dd37;
    color: #71dd37;
}

.status-option input:checked + .status-option-label.rejected {
    background: rgba(255, 62, 29, 0.12);
    border-color: #ff3e1d;
    color: #ff3e1d;
}

.status-option input:checked + .status-option-label.hold {
    background: rgba(133, 146, 163, 0.12);
    border-color: #8592a3;
    color: #8592a3;
}

.status-option-label:hover {
    background: #f8f9fa;
}

.status-option-label.active {
    background: rgba(11, 107, 184, 0.12) !important;
    border-color: #0b6bb8 !important;
    color: #0b6bb8 !important;
}

/* Bulk Status Modal */
#bulkStatusModal .modal-content {
    background: var(--theme-card-bg);
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.bulk-status-modal-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #ffffff;
    border-bottom: none;
    padding: 1.5rem 1.75rem;
    border-radius: 0.75rem 0.75rem 0 0;
}

.bulk-status-modal-header .modal-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bulk-status-modal-header .modal-title i {
    font-size: 1.5rem;
}

.bulk-status-modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.bulk-status-modal-header .btn-close-white:hover {
    opacity: 1;
}

.bulk-status-modal-body {
    background: var(--theme-light);
    padding: 2rem 1.75rem;
    min-height: 400px;
}

/* Selected Records Section */
.selected-records-section {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-records-header {
    margin-bottom: 1rem;
}

.selected-records-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-records-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0;
    border-radius: 0.5rem;
    background: #ffffff;
    border: 1px solid #e7e7e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selected-records-list::-webkit-scrollbar {
    width: 6px;
}

.selected-records-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.selected-records-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.selected-records-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.selected-records-table {
    margin-bottom: 0;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.selected-records-table thead {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.selected-records-table thead th {
    border: none;
    padding: 1rem 0.875rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #ffffff;
}

.selected-records-table tbody tr {
    border-bottom: 1px solid #e7e7e8;
    background-color: #ffffff;
}

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

.selected-records-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.selected-records-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.selected-records-table tbody td {
    padding: 1rem 0.875rem;
    vertical-align: middle;
    border-top: 1px solid #e7e7e8;
    background-color: #ffffff;
}

.selected-records-table tbody td:first-child {
    font-weight: 600;
}

.selected-records-table .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    font-weight: 600;
}

.selected-records-table .badge.bg-primary {
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%) !important;
}

.selected-records-table .badge.bg-info {
    background: linear-gradient(135deg, #03c3ec 0%, #02a8c5 100%) !important;
}

.notes-textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
}

.notes-textarea:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.error-message {
    display: none;
    color: #ff3e1d;
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

/* Modal Buttons */
.btn-modal-close,
.btn-modal-cancel {
    padding: 0.625rem 1.25rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-close:hover,
.btn-modal-cancel:hover {
    background: #e7e7e8;
}

.btn-modal-save {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-save:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

/* Reason Display */
.reason-display {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.reason-display p {
    margin: 0;
    color: #697a8d;
    line-height: 1.6;
}

/* Leave DataTables Customization */
.leave-table-card .dataTables_wrapper .dataTables_length {
    margin-bottom: 0;
}

.leave-table-card .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
    margin: 0;
}

.leave-table-card .dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 0.75rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    color: #697a8d;
    background: #ffffff;
    min-width: 70px;
}

.leave-table-card .dataTables_wrapper .dataTables_filter {
    margin-bottom: 0;
}

.leave-table-card .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
    margin: 0;
    position: relative;
}

.leave-table-card .dataTables_wrapper .dataTables_filter {
    position: relative;
}

.leave-table-card .dataTables_wrapper .dataTables_filter label.has-search-icon {
    position: relative;
}

.leave-table-card .dataTables_wrapper .dataTables_filter label.has-search-icon .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8592a3;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

.leave-table-card .dataTables_wrapper .dataTables_filter input {
    padding: 0.5rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    width: 250px !important;
    color: #697a8d;
    font-size: 0.875rem;
}

.leave-table-card .dataTables_wrapper .dataTables_filter label.has-search-icon input {
    padding-left: 2.5rem;
}

.leave-table-card .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.leave-table-card .dataTables_wrapper .dataTables_filter label.has-search-icon input:focus ~ .search-icon,
.leave-table-card .dataTables_wrapper .dataTables_filter label.has-search-icon:focus-within .search-icon {
    color: #0b6bb8;
}

.leave-table-card .dataTables_wrapper .dataTables_info {
    color: #a1acb8;
    font-size: 0.8125rem;
    padding: 0;
}

.leave-table-card .dataTables_wrapper .dataTables_paginate {
    padding: 0;
}

.leave-table-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: #697a8d !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.leave-table-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: #0b6bb8 !important;
}

.leave-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.leave-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0b6bb8 !important;
    color: #ffffff !important;
}

.leave-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #d9dee3 !important;
}

/* Leave Request Select2 Styling */
.leave-filter-card .select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
}

.leave-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: #697a8d;
    padding-left: 0.875rem;
}

.leave-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Leave Request Responsive */
@media (max-width: 1400px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

@media (max-width: 768px) {
    .leave-request-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .leave-request-header .header-actions {
        width: 100%;
    }

    .btn-apply-leave {
        width: 100%;
        justify-content: center;
    }

    .leave-balance-stats {
        grid-template-columns: 1fr;
    }

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

    .filter-actions {
        min-width: auto;
    }

    .leave-detail-grid {
        grid-template-columns: 1fr;
    }

    .status-options {
        grid-template-columns: 1fr;
    }

    .leave-table-card .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

/* Leave Request Table - Additional Styles */

/* Employee Name Link */
.employee-name-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #0b6bb8;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employee-name-link:hover {
    color: #08548f;
    text-decoration: underline;
}

.employee-name-link i {
    font-size: 1rem;
}

/* Branch Cell */
.branch-cell {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.branch-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.no-branch {
    color: #a1acb8;
    font-style: italic;
}

/* Leave Type Badge */
.leave-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.leave-type-badge.primary {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

.leave-type-badge.warning {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.leave-type-badge.danger {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.leave-type-badge.info {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.leave-type-badge.secondary {
    background: rgba(133, 146, 163, 0.12);
    color: #8592a3;
}

/* Leave Status Badge - Enhanced */
.leave-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.leave-status-badge i {
    font-size: 0.875rem;
}

.leave-status-badge.pending {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.leave-status-badge.approved {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.leave-status-badge.rejected {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.leave-status-badge.hold {
    background: rgba(133, 146, 163, 0.12);
    color: #8592a3;
}

/* Reason View Button */
.btn-reason-view {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reason-view:hover {
    background: rgba(3, 195, 236, 0.2);
    color: #0099cc;
}

.btn-reason-view i {
    font-size: 1rem;
}

/* Status Icon in Action Dropdown */
.action-icon.status-icon {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.15) 0%, rgba(255, 145, 0, 0.15) 100%);
    color: #ffab00;
}

/* Download Icon in Action Dropdown */
.action-icon.download-icon {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(0, 153, 204, 0.15) 100%);
    color: #03c3ec;
}

/* Leave Request Table Specific Adjustments */
#leave-requests-table .btn-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: #0b6bb8;
    border: 1px solid #0b6bb8;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#leave-requests-table .btn-actions:hover {
    background: #0b6bb8;
    color: #ffffff;
}

#leave-requests-table .btn-actions i {
    font-size: 1rem;
}

/* Leave Action Dropdown */
#leave-requests-table .action-dropdown {
    min-width: 260px;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#leave-requests-table .action-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #0a7bc9 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
}

#leave-requests-table .action-dropdown-body {
    padding: 0.5rem;
}

#leave-requests-table .action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

#leave-requests-table .action-item:hover {
    background: #f5f5f9;
}

#leave-requests-table .action-item .action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

#leave-requests-table .action-item .action-icon.view-icon {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
}

#leave-requests-table .action-item .action-icon.edit-icon {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

#leave-requests-table .action-item .action-icon.status-icon {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.15) 0%, rgba(255, 145, 0, 0.15) 100%);
    color: #ffab00;
}

#leave-requests-table .action-item .action-icon.download-icon {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(0, 153, 204, 0.15) 100%);
    color: #03c3ec;
}

#leave-requests-table .action-item .action-icon.delete-icon {
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.15) 0%, rgba(220, 53, 69, 0.15) 100%);
    color: #ff3e1d;
}

#leave-requests-table .action-item .action-content {
    display: flex;
    flex-direction: column;
}

#leave-requests-table .action-item .action-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}

#leave-requests-table .action-item .action-desc {
    font-size: 0.75rem;
    color: #a1acb8;
}

#leave-requests-table .action-item.action-delete:hover {
    background: rgba(255, 62, 29, 0.08);
}

#leave-requests-table .action-item.action-delete .action-title {
    color: #ff3e1d;
}

/* Popover for branch more button */
#leave-requests-table .branch-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: transparent;
    color: #0b6bb8;
    border: 1px solid #0b6bb8;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#leave-requests-table .branch-more-btn:hover {
    background: #0b6bb8;
    color: #ffffff;
}

/* ========================================
   Create/Edit Leave Request Form
   ======================================== */

/* Leave Form Container */
.leave-form-container {
    padding: 0;
}

/* Leave Form Header */
.leave-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.leave-form-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.leave-form-header .header-info {
    display: flex;
    flex-direction: column;
}

.leave-form-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    margin: 0;
}

.leave-form-title i {
    color: #0b6bb8;
    font-size: 1.75rem;
}

.leave-form-subtitle {
    color: #a1acb8;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.request-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Leave Form Grid Layout */
.leave-form-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

.leave-form-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Card */
.leave-form-container .form-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
    margin-top: 10px;
}

.leave-form-container .form-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.leave-form-container .form-card-header .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.leave-form-container .form-card-header .card-icon.purple-icon {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

.leave-form-container .form-card-header .card-icon.cyan-icon {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.leave-form-container .form-card-header .card-icon.orange-icon {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.leave-form-container .card-header-content {
    padding-top: 0.25rem;
}

.leave-form-container .card-header-content h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.leave-form-container .card-header-content span {
    font-size: 0.8125rem;
    color: #a1acb8;
    margin-top: 0.375rem;
    display: block;
}

.leave-form-container .form-card-body {
    padding: 1.5rem;
}

/* Form Elements */
.leave-form-container .form-group {
    margin-bottom: 1.25rem;
}

.leave-form-container .form-group:last-child {
    margin-bottom: 0;
}

.leave-form-container .form-label-custom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.leave-form-container .form-label-custom i {
    color: #a1acb8;
}

.leave-form-container .form-label-custom .required {
    color: #ff3e1d;
}

.leave-form-container .form-control-custom {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: #566a7f;
    transition: all 0.2s ease;
}

.leave-form-container .form-control-custom:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.leave-form-container .form-control-custom.textarea {
    resize: vertical;
    min-height: 100px;
}

.leave-form-container .form-control-custom::placeholder {
    color: #a1acb8;
}

.leave-form-container .form-row {
    display: grid;
    gap: 1rem;
}

.leave-form-container .form-row.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

/* Leave Type Selector */
.leave-type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.leave-type-option {
    cursor: pointer;
}

.leave-type-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.leave-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.leave-type-card i {
    font-size: 1.5rem;
    color: #a1acb8;
}

.leave-type-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    text-align: center;
}

.leave-type-option input:checked + .leave-type-card {
    border-color: currentColor;
    background: rgba(11, 107, 184, 0.08);
}

.leave-type-option.warning input:checked + .leave-type-card {
    border-color: #ffab00;
    background: rgba(255, 171, 0, 0.08);
}

.leave-type-option.warning input:checked + .leave-type-card i {
    color: #ffab00;
}

.leave-type-option.danger input:checked + .leave-type-card {
    border-color: #ff3e1d;
    background: rgba(255, 62, 29, 0.08);
}

.leave-type-option.danger input:checked + .leave-type-card i {
    color: #ff3e1d;
}

.leave-type-option.info input:checked + .leave-type-card {
    border-color: #03c3ec;
    background: rgba(3, 195, 236, 0.08);
}

.leave-type-option.info input:checked + .leave-type-card i {
    color: #03c3ec;
}

.leave-type-option.secondary input:checked + .leave-type-card {
    border-color: #8592a3;
    background: rgba(133, 146, 163, 0.08);
}

.leave-type-option.secondary input:checked + .leave-type-card i {
    color: #8592a3;
}

.leave-type-option.primary input:checked + .leave-type-card {
    border-color: #0b6bb8;
    background: rgba(11, 107, 184, 0.08);
}

.leave-type-option.primary input:checked + .leave-type-card i {
    color: #0b6bb8;
}

.leave-type-card:hover {
    border-color: #c7c8cc;
    background: #f5f5f9;
}

/* Toggle Option Card */
.toggle-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
}

.toggle-option-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.toggle-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.toggle-icon.half-day-icon {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

.toggle-info {
    display: flex;
    flex-direction: column;
}

.toggle-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.toggle-desc {
    font-size: 0.8125rem;
    color: #a1acb8;
}

/* Toggle Switch */
.leave-form-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.leave-form-container .toggle-switch.small {
    width: 40px;
    height: 22px;
}

.leave-form-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.leave-form-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d9dee3;
    transition: 0.3s;
    border-radius: 26px;
}

.leave-form-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.leave-form-container .toggle-switch.small .toggle-slider:before {
    height: 16px;
    width: 16px;
}

.leave-form-container .toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
}

.leave-form-container .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.leave-form-container .toggle-switch.small input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

/* Weekend Leave Section */
.weekend-leave-section {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 171, 0, 0.08);
    border: 1px solid rgba(255, 171, 0, 0.2);
    border-radius: 0.5rem;
}

.weekend-leave-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffab00;
    margin-bottom: 0.25rem;
}

.weekend-leave-info {
    font-size: 0.8125rem;
    color: #a1acb8;
    margin: 0 0 1rem 0;
}

.weekend-toggle-group {
    display: flex;
    gap: 1rem;
}

.weekend-toggle {
    flex: 1;
    padding: 0.75rem 1rem;
}

.weekend-toggle .day-name {
    font-weight: 500;
    color: #566a7f;
}

/* Character Counter */
.char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: #a1acb8;
    margin-top: 0.375rem;
}

/* File Upload */
.file-upload-wrapper {
    position: relative;
}

.file-upload-wrapper .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f8f9fa;
    border: 2px dashed #e7e7e8;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.file-upload-wrapper:hover .file-upload-content {
    border-color: #0b6bb8;
    background: rgba(11, 107, 184, 0.04);
}

.upload-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.upload-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #566a7f;
}

.upload-hint {
    font-size: 0.8125rem;
    color: #a1acb8;
    margin-top: 0.25rem;
}

.file-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    margin-top: 0.75rem;
}

.file-selected i {
    color: #0b6bb8;
    font-size: 1.25rem;
}

.file-selected span {
    flex: 1;
    font-size: 0.875rem;
    color: #566a7f;
}

.remove-file {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-file:hover {
    background: #ff3e1d;
    color: #ffffff;
}

.upload-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #ffab00;
    margin-top: 0.75rem;
}

/* Error Feedback */
.error-feedback {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #ff3e1d;
    margin-top: 0.375rem;
}

/* Form Actions */
.leave-form-container .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.leave-form-container .btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leave-form-container .btn-cancel:hover {
    background: #e7e7e8;
    color: #566a7f;
}

.leave-form-container .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.leave-form-container .btn-submit:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 107, 184, 0.4);
}

/* Sidebar */
.leave-form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Summary Card */
.summary-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-weight: 600;
}

.summary-body {
    padding: 1.25rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e7e7e8;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: 0.875rem;
    color: #a1acb8;
}

.summary-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.summary-value.highlight {
    font-size: 1.25rem;
    color: #0b6bb8;
}

/* Summary Section Wrapper */
.summary-section-wrapper {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.summary-section-header {
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.summary-section-header h6 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Leave Summary Card - New Design */
.leave-summary-card {
    display: block;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 140px;
}

.leave-summary-card .summary-details-section {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

.leave-summary-card .summary-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.leave-summary-card .detail-label {
    font-size: 0.75rem;
    color: #a1acb8;
    font-weight: 500;
}

.leave-summary-card .detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    line-height: 1.4;
}

.leave-summary-card .summary-divider-line {
    height: 1px;
    background: #e7e7e8;
    margin: 0.25rem 0;
}

/* Banking Summary Card - New Design */
.banking-summary-card {
    display: block;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 200px;
}

.banking-summary-card .summary-details-section {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.banking-summary-card .cash-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.banking-summary-card .cash-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banking-summary-card .cash-icon.float {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.banking-summary-card .cash-icon.till {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.banking-summary-card .cash-icon.bank {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.banking-summary-card .cash-icon i {
    font-size: 1.25rem;
}

.banking-summary-card .cash-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.banking-summary-card .cash-label {
    font-size: 0.9375rem;
    color: #a1acb8;
    font-weight: 700;
}

.banking-summary-card .cash-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #566a7f;
}

.banking-summary-card .cash-value.highlight {
    color: #0b6bb8;
    font-size: 1.25rem;
}

.banking-summary-card .cash-summary-item.highlight .cash-value {
    color: #0b6bb8;
}

/* Order Summary Card - Standard Design */
.order-summary-card {
    display: block;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 140px;
}

.order-summary-card .summary-details-section {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

.order-summary-card .summary-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order-summary-card .detail-label {
    font-size: 0.75rem;
    color: #a1acb8;
    font-weight: 500;
}

.order-summary-card .detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    line-height: 1.4;
}

.order-summary-card .detail-value.highlight {
    font-size: 1.25rem;
    color: #0b6bb8;
    font-weight: 700;
}

/* Responsive Styles for Summary Cards */
@media (max-width: 768px) {
    .summary-section-header {
        padding: 0.875rem 1rem;
    }

    .summary-section-header h6 {
        font-size: 1rem;
    }

    .leave-summary-card .summary-details-section,
    .banking-summary-card .summary-details-section,
    .order-summary-card .summary-details-section {
        padding: 1rem;
    }

    .banking-summary-card .cash-label {
        font-size: 0.875rem;
    }

    .banking-summary-card .cash-value {
        font-size: 1rem;
    }

    .banking-summary-card .cash-value.highlight {
        font-size: 1.125rem;
    }

    .banking-summary-card {
        min-height: auto;
    }

    .order-summary-card .detail-value.highlight {
        font-size: 1.125rem;
    }
}

/* Guidelines Card */
.guidelines-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
}

.guidelines-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
    font-weight: 600;
    color: #566a7f;
}

.guidelines-header i {
    color: #ffab00;
}

.guidelines-body {
    padding: 1.25rem;
}

.guidelines-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guidelines-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: #697a8d;
    line-height: 1.5;
}

.guidelines-list li i {
    color: #71dd37;
    font-size: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Help Card */
.help-card {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(11, 107, 184, 0.2);
    border-radius: 0.5rem;
    text-align: center;
}

.help-card .help-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.help-card h6 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.help-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: #a1acb8;
    line-height: 1.5;
}

/* Leave Form Select2 Styling */
.leave-form-container .select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
}

.leave-form-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    color: #566a7f;
    padding-left: 1rem;
}

.leave-form-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.leave-form-container .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

/* Leave Form Responsive */
@media (max-width: 1200px) {
    .leave-form-grid {
        grid-template-columns: 1fr;
    }

    .leave-form-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 992px) {
    .leave-form-sidebar {
        grid-template-columns: repeat(2, 1fr);
    }

    .leave-form-sidebar .help-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .leave-form-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .leave-form-header .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .leave-form-container .form-row.two-cols {
        grid-template-columns: 1fr;
    }

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

    .weekend-toggle-group {
        flex-direction: column;
    }

    .leave-form-sidebar {
        grid-template-columns: 1fr;
    }

    .leave-form-sidebar .help-card {
        grid-column: span 1;
    }

    .leave-form-container .form-actions {
        flex-direction: column;
    }

    .leave-form-container .btn-cancel,
    .leave-form-container .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Common Module Styles
   ======================================== */

/* Module Container */
.module-container {
    padding: 0;
}

/* Module Header */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.module-header .header-left {
    display: flex;
    flex-direction: column;
}

.module-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    margin: 0;
}

.module-title i {
    color: #0b6bb8;
    font-size: 1.75rem;
}

.module-subtitle {
    color: #a1acb8;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.module-header .header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Primary Action Button */
.btn-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
    cursor: pointer;
}

.btn-primary-action:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 107, 184, 0.4);
}

/* Secondary Action Button */
.btn-secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    color: #0b6bb8;
    border: 1px solid #0b6bb8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-secondary-action:hover {
    background: #0b6bb8;
    color: #ffffff;
}

/* Stats Row */
.stats-row {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stats-row.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.stats-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.purple {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

.stat-icon.green {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.stat-icon.cyan {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.stat-icon.orange {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.stat-icon.red {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8125rem;
    color: #a1acb8;
    margin-top: 0.125rem;
}

/* Filter Card */
.filter-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.filter-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.filter-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.filter-card-title i {
    color: #0b6bb8;
}

.filter-card-body {
    padding: 1.5rem;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: end;
}

.filter-grid.five-cols {
    grid-template-columns: repeat(5, 1fr);
}

.filter-grid.six-cols {
    grid-template-columns: repeat(6, 1fr);
}

.filter-grid.seven-cols {
    grid-template-columns: repeat(7, 1fr);
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
}

.filter-label i {
    color: #a1acb8;
}

.filter-select,
.filter-input {
    padding: 0.5rem 0.875rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #697a8d;
    background: #ffffff;
    transition: all 0.2s ease;
}

.filter-select:focus,
.filter-input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-filter-apply:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-filter-reset:hover {
    background: #e7e7e8;
    color: #566a7f;
}

.btn-filter-reset.full-width {
    width: 100%;
}

/* Table Card */
.table-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.table-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.table-card-title i {
    color: #0b6bb8;
}

.table-card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.records-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.page-size-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #697a8d;
}

.page-size-select {
    padding: 0.375rem 0.625rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #697a8d;
}

.table-card-body {
    padding: 1.5rem;
}

/* Module Table */
.module-table {
    width: 100%;
    border-collapse: collapse;
}

.module-table thead th {
    padding: 1rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid #e7e7e8;
    white-space: nowrap;
}

.module-table tbody tr {
    transition: background-color 0.15s ease;
}

.module-table tbody tr:hover {
    background-color: rgba(11, 107, 184, 0.04);
}

.module-table tbody td {
    padding: 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e8;
    color: #697a8d;
    font-size: 0.9375rem;
}

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

/* Table Pagination */
.table-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.table-pagination .pagination {
    gap: 0.25rem;
}

.table-pagination .page-link {
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 0.375rem;
    color: #697a8d;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.table-pagination .page-link:hover {
    background: #f5f5f9;
    color: #0b6bb8;
}

.table-pagination .page-item.active .page-link {
    background: #0b6bb8;
    color: #ffffff;
}

.table-pagination .page-item.disabled .page-link {
    color: #d9dee3;
}

/* ========================================
   Report Pages Pagination - Match User Management Style
   ======================================== */

/* Payable Report Pagination */
#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: var(--theme-text) !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: var(--theme-primary) !important;
}

#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#payable-report-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.payable-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #d9dee3 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Annual Leave Report Pagination */
#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: var(--theme-text) !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: var(--theme-primary) !important;
}

#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#annual-leave-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.leave-balance-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #d9dee3 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Cash Reconciliation Report Pagination */
#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: var(--theme-text) !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: var(--theme-primary) !important;
}

#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#cash-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #d9dee3 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Holiday Report Laravel Pagination - Match User Management Style */
.table-card .table-pagination {
    padding: 1rem 0;
}

.table-card .table-pagination .pagination {
    gap: 0.25rem;
    margin: 0;
}

.table-card .table-pagination .page-link {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none;
    border-radius: 0.375rem;
    color: var(--theme-text);
    font-size: 0.875rem;
    transition: all 0.15s ease;
    background: transparent;
}

.table-card .table-pagination .page-link:hover {
    background: #f5f5f9;
    color: var(--theme-primary);
}

.table-card .table-pagination .page-item.active .page-link {
    background: var(--theme-primary);
    color: #ffffff;
}

.table-card .table-pagination .page-item.disabled .page-link {
    color: #d9dee3;
    background: transparent;
    cursor: not-allowed;
}

/* General Report Tables Pagination - Match User Management */
.module-table.dataTable + .dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0;
}

.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    margin: 0 0.125rem;
    border: none !important;
    border-radius: 0.375rem;
    color: var(--theme-text) !important;
    background: transparent !important;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f9 !important;
    color: var(--theme-primary) !important;
}

.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.module-table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #d9dee3 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Item Name with Icon */
.item-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-icon {
    width: 38px;
    height: 38px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.item-icon.holiday-icon {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.item-icon.policy-icon {
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
}

/* Day Badge - Branch Operating Days - HIGHEST PRIORITY */
#branch-table .days-grid .day-badge,
.branch-table .days-grid .day-badge,
.branch-table-card .days-grid .day-badge,
table .days-grid .day-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* GREEN background for WORKING days */
#branch-table .days-grid .day-badge.day-active,
.branch-table .days-grid .day-badge.day-active,
.branch-table-card .days-grid .day-badge.day-active,
table .days-grid .day-badge.day-active,
.day-badge.day-active {
    background: #28a745 !important;
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important;
}

/* GRAY background for NON-WORKING days */
#branch-table .days-grid .day-badge.day-inactive,
.branch-table .days-grid .day-badge.day-inactive,
.branch-table-card .days-grid .day-badge.day-inactive,
table .days-grid .day-badge.day-inactive,
.day-badge.day-inactive {
    background: #dee2e6 !important;
    background-color: #dee2e6 !important;
    color: #868e96 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Date Display */
.date-display {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #566a7f;
    font-size: 0.875rem;
}

.date-display i {
    color: #a1acb8;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.today {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.status-badge.upcoming {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.status-badge.past {
    background: rgba(133, 146, 163, 0.12);
    color: #8592a3;
}

/* Order Status Badge */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.order-status-badge.pending {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.order-status-badge.approved {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.order-status-badge.rejected {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

/* Punch Status Badge */
.punch-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.punch-status-badge.pending {
    background: rgba(255, 171, 0, 0.12);
    color: #ffab00;
}

.punch-status-badge.approved {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

/* Store Badge */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Creator Name */
.creator-name {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #566a7f;
    font-size: 0.875rem;
}

.creator-name i {
    color: #a1acb8;
}

/* View Orders Button */
.btn-view-orders {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-orders:hover {
    background: rgba(3, 195, 236, 0.2);
}

/* Notes Text */
.notes-text,
.description-text {
    color: #697a8d;
    font-size: 0.875rem;
}

/* File Link */
.file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #0b6bb8;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.file-link:hover {
    color: #08548f;
    text-decoration: underline;
}

.no-file {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #a1acb8;
    font-size: 0.875rem;
}

/* Employee Info */
.employee-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.employee-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.employee-name {
    font-weight: 500;
    color: #566a7f;
}

/* Time Badge */
.time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.time-badge.check-in {
    background: rgba(113, 221, 55, 0.12);
    color: #71dd37;
}

.time-badge.check-out {
    background: rgba(255, 62, 29, 0.12);
    color: #ff3e1d;
}

.time-badge.no-time {
    background: #f5f5f9;
    color: #a1acb8;
}

/* Break Time Badge */
.break-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state i {
    font-size: 3rem;
    color: #d9dee3;
    margin-bottom: 1rem;
}

.empty-state p {
    color: #a1acb8;
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.btn-add-new {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-add-new:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
    color: #ffffff;
}

/* Module Modal */
.module-modal .modal-content {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.module-modal .modal-header {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    border: none;
    padding: 1.25rem 1.5rem;
}

.module-modal .modal-header.status-header {
    background: linear-gradient(135deg, #ffab00 0%, #ff9100 100%);
}

.module-modal .modal-header.edit-header {
    background: linear-gradient(135deg, #71dd37 0%, #56b832 100%);
}

.module-modal .modal-header.export-header {
    background: linear-gradient(135deg, #03c3ec 0%, #0099cc 100%);
}

.module-modal .modal-title {
    color: #ffffff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.module-modal .btn-close {
    filter: brightness(0) invert(1);
}

.module-modal .modal-body {
    padding: 1.5rem;
}

.module-modal .modal-footer {
    border-top: 1px solid #e7e7e8;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.detail-item .detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    background: rgba(11, 107, 184, 0.12);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.detail-item .detail-content {
    display: flex;
    flex-direction: column;
}

.detail-item .detail-label {
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item .detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    margin-top: 0.125rem;
}

/* Order Items List */
.order-items-list {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e7e7e8;
    color: #566a7f;
    font-size: 0.9375rem;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item i {
    color: #71dd37;
}

.order-notes-section {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.order-notes-section h6 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.order-notes-section p {
    margin: 0;
    color: #697a8d;
    font-size: 0.875rem;
}

/* Form Group in Modal */
.module-modal .form-group {
    margin-bottom: 1rem;
}

.module-modal .form-group:last-child {
    margin-bottom: 0;
}

.module-modal .form-label-custom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.module-modal .form-label-custom i {
    color: #0b6bb8;
}

.module-modal .form-label-custom .required {
    color: #ff3e1d;
}

.module-modal .form-control-custom {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: #566a7f;
    transition: all 0.2s ease;
}

.module-modal .form-control-custom:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

/* Status Options in Modal */
.module-modal .status-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.module-modal .status-option {
    position: relative;
    cursor: pointer;
}

.module-modal .status-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.module-modal .status-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #697a8d;
    transition: all 0.2s ease;
}

.module-modal .status-option input:checked + .status-option-label.pending {
    background: rgba(255, 171, 0, 0.12);
    border-color: #ffab00;
    color: #ffab00;
}

.module-modal .status-option input:checked + .status-option-label.approved {
    background: rgba(113, 221, 55, 0.12);
    border-color: #71dd37;
    color: #71dd37;
}

.module-modal .status-option input:checked + .status-option-label.rejected {
    background: rgba(255, 62, 29, 0.12);
    border-color: #ff3e1d;
    color: #ff3e1d;
}

/* Modal Buttons */
.btn-modal-cancel,
.btn-modal-close {
    padding: 0.625rem 1.25rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover,
.btn-modal-close:hover {
    background: #e7e7e8;
}

.btn-modal-save {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-save:hover {
    background: linear-gradient(135deg, #08548f 0%, #7c4ce0 100%);
}

.btn-modal-save.export-btn {
    background: linear-gradient(135deg, #03c3ec 0%, #0099cc 100%);
}

.btn-modal-save.export-btn:hover {
    background: linear-gradient(135deg, #02a8cc 0%, #0088b3 100%);
}

/* Module Responsive */
@media (max-width: 1400px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-grid.five-cols,
    .filter-grid.six-cols,
    .filter-grid.seven-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 992px) {
    .filter-grid,
    .filter-grid.five-cols,
    .filter-grid.six-cols,
    .filter-grid.seven-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .module-modal .status-options {
        grid-template-columns: 1fr;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .module-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .module-header .header-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-primary-action,
    .btn-secondary-action {
        width: 100%;
        justify-content: center;
    }

    .stats-row.four-cols,
    .stats-row.three-cols {
        grid-template-columns: 1fr;
    }

    .filter-grid,
    .filter-grid.five-cols,
    .filter-grid.six-cols,
    .filter-grid.seven-cols {
        grid-template-columns: 1fr;
    }

    .table-card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* ========================================
   Order Items Page Specific Styles
   ======================================== */

/* Info Banner */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.08) 0%, rgba(0, 153, 204, 0.08) 100%);
    border: 1px solid rgba(3, 195, 236, 0.2);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.info-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-banner-content h6 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.info-banner-content p {
    margin: 0;
    font-size: 0.875rem;
    color: #697a8d;
    line-height: 1.5;
}

/* Item Cell in Table */
.item-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.item-text {
    font-weight: 500;
    color: #566a7f;
    font-size: 0.9375rem;
}

/* Items Table Specific */
.items-table {
    width: 100% !important;
}

.items-table thead th {
    padding: 1rem 1rem !important;
    background: #f8f9fa !important;
}

.items-table tbody td {
    padding: 0.875rem 1rem !important;
}

/* Modal Form Group */
.modal-form-group {
    margin-bottom: 1rem;
}

.modal-form-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.modal-form-label i {
    color: #0b6bb8;
}

.modal-form-label .required {
    color: #ff3e1d;
}

.modal-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #566a7f;
    transition: all 0.2s ease;
}

.modal-form-input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.modal-form-input::placeholder {
    color: #a1acb8;
}

.input-hint {
    display: block;
    font-size: 0.75rem;
    color: #a1acb8;
    margin-top: 0.375rem;
}

/* DataTable Custom Header/Footer */
.datatable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.datatable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.datatable-length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
}

.datatable-length select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    color: #697a8d;
    font-size: 0.875rem;
    min-width: 70px;
}

.datatable-search input {
    padding: 0.625rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #566a7f;
    min-width: 250px;
    transition: all 0.2s ease;
}

.datatable-search input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.datatable-info {
    color: #a1acb8;
    font-size: 0.8125rem;
}

.datatable-pagination .paginate_button {
    padding: 0.5rem 0.875rem !important;
    margin: 0 0.125rem !important;
    border: none !important;
    border-radius: 0.375rem !important;
    color: #697a8d !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease !important;
}

.datatable-pagination .paginate_button:hover {
    background: #f5f5f9 !important;
    color: #0b6bb8 !important;
}

.datatable-pagination .paginate_button.current,
.datatable-pagination .paginate_button.current:hover {
    background: #0b6bb8 !important;
    color: #ffffff !important;
}

.datatable-pagination .paginate_button.disabled {
    color: #d9dee3 !important;
}

/* Items Table Action Dropdown */
.items-table .btn-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: #0b6bb8;
    border: 1px solid #0b6bb8;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.items-table .btn-actions:hover {
    background: #0b6bb8;
    color: #ffffff;
}

.items-table .action-dropdown {
    min-width: 240px;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.items-table .action-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
}

.items-table .action-dropdown-body {
    padding: 0.5rem;
}

.items-table .action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

.items-table .action-item:hover {
    background: #f5f5f9;
}

.items-table .action-item .action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.items-table .action-item .action-icon.edit-icon {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

.items-table .action-item .action-icon.delete-icon {
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.15) 0%, rgba(220, 53, 69, 0.15) 100%);
    color: #ff3e1d;
}

.items-table .action-item .action-content {
    display: flex;
    flex-direction: column;
}

.items-table .action-item .action-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}

.items-table .action-item .action-desc {
    font-size: 0.75rem;
    color: #a1acb8;
}

.items-table .action-item.action-delete:hover {
    background: rgba(255, 62, 29, 0.08);
}

.items-table .action-item.action-delete .action-title {
    color: #ff3e1d;
}

/* Responsive for Items Table */
@media (max-width: 768px) {
    .datatable-header,
    .datatable-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .datatable-search input {
        min-width: 100%;
        width: 100%;
    }
}

/* ========================================
   Create Form Pages Styles
   (Order Request & Time Tracking)
   ======================================== */

/* Container */
.create-form-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.create-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.create-form-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.create-form-header .back-link {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #697a8d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.create-form-header .back-link:hover {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
}

.create-form-header .header-info {
    display: flex;
    flex-direction: column;
}

.create-form-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.create-form-title i {
    color: #0b6bb8;
}

.create-form-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #a1acb8;
}

.request-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2rem;
}

/* Grid Layout */
.create-form-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
}

.create-form-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.create-form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Form Cards */
.form-card {
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.form-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.form-card-header .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.form-card-header .card-icon.purple-icon {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.form-card-header .card-icon.cyan-icon {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.form-card-header .card-icon.green-icon {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.form-card-header .card-icon.orange-icon {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.form-card-header .card-header-content h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.form-card-header .card-header-content span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.form-card-body {
    padding: 1.25rem;
}

/* Form Elements */
.form-row {
    display: grid;
    gap: 1.25rem;
}

.form-row.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label-custom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.form-label-custom i {
    color: #0b6bb8;
    font-size: 1rem;
}

.form-label-custom .required {
    color: #ff3e1d;
}

.form-label-custom .optional {
    color: #a1acb8;
    font-weight: 400;
}

.form-control-custom {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #566a7f;
    transition: all 0.2s ease;
    background: #ffffff;
}

.form-control-custom:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.form-control-custom.textarea {
    resize: vertical;
    min-height: 100px;
}

.form-control-custom::placeholder {
    color: #a1acb8;
}

.input-hint {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #a1acb8;
    margin-top: 0.375rem;
}

.input-hint i {
    font-size: 0.875rem;
}

.error-feedback {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #ff3e1d;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: #a1acb8;
    margin-top: 0.25rem;
}

/* Selected Items Preview */
.selected-items-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.preview-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    margin-bottom: 0.5rem;
    display: block;
}

.items-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.item-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #0b6bb8;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.item-chip i {
    font-size: 0.9375rem;
}

/* Time Inputs Grid */
.time-inputs-grid {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.time-input-card {
    flex: 1;
    max-width: 200px;
    text-align: center;
}

.time-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.time-card-header span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}

.time-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.time-icon.in {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.time-icon.out {
    background: rgba(255, 62, 29, 0.15);
    color: #ff3e1d;
}

.time-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    text-align: center;
    transition: all 0.2s ease;
    background: #ffffff;
}

.time-input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.check-in .time-input:focus {
    border-color: #71dd37;
    box-shadow: 0 0 0 0.2rem rgba(113, 221, 55, 0.1);
}

.check-out .time-input:focus {
    border-color: #ff3e1d;
    box-shadow: 0 0 0 0.2rem rgba(255, 62, 29, 0.1);
}

/* Time Connector */
.time-connector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.connector-line {
    width: 20px;
    height: 2px;
    background: #e7e7e8;
}

.connector-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #e7e7e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1acb8;
    font-size: 1.25rem;
}

/* Duration Display */
.duration-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-radius: 0.5rem;
    border: 1px solid rgba(11, 107, 184, 0.2);
}

.duration-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.duration-text {
    display: flex;
    flex-direction: column;
}

.duration-label {
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.duration-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b6bb8;
}

/* Break Options */
.break-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.break-option {
    flex: 1;
    min-width: 120px;
}

.break-option input {
    display: none;
}

.break-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: #f8f9fa;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.break-option input:checked + .break-option-content {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.1) 0%, rgba(0, 153, 204, 0.1) 100%);
    border-color: #03c3ec;
}

.break-option-content:hover {
    border-color: #03c3ec;
}

.break-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
}

.break-option input:checked + .break-option-content .break-value {
    color: #03c3ec;
}

.break-label {
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    background: #f5f5f9;
    color: #697a8d;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #e7e7e8;
    color: #566a7f;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #5f63f2 0%, #7c4fe3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

/* Summary Card */
.summary-card {
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
}

.summary-body {
    padding: 1.25rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f5f5f9;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item.total {
    padding-top: 1rem;
}

.summary-label {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.summary-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #566a7f;
}

.summary-value.highlight {
    color: #0b6bb8;
    font-weight: 700;
}

.summary-value.green {
    color: #71dd37;
}

.summary-value.red {
    color: #ff3e1d;
}

.summary-divider {
    height: 1px;
    background: #e7e7e8;
    margin: 0.5rem 0;
}

/* Guidelines Card */
.guidelines-card {
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.guidelines-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.guidelines-header i {
    color: #ffab00;
}

.guidelines-body {
    padding: 1rem 1.25rem;
}

.guidelines-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guidelines-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: #697a8d;
    line-height: 1.5;
}

.guidelines-list li i {
    color: #71dd37;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Help Card */
.help-card {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.08) 0%, rgba(0, 153, 204, 0.08) 100%);
    border: 1px solid rgba(3, 195, 236, 0.2);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
}

.help-card .help-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 0.75rem;
}

.help-card h6 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.help-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: #697a8d;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1200px) {
    .create-form-grid {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 992px) {
    .create-form-grid {
        grid-template-columns: 1fr;
    }

    .create-form-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .create-form-sidebar > * {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .create-form-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row.two-cols {
        grid-template-columns: 1fr;
    }

    .time-inputs-grid {
        flex-direction: column;
    }

    .time-input-card {
        max-width: 100%;
        width: 100%;
    }

    .time-connector {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .break-options {
        flex-direction: column;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }

    .create-form-sidebar {
        flex-direction: column;
    }

    .create-form-sidebar > * {
        min-width: 100%;
    }
}

/* ========================================
   Banking & Cashing Up Module Styles
   ======================================== */

/* Cashing Up Index Page */

/* Enhanced Filter Card */
.cashing-filter-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.filter-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e7e7e8;
}

.filter-card-title {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.filter-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}

.filter-card-title h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-card-title h6 i {
    color: #0b6bb8;
    font-size: 1.125rem;
}

.filter-card-title span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.filter-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    color: #697a8d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-toggle-btn:hover {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
}

.filter-toggle-btn i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.filter-toggle-btn i.rotated {
    transform: rotate(180deg);
}

.filter-card-body {
    padding: 1.5rem 1.25rem;
}

.cashing-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cashing-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-item-header i {
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
}

.filter-item-header label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #566a7f;
    margin: 0;
}

/* Quick Filters */
.quick-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.quick-filter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #697a8d;
}

.quick-filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #ffffff;
    color: #697a8d;
    border: 1px solid #e7e7e8;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-filter-btn:hover {
    border-color: #0b6bb8;
    color: #0b6bb8;
    background: rgba(11, 107, 184, 0.05);
}

.quick-filter-btn.active {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border-color: transparent;
}

.quick-filter-btn i {
    font-size: 1rem;
}

/* Filter Actions */
.cashing-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #f5f5f9;
}

.btn-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #f5f5f9;
    color: #697a8d;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-filter-clear:hover {
    background: #ff3e1d;
    color: #ffffff;
    border-color: #ff3e1d;
}

.btn-filter-search {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

/* Filter Responsive */
@media (max-width: 1200px) {
    .cashing-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cashing-filter-grid {
        grid-template-columns: 1fr;
    }

    .quick-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .quick-filter-buttons {
        width: 100%;
    }

    .quick-filter-btn {
        flex: 1;
        justify-content: center;
    }

    .cashing-filter-actions {
        flex-direction: column;
    }

    .btn-filter-clear,
    .btn-filter-search {
        width: 100%;
        justify-content: center;
    }

    .filter-card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .filter-toggle-btn {
        align-self: flex-end;
        margin-top: -44px;
    }
}

.cashing-tabs {
    padding: 1rem 1.25rem 0;
    border-bottom: 1px solid #e7e7e8;
}

.custom-tabs {
    border: none;
    gap: 0.5rem;
}

.custom-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    background: transparent;
    color: #697a8d;
    font-weight: 500;
    transition: all 0.2s ease;
}

.custom-tab:hover {
    color: #0b6bb8;
    background: rgba(11, 107, 184, 0.05);
}

.custom-tab.active {
    color: #0b6bb8;
    background: #ffffff;
    box-shadow: 0 -2px 0 #0b6bb8 inset;
}

.tab-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.tab-badge.completed {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.tab-badge.missing {
    background: rgba(255, 62, 29, 0.15);
    color: #ff3e1d;
}

/* Cashing Table Styles */
.cashing-table {
    width: 100%;
}

.date-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #566a7f;
    font-weight: 500;
}

.date-cell i {
    color: #0b6bb8;
}

.branch-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: rgba(3, 195, 236, 0.1);
    color: #03c3ec;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.till-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: #f5f5f9;
    color: #697a8d;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.amount {
    font-weight: 600;
    color: #566a7f;
}

.discrepancy-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.discrepancy-badge.positive {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.discrepancy-badge.negative {
    background: rgba(255, 62, 29, 0.15);
    color: #ff3e1d;
}

.discrepancy-badge.neutral {
    background: #f5f5f9;
    color: #697a8d;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.completed {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.status-badge.missing {
    background: rgba(255, 62, 29, 0.15);
    color: #ff3e1d;
}

.btn-edit-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 171, 0, 0.1);
    color: #ffab00;
    border: 1px solid rgba(255, 171, 0, 0.3);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-edit-action:hover {
    background: #ffab00;
    color: #ffffff;
}

.btn-add-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-add-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
    color: #ffffff;
}

.table-pagination {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: center;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f5f9;
    color: #a1acb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1rem;
}

.empty-state.success .empty-icon {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.empty-state h6 {
    margin: 0 0 0.5rem;
    color: #566a7f;
    font-size: 1.125rem;
}

.empty-state p {
    margin: 0;
    color: #a1acb8;
    font-size: 0.875rem;
}

.empty-state.small {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.empty-state.small i {
    font-size: 2rem;
    color: #a1acb8;
}

.empty-state.small span {
    color: #a1acb8;
    font-size: 0.875rem;
}

/* Banking Page */
.banking-container {
    max-width: 1600px;
    margin: 0 auto;
}

.banking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.banking-form-section,
.banking-info-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Make banking cards equal height */
.banking-form-section .banking-card,
.banking-info-section .form-card,
.banking-info-section .banking-summary {
    flex: none;
}

/* Compact Notes in Banking */
.compact-notes {
    min-height: 50px !important;
    max-height: 60px;
    resize: none;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem;
}

/* Store Display */
.store-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
}

.store-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Denomination Table */
.denomination-table-wrapper {
    overflow-x: auto;
}

.denomination-table {
    width: 100%;
    border-collapse: collapse;
}

.denomination-table th {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    color: #566a7f;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-bottom: 1px solid #e7e7e8;
}

.denomination-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f5f5f9;
}

/* Banking Quantity Controls */
.banking-qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.banking-qty-btn {
    width: 38px;
    height: 38px;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 1;
}

.banking-qty-btn.minus {
    border-color: #fee2e2;
    background: #fef2f2;
    color: #dc2626;
}

.banking-qty-btn.plus {
    border-color: #dcfce7;
    background: #f0fdf4;
    color: #16a34a;
}

.banking-qty-btn:active {
    transform: scale(0.92);
}

.banking-qty-btn.minus:active {
    background: #fee2e2;
}

.banking-qty-btn.plus:active {
    background: #dcfce7;
}

.banking-qty-controls .denomination-qty {
    width: 75px;
    height: 38px;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.banking-qty-controls .denomination-qty:focus {
    border-color: #0b6bb8;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.15);
}

.denomination-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.denomination-label.note {
    color: #71dd37;
}

.denomination-label.coin {
    color: #ffab00;
}

.denomination-label.penny {
    color: #03c3ec;
}

.denomination-table .total-row td {
    background: #f8f9fa;
    border-top: 2px solid #e7e7e8;
}

.total-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #566a7f;
}

.total-input {
    font-weight: 700;
    color: #0b6bb8;
    background: #ffffff !important;
}

/* Banking Summary Card */
.banking-summary .summary-body {
    padding: 1rem 1.25rem;
}

.cash-summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f5f5f9;
}

.cash-summary-item:last-child {
    border-bottom: none;
}

.cash-summary-item.highlight {
    background: rgba(11, 107, 184, 0.05);
    margin: 0.5rem -1.25rem -1rem;
    padding: 1rem 1.25rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

.cash-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.cash-icon.float {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.cash-icon.till {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.cash-icon.bank {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.cash-details {
    display: flex;
    flex-direction: column;
}

.cash-label {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.cash-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #566a7f;
}

.cash-value.highlight {
    color: #0b6bb8;
}

/* Transaction Log */
.transaction-log-wrapper {
    max-height: 400px;
    overflow-y: auto;
}

.transaction-log-table {
    width: 100%;
    border-collapse: collapse;
}

.transaction-log-table th {
    padding: 0.75rem;
    background: #f8f9fa;
    color: #566a7f;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.transaction-log-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f5f5f9;
    font-size: 0.875rem;
}

.log-date {
    color: #697a8d;
}

.log-amount {
    font-weight: 600;
    color: #71dd37;
}

.log-user {
    color: #566a7f;
}

.log-notes-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

.log-notes-cell .no-notes {
    color: #a1acb8;
    font-size: 0.875rem;
}

.btn-view-notes {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e7e7e8;
    background: #f8f9fa;
    color: #0b6bb8;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-view-notes:hover {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
    transform: scale(1.05);
}

.btn-view-notes i {
    font-size: 1rem;
}

/* Popover styling for notes */
.popover {
    max-width: 300px;
    border: 1px solid #e7e7e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.popover-header {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border-bottom: none;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.popover-body {
    padding: 1rem;
    color: #566a7f;
    font-size: 0.875rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.btn-delete-log {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    background: rgba(255, 62, 29, 0.1);
    color: #ff3e1d;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-delete-log:hover {
    background: #ff3e1d;
    color: #ffffff;
}

.select-store-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #a1acb8;
}

.select-store-prompt i {
    font-size: 2rem;
}

/* Missing Banking Alert Modal */
.warning-header {
    background: linear-gradient(135deg, #ffab00 0%, #ff8800 100%) !important;
    color: #ffffff !important;
}

.alert-message p {
    margin: 0;
    color: #566a7f;
    line-height: 1.6;
}

.missing-stores-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.missing-stores-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 171, 0, 0.1);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.missing-stores-list li i {
    color: #ffab00;
}

.missing-stores-list li span {
    font-weight: 500;
    color: #566a7f;
}

.alert-footer-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f5f5f9;
    border-radius: 0.5rem;
    color: #697a8d;
    font-size: 0.875rem;
}

.alert-footer-message i {
    color: #03c3ec;
}

/* Cashing Up Create/Edit Page */
.cashing-up-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cashing-card {
    margin-bottom: 1.25rem;
}

.form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

/* Till Reading Grid */
.till-reading-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.till-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.till-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
}

.till-label i {
    color: #03c3ec;
}

/* Takings Grid */
.takings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.takings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
}

.takings-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.takings-label i {
    font-size: 1.5rem;
    color: #0b6bb8;
}

.takings-title {
    font-weight: 500;
    color: #566a7f;
}

.takings-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-takings-modal {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.875rem;
    background: #0b6bb8;
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-takings-modal:hover {
    background: #5f63f2;
}

.takings-value-display {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    overflow: hidden;
}

.takings-value-display .currency {
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    color: #697a8d;
    font-weight: 500;
    border-right: 1px solid #e7e7e8;
}

.takings-input {
    width: 100px;
    padding: 0.5rem 0.75rem;
    border: none;
    text-align: right;
    font-weight: 600;
    color: #566a7f;
}

.takings-input:focus {
    outline: none;
}

/* Totals */
.takings-totals {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e7e7e8;
}

.total-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.total-item.discrepancy-item {
    background: rgba(255, 171, 0, 0.1);
    border: 1px solid rgba(255, 171, 0, 0.3);
}

.total-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #566a7f;
}

.total-value-display {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    overflow: hidden;
}

.total-value-display .currency {
    padding: 0.625rem 0.875rem;
    background: #f8f9fa;
    color: #697a8d;
    font-weight: 600;
}

.total-input {
    width: 120px;
    padding: 0.625rem 1rem;
    border: none;
    font-size: 1.125rem;
    font-weight: 700;
    color: #566a7f;
    text-align: right;
}

.total-input:focus {
    outline: none;
}

.total-input.discrepancy-input {
    color: #ffab00;
}

/* VAT Table */
.vat-table-wrapper {
    overflow-x: auto;
}

.vat-table {
    width: 100%;
    border-collapse: collapse;
}

.vat-table th {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    color: #566a7f;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #e7e7e8;
}

.vat-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f5f5f9;
}

.vat-category {
    font-weight: 500;
    color: #566a7f;
}

.vat-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.vat-input.total {
    background: rgba(11, 107, 184, 0.05);
    font-weight: 600;
}

/* Sticky Actions */
.sticky-actions {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 1rem;
    margin: 1.5rem -1rem -1rem;
    border-top: 1px solid #e7e7e8;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Gray Icon */
.card-icon.gray-icon {
    background: rgba(166, 177, 187, 0.15);
    color: #a6b1bb;
}

/* Modal Styles for Cashing Up */
.modal-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.modal-add-row input,
.modal-add-row select {
    flex: 1;
}

.btn-add-row {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #71dd37 0%, #56b832 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-add-row:hover {
    transform: scale(1.05);
}

.modal-table {
    width: 100%;
    border-collapse: collapse;
}

.modal-table th {
    padding: 0.625rem 0.75rem;
    background: #f8f9fa;
    color: #566a7f;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
}

.modal-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f5f5f9;
    font-size: 0.875rem;
}

.modal-table .total-row td {
    background: #f8f9fa;
    font-weight: 600;
    border-top: 2px solid #e7e7e8;
}

.denom-label {
    font-weight: 500;
    color: #566a7f;
}

.btn-delete-row {
    width: 32px;
    height: 32px;
    background: rgba(255, 62, 29, 0.1);
    color: #ff3e1d;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-delete-row:hover {
    background: #ff3e1d;
    color: #ffffff;
}

/* Responsive Banking */
@media (max-width: 1200px) {
    .banking-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .banking-grid {
        grid-template-columns: 1fr;
    }

    .form-row.three-cols {
        grid-template-columns: 1fr;
    }

    .takings-totals {
        flex-direction: column;
    }

    .total-item {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .takings-grid {
        grid-template-columns: 1fr;
    }

    .takings-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .takings-input-group {
        width: 100%;
        justify-content: space-between;
    }

    .till-reading-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Change Request Module Styles
   ======================================== */

/* Table Styles */
.change-request-table th,
.change-request-table td {
    padding: 0.75rem 0.5rem !important;
}

.coin-qty {
    font-weight: 500;
    color: #697a8d;
}

.total-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #71dd37 0%, #56b832 100%);
    color: #ffffff;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.total-badge.pending {
    background: linear-gradient(135deg, #ffab00 0%, #ff8800 100%);
}

/* Status Badge Pending */
.status-badge.pending {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

/* Coin Input Cards */
.coin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

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

.coin-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.coin-input-card {
    background: #ffffff;
    border: 2px solid #e7e7e8;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.coin-input-card:hover {
    border-color: #0b6bb8;
}

.coin-input-card.notes {
    border-color: rgba(113, 221, 55, 0.3);
    background: rgba(113, 221, 55, 0.03);
}

.coin-input-card.notes:hover {
    border-color: #71dd37;
}

.coin-input-card.pound {
    border-color: rgba(255, 171, 0, 0.3);
    background: rgba(255, 171, 0, 0.03);
}

.coin-input-card.pound:hover {
    border-color: #ffab00;
}

.coin-input-card.silver {
    border-color: rgba(3, 195, 236, 0.3);
    background: rgba(3, 195, 236, 0.03);
}

.coin-input-card.silver:hover {
    border-color: #03c3ec;
}

.coin-input-card.copper {
    border-color: rgba(205, 127, 50, 0.3);
    background: rgba(205, 127, 50, 0.03);
}

.coin-input-card.copper:hover {
    border-color: #cd7f32;
}

.coin-header {
    margin-bottom: 1rem;
}

.coin-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
}

.coin-type {
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coin-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.coin-btn {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.coin-btn.minus {
    background: rgba(255, 62, 29, 0.1);
    color: #ff3e1d;
}

.coin-btn.minus:hover {
    background: #ff3e1d;
    color: #ffffff;
}

.coin-btn.plus {
    background: rgba(113, 221, 55, 0.1);
    color: #71dd37;
}

.coin-btn.plus:hover {
    background: #71dd37;
    color: #ffffff;
}

.coin-input {
    width: 80px;
    height: 48px;
    border: 2px solid #e7e7e8;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #566a7f;
}

.coin-input:focus {
    border-color: #0b6bb8;
    outline: none;
}

.coin-bag-value {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0b6bb8;
}

/* Denomination Info Banner */
.denomination-info-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(3, 195, 236, 0.08);
    border: 1px solid rgba(3, 195, 236, 0.2);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #03c3ec;
}

/* Total Summary Card */
.total-summary .summary-body {
    padding: 1.5rem 1.25rem;
}

.grand-total {
    text-align: center;
    padding-bottom: 1rem;
}

.grand-total .total-label {
    display: block;
    font-size: 0.75rem;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.grand-total .total-amount {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0b6bb8;
}

.breakdown-list {
    padding-top: 1rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #697a8d;
}

.breakdown-item .breakdown-value {
    font-weight: 600;
    color: #566a7f;
}

/* Driver Info Card */
.driver-info .driver-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.driver-info .driver-message i {
    font-size: 1.5rem;
    color: #0b6bb8;
    flex-shrink: 0;
}

.driver-info .driver-message p {
    margin: 0;
    font-size: 0.875rem;
    color: #566a7f;
    line-height: 1.6;
}

/* Coin Guide List */
.coin-guide li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guide-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.guide-coin.notes {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.guide-coin.pound {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.guide-coin.silver {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.guide-coin.copper {
    background: rgba(205, 127, 50, 0.15);
    color: #cd7f32;
}

/* Responsive for Change Request */
@media (max-width: 1200px) {
    .coin-grid.four-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .coin-grid,
    .coin-grid.notes-grid,
    .coin-grid.four-cols {
        grid-template-columns: 1fr;
    }

    .coin-input-card {
        padding: 1rem;
    }

    .coin-value {
        font-size: 1.25rem;
    }

    .grand-total .total-amount {
        font-size: 2rem;
    }
}

/* ========================================
   Report Module Styles
   ======================================== */

/* Report Table */
.report-table {
    width: 100%;
    font-size: 0.8125rem;
}

.report-table thead th {
    background: #f8f9fa !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    color: #697a8d;
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.report-table tbody td {
    padding: 0.625rem 0.5rem;
    vertical-align: middle;
}

.report-table tfoot {
    background: linear-gradient(135deg, #f5f5f9 0%, #eef0f4 100%);
}

.report-table tfoot th {
    padding: 0.875rem 0.5rem;
    font-weight: 700;
    color: #566a7f;
}

.totals-row {
    border-top: 2px solid var(--theme-primary);
}

/* Store Dropdown for Filters */
.store-dropdown {
    position: relative;
    z-index: 1000;
}

.store-dropdown-menu {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    z-index: 1050 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0.25rem !important;
}

.store-list {
    max-height: 180px;
    overflow-y: auto;
}

.store-list .form-check {
    padding: 0.375rem 0;
}

/* Cash Reconciliation Styles */
.cash-recon-table .branch-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cash-recon-table .branch-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.cash-recon-table .branch-name {
    font-weight: 600;
    color: #566a7f;
}

.cash-amount {
    font-weight: 700;
    font-size: 1rem;
    color: #566a7f;
}

.cash-amount.high {
    color: var(--theme-danger);
}

.last-banked {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.last-banked i {
    margin-right: 0.375rem;
}

.last-banked span {
    font-weight: 500;
    color: #566a7f;
}

.last-banked small {
    font-size: 0.6875rem;
    color: var(--theme-secondary);
}

.last-banked.good i,
.last-banked.good span {
    color: var(--theme-success);
}

.last-banked.warning i,
.last-banked.warning span {
    color: var(--theme-warning);
}

.last-banked.danger i,
.last-banked.danger span {
    color: var(--theme-danger);
}

.no-banking {
    color: var(--theme-danger);
    font-weight: 500;
    font-size: 0.8125rem;
}

.audit-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.audit-status {
    font-size: 0.75rem;
    color: var(--theme-secondary);
    font-weight: 500;
}

.audit-link {
    color: var(--theme-primary);
    font-size: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.audit-link:hover {
    text-decoration: underline;
}

.btn-audit-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--theme-success) 0%, #5fc52e 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-audit-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(113, 221, 55, 0.4);
    color: #fff;
}

/* Report Section Cards */
.report-section-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.report-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--theme-border);
}

.section-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.section-icon.purple {
    background: rgba(11, 107, 184, 0.12);
    color: var(--theme-primary);
}

.section-icon.green {
    background: rgba(113, 221, 55, 0.12);
    color: var(--theme-success);
}

.section-icon.cyan {
    background: rgba(3, 195, 236, 0.12);
    color: var(--theme-info);
}

.section-title h6 {
    margin: 0;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.9375rem;
}

.section-title span {
    font-size: 0.75rem;
    color: var(--theme-secondary);
}

.report-section-body {
    padding: 1.25rem;
}

.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.summary-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 3px solid var(--theme-primary);
}

.summary-stat-item .stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--theme-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.summary-stat-item .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #566a7f;
}

/* Store Display Single */
.store-display-single {
    padding: 0.625rem 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid var(--theme-border);
}

.store-display-single span {
    font-weight: 600;
    color: #566a7f;
}

/* Empty State Card */
.empty-state-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-card .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: #f5f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-card .empty-icon i {
    font-size: 2.5rem;
    color: var(--theme-secondary);
}

.empty-state-card h6 {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: #566a7f;
}

.empty-state-card p {
    margin: 0 0 1.5rem;
    color: var(--theme-secondary);
    font-size: 0.875rem;
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.08) 0%, rgba(3, 195, 236, 0.02) 100%);
    border: 1px solid rgba(3, 195, 236, 0.2);
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.info-banner .info-icon {
    width: 36px;
    height: 36px;
    background: var(--theme-info);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.info-banner .info-content {
    display: flex;
    flex-direction: column;
}

.info-banner .info-title {
    font-weight: 600;
    color: #566a7f;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.info-banner .info-text {
    font-size: 0.8125rem;
    color: #697a8d;
    line-height: 1.5;
}

/* Leave Input for Annual Leave Report */
.leave-input {
    width: 100px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--theme-border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

.leave-input:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.15);
}

/* Leave Checkbox */
.leave-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--theme-primary);
}

/* Holiday Report Styles */
.holiday-report-table .employee-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.holiday-report-table .employee-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
}

.holiday-report-table .employee-name {
    font-weight: 500;
    color: #566a7f;
}

.holiday-report-table .branch-badge.small {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    display: inline-block;
}

.holiday-report-table .branch-badge.more {
    background: rgba(133, 146, 163, 0.12);
    color: var(--theme-secondary);
    font-size: 0.625rem;
}

.holiday-report-table .date-cell {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #697a8d;
}

.holiday-report-table .date-cell i {
    color: var(--theme-secondary);
}

/* Table Pagination */
.table-pagination {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid var(--theme-border);
}

.table-pagination .pagination {
    margin: 0;
}

.table-pagination .page-link {
    border: none;
    border-radius: 0.375rem !important;
    margin: 0 0.125rem;
    padding: 0.5rem 0.875rem;
    color: #697a8d;
    font-weight: 500;
}

.table-pagination .page-link:hover {
    background: #f5f5f9;
    color: var(--theme-primary);
}

.table-pagination .page-item.active .page-link {
    background: var(--theme-primary);
    color: #fff;
}

.table-pagination .page-item.disabled .page-link {
    color: #c4c9ce;
    background: transparent;
}

/* Filter Toggle Button Rotation */
.filter-toggle-btn i.rotated {
    transform: rotate(180deg);
}

/* Export Button */
.btn-modal-save.export-btn {
    background: linear-gradient(135deg, var(--theme-success) 0%, #5fc52e 100%);
}

.btn-modal-save.export-btn:hover {
    box-shadow: 0 4px 12px rgba(113, 221, 55, 0.4);
}

/* Responsive for Reports */
@media (max-width: 1200px) {
    .summary-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .report-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .leave-input {
        width: 80px;
    }
}

@media (max-width: 576px) {
    .summary-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Enhanced Cashing Up Form Styles
   ======================================== */

/* Container */
.cashing-form-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.cashing-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border);
}

.cashing-form-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cashing-form-header .header-info .form-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #566a7f;
}

.cashing-form-header .header-info .form-title i {
    color: var(--theme-primary);
}

.cashing-form-header .header-info .form-subtitle {
    margin: 0.25rem 0 0;
    color: var(--theme-secondary);
    font-size: 0.875rem;
}

.record-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--theme-primary-light);
    color: var(--theme-primary);
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

/* Form Layout */
.cashing-form-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.cashing-main-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Step Cards */
.cashing-step-card {
    display: flex;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}

.step-indicator {
    width: 48px;
    min-height: 100%;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.25rem;
}

.step-indicator.cyan {
    background: linear-gradient(135deg, var(--theme-info) 0%, #02a3c4 100%);
}

.step-indicator.green {
    background: linear-gradient(135deg, var(--theme-success) 0%, #5fc52e 100%);
}

.step-indicator.orange {
    background: linear-gradient(135deg, var(--theme-warning) 0%, #e69a00 100%);
}

.step-indicator.gray {
    background: linear-gradient(135deg, #8592a3 0%, #6b7a8a 100%);
}

.step-number {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
}

.step-content {
    flex: 1;
    padding: 1.25rem;
}

.step-header {
    margin-bottom: 1rem;
}

.step-header h6 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.step-header h6 i {
    color: var(--theme-primary);
}

.step-header span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-secondary);
}

.step-body {
    /* Body styles */
}

.step-grid {
    display: grid;
    gap: 1rem;
}

.step-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.step-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #697a8d;
    margin-bottom: 0.375rem;
}

.step-field label .required {
    color: var(--theme-danger);
}

.error-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-danger);
}

/* Till Reading Cards */
.till-reading-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.till-card {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.875rem;
    border: 1px solid var(--theme-border);
    transition: all 0.2s ease;
}

.till-card:hover {
    border-color: var(--theme-primary);
}

.till-card.primary { border-left: 3px solid var(--theme-primary); }
.till-card.info { border-left: 3px solid var(--theme-info); }
.till-card.warning { border-left: 3px solid var(--theme-warning); }
.till-card.danger { border-left: 3px solid var(--theme-danger); }
.till-card.success { border-left: 3px solid var(--theme-success); }

.till-card-icon {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.till-card.primary .till-card-icon { color: var(--theme-primary); }
.till-card.info .till-card-icon { color: var(--theme-info); }
.till-card.warning .till-card-icon { color: var(--theme-warning); }
.till-card.danger .till-card-icon { color: var(--theme-danger); }
.till-card.success .till-card-icon { color: var(--theme-success); }

.till-card-content label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--theme-secondary);
    margin-bottom: 0.375rem;
}

.till-input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    overflow: hidden;
}

.till-input-wrapper .currency {
    padding: 0 0.5rem;
    background: #f5f5f9;
    color: var(--theme-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
}

.till-input {
    width: 100%;
    padding: 0.5rem;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    color: #566a7f;
    outline: none;
}

.till-input.small {
    padding: 0.5rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    background: #fff;
    text-align: center;
}

/* Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.payment-card {
    background: #fff;
    border-radius: 0.625rem;
    padding: 1rem;
    border: 2px solid var(--theme-border);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.payment-card.cash { border-color: rgba(113, 221, 55, 0.3); }
.payment-card.cash:hover { border-color: var(--theme-success); }
.payment-card.cheque { border-color: rgba(11, 107, 184, 0.3); }
.payment-card.cheque:hover { border-color: var(--theme-primary); }
.payment-card.cards { border-color: rgba(3, 195, 236, 0.3); }
.payment-card.cards:hover { border-color: var(--theme-info); }
.payment-card.vouchers { border-color: rgba(255, 171, 0, 0.3); }
.payment-card.vouchers:hover { border-color: var(--theme-warning); }
.payment-card.payouts { border-color: rgba(255, 62, 29, 0.3); }
.payment-card.payouts:hover { border-color: var(--theme-danger); }

.payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
}

.payment-card.cash .payment-icon { background: rgba(113, 221, 55, 0.12); color: var(--theme-success); }
.payment-card.cheque .payment-icon { background: rgba(11, 107, 184, 0.12); color: var(--theme-primary); }
.payment-card.cards .payment-icon { background: rgba(3, 195, 236, 0.12); color: var(--theme-info); }
.payment-card.vouchers .payment-icon { background: rgba(255, 171, 0, 0.12); color: var(--theme-warning); }
.payment-card.payouts .payment-icon { background: rgba(255, 62, 29, 0.12); color: var(--theme-danger); }

.payment-info {
    margin-bottom: 0.5rem;
}

.payment-label {
    font-weight: 600;
    color: #566a7f;
    font-size: 0.8125rem;
}

.payment-info small {
    display: block;
    font-size: 0.625rem;
    color: var(--theme-danger);
}

.payment-value {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #566a7f;
}

.payment-value .currency {
    font-size: 0.875rem;
    color: var(--theme-secondary);
}

.payment-action {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    background: #f5f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-secondary);
    font-size: 0.75rem;
}

/* VAT Analysis Grid */
.vat-analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.vat-item {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.875rem;
    border: 1px solid var(--theme-border);
}

.vat-item.gray { border-left: 3px solid #8592a3; }
.vat-item.blue { border-left: 3px solid var(--theme-primary); }
.vat-item.cyan { border-left: 3px solid var(--theme-info); }
.vat-item.green { border-left: 3px solid var(--theme-success); }
.vat-item.purple { border-left: 3px solid #9c27b0; }
.vat-item.orange { border-left: 3px solid var(--theme-warning); }
.vat-item.pink { border-left: 3px solid #e91e63; }

.vat-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.vat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #566a7f;
}

.vat-rate {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: rgba(11, 107, 184, 0.1);
    color: var(--theme-primary);
    border-radius: 1rem;
    font-weight: 600;
}

.vat-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vat-input-group label {
    font-size: 0.625rem;
    color: var(--theme-secondary);
    display: block;
    margin-bottom: 0.25rem;
}

.vat-input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    overflow: hidden;
}

.vat-input-wrapper .currency {
    padding: 0 0.375rem;
    background: #f5f5f9;
    color: var(--theme-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.vat-input-field {
    width: 100%;
    padding: 0.375rem;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #566a7f;
    outline: none;
}

.vat-calculated {
    display: flex;
    gap: 0.5rem;
}

.vat-calc-item {
    flex: 1;
}

.vat-calc-item span {
    display: block;
    font-size: 0.5625rem;
    color: var(--theme-secondary);
    margin-bottom: 0.125rem;
    text-transform: uppercase;
}

.vat-calc-input {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.25rem;
    background: #fff;
    font-size: 0.6875rem;
    color: #697a8d;
}

/* Notes Textarea */
.notes-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Summary Sidebar */
.cashing-sidebar {
    position: relative;
}

.summary-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}

.sticky-summary {
    position: sticky;
    top: 1rem;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
}

.summary-header i {
    font-size: 1.25rem;
}

.summary-header h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.summary-body {
    padding: 1.25rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.summary-item.small {
    padding: 0.25rem 0;
}

.summary-item.small span:first-child {
    font-size: 0.75rem;
    color: var(--theme-secondary);
}

.summary-item.small span:last-child {
    font-size: 0.75rem;
    color: #697a8d;
}

.summary-label {
    font-size: 0.8125rem;
    color: #697a8d;
    font-weight: 500;
}

.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: #566a7f;
}

.summary-item.total {
    padding: 0.75rem 0;
    border-top: 1px dashed var(--theme-border);
    margin-top: 0.5rem;
}

.summary-value.total-value {
    font-size: 1.25rem;
    color: var(--theme-primary);
}

.summary-divider {
    height: 1px;
    background: var(--theme-border);
    margin: 0.5rem 0;
}

.summary-section {
    margin: 0.5rem 0;
}

.summary-section-title {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--theme-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.375rem;
    display: block;
}

/* Discrepancy Box */
.summary-discrepancy {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.875rem;
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--theme-border);
}

.summary-discrepancy.positive {
    background: rgba(113, 221, 55, 0.08);
    border-color: var(--theme-success);
}

.summary-discrepancy.negative {
    background: rgba(255, 62, 29, 0.08);
    border-color: var(--theme-danger);
}

.summary-discrepancy.neutral {
    background: rgba(3, 195, 236, 0.08);
    border-color: var(--theme-info);
}

.discrepancy-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #697a8d;
}

.summary-discrepancy.positive .discrepancy-label,
.summary-discrepancy.positive .discrepancy-value {
    color: var(--theme-success);
}

.summary-discrepancy.negative .discrepancy-label,
.summary-discrepancy.negative .discrepancy-value {
    color: var(--theme-danger);
}

.summary-discrepancy.neutral .discrepancy-label,
.summary-discrepancy.neutral .discrepancy-value {
    color: var(--theme-info);
}

.discrepancy-value {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Validation Status */
.validation-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.validation-status.success {
    background: rgba(113, 221, 55, 0.1);
    color: var(--theme-success);
}

.validation-status.warning {
    background: rgba(255, 171, 0, 0.1);
    color: #d69500;
}

.validation-status.error {
    background: rgba(255, 62, 29, 0.1);
    color: var(--theme-danger);
}

.validation-status i {
    font-size: 1rem;
}

/* Summary Footer */
.summary-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--theme-border);
    display: flex;
    gap: 0.75rem;
}

.btn-summary-cancel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem;
    background: #f5f5f9;
    color: #697a8d;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-summary-cancel:hover {
    background: #e9e9ec;
    color: #566a7f;
}

.btn-summary-submit {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-summary-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.4);
}

.btn-summary-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Cashing Modal Styles */
.cashing-modal .modal-content {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.cashing-modal .modal-header {
    padding: 1.25rem;
    border: none;
}

.cashing-modal .cash-header {
    background: linear-gradient(135deg, var(--theme-success) 0%, #5fc52e 100%);
}

.cashing-modal .cheque-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
}

.cashing-modal .card-header-modal {
    background: linear-gradient(135deg, var(--theme-info) 0%, #02a3c4 100%);
}

.cashing-modal .voucher-header {
    background: linear-gradient(135deg, var(--theme-warning) 0%, #e69a00 100%);
}

.cashing-modal .payout-header {
    background: linear-gradient(135deg, var(--theme-danger) 0%, #e03516 100%);
}

.modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.modal-title-wrapper i {
    font-size: 1.5rem;
}

.modal-title-wrapper h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-title-wrapper span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 0.125rem;
}

.cashing-modal .modal-body {
    padding: 1.5rem;
}

/* Denomination Grid */
.denomination-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.denom-section-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.75rem;
}

.denom-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.denom-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
}

.note-card {
    border-left: 3px solid var(--theme-success);
}

.coin-card {
    border-left: 3px solid var(--theme-warning);
}

.denom-label {
    min-width: 32px;
    font-weight: 700;
    color: #566a7f;
    font-size: 0.8125rem;
}

.denom-input {
    flex: 1;
    width: 100%;
    max-width: 60px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.25rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8125rem;
}

.denom-total {
    min-width: 60px;
    text-align: right;
    font-weight: 600;
    color: #697a8d;
    font-size: 0.8125rem;
}

/* Modal Total Bar */
.modal-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f5f5f9;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.modal-total-label {
    font-weight: 600;
    color: #566a7f;
}

.modal-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-primary);
}

/* Add Entry Form */
.add-entry-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.add-entry-form.simple {
    max-width: 300px;
}

.add-entry-form .form-control-custom {
    flex: 1;
}

.btn-add-entry {
    width: 44px;
    height: 44px;
    background: var(--theme-primary);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-add-entry:hover {
    background: var(--theme-primary-dark);
}

/* Entries Table */
.entries-table-wrapper {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
}

.entries-table {
    width: 100%;
    margin: 0;
}

.entries-table thead th {
    background: #f8f9fa;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #697a8d;
    text-transform: uppercase;
    border-bottom: 1px solid var(--theme-border);
    position: sticky;
    top: 0;
}

.entries-table tbody td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: #566a7f;
    border-bottom: 1px solid #f0f0f0;
}

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

.btn-delete-entry {
    width: 28px;
    height: 28px;
    background: rgba(255, 62, 29, 0.1);
    color: var(--theme-danger);
    border: none;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-entry:hover {
    background: var(--theme-danger);
    color: #fff;
}

.entries-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--theme-secondary);
}

.entries-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.entries-empty span {
    font-size: 0.8125rem;
}

.cashing-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border);
    gap: 0.75rem;
}

/* Responsive for Cashing Form */
@media (max-width: 1200px) {
    .cashing-form-layout {
        grid-template-columns: 1fr;
    }

    .cashing-sidebar {
        order: -1;
    }

    .sticky-summary {
        position: relative;
        top: 0;
    }

    .till-reading-cards {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

@media (max-width: 992px) {
    .till-reading-cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .step-grid.three-cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .cashing-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .cashing-step-card {
        flex-direction: column;
    }

    .step-indicator {
        width: 100%;
        min-height: auto;
        padding: 0.75rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .till-reading-cards,
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }

    .vat-analysis-grid {
        grid-template-columns: 1fr;
    }

    .step-grid.three-cols {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   Cashing Up Create/Edit Page - Full Width Design
   ======================================== */

/* Page Container - Full Width */
/* Full Width Header Wrapper - Card Style */
.cashing-up-header-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
}

.cashing-up-header-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    padding: 0;
    overflow: hidden;
}

.cashing-up-page {
    width: 100%;
}

/* Page Header */
.cashing-up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    max-width: 100%;
}

.cashing-up-header .header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.cashing-up-header .header-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.cashing-up-header .back-btn {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    background: #ffffff;
    border: 1px solid #e7e7e8;
    color: #697a8d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.cashing-up-header .back-btn:hover {
    background: #0b6bb8;
    border-color: #0b6bb8;
    color: #ffffff;
    transform: translateX(-2px);
    box-shadow: 0 4px 8px rgba(11, 107, 184, 0.3);
}

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

.cashing-up-header .header-info h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #566a7f;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cashing-up-header .header-info h1::before {
    content: '';
    width: 4px;
    height: 32px;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.cashing-up-header .header-info p {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: #8592a3;
    line-height: 1.4;
}

.cashing-up-header .record-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.25);
    flex-shrink: 0;
}

.cashing-up-header .record-badge i {
    font-size: 1rem;
}

/* Two Column Layout */
.cashing-up-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

.cashing-up-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cashing-up-sidebar {
    position: relative;
}

/* Card Styles */
.cu-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.cu-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.cu-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.cu-card-header.purple .cu-card-icon {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.cu-card-header.cyan .cu-card-icon {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.cu-card-header.green .cu-card-icon {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.cu-card-header.orange .cu-card-icon {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.cu-card-header.gray .cu-card-icon {
    background: rgba(133, 146, 163, 0.15);
    color: #8592a3;
}

.cu-card-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.cu-card-title span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.cu-card-body {
    padding: 1.25rem;
}

/* Form Elements */
.cu-form-row {
    display: grid;
    gap: 1.25rem;
}

.cu-form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.cu-form-row.five-cols {
    grid-template-columns: repeat(5, 1fr);
}

.cu-form-group {
    display: flex;
    flex-direction: column;
}

.cu-form-group label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.cu-form-group label i {
    color: #8592a3;
}

.cu-form-group label .required {
    color: #ff3e1d;
}

.cu-input,
.cu-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #566a7f;
    background: #ffffff;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.cu-input:focus,
.cu-select:focus {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
    outline: none;
}

.cu-input.readonly,
.cu-input:read-only {
    background: #f8f9fa;
    color: #8592a3;
}

/* Select2 Styling for Cashing Up Form */
.cu-form-group .select2-container {
    width: 100% !important;
}

.cu-form-group .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0;
}

.cu-form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 0.875rem;
    padding-right: 1.5rem;
    color: #566a7f;
    font-size: 0.9375rem;
}

.cu-form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 0.625rem;
}

.cu-form-group .select2-container--default.select2-container--focus .select2-selection--single,
.cu-form-group .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
}

.cu-form-group .select2-dropdown {
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 0.25rem;
}

.cu-form-group .select2-results__option {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #566a7f;
}

.cu-form-group .select2-results__option--highlighted {
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
}

.cu-form-group .select2-results__option[aria-selected="true"] {
    background: #0b6bb8;
    color: #ffffff;
}

.cu-input-with-prefix {
    display: flex;
    align-items: stretch;
}

.cu-input-with-prefix .prefix {
    padding: 0 0.75rem;
    background: #f8f9fa;
    border: 1px solid #d9dee3;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #8592a3;
    font-size: 0.9375rem;
}

.cu-input-with-prefix .cu-input {
    border-radius: 0 0.5rem 0.5rem 0;
}

.cu-input-with-prefix.compact {
    width: 100%;
}

.cu-input-with-prefix.compact .prefix {
    padding: 0 0.5rem;
    font-size: 0.8125rem;
}

.cu-input-with-prefix.compact .cu-input {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
}

.cu-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #566a7f;
    background: #ffffff;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
}

.cu-textarea:focus {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
    outline: none;
}

/* Payment Method Grid */
.cu-payment-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.cu-payment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background: #ffffff;
    border: 2px solid #e7e7e8;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cu-payment-card:hover {
    border-color: #0b6bb8;
    background: rgba(11, 107, 184, 0.02);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cu-payment-card .payment-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.cu-payment-card .payment-icon i {
    font-size: 1.75rem;
}

.cu-payment-card.cash .payment-icon {
    background: rgba(113, 221, 55, 0.15);
}
.cu-payment-card.cash .payment-icon i {
    color: #71dd37;
}

.cu-payment-card.cheque .payment-icon {
    background: rgba(11, 107, 184, 0.15);
}
.cu-payment-card.cheque .payment-icon i {
    color: #0b6bb8;
}

.cu-payment-card.card .payment-icon {
    background: rgba(3, 195, 236, 0.15);
}
.cu-payment-card.card .payment-icon i {
    color: #03c3ec;
}

.cu-payment-card.voucher .payment-icon {
    background: rgba(255, 171, 0, 0.15);
}
.cu-payment-card.voucher .payment-icon i {
    color: #ffab00;
}

.cu-payment-card.payout .payment-icon {
    background: rgba(255, 62, 29, 0.15);
}
.cu-payment-card.payout .payment-icon i {
    color: #ff3e1d;
}

.cu-payment-card .payment-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cu-payment-card .payment-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8592a3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cu-payment-card .payment-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #566a7f;
}

.cu-payment-card .payment-note {
    font-size: 0.6875rem;
    color: #ff3e1d;
    margin-top: 0.375rem;
}

/* VAT Table */
.cu-vat-table-wrap {
    overflow-x: auto;
}

.cu-vat-table {
    width: 100%;
    border-collapse: collapse;
}

.cu-vat-table th {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8592a3;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid #e7e7e8;
}

.cu-vat-table th:not(:first-child) {
    text-align: right;
}

.cu-vat-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.cu-vat-table td.vat-category {
    font-weight: 500;
    color: #566a7f;
    font-size: 0.875rem;
}

.cu-vat-table td:not(:first-child) {
    text-align: right;
}

.cu-vat-table td .cu-input {
    text-align: right;
    max-width: 120px;
    margin-left: auto;
}

/* Summary Card */
.cu-summary-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.cu-summary-card.sticky {
    position: sticky;
    top: 80px;
}

.cu-summary-card .summary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
}

.cu-summary-card .summary-header i {
    font-size: 1.25rem;
}

.cu-summary-card .summary-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.cu-summary-card .summary-body {
    padding: 1rem 1.25rem;
}

.cu-summary-card .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.cu-summary-card .summary-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #697a8d;
}

.cu-summary-card .summary-label i {
    font-size: 1rem;
}

.cu-summary-card .summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}

.cu-summary-card .summary-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0.5rem 0;
}

.cu-summary-card .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.cu-summary-card .summary-total span:first-child {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0b6bb8;
}

.cu-summary-card .summary-total .total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b6bb8;
}

.cu-summary-card .summary-discrepancy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.cu-summary-card .summary-discrepancy span:first-child {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #697a8d;
}

.cu-summary-card .summary-discrepancy .discrepancy-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #566a7f;
}

.cu-summary-card .summary-discrepancy.success {
    background: rgba(113, 221, 55, 0.1);
}

.cu-summary-card .summary-discrepancy.success .discrepancy-amount {
    color: #71dd37;
}

.cu-summary-card .summary-discrepancy.danger {
    background: rgba(255, 62, 29, 0.1);
}

.cu-summary-card .summary-discrepancy.danger .discrepancy-amount {
    color: #ff3e1d;
}

.cu-summary-card .summary-vat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-top: 1px dashed #e7e7e8;
    margin-top: 0.5rem;
}

.cu-summary-card .summary-vat span:first-child {
    font-size: 0.75rem;
    color: #a1acb8;
}

.cu-summary-card .summary-vat .vat-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffab00;
}

.cu-summary-card .summary-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e7e7e8;
    background: #fafbfc;
}

.cu-summary-card .btn-cancel-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #697a8d;
    background: #ffffff;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cu-summary-card .btn-cancel-action:hover {
    background: #f5f5f9;
    color: #566a7f;
}

.cu-summary-card .btn-submit-action {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cu-summary-card .btn-submit-action:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.4);
    transform: translateY(-1px);
}

.cu-summary-card .btn-submit-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Validation Alert */
.cu-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.cu-alert i {
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.cu-alert.error {
    background: rgba(255, 62, 29, 0.08);
    color: #d93616;
    border: 1px solid rgba(255, 62, 29, 0.2);
}

.cu-alert.warning {
    background: rgba(255, 171, 0, 0.08);
    color: #b57a00;
    border: 1px solid rgba(255, 171, 0, 0.2);
}

.cu-alert.success {
    background: rgba(113, 221, 55, 0.08);
    color: #4ca920;
    border: 1px solid rgba(113, 221, 55, 0.2);
}

/* ========================================
   Cash Modal V2 - Vertical Table Layout
   ======================================== */

.cash-modal-v2 {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Make Cash Modal XL size bigger */
#cashModal.modal-xl {
    max-width: 1200px;
}

#cashModal .modal-dialog.modal-xl {
    max-width: 1200px;
    width: 95%;
}

.cash-modal-header-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
}

.cash-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.cash-header-text {
    flex: 1;
}

.cash-header-text h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.cash-header-text p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

.cash-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cash-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.cash-modal-body-v2 {
    padding: 0;
    background: #f8fafc;
    max-height: 60vh;
    overflow-y: auto;
}

/* 50/50 Split Layout */
.cash-modal-split-layout {
    display: flex;
    gap: 0;
    min-height: 100%;
}

.cash-denomination-form {
    flex: 0 0 50%;
    width: 50%;
    border-right: 1px solid #e7e7e8;
    background: #ffffff;
    overflow-y: auto;
    max-height: 60vh;
}

.available-cash-display {
    flex: 0 0 50%;
    width: 50%;
    background: #f8fafc;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    max-height: 60vh;
}

.cash-table-container {
    padding: 1rem;
}

/* Available Cash Display */
.available-cash-card {
    width: 100%;
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.available-cash-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e7e7e8;
}

.available-cash-header i {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.available-cash-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.available-cash-body {
    padding: 1.25rem;
}

.available-cash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.available-cash-item:last-of-type {
    border-bottom: none;
}

.available-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.available-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.available-cash-divider {
    height: 1px;
    background: #e7e7e8;
    margin: 0.75rem 0;
}

.available-cash-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.available-total-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.available-total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b6bb8;
}

/* Cash Section */
.cash-section {
    margin-bottom: 1rem;
}

.cash-section:last-child {
    margin-bottom: 0;
}

.cash-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.cash-section-title.notes {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
    color: #7c3aed;
}

.cash-section-title.coins {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1) 0%, rgba(202, 138, 4, 0.1) 100%);
    color: #ca8a04;
}

.cash-section-title i {
    font-size: 1.125rem;
}

/* Cash Row - Vertical Layout */
.cash-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    margin-bottom: 0.625rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-height: 70px;
}

.cash-row .cash-subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.cash-row:last-child {
    margin-bottom: 0;
}

/* Denomination Badge */
.cash-denom {
    flex: 0 0 80px;
}

.denom-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 36px;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.denom-badge.note {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

.denom-badge.coin {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
}

/* Quantity Controls */
.cash-qty-controls {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.25rem 0;
}

.qty-btn {
    width: 42px;
    height: 42px;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 1;
}

.qty-btn.minus {
    border-color: #fee2e2;
    background: #fef2f2;
    color: #dc2626;
}

.qty-btn.plus {
    border-color: #dcfce7;
    background: #f0fdf4;
    color: #16a34a;
}

.qty-btn:active {
    transform: scale(0.92);
}

.qty-btn.minus:active {
    background: #fee2e2;
}

.qty-btn.plus:active {
    background: #dcfce7;
}

.qty-input {
    width: 80px;
    height: 42px;
    padding: 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.qty-input:focus {
    border-color: #0b6bb8;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.15);
    transform: scale(1.02);
}

/* Subtotal */
.cash-subtotal {
    flex: 0 0 140px;
    text-align: right;
    padding-left: 0.75rem;
    min-width: 140px;
}

.subtotal-label {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.subtotal-value {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    color: #22c55e;
    line-height: 1.2;
}

/* Cash Modal Footer V2 */
.cash-modal-footer-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-top: 2px solid #e2e8f0;
}

.cash-grand-total {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.grand-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.grand-value {
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
}

.cash-footer-btns {
    display: flex;
    gap: 0.75rem;
}

.btn-cash-cancel {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cash-cancel:hover {
    background: #e2e8f0;
    color: #475569;
}

.btn-cash-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cash-confirm:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

/* Responsive Cash Modal */
@media (max-width: 576px) {
    .cash-modal-header-v2 {
        padding: 1rem;
    }
    
    .cash-row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .cash-denom {
        flex: 0 0 auto;
    }
    
    .cash-qty-controls {
        flex: 1 1 100%;
        order: 3;
    }
    
    .cash-subtotal {
        flex: 1;
        min-width: 120px;
        text-align: right;
    }
    
    .subtotal-label {
        font-size: 0.6875rem;
    }
    
    .subtotal-value {
        font-size: 1.125rem;
    }
    
    .cash-modal-footer-v2 {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .cash-footer-btns {
        width: 100%;
    }
    
    .cash-footer-btns button {
        flex: 1;
    }
}

.btn-modal-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background: #e2e8f0;
    color: #475569;
}

.btn-modal-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-confirm.green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.btn-modal-confirm.green:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

.btn-modal-confirm.purple {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
}

.btn-modal-confirm.purple:hover {
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.4);
    transform: translateY(-1px);
}

.btn-modal-confirm.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.btn-modal-confirm.cyan:hover {
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
    transform: translateY(-1px);
}

.btn-modal-confirm.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.btn-modal-confirm.orange:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.btn-modal-confirm.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.btn-modal-confirm.red:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

/* ========================================
   Entry Modal Styles (Cheque, Card, etc.)
   ======================================== */

.entry-modal-new {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.entry-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    color: #ffffff;
}

.entry-modal-header.purple {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
}

.entry-modal-header.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.entry-modal-header.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.entry-modal-header.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.entry-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.entry-modal-title {
    flex: 1;
}

.entry-modal-title h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.entry-modal-title p {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.9;
}

.entry-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.entry-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.entry-modal-body {
    padding: 1.5rem;
    background: #f8fafc;
}

/* Entry Form Card */
.entry-form-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
}

.entry-form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.entry-form-row:last-child {
    margin-bottom: 0;
}

.entry-form-row.single {
    flex-wrap: wrap;
}

.entry-field {
    flex: 1;
    min-width: 0;
}

.entry-field.amount {
    flex: 0 0 140px;
}

.entry-field.full {
    flex: 1 1 100%;
}

.entry-field label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entry-field label i {
    font-size: 0.875rem;
}

.entry-input,
.entry-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.entry-input:focus,
.entry-select:focus {
    border-color: #0b6bb8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
    outline: none;
}

.entry-input::placeholder {
    color: #94a3b8;
}

.entry-amount-input {
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.entry-amount-input:focus-within {
    border-color: #0b6bb8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
}

.entry-amount-input .currency {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background: #e2e8f0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.9375rem;
}

.entry-amount-input input {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    border: none;
    background: transparent;
    outline: none;
    min-width: 0;
}

.entry-amount-input.large {
    font-size: 1.25rem;
}

.entry-amount-input.large input {
    font-size: 1.25rem;
    padding: 1rem;
}

.entry-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: fit-content;
}

.entry-add-btn.purple {
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
}

.entry-add-btn.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.entry-add-btn.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.entry-add-btn.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.entry-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Entry List Container */
.entry-list-container {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.entry-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.entry-list-header span:first-child {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entry-count {
    font-size: 0.75rem;
    color: #94a3b8;
}

.entry-list {
    max-height: 200px;
    overflow-y: auto;
}

.entry-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: #94a3b8;
}

.entry-empty-state i {
    font-size: 2.5rem;
    opacity: 0.4;
}

.entry-empty-state span {
    font-size: 0.875rem;
}

/* Entry List Item */
.entry-list-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.entry-list-item:last-child {
    border-bottom: none;
}

.entry-list-item:hover {
    background: #f8fafc;
}

.entry-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.entry-item-icon.purple {
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
}

.entry-item-icon.cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

.entry-item-icon.orange {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.entry-item-icon.red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.entry-item-info {
    flex: 1;
    min-width: 0;
}

.entry-item-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-item-subtitle {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.125rem;
}

.entry-item-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #22c55e;
    white-space: nowrap;
}

.entry-item-amount.red {
    color: #ef4444;
}

.entry-item-delete {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
    opacity: 0;
}

.entry-list-item:hover .entry-item-delete {
    opacity: 1;
}

.entry-item-delete:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Entry Modal Footer */
.entry-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.entry-total {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.entry-total span {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-total strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22c55e;
}

.entry-total.red strong {
    color: #ef4444;
}

.entry-modal-actions {
    display: flex;
    gap: 0.75rem;
}

/* Responsive Modal Styles */
@media (max-width: 992px) {
    .denom-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .cash-modal-header,
    .entry-modal-header {
        padding: 1rem;
    }
    
    .cash-modal-body,
    .entry-modal-body {
        padding: 1rem;
    }
    
    .denom-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .denom-card {
        padding: 0.75rem;
    }
    
    .denom-card-value {
        font-size: 1.25rem;
    }
    
    .cash-modal-footer,
    .entry-modal-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cash-total-display,
    .entry-total {
        text-align: center;
    }
    
    .cash-modal-actions,
    .entry-modal-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .cash-modal-actions button,
    .entry-modal-actions button {
        flex: 1;
    }
    
    .entry-form-row {
        flex-direction: column;
    }
    
    .entry-field.amount {
        flex: 1 1 100%;
    }
    
    .entry-add-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .cashing-up-layout {
        grid-template-columns: 1fr 300px;
    }
    
    .cu-payment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .cashing-up-layout {
        grid-template-columns: 1fr;
    }
    
    .cashing-up-sidebar {
        order: -1;
    }
    
    .cu-summary-card.sticky {
        position: relative;
        top: 0;
    }
    
    .cu-form-row.five-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cu-denom-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cashing-up-header-wrapper {
        margin-bottom: 1.5rem;
    }
    
    .cashing-up-header-card {
        border-radius: 0.375rem;
    }
    
    .cashing-up-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }
    
    .cashing-up-header .header-left {
        width: 100%;
    }
    
    .cashing-up-header .header-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .cashing-up-header .header-info h1 {
        font-size: 1.5rem;
    }
    
    .cashing-up-header .header-info h1::before {
        height: 24px;
    }
    
    .cashing-up-header .record-badge {
        width: 100%;
        justify-content: center;
    }
    
    .cu-form-row.three-cols,
    .cu-form-row.five-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cu-payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cu-denom-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cu-summary-card .summary-actions {
        flex-direction: column;
    }
    
    .cu-summary-card .btn-cancel-action,
    .cu-summary-card .btn-submit-action {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cu-form-row.three-cols,
    .cu-form-row.five-cols {
        grid-template-columns: 1fr;
    }
    
    .cu-payment-grid {
        grid-template-columns: 1fr;
    }
    
    .cu-denom-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Create Policy / Holiday / End of Month
   Form Pages - Modern Styles
   ======================================== */

/* Form Page Header */
.form-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-page-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-page-header .header-content {
    display: flex;
    flex-direction: column;
}

.form-page-header .page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-page-header .page-title i {
    color: #0b6bb8;
    font-size: 1.75rem;
}

.form-page-header .page-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #a1acb8;
}

.record-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2rem;
}

/* Form Layout Grid */
.form-layout-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

.form-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Form Section Card */
.form-section-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.section-card-header .section-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.section-card-header.purple .section-icon {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
}

.section-card-header.cyan .section-icon {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(0, 184, 217, 0.15) 100%);
    color: #03c3ec;
}

.section-card-header.green .section-icon {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(40, 167, 69, 0.15) 100%);
    color: #71dd37;
}

.section-card-header.orange .section-icon {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.15) 0%, rgba(253, 126, 20, 0.15) 100%);
    color: #ffab00;
}

.section-card-header .section-title h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.section-card-header .section-title span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.section-card-body {
    padding: 1.25rem;
}

/* Modern Form Elements */
.form-group-modern {
    margin-bottom: 1.25rem;
}

.form-group-modern:last-child {
    margin-bottom: 0;
}

.form-label-modern {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.form-label-modern i {
    color: #697a8d;
    font-size: 1rem;
}

.form-label-modern .required {
    color: #ff3e1d;
}

.form-input-modern,
.form-select-modern,
.form-textarea-modern {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    color: #566a7f;
    background: #ffffff;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.form-input-modern:focus,
.form-select-modern:focus,
.form-textarea-modern:focus {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.1);
    outline: none;
}

.form-input-modern::placeholder,
.form-textarea-modern::placeholder {
    color: #a1acb8;
}

.form-input-modern.is-invalid,
.form-textarea-modern.is-invalid {
    border-color: #ff3e1d;
}

.form-textarea-modern {
    resize: vertical;
    min-height: 100px;
}

.input-helper {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.375rem;
}

.char-counter {
    font-size: 0.75rem;
    color: #a1acb8;
}

.error-message {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #ff3e1d;
}

/* Policy create / edit — layout & document type cards */
.form-page-header .header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.policy-header-actions .btn-add-policy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0b6bb8;
    background: #fff;
    border: 1px solid #0b6bb8;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.policy-header-actions .btn-add-policy:hover {
    background: #0b6bb8;
    color: #fff;
}

.policy-form-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 0.35rem;
    width: fit-content;
}

.policy-form-mode-badge.is-create {
    background: rgba(113, 221, 55, 0.15);
    color: #2e7d32;
}

.policy-form-mode-badge.is-edit {
    background: rgba(255, 171, 0, 0.18);
    color: #b45309;
}

.policy-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

@media (max-width: 576px) {
    .policy-form-row-2 {
        grid-template-columns: 1fr;
    }
}

.policy-date-field {
    max-width: 280px;
}

.policy-doc-type-field {
    margin-top: 0.25rem;
}

.policy-doc-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .policy-doc-type-grid {
        grid-template-columns: 1fr;
    }
}

.policy-doc-type-card {
    position: relative;
    margin: 0;
}

.policy-doc-type-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.policy-doc-type-card label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    height: 100%;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 2px solid #e7e7e8;
    border-radius: 0.625rem;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.policy-doc-type-card label:hover {
    border-color: #c7c9d1;
    background: #fff;
}

.policy-doc-type-card input:focus-visible + label {
    outline: 2px solid #0b6bb8;
    outline-offset: 2px;
}

.policy-doc-type-card input:checked + label {
    border-color: #0b6bb8;
    background: rgba(11, 107, 184, 0.06);
    box-shadow: 0 0 0 3px rgba(11, 107, 184, 0.12);
}

.policy-doc-type-card .pdt-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.policy-doc-type-card .pdt-title i {
    font-size: 1.1rem;
    color: #0b6bb8;
}

.policy-doc-type-card .pdt-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #8a94a6;
}

.policy-email-hint {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.08) 0%, rgba(11, 107, 184, 0.08) 100%);
    border: 1px solid rgba(11, 107, 184, 0.2);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #566a7f;
}

.policy-email-hint strong {
    color: #434c5e;
}

.policy-email-hint ul {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}

.policy-email-hint li {
    margin-bottom: 0.35rem;
}

.input-helper-block {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #8a94a6;
}

.char-counter.is-warn {
    color: #ff9f43;
    font-weight: 600;
}

.char-counter.is-max {
    color: #ff3e1d;
}

/* File Upload Zone */
.file-upload-zone {
    border: 2px dashed #d9dee3;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafbfc;
}

.file-upload-zone:hover,
.file-upload-zone.drag-over {
    border-color: #0b6bb8;
    background: rgba(11, 107, 184, 0.05);
}

.file-upload-zone .file-input-hidden {
    display: none;
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.upload-content .upload-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(0, 184, 217, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-content .upload-icon i {
    font-size: 2rem;
    color: #03c3ec;
}

.upload-content h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.upload-content p {
    margin: 0;
    font-size: 0.875rem;
    color: #a1acb8;
}

.upload-content .browse-link {
    color: #0b6bb8;
    font-weight: 500;
    cursor: pointer;
}

.file-formats {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.format-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
}

.format-badge.pdf {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.format-badge.doc,
.format-badge.docx {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.file-size-limit {
    font-size: 0.75rem;
    color: #a1acb8;
    margin-top: 0.5rem;
}

/* File Preview */
.file-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
}

.file-preview .preview-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    background: #f5f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview .preview-icon i {
    font-size: 1.5rem;
}

.file-preview .preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.file-preview .file-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #566a7f;
}

.file-preview .file-size {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.file-preview .remove-file-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 62, 29, 0.1);
    color: #ff3e1d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.file-preview .remove-file-btn:hover {
    background: #ff3e1d;
    color: #ffffff;
}

.current-file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(113, 221, 55, 0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #566a7f;
}

.current-file-info i {
    color: #71dd37;
}

.view-file-link {
    margin-left: auto;
    color: #0b6bb8;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.view-file-link:hover {
    text-decoration: underline;
}

/* Sidebar Cards */
.sidebar-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e7e7e8;
}

.sidebar-card-header i {
    font-size: 1.25rem;
    color: #0b6bb8;
}

.sidebar-card-header h6 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.sidebar-card-body {
    padding: 1rem 1.25rem;
}

.sidebar-card.tips .sidebar-card-header i {
    color: #ffab00;
}

.sidebar-card.help .sidebar-card-header i {
    color: #03c3ec;
}

.sidebar-card.summary .sidebar-card-header i {
    color: #71dd37;
}

.sidebar-card.info .sidebar-card-header i {
    color: #8592a3;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: #697a8d;
    border-bottom: 1px solid #f0f0f0;
}

.tips-list li:last-child {
    border-bottom: none;
}

.tips-list li i {
    color: #71dd37;
    font-size: 1rem;
    margin-top: 0.125rem;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    color: #697a8d;
}

.info-list li .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0b6bb8;
    flex-shrink: 0;
}

.info-list.small li {
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #0b6bb8;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.help-link:hover {
    text-decoration: underline;
}

.sidebar-card-body p {
    margin: 0;
    font-size: 0.8125rem;
    color: #697a8d;
    line-height: 1.5;
}

/* Summary Items */
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.summary-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
}

.form-actions.sticky {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 1rem 1.25rem;
    margin: 1.25rem -1.25rem -1.25rem;
    border-top: 1px solid #e7e7e8;
    border-radius: 0 0 0.75rem 0.75rem;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #697a8d;
    background: #f5f5f9;
    border: 1px solid #d9dee3;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #eceef1;
    color: #566a7f;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #08548f 0%, #4a4cc9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.btn-submit.orange {
    background: linear-gradient(135deg, #ffab00 0%, #e09800 100%);
}

.btn-submit.orange:hover {
    background: linear-gradient(135deg, #e09800 0%, #c78600 100%);
    box-shadow: 0 4px 12px rgba(255, 171, 0, 0.3);
}

.btn-submit.green {
    background: linear-gradient(135deg, #71dd37 0%, #5cc429 100%);
}

.btn-submit.green:hover {
    background: linear-gradient(135deg, #5cc429 0%, #4aaf1e 100%);
    box-shadow: 0 4px 12px rgba(113, 221, 55, 0.3);
}

/* Holiday Form Grid */
.holiday-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Date Preview Card */
.date-preview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.1) 0%, rgba(253, 126, 20, 0.1) 100%);
    border: 1px solid rgba(255, 171, 0, 0.2);
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.preview-day {
    display: flex;
    flex-direction: column;
}

.day-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffab00;
}

.day-full-date {
    font-size: 0.875rem;
    color: #697a8d;
}

.preview-countdown {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #ffffff;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
}

.preview-countdown i {
    color: #ffab00;
}

.preview-countdown.today {
    background: #71dd37;
    color: #ffffff;
}

.preview-countdown.today i {
    color: #ffffff;
}

.preview-countdown.soon {
    background: #03c3ec;
    color: #ffffff;
}

.preview-countdown.soon i {
    color: #ffffff;
}

.preview-countdown.past {
    background: #8592a3;
    color: #ffffff;
}

.preview-countdown.past i {
    color: #ffffff;
}

/* Quick Date Selector */
.quick-date-selector,
.quick-month-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #e7e7e8;
}

.quick-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #a1acb8;
    white-space: nowrap;
}

.quick-date-buttons,
.quick-month-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-date-btn,
.quick-month-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-date-btn:hover,
.quick-month-btn:hover {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
}

.quick-month-btn.active {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
}

/* ========================================
   End of Month Report - Selection Card
   ======================================== */

.end-month-container {
    max-width: 1200px;
    margin: 0 auto;
}

.selection-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.selection-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
}

.selection-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.selection-content h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.selection-content p {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    opacity: 0.85;
}

.selection-card-body {
    padding: 1.5rem;
}

.selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.25rem;
    align-items: end;
}

.selection-item {
    display: flex;
    flex-direction: column;
}

.selection-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.selection-label i {
    color: #697a8d;
}

.single-store-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #566a7f;
}

.store-avatar {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-load-report {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-load-report:hover {
    background: linear-gradient(135deg, #08548f 0%, #4a4cc9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

.btn-load-report:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Selected Info Banner */
.selected-info-banner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(11, 107, 184, 0.2);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.selected-info-banner .info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #566a7f;
}

.selected-info-banner .info-item i {
    color: #0b6bb8;
    font-size: 1.125rem;
}

.change-selection-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0b6bb8;
    background: #ffffff;
    border: 1px solid #0b6bb8;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.change-selection-btn:hover {
    background: #0b6bb8;
    color: #ffffff;
}

/* Report Section Cards */
.report-section-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.report-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e7e7e8;
}

.report-section-header .section-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.report-section-header.green {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.report-section-header.green .section-icon {
    background: rgba(113, 221, 55, 0.15);
    color: #71dd37;
}

.report-section-header.cyan {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.1) 0%, rgba(0, 184, 217, 0.05) 100%);
}

.report-section-header.cyan .section-icon {
    background: rgba(3, 195, 236, 0.15);
    color: #03c3ec;
}

.report-section-header.purple {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.report-section-header.purple .section-icon {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.report-section-header .section-info {
    flex: 1;
}

.report-section-header .section-info h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.report-section-header .section-info span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.section-badge {
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2rem;
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
}

.report-section-header.green .section-badge {
    background: rgba(113, 221, 55, 0.15);
    color: #5cc429;
}

.report-section-header.cyan .section-badge {
    background: rgba(3, 195, 236, 0.15);
    color: #00a4c4;
}

.report-section-body {
    padding: 1.25rem;
}

/* Report Fields Grid */
.report-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.report-fields-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.report-field {
    display: flex;
    flex-direction: column;
}

.report-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    margin-bottom: 0.375rem;
}

/* Currency inputs: prefix + value must sit side-by-side (no overlap) */
.report-field .input-with-prefix,
.report-field .input-wrapper.has-prefix {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.report-field .input-with-prefix .input-prefix,
.report-field .input-wrapper.has-prefix .input-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: 0 0.75rem;
    background: #f5f5f9;
    border: 1px solid #d9dee3;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #697a8d;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    pointer-events: none;
}

.report-field .input-with-prefix .form-input-modern,
.report-field .input-wrapper.has-prefix .form-input-modern {
    width: 0;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.75rem;
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Total Items Summary */
.total-items-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
    border: 1px solid rgba(113, 221, 55, 0.2);
    border-radius: 0.75rem;
    margin-top: 1.25rem;
}

.total-items-summary .total-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    background: rgba(113, 221, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #71dd37;
}

.total-items-summary .total-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.total-items-summary .total-label {
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.total-items-summary .total-sublabel {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.total-items-summary .total-value {
    display: flex;
    align-items: center;
}

.total-items-summary .total-input {
    width: 120px;
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #71dd37;
    background: #ffffff;
    border: 2px solid rgba(113, 221, 55, 0.3);
    border-radius: 0.5rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 1200px) {
    .form-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .form-sidebar {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .sidebar-card {
        flex: 1;
        min-width: 250px;
    }
    
    .report-fields-grid.four-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .selection-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .selection-item.action {
        grid-column: span 2;
        justify-content: center;
    }
    
    .btn-load-report {
        width: 100%;
        justify-content: center;
    }
    
    .report-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .report-fields-grid.four-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .holiday-form-grid {
        grid-template-columns: 1fr;
    }
    
    .date-preview-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .quick-date-selector,
    .quick-month-selector {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .selection-grid {
        grid-template-columns: 1fr;
    }
    
    .selection-item.action {
        grid-column: span 1;
    }
    
    .selected-info-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .change-selection-btn {
        margin-left: 0;
    }
    
    .report-fields-grid,
    .report-fields-grid.four-cols {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Cash Audit Page Styles
   ======================================== */

.cash-audit-page {
    width: 100%;
}

.cash-audit-page .store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.25);
}

/* Summary Cards */
.cash-audit-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.cash-audit-summary .summary-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.cash-audit-summary .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.summary-icon.purple {
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
}

.summary-icon.cyan {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(0, 153, 204, 0.15) 100%);
    color: #03c3ec;
}

.summary-icon.green {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

.summary-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.summary-label {
    font-size: 0.8125rem;
    color: #8592a3;
    margin-bottom: 0.25rem;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
}

/* Cash Audit Card */
.cash-audit-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.cash-audit-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e7e7e8;
}

.card-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
}

.card-header-icon.green {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

.card-header-icon.red {
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.15) 0%, rgba(220, 53, 69, 0.15) 100%);
    color: #ff3e1d;
}

.card-header-icon.orange {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.15) 0%, rgba(255, 145, 0, 0.15) 100%);
    color: #ffab00;
}

.card-header-content {
    flex: 1;
    min-width: 0;
}

.card-header-content h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #566a7f;
}

.card-header-content span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #8592a3;
}

.cash-audit-card-body {
    padding: 1.5rem;
}

/* Audit Form Grid */
.audit-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.audit-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audit-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}

.audit-label i {
    color: #0b6bb8;
    font-size: 1rem;
}

.audit-label .required {
    color: #ff3e1d;
}

.audit-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.audit-input-wrapper .input-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8592a3;
    font-weight: 600;
    font-size: 0.9375rem;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

.audit-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #566a7f;
    background: #ffffff;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    box-sizing: border-box;
    min-width: 0;
}

.audit-input::-webkit-outer-spin-button,
.audit-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.audit-input:focus {
    padding-left: 2.75rem;
}

.audit-input:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.audit-input.is-invalid {
    border-color: #ff3e1d;
}

.audit-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #566a7f;
    background: #ffffff;
    transition: all 0.2s ease;
    resize: vertical;
    font-family: inherit;
}

.audit-textarea:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

.audit-textarea::placeholder {
    color: #a1acb8;
}

.error-message {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #ff3e1d;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.error-message i {
    font-size: 0.875rem;
}

/* Discrepancy Card */
.discrepancy-card {
    transition: all 0.3s ease;
}

.discrepancy-card.discrepancy-neutral {
    border-color: #71dd37;
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.02) 0%, rgba(86, 184, 50, 0.02) 100%);
}

.discrepancy-card.discrepancy-positive {
    border-color: #71dd37;
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.02) 0%, rgba(86, 184, 50, 0.02) 100%);
}

.discrepancy-card.discrepancy-negative {
    border-color: #ff3e1d;
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.02) 0%, rgba(220, 53, 69, 0.02) 100%);
}

.discrepancy-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.discrepancy-label {
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.discrepancy-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #566a7f;
}

.discrepancy-card.discrepancy-neutral .discrepancy-value {
    color: #71dd37;
}

.discrepancy-card.discrepancy-positive .discrepancy-value {
    color: #71dd37;
}

.discrepancy-card.discrepancy-negative .discrepancy-value {
    color: #ff3e1d;
}

/* Action Buttons */
.cash-audit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e7e7e8;
    margin-top: 1.5rem;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #f5f5f9;
    color: #697a8d;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #e7e7e8;
    color: #566a7f;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.25);
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.35);
}

/* Responsive */
@media (max-width: 992px) {
    .cash-audit-summary {
        grid-template-columns: 1fr;
    }
    
    .audit-form-grid {
        grid-template-columns: 1fr;
    }
    
    .cash-audit-actions {
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Cash Audit Logs Page Styles
   ======================================== */

.cash-audit-logs-page {
    width: 100%;
}

.cash-audit-logs-page .store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.25);
}

/* Audit Logs Table */
.audit-logs-table {
    width: 100%;
}

.audit-logs-table thead th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #566a7f;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid #e7e7e8;
    white-space: nowrap;
}

.audit-logs-table tbody tr {
    transition: background-color 0.15s ease;
}

.audit-logs-table tbody tr:hover {
    background-color: rgba(11, 107, 184, 0.04);
}

.audit-logs-table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e8;
    color: #697a8d;
    font-size: 0.875rem;
}

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

/* Date Cell */
.audit-logs-table .date-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.audit-logs-table .date-cell i {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #0b6bb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.audit-logs-table .date-cell .date-value {
    display: block;
    font-weight: 600;
    color: #566a7f;
}

.audit-logs-table .date-cell .time-value {
    display: block;
    font-size: 0.75rem;
    color: #8592a3;
    margin-top: 0.125rem;
}

/* Amount Value */
.audit-logs-table .amount-value {
    font-weight: 600;
    color: #566a7f;
}

/* Discrepancy Badge */
.discrepancy-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.discrepancy-badge.neutral {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

.discrepancy-badge.positive {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(86, 184, 50, 0.15) 100%);
    color: #71dd37;
}

.discrepancy-badge.negative {
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.15) 0%, rgba(220, 53, 69, 0.15) 100%);
    color: #ff3e1d;
}

.discrepancy-badge i {
    font-size: 0.875rem;
}

/* User Cell */
.audit-logs-table .user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.audit-logs-table .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.audit-logs-table .user-name {
    font-weight: 500;
    color: #566a7f;
}

/* Notes Button */
.btn-notes-view {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(11, 107, 184, 0.1);
    color: #0b6bb8;
    border: 1px solid rgba(11, 107, 184, 0.2);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
}

.btn-notes-view:hover {
    background: rgba(11, 107, 184, 0.15);
    color: #0b6bb8;
}

.btn-notes-view i {
    font-size: 0.875rem;
}

/* Notes Modal */
.notes-content {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.notes-content p {
    margin: 0;
    color: #566a7f;
    line-height: 1.6;
}

.notes-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #8592a3;
    font-size: 0.8125rem;
}

.notes-meta i {
    font-size: 0.875rem;
}

/* Page Size Form */
.page-size-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-size-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.875rem;
    color: #697a8d;
    font-weight: 500;
}

.page-size-label i {
    color: #0b6bb8;
}

.page-size-select {
    padding: 0.375rem 0.75rem;
    border: 1px solid #e7e7e8;
    border-radius: 0.375rem;
    color: #697a8d;
    background: #ffffff;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-select:focus {
    border-color: #0b6bb8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(11, 107, 184, 0.1);
}

/* Empty State */
.cash-audit-logs-page .empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.cash-audit-logs-page .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(11, 107, 184, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b6bb8;
    font-size: 2rem;
}

.cash-audit-logs-page .empty-state h6 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #566a7f;
}

.cash-audit-logs-page .empty-state p {
    margin: 0;
    color: #8592a3;
    font-size: 0.9375rem;
}

/* Responsive */
@media (max-width: 992px) {
    .audit-logs-table {
        font-size: 0.8125rem;
    }
    
    .audit-logs-table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.6875rem;
    }
    
    .audit-logs-table tbody td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .audit-logs-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .audit-logs-table .date-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .audit-logs-table .user-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ========================================
   Order Request Details Page Styles
   ======================================== */

.order-details-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-label i {
    font-size: 1rem;
    color: var(--theme-secondary);
}

.detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Store Badge Detail */
.store-badge-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(3, 195, 236, 0.08) 100%);
    color: #03c3ec;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.store-badge-detail i {
    font-size: 1.125rem;
}

/* Date Display Detail */
.date-display-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #566a7f;
    font-weight: 600;
}

.date-display-detail i {
    color: var(--theme-secondary);
    font-size: 1rem;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.status-badge i {
    font-size: 1rem;
}

.status-badge.status-orange {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.15) 0%, rgba(255, 171, 0, 0.08) 100%);
    color: #ffab00;
}

.status-badge.status-green {
    background: linear-gradient(135deg, rgba(113, 221, 55, 0.15) 0%, rgba(113, 221, 55, 0.08) 100%);
    color: #71dd37;
}

.status-badge.status-red {
    background: linear-gradient(135deg, rgba(255, 62, 29, 0.15) 0%, rgba(255, 62, 29, 0.08) 100%);
    color: #ff3e1d;
}

.status-badge.status-cyan {
    background: linear-gradient(135deg, rgba(3, 195, 236, 0.15) 0%, rgba(3, 195, 236, 0.08) 100%);
    color: #03c3ec;
}

/* Order Items List */
.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.order-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e8;
    transition: all 0.2s ease;
}

.order-item-card:hover {
    background: #f0f0f0;
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(11, 107, 184, 0.1);
}

.order-item-number {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.order-item-content {
    flex: 1;
}

.order-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
    line-height: 1.5;
}

/* Notes Content */
.notes-content {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 3px solid var(--theme-warning);
}

.notes-content p {
    margin: 0;
    font-size: 0.9375rem;
    color: #566a7f;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* User Display */
.user-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #566a7f;
    font-weight: 600;
}

.user-display i {
    color: var(--theme-secondary);
    font-size: 1.125rem;
}

/* Empty State Mini */
.empty-state-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: #a1acb8;
}

.empty-state-mini i {
    font-size: 2.5rem;
    color: #d9dee3;
}

.empty-state-mini span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Gray Icon */
.gray-icon {
    background: linear-gradient(135deg, rgba(133, 146, 163, 0.15) 0%, rgba(133, 146, 163, 0.08) 100%);
    color: var(--theme-secondary);
}

/* Responsive Styles for Order Details */
@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .order-item-card {
        padding: 0.875rem;
    }

    .order-item-number {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-cancel,
    .form-actions .btn-submit {
        width: 100%;
    }
}

/* ========================================
   END OF MONTH – IMPROVED UI (v2)
   ======================================== */

/* ---------- Listing Page Enhancements ---------- */

/* Hero-style page header */
.eom-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 60%, #a855f7 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(11, 107, 184, 0.35);
}

.eom-page-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.eom-page-header::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 100px;
    width: 240px;
    height: 240px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.eom-page-header .eom-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1;
}

.eom-page-header .eom-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff;
    flex-shrink: 0;
}

.eom-page-header .eom-header-text h4 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.eom-page-header .eom-header-text p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.eom-page-header .eom-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 1;
}

.eom-btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.eom-btn-export:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.eom-btn-create {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0b6bb8;
    background: #ffffff;
    border: none;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.eom-btn-create:hover {
    background: #f0f0ff;
    color: #08548f;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Listing Filter Card */
.eom-filter-card {
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.eom-filter-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.eom-filter-header i {
    color: #0b6bb8;
    font-size: 1.125rem;
}

.eom-filter-header h6 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.eom-filter-header span {
    margin-left: auto;
    font-size: 0.8125rem;
    color: #a1acb8;
}

.eom-filter-body {
    padding: 1.25rem 1.5rem;
}

.eom-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.eom-filter-item label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    margin-bottom: 0.5rem;
}

.eom-filter-item label i {
    color: #0b6bb8;
}

.eom-btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 100%;
    min-height: 40px;
}

.eom-btn-search:hover {
    background: linear-gradient(135deg, #08548f 0%, #4a4cc9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 107, 184, 0.3);
}

/* Stats Metric Cards */
.eom-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.eom-metric-card {
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e7e7e8;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.eom-metric-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.eom-metric-card.purple::after { background: linear-gradient(180deg, #0b6bb8, #8b5cf6); }
.eom-metric-card.green::after  { background: linear-gradient(180deg, #71dd37, #5bb52c); }
.eom-metric-card.cyan::after   { background: linear-gradient(180deg, #03c3ec, #0099bb); }
.eom-metric-card.orange::after { background: linear-gradient(180deg, #ffab00, #ff8800); }

.eom-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.eom-metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.eom-metric-card.purple .eom-metric-icon {
    background: linear-gradient(135deg, rgba(11,107,184,0.15), rgba(139,92,246,0.15));
    color: #0b6bb8;
}

.eom-metric-card.green .eom-metric-icon {
    background: linear-gradient(135deg, rgba(113,221,55,0.15), rgba(91,181,44,0.15));
    color: #71dd37;
}

.eom-metric-card.cyan .eom-metric-icon {
    background: linear-gradient(135deg, rgba(3,195,236,0.15), rgba(0,153,204,0.15));
    color: #03c3ec;
}

.eom-metric-card.orange .eom-metric-icon {
    background: linear-gradient(135deg, rgba(255,171,0,0.15), rgba(255,136,0,0.15));
    color: #ffab00;
}

.eom-metric-info {
    flex: 1;
    min-width: 0;
}

.eom-metric-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a1acb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.eom-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
    line-height: 1;
}

/* Report Data Cards – listing view */
.eom-data-card {
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.eom-data-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.eom-data-card-header.green-grad {
    background: linear-gradient(135deg, rgba(113,221,55,0.08) 0%, rgba(91,181,44,0.04) 100%);
}
.eom-data-card-header.cyan-grad {
    background: linear-gradient(135deg, rgba(3,195,236,0.08) 0%, rgba(0,153,204,0.04) 100%);
}
.eom-data-card-header.purple-grad {
    background: linear-gradient(135deg, rgba(11,107,184,0.08) 0%, rgba(139,92,246,0.04) 100%);
}

.eom-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.eom-data-card-header.green-grad .eom-card-icon {
    background: rgba(113,221,55,0.15);
    color: #71dd37;
}
.eom-data-card-header.cyan-grad .eom-card-icon {
    background: rgba(3,195,236,0.15);
    color: #03c3ec;
}
.eom-data-card-header.purple-grad .eom-card-icon {
    background: rgba(11,107,184,0.15);
    color: #0b6bb8;
}

.eom-card-title {
    flex: 1;
}

.eom-card-title h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.eom-card-title span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.eom-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2rem;
}

.eom-data-card-header.green-grad .eom-card-badge {
    background: rgba(113,221,55,0.15);
    color: #5bb52c;
}
.eom-data-card-header.cyan-grad .eom-card-badge {
    background: rgba(3,195,236,0.15);
    color: #00a4c4;
}
.eom-data-card-header.purple-grad .eom-card-badge {
    background: rgba(11,107,184,0.15);
    color: #0b6bb8;
}

.eom-data-card-body {
    padding: 1.25rem 1.5rem;
}

/* Stat tiles grid for listing */
.eom-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.875rem;
}

.eom-stat-tile {
    background: #f8f9ff;
    border: 1px solid #eef0ff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

.eom-stat-tile:hover {
    background: #f0f1ff;
    border-color: #c7c9ff;
    transform: translateY(-1px);
}

.eom-stat-tile-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a1acb8;
}

.eom-stat-tile-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #566a7f;
}

.eom-stat-tile.highlight {
    background: linear-gradient(135deg, rgba(11,107,184,0.08), rgba(139,92,246,0.04));
    border-color: rgba(11,107,184,0.2);
}

.eom-stat-tile.highlight .eom-stat-tile-value {
    color: #0b6bb8;
}

/* Improved Empty State */
.eom-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.eom-empty-icon-wrap {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(11,107,184,0.1), rgba(139,92,246,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: eom-pulse 2.5s ease-in-out infinite;
}

@keyframes eom-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11,107,184,0.2); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(11,107,184,0); }
}

.eom-empty-icon-wrap i {
    font-size: 2.75rem;
    color: #0b6bb8;
}

.eom-empty-state h5 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #566a7f;
}

.eom-empty-state p {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    color: #a1acb8;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.eom-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    border: none;
    border-radius: 0.625rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(11,107,184,0.35);
}

.eom-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11,107,184,0.45);
    color: #ffffff;
    text-decoration: none;
}

/* ---------- Create Form Enhancements ---------- */

/* Step Indicator */
.eom-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
}

.eom-step {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eom-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    background: #e7e7e8;
    color: #a1acb8;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.eom-step-circle.active {
    background: linear-gradient(135deg, #0b6bb8, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(11,107,184,0.4);
}

.eom-step-circle.done {
    background: linear-gradient(135deg, #71dd37, #5bb52c);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(113,221,55,0.3);
}

.eom-step-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #a1acb8;
    white-space: nowrap;
}

.eom-step.active .eom-step-label {
    color: #0b6bb8;
    font-weight: 600;
}

.eom-step.done .eom-step-label {
    color: #71dd37;
}

.eom-step-connector {
    flex: 1;
    height: 2px;
    background: #e7e7e8;
    min-width: 40px;
    max-width: 80px;
    margin: 0 0.25rem;
    transition: background 0.3s ease;
}

.eom-step-connector.done {
    background: linear-gradient(90deg, #71dd37, #5bb52c);
}

/* Selection card improved */
.eom-select-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.eom-select-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, #0b6bb8 0%, #8b5cf6 100%);
    color: #ffffff;
}

.eom-select-card-header .eom-header-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.eom-select-card-header .eom-header-info h5 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.eom-select-card-header .eom-header-info p {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.85;
}

.eom-select-card-body {
    padding: 1.5rem 1.75rem;
}

.eom-select-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.25rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.eom-select-item label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    margin-bottom: 0.5rem;
}

.eom-select-item label i {
    color: #0b6bb8;
}

.eom-quick-months {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px dashed #e7e7e8;
}

.eom-quick-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #a1acb8;
    white-space: nowrap;
}

.eom-quick-btns {
    display: flex;
    gap: 0.5rem;
}

.eom-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eom-quick-btn:hover,
.eom-quick-btn.active {
    background: linear-gradient(135deg, #0b6bb8, #8b5cf6);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(11,107,184,0.3);
}

/* Info banner above the form */
.eom-info-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(11,107,184,0.07) 0%, rgba(139,92,246,0.04) 100%);
    border: 1px solid rgba(11,107,184,0.15);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.eom-info-banner .eom-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #566a7f;
}

.eom-info-banner .eom-info-item i {
    color: #0b6bb8;
    font-size: 1.125rem;
}

.eom-info-banner .eom-info-item strong {
    font-weight: 600;
    color: #566a7f;
}

.eom-change-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0b6bb8;
    background: rgba(11,107,184,0.08);
    border: 1px solid rgba(11,107,184,0.25);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.eom-change-btn:hover {
    background: #0b6bb8;
    color: #ffffff;
    border-color: #0b6bb8;
}

/* Form Section Cards – create page */
.eom-section-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e7e7e8;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.eom-section-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.eom-section-hdr {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.eom-section-hdr.hdr-green {
    background: linear-gradient(135deg, rgba(113,221,55,0.09) 0%, rgba(91,181,44,0.04) 100%);
}
.eom-section-hdr.hdr-cyan {
    background: linear-gradient(135deg, rgba(3,195,236,0.09) 0%, rgba(0,153,204,0.04) 100%);
}
.eom-section-hdr.hdr-purple {
    background: linear-gradient(135deg, rgba(11,107,184,0.09) 0%, rgba(139,92,246,0.04) 100%);
}

.eom-section-num {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hdr-green .eom-section-num {
    background: rgba(113,221,55,0.18);
    color: #5bb52c;
}
.hdr-cyan .eom-section-num {
    background: rgba(3,195,236,0.18);
    color: #00a4c4;
}
.hdr-purple .eom-section-num {
    background: rgba(11,107,184,0.18);
    color: #0b6bb8;
}

.eom-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hdr-green .eom-section-icon {
    background: rgba(113,221,55,0.15);
    color: #71dd37;
}
.hdr-cyan .eom-section-icon {
    background: rgba(3,195,236,0.15);
    color: #03c3ec;
}
.hdr-purple .eom-section-icon {
    background: rgba(11,107,184,0.15);
    color: #0b6bb8;
}

.eom-section-info {
    flex: 1;
}

.eom-section-info h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #566a7f;
}

.eom-section-info span {
    font-size: 0.8125rem;
    color: #a1acb8;
}

.eom-section-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2rem;
}

.hdr-green .eom-section-tag {
    background: rgba(113,221,55,0.15);
    color: #5bb52c;
}
.hdr-cyan .eom-section-tag {
    background: rgba(3,195,236,0.15);
    color: #00a4c4;
}
.hdr-purple .eom-section-tag {
    background: rgba(11,107,184,0.15);
    color: #0b6bb8;
}

.eom-section-body {
    padding: 1.5rem;
}

/* Fields grid for the create form */
.eom-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
}

.eom-fields-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.eom-field {
    display: flex;
    flex-direction: column;
}

.eom-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #697a8d;
    margin-bottom: 0.4375rem;
}

.eom-field .form-input-modern {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.eom-field .form-input-modern:focus {
    border-color: #0b6bb8;
    box-shadow: 0 0 0 3px rgba(11,107,184,0.12);
}

/* Total Items Summary – improved */
.eom-total-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(113,221,55,0.09) 0%, rgba(91,181,44,0.04) 100%);
    border: 1px solid rgba(113,221,55,0.22);
    border-radius: 0.75rem;
    margin-top: 1.25rem;
}

.eom-total-row .eom-total-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    background: rgba(113,221,55,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #71dd37;
    flex-shrink: 0;
}

.eom-total-row .eom-total-info {
    flex: 1;
}

.eom-total-row .eom-total-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #566a7f;
}

.eom-total-row .eom-total-sub {
    display: block;
    font-size: 0.8125rem;
    color: #a1acb8;
}

.eom-total-display {
    min-width: 120px;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border: 2px solid rgba(113,221,55,0.3);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #5bb52c;
    letter-spacing: -0.01em;
}

/* Sticky Submit Bar */
.eom-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.875rem;
    padding: 1rem 1.75rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e7e7e8;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    margin-top: 1.5rem;
}

.eom-submit-bar .eom-bar-info {
    margin-right: auto;
    font-size: 0.8125rem;
    color: #a1acb8;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.eom-submit-bar .eom-bar-info i {
    color: #0b6bb8;
}

.eom-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #697a8d;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    border-radius: 0.625rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.eom-btn-cancel:hover {
    background: #ededf5;
    color: #566a7f;
    text-decoration: none;
}

.eom-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #71dd37 0%, #5bb52c 100%);
    border: none;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(113,221,55,0.4);
}

.eom-btn-save:hover {
    background: linear-gradient(135deg, #5bb52c 0%, #4a9524 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(113,221,55,0.5);
}

.eom-load-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #0b6bb8 0%, #08548f 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.eom-load-btn:hover {
    background: linear-gradient(135deg, #08548f 0%, #4a4cc9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11,107,184,0.35);
}

.eom-load-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Single store display pill */
.eom-store-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.875rem;
    background: #f5f5f9;
    border: 1px solid #e7e7e8;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #566a7f;
}

.eom-store-avatar {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #0b6bb8, #8b5cf6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Responsive ---------- */

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

    .eom-fields-grid.cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .eom-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .eom-filter-grid > *:last-child {
        grid-column: span 2;
    }

    .eom-select-grid {
        grid-template-columns: 1fr 1fr;
    }

    .eom-select-grid > *:last-child {
        grid-column: span 2;
    }

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

    .eom-fields-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .eom-steps {
        display: none;
    }
}

@media (max-width: 768px) {
    .eom-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }

    .eom-page-header .eom-header-actions {
        width: 100%;
    }

    .eom-btn-export,
    .eom-btn-create {
        flex: 1;
        justify-content: center;
    }

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

    .eom-filter-grid {
        grid-template-columns: 1fr;
    }

    .eom-filter-grid > *:last-child {
        grid-column: span 1;
    }

    .eom-select-grid {
        grid-template-columns: 1fr;
    }

    .eom-select-grid > *:last-child {
        grid-column: span 1;
    }

    .eom-fields-grid,
    .eom-fields-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .eom-info-banner {
        flex-wrap: wrap;
    }

    .eom-change-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .eom-submit-bar {
        flex-direction: column;
    }

    .eom-submit-bar .eom-bar-info {
        margin-right: 0;
    }

    .eom-btn-cancel,
    .eom-btn-save {
        width: 100%;
        justify-content: center;
    }

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