/* ===============================
   GLOBAL BASE
=================================*/
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* smoother touch */
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

body {
    margin-bottom: 60px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Add breathing space below the sticky navbar */
    body > .container,
    main.container,
    .container main {
        margin-top: 1.5rem !important; /* ~24 px */
    }

/* For small mobile screens, use a bit more spacing */
@media (max-width: 576px) {
    body > .container,
    main.container {
        margin-top: 2rem !important;
    }
}

/* ===============================
   FOCUS & FORMS
=================================*/
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===============================
   LAYOUT UTILITIES
=================================*/
main {
    min-height: calc(100vh - 160px);
}

.card-shadow {
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.table-actions .btn {
    margin-right: .25rem;
}

.highlight-row {
    animation: flash 1.2s ease-out;
}

@keyframes flash {
    0% {
        background: #fff3cd;
    }

    100% {
        background: transparent;
    }
}

/* ===============================
   NAVBAR & TOUCH SUPPORT
=================================*/
.navbar {
    transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
}

.navbar-brand {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.navbar .nav-link, .navbar .dropdown-item {
    padding: .9rem 1rem; /* larger tap area */
    font-weight: 500;
    letter-spacing: .2px;
}

.navbar-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.offcanvas {
    -webkit-overflow-scrolling: touch;
}

    .offcanvas .list-group-item {
        padding: 1rem;
    }

/* ===============================
   BUTTONS / INTERACTIONS
=================================*/
.btn:active {
    transform: scale(0.98);
}

input, select, textarea {
    touch-action: manipulation;
}

/* ===============================
   TABLES & DATATABLES
=================================*/
.dataTable th {
    user-select: none;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.05);
}

.table td, .table th {
    vertical-align: middle;
}

/* ===============================
   TOASTS / ALERTS
=================================*/
.toast {
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.toast-body {
    font-size: .95rem;
}

/* ===============================
   DARK MODE
=================================*/
:root[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #e9e9e9;
    --bs-navbar-bg: #1c1c1c;
    --bs-border-color: #2a2a2a;
}

    :root[data-theme="dark"] body {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    :root[data-theme="dark"] .navbar {
        background: var(--bs-navbar-bg) !important;
    }

    :root[data-theme="dark"] .table-hover tbody tr:hover {
        background-color: rgba(255,255,255,.05);
    }

    :root[data-theme="dark"] .toast {
        background-color: #222;
        color: #e9e9e9;
    }

/* ===============================
   FOOTER
=================================*/
footer.footer {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Base scale = 100% */
:root {
    font-size: 14px;
}

/* Medium/large displays → ~125% */
@media (min-width: 1366px) and (max-width: 1599.98px) {
    :root {
        font-size: 16px;
    }
    /* 16 * 1.25 = 20 */
}

/* Big displays → ~150% */
@media (min-width: 1600px) {
    :root {
        font-size: 18px;
    }
    /* 16 * 1.5 = 24 */
}