/* WOFF2 first, TTF second: the browser takes the first format it supports, so
   every current browser gets the Brotli-compressed file (~68% smaller -- the two
   NotoSans faces alone drop from 1230 KB to 400 KB on first load) and anything
   older silently falls back to the original TTF. Lossless conversion, not a
   subset: no glyphs dropped, so Devanagari conjuncts and the GSUB/GPOS layout
   tables are untouched. Regenerate with: python tools/build-fonts.py */
@font-face {
    font-family: "Arya-Regular";
    src:
        url("fonts/Arya-Regular.woff2") format("woff2"),
        url("fonts/Arya-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kurale-Regular";
    src:
        url("fonts/Kurale-Regular.woff2") format("woff2"),
        url("fonts/Kurale-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NotoSans-Regular";
    src:
        url("fonts/NotoSans-Regular.woff2") format("woff2"),
        url("fonts/NotoSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NotoSans-Bold";
    src:
        url("fonts/NotoSans-Bold.woff2") format("woff2"),
        url("fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html,
body {
    font-family: "NotoSans-Regular";
    height: 100%;
    background: #f5f5f5;
    font-size: 14px;
}

.arya {
    font-family: "NotoSans-Bold" !important;
}

/* Custom responsive spacing */
@media (max-width: 767.98px) {
    .footer-text {
        margin-bottom: 0.5rem;
    }

    .footer-text:last-child {
        margin-bottom: 0;
    }
}

.fill-primary {
    fill: #007bff;
}

.fill-secondary {
    fill: #6c757d;
}

.fill-success {
    fill: #28a745;
}

.fill-danger {
    fill: #dc3545;
}

.fill-warning {
    fill: #ffc107;
}

.fill-info {
    fill: #17a2b8;
}

.fill-dark {
    fill: #343a40;
}

.fill-light {
    fill: #f8f9fa;
}

.wrap>.container {
    padding: 40px 15px 40px;
}

.footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 1rem 0;
    margin-top: auto;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.permissions {
    font-size: 16px;
    cursor: pointer;
}

.d-center {
    text-align: center;
}

.flex-grow09 {
    flex-grow: 0.9;
}

/* Container for horizontal scrolling */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Table styling */
.scrollable-table {
    width: max-content;
    /* Force table to expand beyond container */
    min-width: 100%;
    border-collapse: collapse;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
    .glass-grid .table-responsive {
        position: relative;
    }

    .glass-grid .sticky-column {
        position: sticky !important;
        z-index: 2 !important;
        backdrop-filter: blur(10px);
    }

    .glass-grid td.sticky-column {
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* First Column (#) */
    .glass-grid th:first-child,
    .glass-grid td:first-child {
        left: 0;
        min-width: 40px;
    }

    /* Second Column (First Name) */
    .glass-grid .second-column {
        left: 40px;
        /* Offset by the width of the first column */

        border-right: 2px solid rgba(0, 0, 0, 0.05) !important;
    }
}

/* Glassmorphism Design System */
.glass-container {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05) !important;
}

.glass-grid .table {
    background: transparent !important;
    margin-bottom: 0;
}

.kv-grid-container {
    position: relative !important;
    z-index: 1 !important;
}

.glass-grid thead th {
    background: rgba(248, 249, 250, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    border-top: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-family: "NotoSans-Bold";
}

.glass-grid tbody td {
    padding: 0.5rem !important;
    vertical-align: middle !important;
    border-color: rgba(0, 0, 0, 0.03) !important;
    background: transparent !important;
    white-space: nowrap !important;
}

.glass-grid tr:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

.glass-grid td.sticky-column {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

.glass-toolbar-wrapper .kv-panel-before,
.kv-panel-before {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    z-index: 1050 !important;
}

.glass-toolbar-wrapper .btn-toolbar,
.kv-panel-before .btn-toolbar {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1060 !important;
}

.glass-toolbar-wrapper .btn-group,
.kv-panel-before .btn-group {
    position: relative !important;
    z-index: 1070 !important;
}

.glass-toolbar-wrapper .dropdown-menu,
.kv-panel-before .dropdown-menu {
    z-index: 9999 !important;
}

.glass-toolbar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #495057 !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06) !important;
    color: #0d6efd !important;
}

.btn-glass-success {
    color: #28a745 !important;
}

.btn-glass-info {
    color: #17a2b8 !important;
}

.btn-glass-primary {
    color: #0d6efd !important;
}

.btn-glass-danger {
    color: #dc3545 !important;
}

.btn-glass-warning {
    color: #b8590a !important;
}

/* Glass buttons are a near-white translucent surface carrying a coloured
   label -- so the white glyphs the views ask for (Utility::faIcon defaults to
   #ffffff, and 38 call sites pass it explicitly) land white-on-white and simply
   vanish. faIcon writes the colour as an inline style, which only an
   !important rule can override, so take the button's own colour instead. This
   tracks the hover state for free, and it fixes every glass button that has
   been written and every one that will be. */
.btn-glass i.pms-icon,
.btn-group-glass .btn i.pms-icon {
    color: inherit !important;
}

.btn-group-glass .btn {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #495057 !important;
    padding: 0.6rem 1rem !important;
    transition: all 0.2s ease !important;
}

.btn-group-glass .btn:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #0d6efd !important;
}

.btn-group-glass .btn:first-child {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.btn-group-glass .btn:last-child {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* Mobile optimization for toolbar */
@media (max-width: 576px) {
    .glass-toolbar {
        justify-content: center;
        padding: 0.75rem;
    }

    .btn-glass {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        flex-grow: 1;
    }

    .glass-toolbar .btn-group {
        width: 100%;
        display: flex;
    }

    .glass-toolbar .btn-group .btn {
        flex-grow: 1;
    }
}

.glass-panel-heading {
    background: linear-gradient(135deg,
            rgba(13, 110, 253, 0.1),
            rgba(13, 110, 253, 0.05)) !important;
    border-bottom: 1px solid rgba(13, 110, 253, 0.1) !important;
    padding: 1rem 1.25rem !important;
}

.glass-summary {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.glass-footer {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* min-height + safe-area padding, not a flat height: installed as a PWA/TWA
       the nav sits directly on top of the Android gesture bar and the iOS home
       indicator, which swallowed the bottom few pixels of every tab. */
    min-height: 65px;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    z-index: 1030;
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 11px;
    flex-grow: 1;
    height: 100%;
    transition: all 0.2s ease;
}

/* Profile Page Styles */
.profile-header {
    background: linear-gradient(135deg,
            rgba(13, 110, 253, 0.1),
            rgba(13, 110, 253, 0.05));
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.profile-avatar.area-manager-outline {
    border: 4px solid #0d6efd !important;
    box-shadow: 0 8px 24px rgba(13, 110, 253, 0.2);
}

.profile-avatar.region-manager-outline {
    border: 4px solid #dc3545 !important;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.2);
}

.profile-avatar.backkeeper-outline {
    border: 4px solid #ffc107 !important;
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}

.profile-photo-edit-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #0d6efd;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    margin-bottom: 0;
    z-index: 3;
}

.profile-photo-edit-btn:hover {
    background: #0b5ed7;
    transform: scale(1.15) rotate(5deg);
    color: white;
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.4);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-value {
    color: #212529;
    font-weight: 500;
}

.activity-table td {
    font-size: 0.85rem;
    padding: 1rem 0.75rem !important;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    background: #0d6efd;
}

.glass-table {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
}

.glass-table thead th {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
}

.glass-table td,
.glass-table th {
    border-color: rgba(0, 0, 0, 0.04) !important;
    text-align: center !important;
    vertical-align: middle !important;
}

@media (max-width: 576px) {
    .profile-header {
        padding: 2rem 1rem;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
    }
}

.app-wallpaper {
    background-color: transparent !important;
}

.app-wallpaper::before {
    content: "";
    position: fixed;
    /* inset:0 rather than 100vw/100vh: 100vw ignores the scrollbar and causes
       horizontal overflow, and 100vh jumps whenever Android Chrome's dynamic
       toolbar shows or hides -- very visible once installed as an app. */
    inset: 0;
    /* Two declarations, not one: anything that does not understand image-set()
       with type() simply ignores the second line and keeps the JPEG. WebP is
       59% smaller here (46 KB -> 19 KB) and this paints behind every page. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('../images/image.jpg');
    background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        image-set(url('../images/image.webp') type('image/webp'), url('../images/image.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Global Blurred Site Loader */
.glass-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.glass-loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.colorful-loader {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(#ff00cc, #333399, #0d6efd, #0dcaf0, #ff00cc);
    animation: spin 1.5s linear infinite;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.4);
}

.colorful-loader::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: #f5f5f5;
    /* Matches body background pattern base */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.loader-text {
    font-size: 1.2rem;
    font-family: 'NotoSans-Bold', sans-serif;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    background: -webkit-linear-gradient(45deg, #0d6efd, #ff00cc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 1.5s infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.6;
        transform: scale(0.98);
    }
}

/* Global Site Loader */
#global-site-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#global-site-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-icon-anim {
    width: 80px;
    height: 80px;
}

/* Navbar Utilities */
.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: -0.5px;
}

.navbar-main {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.main-wrapper {
    /* Matches .mobile-bottom-nav's own safe-area padding so the last row of
       content clears the nav on gesture-bar devices too. */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

.profile-img-header {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(13, 110, 253, 0.2) !important;
    padding: 2px !important;
    transition: all 0.3s ease;
}

.profile-img-header:hover {
    border-color: #0d6efd !important;
    transform: scale(1.05);
}

/* Mobile Bottom Navigation Layout Overrides */
.mobile-bottom-nav .nav-item.active {
    color: #0d6efd;
}

.mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
    background: -webkit-linear-gradient(45deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-bottom-nav .nav-item.active i {
    background: -webkit-linear-gradient(45deg, #fd7e14, #ffc107);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-bottom-nav form.nav-item {
    padding: 0;
    margin: 0;
}

.mobile-bottom-nav .nav-item .btn {
    padding: 0;
    margin: 0;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
}
/* ==========================================================================
   Installed-app (PWA / TWA) behaviour
   Added for the Play Store build. These rules only matter once the app is
   launched from the home screen with no browser chrome, but they are harmless
   in a normal tab.
   ========================================================================== */

/* Stops the whole document rubber-banding / triggering pull-to-refresh when a
   scrollable pane inside it hits its end. In a TWA that gesture otherwise
   reloads the page and loses form state. */
body {
    overscroll-behavior-y: contain;
}

/* Utility::faIcon() used to emit an <img> from icongr.am, so the gradient
   rules at .mobile-bottom-nav .nav-item i (above, ~line 756) never matched
   anything -- there was no <i> in the nav. Now that faIcon() emits a real
   FontAwesome <i>, those rules suddenly apply, and their
   -webkit-text-fill-color: transparent overrides the per-icon colour that
   BottomNav.php passes (grey #6c757d normally, blue #0d6efd when active).
   Neutralised here so the nav keeps rendering exactly as it does today.
   The gradient treatment still works -- delete this block to switch it on,
   but that is a visual design decision, not part of removing a third-party
   dependency. */
.mobile-bottom-nav .nav-item i.pms-icon,
.mobile-bottom-nav .nav-item.active i.pms-icon {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

/* Removes the grey flash on tap that makes a web view feel like a web view. */
.mobile-bottom-nav a,
.mobile-bottom-nav button,
.btn,
.nav-item {
    -webkit-tap-highlight-color: transparent;
}

/* site.css had no reduced-motion handling at all; the glass loader and the
   gradient animations are the heaviest offenders. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   App-shell page transitions

   Cross-document view transitions. Purely additive and JS-free: engines that
   do not support @view-transition drop the unknown at-rule, so navigation
   stays byte-identical to what it is today.

   This is deliberately NOT a client-side router. A fetch-and-swap navigation
   layer (or document-level Pjax) would have to re-initialise Kartik Select2,
   DatePicker, GridView and DynaGrid, plus ActiveForm client validation and the
   CSRF meta tag, across ~120 heterogeneous pages that each register their own
   inline JS -- and nine Pjax::begin() grid containers already exist, which
   jquery-pjax cannot nest. The visible payoff (no white flash between pages,
   a bottom nav that appears to persist) is achievable here with no JS and
   essentially no regression surface.
   ========================================================================== */

@view-transition {
    navigation: auto;
}

/* Naming these makes the browser morph the same element across documents
   instead of cross-fading it with the page body -- that persistence IS the
   app-shell effect. Both are rendered exactly once per document:
   .mobile-bottom-nav by app/widgets/BottomNav.php, .navbar-main by
   app/views/partials/header.php. view-transition-name must be unique per
   document, and both are. */
.mobile-bottom-nav {
    view-transition-name: pms-bottom-nav;
}

.navbar-main {
    view-transition-name: pms-header;
}

/* Short enough to read as responsiveness rather than animation. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 140ms;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* The loader starts transparent and only fades in after a delay.

   Without this, cross-document view transitions make it worse than useless:
   the browser holds a snapshot of the outgoing page until the new document
   paints, so a fast same-origin navigation would flash a full-screen white
   loader *inside* the transition. Delaying it means quick navigations never
   show it at all, while a genuinely slow page still gets feedback.

   Pure CSS on purpose -- the loader markup is inlined in five layouts and
   driven from main.js, and none of that has to change. .fade-out still wins
   because it is declared later in the cascade and sets both opacity and
   visibility. */
#global-site-loader {
    opacity: 0;
    animation: pms-loader-reveal 200ms ease 400ms forwards;
}

@keyframes pms-loader-reveal {
    to {
        opacity: 1;
    }
}

#global-site-loader.fade-out {
    animation: none;
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    #global-site-loader {
        animation-duration: 1ms;
    }
}

/* ==========================================================================
   iOS / iPhone specifics

   @supports (-webkit-touch-callout: none) is the usual iOS-only guard --
   Chrome on Android does not support that property, so none of this changes
   Android rendering.
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
    /* iOS Safari ZOOMS THE PAGE IN whenever a focused form control has a
       computed font-size below 16px, and it does not zoom back out afterwards.

       This app sets html { font-size: 14px }, and rem is relative to the root,
       so Bootstrap's .form-control { font-size: 1rem } computes to 14px -- i.e.
       every ordinary input in the app triggers it. It used to be masked on two
       screens by user-scalable=no, which was removed because locking zoom fails
       WCAG 1.4.4 and this app is used by elderly members. Raising the controls
       to 16px is the fix that keeps zoom available AND stops the jump.

       16px exactly: the threshold, so the visual change is as small as it can be. */
    .form-control,
    .form-control-sm,
    .custom-select,
    .custom-file-label,
    .select2-search__field,
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   PWA Install Invitation Banner
   ========================================================================== */

.pwa-install-banner {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    right: 1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1035;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pwa-install-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pwa-install-banner-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    line-height: 1.3;
}

.pwa-install-banner-dismiss {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.pwa-install-banner-dismiss:hover,
.pwa-install-banner-dismiss:focus {
    color: #212529;
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

.pwa-install-banner-body {
    font-size: 0.875rem;
    color: #495057;
    margin: 0;
    line-height: 1.45;
}

.pwa-install-banner-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.25rem;
}

.pwa-install-banner-btn {
    background: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
    border-radius: 0.75rem !important;
    padding: 0.45rem 1.15rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08) !important;
    transition: all 0.2s ease !important;
}

.pwa-install-banner-btn:hover {
    background: #0d6efd !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.25) !important;
}

.pwa-install-banner-btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
 * Local Form Draft Restore Bar
 * Gentle notice matching the glassmorphic design system.
 * -------------------------------------------------------------------------- */
.pms-draft-bar {
    background: rgba(254, 249, 231, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(217, 119, 6, 0.28) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 15px 0 rgba(180, 83, 9, 0.07) !important;
    padding: 0.85rem 1.15rem !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.pms-draft-text {
    color: #92400e !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    flex: 1 1 240px !important;
    margin: 0 !important;
}

.pms-draft-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.pms-draft-btn {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 0.5rem !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.pms-draft-btn-restore {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
}

.pms-draft-btn-restore:hover,
.pms-draft-btn-restore:focus {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
    outline: none !important;
}

.pms-draft-btn-discard {
    background: rgba(107, 114, 128, 0.1) !important;
    color: #4b5563 !important;
    border: 1px solid rgba(107, 114, 128, 0.25) !important;
}

.pms-draft-btn-discard:hover,
.pms-draft-btn-discard:focus {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #1f2937 !important;
    border-color: rgba(107, 114, 128, 0.4) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .pms-draft-bar,
    .pms-draft-btn {
        transition: none !important;
    }
}

/* ==========================================================================
   PmsNotice System (app-notice.js)
   Fixed, top of the viewport, centred, max-width 480px, z-index 1040.
   Sits above .navbar-main without colliding with bottom install banner.
   All classes prefixed with "pms-notice-".
   ========================================================================== */

.pms-notice-container {
    position: fixed;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 1rem;
    right: 1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1040;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pms-notice-item {
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pms-notice-info {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(13, 110, 253, 0.35) !important;
    color: #0c4a6e !important;
}

.pms-notice-warn {
    background: rgba(254, 249, 231, 0.94) !important;
    border: 1px solid rgba(217, 119, 6, 0.38) !important;
    color: #92400e !important;
}

.pms-notice-success {
    background: rgba(240, 253, 244, 0.94) !important;
    border: 1px solid rgba(34, 197, 94, 0.38) !important;
    color: #166534 !important;
}

.pms-notice-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.pms-notice-text {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    word-break: break-word;
    color: inherit !important;
}

.pms-notice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pms-notice-action {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid currentColor !important;
    color: inherit !important;
    border-radius: 0.5rem !important;
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.pms-notice-action:hover,
.pms-notice-action:focus {
    transform: translateY(-1px) !important;
    outline: none !important;
}

.pms-notice-info .pms-notice-action:hover,
.pms-notice-info .pms-notice-action:focus {
    background: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

.pms-notice-warn .pms-notice-action:hover,
.pms-notice-warn .pms-notice-action:focus {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

.pms-notice-success .pms-notice-action:hover,
.pms-notice-success .pms-notice-action:focus {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.pms-notice-dismiss {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    opacity: 0.65 !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    padding: 0.15rem 0.35rem !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.15s ease, background-color 0.15s ease !important;
    flex-shrink: 0 !important;
}

.pms-notice-dismiss:hover,
.pms-notice-dismiss:focus {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.07) !important;
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .pms-notice-item,
    .pms-notice-action,
    .pms-notice-dismiss {
        transition: none !important;
    }
}