/* Custom professional theme (Blueprint Section 4).
   Placeholder palette until the client's logo/brand colors are supplied —
   a deep navy + teal accounting-firm look, swap the variables below once
   real brand colors land, nothing else needs to change.
   Includes the "large checkboxes" project-wide UI standard (Section 6.4/15)
   and the modern-styling pass (glassmorphism navbar/cards, animated
   dropdowns, entrance transitions via the vendored animate.css /
   Bootstrap Icons — Section 2 Decision 2: vendored, never a CDN). */

:root {
    --apk-navy: #0f2544;
    --apk-navy-dark: #081527;
    --apk-teal: #14a89d;
    --apk-teal-light: #5fd4c9;
    --apk-bg: #f4f7fb;
    --apk-card-radius: 0.9rem;
}

body {
    font-family: "Noto Sans Thai", "Segoe UI", Roboto, Arial, sans-serif;
}

body.app-body {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--apk-bg) 0%, #e8eef8 55%, #dfe9f6 100%);
}

input[type="checkbox"].large-checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------------------------------------------------------------------
   Glassmorphism navbar — translucent, blurred backdrop over the page
   gradient, with a subtle depth shadow instead of a flat solid bar.
   --------------------------------------------------------------------- */
.glass-navbar {
    background: linear-gradient(120deg, rgba(15, 37, 68, 0.92) 0%, rgba(20, 168, 157, 0.85) 140%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(8, 21, 39, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.glass-navbar .btn-outline-light {
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.glass-navbar .btn-outline-light:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Generic glass-card utility — used for the auth screens (Login, Forgot/
   Reset PIN/Password, Access Denied) so they read as a floating panel
   instead of a bare form on white.
   --------------------------------------------------------------------- */
.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--apk-card-radius);
    box-shadow: 0 8px 32px rgba(15, 37, 68, 0.15);
    padding: 2rem;
}

/* ---------------------------------------------------------------------
   Language switcher (globe icon in the navbar) — a small glassmorphism
   popover instead of a plain <select>, matching the rest of the app's
   frosted-glass language (Blueprint follow-up, 2026-08-09 feedback).
   --------------------------------------------------------------------- */
.lang-popover-trigger {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lang-popover-menu {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--apk-card-radius);
    box-shadow: 0 8px 32px rgba(15, 37, 68, 0.22);
    min-width: 200px;
}

/* Faster, snappier entrance than animate.css's 1s default. */
:root {
    --animate-duration: 0.45s;
}

/* ---------------------------------------------------------------------
   Animated dropdowns (Bootstrap 5 doesn't animate .dropdown-menu out of
   the box) — a short fade + slide-down whenever .show is toggled on.
   --------------------------------------------------------------------- */
.dropdown-menu.show {
    animation: apkDropdownIn 0.18s ease-out;
}

@keyframes apkDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------------
   Buttons & cards: small lift-on-hover, consistent with the rest of the
   "modern" pass — subtle, not gimmicky.
   --------------------------------------------------------------------- */
.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border-radius: var(--apk-card-radius);
}

.card:hover {
    box-shadow: 0 10px 30px rgba(15, 37, 68, 0.12);
}

/* Sidebar (Admin nav) headings get a little more presence against the new background. */
.sidebar-heading {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* ---------------------------------------------------------------------
   Admin sidebar — collapsible accordion sections (icon + label + chevron),
   frosted to match the glass navbar instead of a flat bg-light block.
   --------------------------------------------------------------------- */
.glass-sidenav {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: calc(100vh - 56px);
}

.sidenav-section {
    border-bottom: 1px solid rgba(15, 37, 68, 0.08);
}

.sidenav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--apk-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color 0.15s ease;
}

.sidenav-toggle:hover {
    background-color: rgba(20, 168, 157, 0.1);
}

.sidenav-chevron {
    transition: transform 0.2s ease;
    font-size: 0.8rem;
}

.sidenav-toggle[aria-expanded="true"] .sidenav-chevron {
    transform: rotate(180deg);
}

.sidenav-section .nav-link {
    display: flex;
    align-items: center;
    padding: 0.45rem 1rem 0.45rem 1.75rem;
    color: #3a4a5e;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidenav-section .nav-link:hover {
    background-color: rgba(20, 168, 157, 0.08);
    color: var(--apk-navy);
}

.sidenav-section .nav-link.active {
    background-color: rgba(20, 168, 157, 0.15);
    border-left-color: var(--apk-teal);
    color: var(--apk-navy);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Select2 (Blueprint Section 2: searchable dropdowns everywhere, not a
   plain <select>) — restyled to match Bootstrap 5's .form-select instead
   of Select2's own default look, so it reads as one consistent design
   system rather than two different libraries bolted together.
   --------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0.5rem;
    color: #212529;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--apk-teal);
    box-shadow: 0 0 0 0.25rem rgba(20, 168, 157, 0.25);
}

.select2-dropdown {
    border-color: #ced4da;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 37, 68, 0.15);
    animation: apkDropdownIn 0.18s ease-out;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--apk-teal);
}

.select2-search--dropdown .select2-search__field {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    padding: 0.35rem 0.5rem;
}