/**
 * Admin app-feel layer (loaded on every staff page via admin-html-base.php):
 *   - Toast notifications (wsToast + auto-converted success flashes)
 *   - Quick-search overlay (Ctrl/Cmd-K command palette)
 *   - Pull-to-refresh indicator (phones)
 *   - Skeleton shimmer + designed empty states
 *   - Soft page fade-in
 */

/* ——— page fade-in ——— */
@media (prefers-reduced-motion: no-preference) {
    .admin-main { animation: wsPageIn 0.22s ease-out; }
    @keyframes wsPageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ——— toasts ——— */
.ws-toasts {
    position: fixed; z-index: 400; left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; width: min(94vw, 480px);
}
@media (max-width: 767px) {
    .ws-toasts { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* clear the tab bar */
}
.ws-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    max-width: 100%;
    background: #111827; color: #f9fafb;
    border-radius: 12px; padding: 11px 16px;
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    animation: wsToastIn 0.22s ease-out;
}
.ws-toast.is-leaving { animation: wsToastOut 0.25s ease-in forwards; }
@keyframes wsToastIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes wsToastOut { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
.ws-toast__ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ws-toast__ico svg { width: 12px; height: 12px; }
.ws-toast--success .ws-toast__ico { background: #16a34a; }
.ws-toast--error   .ws-toast__ico { background: #dc2626; }
.ws-toast--info    .ws-toast__ico { background: #2563eb; }

/* ——— quick search (⌘K palette) ——— */
.ws-qs { position: fixed; inset: 0; z-index: 380; background: rgba(15, 23, 42, 0.5); display: none; align-items: flex-start; justify-content: center; padding: 10vh 14px 14px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ws-qs.is-open { display: flex; }
.ws-qs__card { width: 100%; max-width: 540px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.ws-qs__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef0f3; }
.ws-qs__head svg { width: 18px; height: 18px; color: #9ca3af; flex: 0 0 auto; }
.ws-qs__input { flex: 1 1 auto; border: 0; outline: none; font-size: 16px; background: transparent; color: #111827; min-width: 0; }
.ws-qs__esc { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #9ca3af; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 6px; }
.ws-qs__list { overflow-y: auto; padding: 6px; }
.ws-qs__group { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; padding: 10px 12px 4px; }
.ws-qs__item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border: 0; background: none; border-radius: 10px;
    font-size: 14px; color: #1f2937; cursor: pointer; text-decoration: none;
}
.ws-qs__item.is-active, .ws-qs__item:hover { background: #f6f1f2; color: #9c1c34; }
.ws-qs__item svg { width: 16px; height: 16px; color: #9ca3af; flex: 0 0 auto; }
.ws-qs__item.is-active svg, .ws-qs__item:hover svg { color: #9c1c34; }
.ws-qs__item small { margin-left: auto; color: #b8bcc4; font-size: 11px; white-space: nowrap; }
.ws-qs__empty { padding: 22px 12px; text-align: center; color: #9ca3af; font-size: 13.5px; }

/* ——— pull-to-refresh ——— */
.ws-ptr {
    position: fixed; z-index: 90; top: 8px; left: 50%;
    width: 36px; height: 36px; margin-left: -18px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(-50px); pointer-events: none;
    transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}
.ws-ptr svg { width: 18px; height: 18px; color: #9c1c34; }
.ws-ptr.is-armed svg { transform: rotate(180deg); transition: transform 0.15s ease; }
.ws-ptr.is-loading svg { animation: wsPtrSpin 0.8s linear infinite; }
@keyframes wsPtrSpin { to { transform: rotate(360deg); } }

/* ——— skeleton shimmer ——— */
.ws-skel {
    position: relative; overflow: hidden;
    background: #eceef1; border-radius: 8px; color: transparent !important;
    min-height: 0.9em;
}
.ws-skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: wsSkel 1.3s ease-in-out infinite;
}
@keyframes wsSkel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ws-skel--line { height: 12px; margin: 6px 0; }
.ws-skel--block { height: 64px; }

/* ——— designed empty states ——— */
.wsdash__empty, .ws-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center;
    padding: 18px 12px; margin: 4px 0;
    border: 1.5px dashed #e2e6ea; border-radius: 12px;
    color: #9ca3af; font-size: 0.85rem;
}
.wsdash__empty::before, .ws-empty::before {
    content: ""; width: 26px; height: 26px; opacity: 0.55;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3Cpath d='M8 14s1.5 1.5 4 1.5 4-1.5 4-1.5'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3Cpath d='M8 14s1.5 1.5 4 1.5 4-1.5 4-1.5'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ——— theme toggle button (topbar) ——— */
.admin-topbar__theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    border: 0; background: transparent; color: #374151; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-topbar__theme:hover { background: #f3f4f6; }
.admin-topbar__theme svg { width: 18px; height: 18px; }
.admin-topbar__theme .ws-ico-sun { display: none; }
html[data-ws-theme="dark"] .admin-topbar__theme .ws-ico-sun { display: block; }
html[data-ws-theme="dark"] .admin-topbar__theme .ws-ico-moon { display: none; }

/* Logo in the top bar (moved out of the sidebar to reclaim vertical space on
   short laptop/iPad screens; the sidebar brand header is gone). */
.admin-topbar__logo { display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: 8px; padding: 1px; line-height: 0; }
.admin-topbar__logo img { width: 30px; height: 30px; object-fit: contain; display: block; border-radius: 7px; }
.admin-topbar__logo:hover { background: #f3f4f6; }
html[data-ws-theme="dark"] .admin-topbar__logo:hover { background: #232a33; }
/* The top-bar identity is now just a compact avatar that links to the profile
   (full name lives in the sidebar account panel below). */
.admin-topbar__user { text-decoration: none; }

/* Internal announcements shown on staff dashboards (includes/announcements.php) */
.ws-anns { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.ws-ann { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid #f5cdd5; border-left: 4px solid #9c1c34; border-radius: 12px; background: #fdf2f4; box-shadow: 0 1px 3px rgba(17, 24, 39, .05); }
.ws-ann--pinned { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; }
.ws-ann__ico { font-size: 20px; line-height: 1.25; flex: 0 0 auto; }
.ws-ann__main { flex: 1 1 auto; min-width: 0; }
.ws-ann__title { margin: 0 0 3px; font-size: 1rem; font-weight: 700; color: #1f2937; }
.ws-ann__text { font-size: 0.9rem; line-height: 1.5; color: #374151; overflow-wrap: anywhere; }

/* ============================================================================
   Desktop content width — fill the space beside the sidebar. Kept HERE (versioned
   ?v=filemtime) with extra specificity so it beats the CACHED admin-app-shell.css
   (.admin-main max-width:1400) and schedule-admin.css (.schedule-panel max-width
   ~920px) that otherwise pinned every page to a narrow centered column — ~40% of a
   large monitor. Now the main content + panels use the full width up to a readable
   cap. (Source files are updated to match; this override is what reaches stale caches.)
   ============================================================================ */
body .admin-workspace .admin-main,
body.schedule-app .admin-workspace .admin-main { max-width: 2400px; margin-left: auto; margin-right: auto; }
body .admin-main .schedule-panel,
body.schedule-app .admin-main .schedule-panel { max-width: none; margin-left: 0; margin-right: 0; }

/* Full-width panels would stretch a lone form field across the whole page. Keep single-line
   text-like inputs + selects at a readable width so stacked forms read as a tidy left column;
   filter/toolbar inputs are already small, textareas keep their width, and anything that truly
   needs to span can opt out with .ws-wide. This is the "inner column" for forms, applied once. */
.admin-main input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=image]):not([type=color]):not([type=range]):not([type=file]):not(.ws-wide),
.admin-main select:not(.ws-wide) { max-width: 34rem; }
/* Opt-outs: fields inside grids / flex rows / segmented pickers should fill their cell. */
.admin-main .dash-form-grid input, .admin-main .dash-form-grid select,
.admin-main [class*="__row"] input, .admin-main [class*="__row"] select,
.admin-main [class*="-bar"] input, .admin-main [class*="-bar"] select,
.admin-main [class*="-grid"] input, .admin-main [class*="-grid"] select { max-width: none; }

/* Utility: wrap a page's primary form in a readable, left-aligned column (for pages that are
   essentially one form). Add class="… admin-formcol" to the form's panel/wrapper. */
body .admin-main .admin-formcol { max-width: 940px; margin-left: 0; margin-right: 0; }

/* ============================================================================
   Two-tier sidebar nav (navx): desktop = category icon rail + page panel;
   mobile = category list you drill into. Lives inside .admin-sidebar__nav.
   Kept HERE (not admin-app-shell.css) because admin-app.css is loaded with a
   ?v=filemtime cache-buster — admin-app-shell.css rides an unversioned @import
   and would render the nav unstyled on clients with a stale cached copy.
   The sidebar is always dark, so colors use the --adm-sidebar-* tokens.
   ============================================================================ */
.admin-sidebar__nav.navx { display: flex; padding: 0; overflow: hidden; }
.navx__rail { display: none; }
.navx__body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.45rem 0.4rem 1rem; }
.navx__home { display: none; }
.navx__back { display: none; }
.navx__cat { display: none; }
.navx__cat.is-active { display: block; }

.navx__cat-title { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--adm-sidebar-muted); padding: 0.4rem 0.75rem 0.45rem; }
.navx__list { list-style: none; margin: 0; padding: 0; }
.navx__grouphdr { list-style: none; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--adm-sidebar-muted); padding: 0.5rem 0.75rem 0.2rem; margin-top: 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.navx__list > .navx__grouphdr:first-child { border-top: 0; margin-top: 0; }
.navx__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; margin: 2px 0; border-radius: 8px; color: var(--adm-sidebar-text); text-decoration: none; font-size: 0.855rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; }
.navx__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.navx__link.is-active { background: var(--adm-accent-soft); color: #fff; box-shadow: inset 3px 0 0 var(--adm-accent); }
.navx__lab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.navx__modrow { display: flex; align-items: center; gap: 2px; }
.navx__modrow .navx__link { flex: 1 1 auto; min-width: 0; margin-right: 0; }
.navx__disc { flex: 0 0 auto; background: transparent; border: 0; color: var(--adm-sidebar-muted); cursor: pointer; padding: 7px 6px; border-radius: 8px; display: inline-flex; align-items: center; }
.navx__disc:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.navx__chev { display: inline-flex; transition: transform 0.15s ease; }
.navx__chev svg { width: 15px; height: 15px; display: block; }
.navx__mod.is-open > .navx__modrow .navx__disc .navx__chev { transform: rotate(90deg); }
.navx__subs { list-style: none; margin: 1px 0 5px; padding: 0; display: none; }
.navx__mod.is-open > .navx__subs { display: block; }
.navx__sub { display: flex; align-items: center; gap: 8px; padding: 0.4rem 0.7rem 0.4rem 2.55rem; margin: 1px 0; border-radius: 8px; color: var(--adm-sidebar-muted); text-decoration: none; font-size: 0.8rem; font-weight: 450; }
.navx__sub:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.navx__sub.is-active { color: #fff; background: var(--adm-accent-soft); box-shadow: inset 3px 0 0 var(--adm-accent); }
.navx__badge { margin-left: auto; }

/* Desktop: persistent category icon rail + page panel. */
@media (min-width: 768px) {
    .navx__rail { display: flex; flex-direction: column; gap: 3px; flex: 0 0 2.9rem; padding: 0.4rem 0.3rem 0.5rem; border-right: 1px solid var(--adm-sidebar-border); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .navx__railbtn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border: 0; background: transparent; color: var(--adm-sidebar-muted); border-radius: 9px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
    .navx__railbtn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
    .navx__railbtn.is-active { background: var(--adm-accent-soft); color: #fff; }
    .navx__railbtn svg { width: 1.1rem; height: 1.1rem; }
    /* Shorter laptops: tighten the rail so every category fits before it scrolls. */
    @media (max-height: 800px) {
        .navx__rail { gap: 2px; padding-top: 0.3rem; padding-bottom: 0.35rem; }
        .navx__railbtn { width: 1.95rem; height: 1.95rem; border-radius: 8px; }
        .navx__railbtn svg { width: 1.02rem; height: 1.02rem; }
    }
}

/* Thin, dark scrollbars for the sidebar columns (replaces the default light bar
   that looked harsh against the dark sidebar when the rail/panel overflow). */
.navx__rail, .navx__body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.navx__rail::-webkit-scrollbar, .navx__body::-webkit-scrollbar { width: 7px; height: 7px; }
.navx__rail::-webkit-scrollbar-track, .navx__body::-webkit-scrollbar-track { background: transparent; }
.navx__rail::-webkit-scrollbar-thumb, .navx__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
.navx__rail:hover::-webkit-scrollbar-thumb, .navx__body:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
.navx__rail::-webkit-scrollbar-thumb:hover, .navx__body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

/* Mobile: hide the rail; show a category list you drill into. */
@media (max-width: 767px) {
    .navx__rail { display: none; }
    .navx__home { display: block; }
    .navx.is-drilled .navx__home { display: none; }
    .navx__cat, .navx__cat.is-active { display: none; }
    .navx.is-drilled .navx__cat.is-active { display: block; }
    .navx__back { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 0; color: var(--adm-sidebar-muted); font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.6rem 0.5rem; cursor: pointer; }
    .navx__back:hover { color: #fff; }
    .navx__catrow { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: transparent; border: 0; color: var(--adm-sidebar-text); font: inherit; font-size: 0.92rem; font-weight: 500; padding: 0.7rem 0.7rem; margin: 1px 0; border-radius: 8px; cursor: pointer; }
    .navx__catrow:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
    .navx__catrow-lab { flex: 1 1 auto; text-align: left; }
    .navx__catrow-n { font-size: 0.72rem; color: var(--adm-sidebar-muted); }
    .navx__catrow .navx__chev svg { width: 17px; height: 17px; }
}