/* JFAP eMIS - Site Stylesheet */
:root {
    --jfap-primary: #0d6efd;
    --jfap-sidebar-bg: #1a2035;
}

/* ====== BUTTON FALLBACK (for CDN issues) ====== */
/* Ensure buttons display with proper styling even if Bootstrap CSS fails to load */
.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}

.btn-warning {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    color: #000;
    background-color: #ffb800;
    border-color: #ffad33;
}

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
    background-color: transparent;
}

.btn-outline-warning:hover {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
    background-color: transparent;
}

.btn-outline-light:hover {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

html { font-size: 14px; scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; background: #f4f6fb; }
main { flex: 1; }

/* ====== NAVBAR ====== */
.navbar-brand { font-size: 1.2rem; letter-spacing: 0.5px; }
/* Keep navbar above autocomplete dropdowns (autocomplete-container is z-index 1050) */
.navbar.sticky-top { z-index: 1060; }
/* But Bootstrap modals (backdrop 1050 / dialog 1055) must render above the sticky navbar,
   otherwise the navbar covers the modal title at the top of the viewport. */
.modal-backdrop { z-index: 1065; }
.modal { z-index: 1070; }

/* ====== PAGE HEADER ====== */
.page-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: #fff;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(13,110,253,.25);
}
.page-header h4 { margin: 0; font-weight: 600; color: #fff; }
.page-header .breadcrumb { margin: 0; background: transparent; padding: 0; }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,.8); font-size: .8rem; }
.page-header .breadcrumb-item.active { color: #fff; }

/* Page-header buttons – add visible dark border so they stand out
   against the blue gradient background */
.page-header .btn-light,
.page-header .btn-outline-light {
    border-width: 2px;
}
.page-header .btn-light {
    color: #212529 !important;
    background-color: #f8f9fa;
    border-color: #212529 !important;
}
.page-header .btn-light:hover {
    color: #000 !important;
    background-color: #e2e6ea;
    border-color: #000 !important;
}
.page-header .btn-outline-light {
    color: #fff !important;
    border-color: #fff !important;
    background-color: transparent;
}
.page-header .btn-outline-light:hover {
    color: #212529 !important;
    background-color: #f8f9fa;
    border-color: #f8f9fa !important;
}

/* Fix light mode visibility for text-white classes */
@media (prefers-color-scheme: light) {
    .page-header .text-white-50,
    .page-header a.text-white-50 {
        color: rgba(255,255,255,.8) !important;
    }
}

/* ====== CARDS ====== */
.card { border: none; box-shadow: 0 1px 6px rgba(0,0,0,.08); border-radius: .5rem; }
.card-header { font-weight: 600; }

/* ====== TABLES ====== */
.table-responsive { border-radius: .5rem; overflow: hidden; }
.table thead th {
    background: #e9ecef;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    color: #212529;
}
.table tbody tr:hover { background: #f0f4ff; }
.table td, .table th { vertical-align: middle; }

/* ====== DASHBOARD STAT CARDS ====== */
.stat-card { border-left: 4px solid var(--bs-primary); transition: transform .15s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-card.income { border-color: #198754; }
.stat-card.expense { border-color: #dc3545; }
.stat-card.payroll { border-color: #0d6efd; }
.stat-card.inventory { border-color: #fd7e14; }
.stat-card .stat-icon { font-size: 2rem; opacity: .15; position: absolute; right: 1rem; bottom: .5rem; }
.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; }

/* ====== FORMS ====== */
.form-label { font-weight: 500; font-size: .85rem; }
.required-mark::after { content: " *"; color: #dc3545; }
.form-section-title {
    font-size: .75rem; text-transform: uppercase; letter-spacing: 1px;
    color: #6c757d; border-bottom: 1px solid #dee2e6; padding-bottom: .35rem; margin-bottom: .75rem;
}

/* ====== BADGE STATUS ====== */
.badge-active { background: #d1e7dd; color: #0f5132; }
.badge-inactive { background: #f8d7da; color: #842029; }
.badge-pending { background: #fff3cd; color: #664d03; }
.badge-closed { background: #e2e3e5; color: #41464b; }

/* ====== SIDEBAR for desktop (optional future use) ====== */

/* ====== LOGIN PAGE ====== */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 60%, #084298 100%);
}
.login-card { border-radius: 1rem; max-width: 420px; width: 100%; }
.login-logo { font-size: 2.5rem; font-weight: 800; color: #0d6efd; letter-spacing: -1px; }

/* ====== MOBILE OPTIMIZATIONS ====== */
@media (max-width: 767.98px) {
    html { font-size: 13px; }
    .page-header { padding: .75rem 1rem; margin-bottom: .75rem; }

    /* ── Responsive table stacking ──────────────────────────────────────────
       All .table elements stack into labelled rows on mobile.
       Add  class="table-no-stack"  to a table to keep it horizontal.      */
    .table:not(.table-no-stack) thead { display: none; }
    .table:not(.table-no-stack),
    .table:not(.table-no-stack) tbody { display: block; width: 100%; }
    .table:not(.table-no-stack) tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: .4rem;
        margin-bottom: .6rem;
        padding: .25rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .table:not(.table-no-stack) td {
        display: flex;
        align-items: center;
        border: none !important;
        border-bottom: 1px solid #f3f3f3 !important;
        padding: .3rem .6rem;
        font-size: .83rem;
        min-height: 2.1rem;
        gap: .5rem;
    }
    .table:not(.table-no-stack) td:last-child { border-bottom: none !important; }
    /* Label shown left of value */
    .table:not(.table-no-stack) td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6c757d;
        flex: 0 0 38%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Action columns: no label, buttons align right */
    .table:not(.table-no-stack) td[data-label=""]::before,
    .table:not(.table-no-stack) td:not([data-label])::before { display: none; }
    .table:not(.table-no-stack) td[data-label=""],
    .table:not(.table-no-stack) td:not([data-label]) { justify-content: flex-end; }
    /* Form controls stretch to fill remaining space */
    .table:not(.table-no-stack) td input:not([type=hidden]):not([type=checkbox]),
    .table:not(.table-no-stack) td select,
    .table:not(.table-no-stack) td textarea { flex: 1; min-width: 0; }
    /* Kill row hover highlight (irrelevant in block layout) */
    .table:not(.table-no-stack) tbody tr:hover { background: #fff; }

    .btn-sm { padding: .25rem .5rem; }
    .card-body { padding: .75rem; }
    .stat-value { font-size: 1.2rem !important; }
    .hide-mobile { display: none !important; }
}

@media (max-width: 575.98px) {
    .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .page-header h4 { font-size: 1rem; }
}

/* ====== PRINT ====== */
@media print {
    .navbar, footer, .btn, .no-print { display: none !important; }
    body { background: #fff !important; }
    html { font-size: 10px !important; }
    * { font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif !important; }
    .card { box-shadow: none; border: 1px solid #dee2e6 !important; }
    .table {
        font-size: 1rem !important;
    }
    .table thead th {
        font-size: 1rem !important;
        padding: 2px 4px !important;
    }
    .table tbody td, .table tbody th {
        padding: 2px 4px !important;
    }
    .table td, .table th {
        white-space: nowrap !important;
    }
}

/* ====== DROPDOWN SUBMENUS ====== */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    min-width: 14rem;
}
.dropdown-submenu:hover > .dropdown-menu { display: block; }
/* Right-aligned parent: submenus open to the left */
.dropdown-menu-end .dropdown-submenu > .dropdown-menu {
    left: auto;
    right: 100%;
}

/* ====== UTILITIES ====== */
.cursor-pointer { cursor: pointer; }
.text-money { font-family: 'Courier New', monospace; }
.table-actions { white-space: nowrap; width: 1%; }

/* ====== LIGHT MODE DARK MODE COMPATIBILITY ====== */
/* Ensure text is readable in both light and dark modes */
@media (prefers-color-scheme: light) {
    /* Ensure white text on colored backgrounds is visible in light mode */
    .bg-primary .text-white,
    .bg-primary .text-white-50,
    .bg-secondary .text-white,
    .bg-secondary .text-white-50,
    .bg-success .text-white,
    .bg-success .text-white-50,
    .bg-danger .text-white,
    .bg-danger .text-white-50,
    .bg-info .text-white,
    .bg-info .text-white-50,
    .bg-warning .text-white,
    .bg-warning .text-white-50,
    .card-header.bg-primary,
    .card-header.bg-secondary,
    .card-header.bg-success,
    .card-header.bg-danger,
    .card-header.bg-info,
    .card-header.bg-warning {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .card-header.bg-primary a,
    .card-header.bg-secondary a,
    .card-header.bg-success a,
    .card-header.bg-danger a,
    .card-header.bg-info a,
    .card-header.bg-warning a,
    .page-header a {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .card-header.bg-primary a:hover,
    .card-header.bg-secondary a:hover,
    .card-header.bg-success a:hover,
    .card-header.bg-danger a:hover,
    .card-header.bg-info a:hover,
    .card-header.bg-warning a:hover,
    .page-header a:hover {
        color: #fff !important;
    }

    /* Ensure badges are readable */
    .badge.bg-primary,
    .badge.bg-secondary,
    .badge.bg-success,
    .badge.bg-danger,
    .badge.bg-info,
    .badge.bg-warning {
        color: #fff !important;
    }

    /* Alert styling */
    .alert-info,
    .alert-primary {
        background-color: #e7f3ff;
        border-color: #b3d9ff;
        color: #004085;
    }

    .alert-info a,
    .alert-primary a {
        color: #004085;
        text-decoration: underline;
    }

    /* Form validation colors */
    .is-invalid,
    .form-control.is-invalid {
        border-color: #dc3545;
        color: #212529;
    }

    .invalid-feedback {
        color: #dc3545;
    }

    .is-valid,
    .form-control.is-valid {
        border-color: #198754;
        color: #212529;
    }

    .valid-feedback {
        color: #198754;
    }
}

/* ====== DARK MODE STYLING ====== */
@media (prefers-color-scheme: dark) {
    /* Dark mode body background */
    body {
        background: #1e1e1e;
        color: #e0e0e0;
    }

    /* Dark mode button adjustments */
    .btn {
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }

    /* Light button in dark mode needs darker appearance */
    .btn-light {
        color: #000;
        background-color: #d3d3d3;
        border-color: #d3d3d3;
    }

    .btn-light:hover {
        color: #000;
        background-color: #b0b0b0;
        border-color: #9d9d9d;
    }

    /* Warning button in dark mode needs better contrast */
    .btn-warning {
        color: #000;
        background-color: #ffc107;
        border-color: #ffc107;
    }

    .btn-warning:hover {
        color: #000;
        background-color: #ffb800;
        border-color: #ffad33;
    }

    /* Outline light button needs to be visible in dark mode */
    .btn-outline-light {
        color: #d3d3d3;
        border-color: #d3d3d3;
        background-color: transparent;
    }

    .btn-outline-light:hover {
        color: #fff;
        background-color: #d3d3d3;
        border-color: #d3d3d3;
    }

    /* Outline warning in dark mode */
    .btn-outline-warning {
        color: #ffc107;
        border-color: #ffc107;
        background-color: transparent;
    }

    .btn-outline-warning:hover {
        color: #000;
        background-color: #ffc107;
        border-color: #ffc107;
    }

    /* Outline secondary in dark mode */
    .btn-outline-secondary {
        color: #b0b0b0;
        border-color: #b0b0b0;
        background-color: transparent;
    }

    .btn-outline-secondary:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    /* Secondary button remains readable */
    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-secondary:hover {
        color: #fff;
        background-color: #5c636a;
        border-color: #565e64;
    }

    /* Success button remains readable */
    .btn-success {
        color: #fff;
        background-color: #198754;
        border-color: #198754;
    }

    .btn-success:hover {
        color: #fff;
        background-color: #157347;
        border-color: #146c43;
    }

    /* Danger button remains readable */
    .btn-danger {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .btn-danger:hover {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }

    /* Outline danger in dark mode */
    .btn-outline-danger {
        color: #ff6b6b;
        border-color: #ff6b6b;
        background-color: transparent;
    }

    .btn-outline-danger:hover {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

    /* Page header styling for dark mode */
    .page-header {
        background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
        color: #fff;
    }

    .page-header h4 {
        color: #fff;
    }

    .page-header .breadcrumb-item,
    .page-header .breadcrumb-item a {
        color: rgba(255, 255, 255, 0.8);
    }

    .page-header .breadcrumb-item.active {
        color: #fff;
    }

    /* Cards in dark mode */
    .card {
        background-color: #2d2d2d;
        border-color: #3d3d3d;
        color: #e0e0e0;
    }

    .card-header {
        background-color: #1a1a1a;
        border-color: #3d3d3d;
        color: #e0e0e0;
    }

    .card-header.bg-primary,
    .card-header.bg-secondary,
    .card-header.bg-success,
    .card-header.bg-danger,
    .card-header.bg-info,
    .card-header.bg-warning {
        color: #fff !important;
    }

    .card-header.bg-primary a,
    .card-header.bg-secondary a,
    .card-header.bg-success a,
    .card-header.bg-danger a,
    .card-header.bg-info a,
    .card-header.bg-warning a {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .card-header.bg-primary a:hover,
    .card-header.bg-secondary a:hover,
    .card-header.bg-success a:hover,
    .card-header.bg-danger a:hover,
    .card-header.bg-info a:hover,
    .card-header.bg-warning a:hover {
        color: #fff !important;
    }

    /* Tables in dark mode */
    .table {
        color: #e0e0e0;
        border-color: #3d3d3d;
    }

    .table thead th {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: #3d3d3d;
    }

    .table tbody tr:hover {
        background: #3d3d3d;
    }

    .table td,
    .table th {
        border-color: #3d3d3d;
    }

    /* Form elements in dark mode */
    .form-label {
        color: #e0e0e0;
    }

    .form-control,
    .form-select {
        background-color: #2d2d2d;
        border-color: #3d3d3d;
        color: #e0e0e0;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: #2d2d2d;
        border-color: #0d6efd;
        color: #e0e0e0;
    }

    .form-control::placeholder {
        color: #999;
    }

    /* Badges in dark mode */
    .badge.bg-primary,
    .badge.bg-secondary,
    .badge.bg-success,
    .badge.bg-danger,
    .badge.bg-info,
    .badge.bg-warning {
        color: #fff !important;
    }

    .badge-active {
        background: #1e4620;
        color: #90ee90;
    }

    .badge-inactive {
        background: #5a1a1a;
        color: #ff9999;
    }

    .badge-pending {
        background: #664d03;
        color: #ffd700;
    }

    .badge-closed {
        background: #3d3d3d;
        color: #b0b0b0;
    }

    /* Alerts in dark mode */
    .alert-info,
    .alert-primary {
        background-color: #1a3d5c;
        border-color: #2d5a8c;
        color: #90d5ff;
    }

    .alert-info a,
    .alert-primary a {
        color: #90d5ff;
        text-decoration: underline;
    }

    .alert-success {
        background-color: #1e4620;
        border-color: #2d6c3d;
        color: #90ee90;
    }

    .alert-warning {
        background-color: #664d03;
        border-color: #9d7d1a;
        color: #ffd700;
    }

    .alert-danger {
        background-color: #5a1a1a;
        border-color: #8c2d2d;
        color: #ff9999;
    }

    /* Form validation colors in dark mode */
    .is-invalid,
    .form-control.is-invalid {
        border-color: #ff6b6b;
        color: #ff9999;
    }

    .invalid-feedback {
        color: #ff9999;
    }

    .is-valid,
    .form-control.is-valid {
        border-color: #90ee90;
        color: #90ee90;
    }

    .valid-feedback {
        color: #90ee90;
    }

    /* Autocomplete in dark mode */
    .autocomplete-results {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    .autocomplete-item {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: #3d3d3d;
    }

    .autocomplete-item:hover,
    .autocomplete-item.selected {
        background-color: #0d6efd;
        color: white;
    }

    .autocomplete-no-results {
        background: #2d2d2d;
        color: #999;
    }

    /* Text utilities for dark mode */
    .text-muted {
        color: #999 !important;
    }

    .text-secondary {
        color: #b0b0b0 !important;
    }

    /* Login page in dark mode */
    .login-wrapper {
        background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 60%, #084298 100%);
    }

    .login-card {
        background-color: #2d2d2d;
        color: #e0e0e0;
    }

    .login-logo {
        color: #0d6efd;
    }

    /* Stat cards in dark mode */
    .stat-card {
        background-color: #2d2d2d;
        color: #e0e0e0;
    }

    /* Tables with light backgrounds need adjustment */
    .table:not(.table-no-stack) tr {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    /* Navbar in dark mode */
    .navbar {
        background-color: #1a1a1a;
        border-bottom-color: #3d3d3d;
    }

    .navbar-light .navbar-text,
    .navbar-light .navbar-brand {
        color: #e0e0e0;
    }

    /* Required mark in dark mode */
    .required-mark::after {
        color: #ff6b6b;
    }

    /* Form section title in dark mode */
    .form-section-title {
        color: #b0b0b0;
        border-bottom-color: #3d3d3d;
    }

    /* Table contextual colour cells — ensure readable text in dark mode */
    .table-warning, .table > :not(caption) > * > .table-warning {
        background-color: #3d3200 !important;
        color: #ffd966 !important;
    }
    .table-success, .table > :not(caption) > * > .table-success {
        background-color: #0d3320 !important;
        color: #6ee09e !important;
    }
    .table-success .text-success { color: #6ee09e !important; }
}

/* ====== AUTOCOMPLETE ====== */
.autocomplete-container {
    position: relative;
    width: 100%;
    overflow: visible !important;
}

/* Ensure containers don't clip autocomplete dropdowns */
.table-responsive {
    overflow: visible !important;
}

.card-body {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

table td {
    position: static;
    overflow: visible !important;
}

/* Ensure form columns don't clip autocomplete dropdowns */
.row > [class*="col-"] {
    overflow: visible !important;
}

/* Autocomplete container must have higher z-index than buttons */
.autocomplete-container {
    z-index: 1050;
    position: relative;
}

/* Ensure forms don't block autocomplete dropdowns */
form {
    position: relative;
    z-index: auto;
}

/* Reset card-body z-index to auto so autocomplete can escape */
.card-body {
    z-index: auto !important;
}

/* Restore scroll for card-bodies that explicitly set a max-height (e.g. widget panels) */
.card-body[style*="max-height"] {
    overflow-y: auto !important;
}

.autocomplete-container input {
    width: 100%;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 400px;
    overflow-y: auto;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    min-width: 100%;
    margin-top: -1px;
    pointer-events: auto;
}

.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    color: #212529;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: #0d6efd;
    color: white;
    text-decoration: none;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-no-results {
    padding: 1rem;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    background: white;
    font-weight: 500;
}

/* ====== SEARCHABLE SELECT (Select2) ====== */
/* Ensure Select2 dropdowns appear above other content */
.searchable-select-dropdown {
    z-index: 1070 !important;
}
/* Inside modals, ensure dropdown appears above modal content */
.modal .searchable-select-dropdown {
    z-index: 1070 !important;
    position: relative;
}