/**
 * USAWS Compact UI - App Shell Chrome
 * Compact sidebar (200px), slim topbar (40px), tight main padding.
 * Depends on ui/tokens.css. Markup: layouts/app.php,
 * partials/app/sidebar.php, partials/app/topbar.php,
 * layouts/minimal.php.
 *
 * The mobile drawer still runs on the Tailwind utility classes
 * (-translate-x-full / hidden) toggled by scripts/app-shell.js, so
 * those classes stay in the markup; everything visual lives here.
 */

/* ── Sidebar ──────────────────────────────────────────────── */
#sidebar.ui-sidebar {
    width: 200px;
    background: var(--md-surface-container-lowest);
    border-right: 1px solid var(--border);
    box-shadow: none;
    display: flex; flex-direction: column;
}
.ui-side-brand {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem .5rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.ui-side-brand img {
    height: 26px; width: auto; max-width: 32px; object-fit: contain;
}
.ui-side-brand b {
    font-family: var(--font-display); font-size: .85rem; line-height: 1.15;
    color: var(--md-primary); overflow: hidden; text-overflow: ellipsis;
}
.ui-side-nav {
    flex: 1; overflow-y: auto;
    padding: .4rem .45rem;
    display: flex; flex-direction: column; gap: 1px;
}
.ui-side-h {
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); padding: .55rem .5rem .2rem;
}
.ui-side-nav a.ui-nav-item {
    display: flex; align-items: center; gap: .5rem;
    min-height: 28px; padding: .1rem .5rem;
    border-radius: var(--shape-sm);
    text-decoration: none; font-size: .8rem; font-weight: 600;
    color: var(--md-on-surface-variant);
}
.ui-side-nav a.ui-nav-item .app-icon {
    width: 17px; height: 17px; flex-shrink: 0;
    color: var(--text-muted);
}
.ui-side-nav a.ui-nav-item:hover { background: var(--md-surface-container); color: var(--text); }
.ui-side-nav a.ui-nav-item.active { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ui-side-nav a.ui-nav-item.active .app-icon { color: var(--md-on-primary-container); }
.ui-side-nav .ui-nav-badge {
    margin-left: auto; font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
    background: var(--md-secondary-container); color: var(--md-on-secondary-container);
    border-radius: var(--shape-full); padding: .05rem .38rem;
}
.ui-side-foot {
    padding: .5rem .6rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; color: var(--text-muted);
}
.ui-side-foot .ui-avatar {
    width: 24px; height: 24px; border-radius: var(--shape-full); flex-shrink: 0;
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
    display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
.ui-side-foot .ui-viewer { flex: 1; min-width: 0; }
.ui-side-foot .ui-viewer b {
    display: block; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-side-foot .ui-viewer small {
    display: block; font-size: .75rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-side-foot .ui-foot-btn {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: var(--shape-sm);
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
    text-decoration: none; padding: 0;
}
.ui-side-foot .ui-foot-btn:hover { background: var(--md-surface-container); color: var(--text); }
.ui-side-foot .ui-foot-btn .app-icon, .ui-side-foot .ui-foot-btn .msr { width: 16px; height: 16px; font-size: 16px; }

/* ── Topbar ───────────────────────────────────────────────── */
.ui-topbar {
    display: flex; align-items: center; gap: .75rem;
    min-height: 40px; padding: 0 .9rem;
    background: var(--md-surface-container-lowest);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.ui-topbar .ui-menu-toggle {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: var(--shape-sm);
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
}
.ui-topbar .ui-menu-toggle:hover { background: var(--md-surface-container); }
.ui-topbar .ui-menu-toggle .app-icon { width: 18px; height: 18px; }
/* This button only does anything when #sidebar is off-canvas, which Tailwind's
   lg:static/lg:translate-x-0 utilities only apply at >=1024px. Its own
   lg:hidden class relies on the same Tailwind breakpoint, but the Tailwind
   CDN stylesheet loads before this one, so this rule's unconditional
   display:flex was winning the cascade at desktop widths and leaving a
   dead button on screen. Repeat the same 1024px cutoff here so it actually
   disappears once the sidebar it controls is no longer collapsible. */
@media (min-width: 1024px) {
    .ui-topbar .ui-menu-toggle { display: none; }
}
.ui-brand-mini {
    display: inline-flex; align-items: center; gap: .45rem;
    text-decoration: none; flex-shrink: 0;
}
.ui-brand-mini img { height: 22px; width: auto; max-width: 28px; object-fit: contain; }
.ui-brand-mini b {
    font-family: var(--font-display); font-size: .85rem; color: var(--md-primary); white-space: nowrap;
}
.ui-crumbs { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--text-muted); min-width: 0; }
.ui-crumbs a { text-decoration: none; color: var(--text-muted); }
.ui-crumbs a:hover { text-decoration: underline; color: var(--text); }
.ui-crumbs .sep { opacity: .5; }
.ui-crumbs b { color: var(--text); font-weight: 600; white-space: nowrap; }
.ui-topbar .ui-spacer { flex: 1; }
.ui-rolechip {
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--md-surface-container-high); color: var(--text-muted);
    border-radius: var(--shape-full); padding: .18rem .55rem; white-space: nowrap;
}
.ui-theme-toggle {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: var(--shape-full);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); cursor: pointer; padding: 0;
}
.ui-theme-toggle:hover { background: var(--md-surface-container); }
.ui-theme-toggle .i-sun { display: none; }
[data-theme="dark"] .ui-theme-toggle .i-sun { display: block; }
[data-theme="dark"] .ui-theme-toggle .i-moon { display: none; }

/* ── Main content ─────────────────────────────────────────── */
main.ui-main { padding: .75rem .9rem 1rem; }

/* ── Minimal layout bar (players, standalone) ─────────────── */
.ui-minbar {
    display: flex; align-items: center; gap: .6rem;
    min-height: 36px; padding: 0 .9rem;
    background: var(--md-surface-container-lowest);
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
}
.ui-minbar .ui-back {
    display: inline-flex; align-items: center; gap: .25rem;
    text-decoration: none; font-weight: 600; color: var(--text-muted);
    border-radius: var(--shape-full); padding: .15rem .55rem .15rem .3rem;
}
.ui-minbar .ui-back:hover { background: var(--md-surface-container); color: var(--text); }

/* Legacy page-header partial (.app-page-header) compaction so
   unconverted views tighten up without markup changes. */
.app-page-header h1 { font-size: 1.25rem !important; line-height: 1.2 !important; margin-bottom: .35rem !important; color: var(--md-primary); font-family: var(--font-display); }
.app-page-header { margin-bottom: .6rem !important; }
.app-page-subtitle { font-size: .76rem !important; color: var(--text-muted) !important; }

/* Flash messages, compact */
.ui-flash { margin: .5rem .9rem 0; }

/* Legacy app-shell.css pieces re-toned to tokens (its hardcoded
   grays would not flip in dark mode). */
.app-breadcrumbs { font-size: .75rem !important; }
.app-breadcrumbs a { color: var(--text-muted) !important; }
.app-breadcrumbs a:hover { color: var(--text) !important; }
.app-breadcrumbs [aria-current="page"] { color: var(--text) !important; font-weight: 600; }
.app-breadcrumbs .app-crumb-sep { color: var(--md-outline) !important; }
.app-tabs, [data-app-tabs] { border-color: var(--border) !important; }

/* Flash messages (App\Helpers\Flash emits Tailwind light-only
   color classes; re-tone them to tokens so dark mode works). */
.flash-message { padding: .45rem .7rem !important; font-size: .82rem; border-radius: var(--shape-sm) !important; }
.flash-message.bg-green-100  { background: var(--success-c) !important; }
.flash-message.text-green-800 { color: var(--success) !important; }
.flash-message.bg-red-100    { background: var(--error-c) !important; }
.flash-message.text-red-800  { color: var(--error) !important; }
.flash-message.bg-yellow-100 { background: var(--warning-c) !important; }
.flash-message.text-yellow-800 { color: var(--warning) !important; }
.flash-message.bg-blue-100   { background: var(--info-c) !important; }
.flash-message.text-blue-800 { color: var(--info) !important; }
.flash-messages { margin-bottom: .6rem !important; }

/* ════════════════════════════════════════════════════════════
   LEGACY TAILWIND REMAP (bridge layer)
   Re-points the common Tailwind color/type utilities still present
   in unconverted views at the token system, so every LMS page gets
   token colors, dark mode, and compact type immediately. !important
   because the Tailwind CDN injects its stylesheet at runtime and
   can land after this file in the cascade. Remove this block once
   the structural conversion of all views is complete.
   ════════════════════════════════════════════════════════════ */
.bg-white      { background-color: var(--md-surface-container-lowest) !important; }
.bg-gray-50    { background-color: var(--md-surface-container-low) !important; }
.bg-gray-100   { background-color: var(--md-surface-container) !important; }
.bg-gray-200   { background-color: var(--md-surface-container-high) !important; }
.bg-background { background-color: var(--md-surface) !important; }
.bg-primary    { background-color: var(--md-primary) !important; }
.bg-secondary  { background-color: var(--md-secondary) !important; }
.bg-accent     { background-color: var(--md-tertiary) !important; }
.text-white    { color: var(--md-on-primary) !important; }
.text-gray-900, .text-gray-800 { color: var(--md-on-surface) !important; }
.text-gray-700, .text-gray-600 { color: var(--md-on-surface-variant) !important; }
.text-gray-500, .text-gray-400, .text-muted { color: var(--text-muted) !important; }
.text-primary  { color: var(--md-primary) !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.bg-red-50, .bg-red-100     { background-color: var(--error-c) !important; }
.text-red-600, .text-red-700, .text-red-800 { color: var(--error) !important; }
.bg-green-50, .bg-green-100 { background-color: var(--success-c) !important; }
.text-green-600, .text-green-700, .text-green-800 { color: var(--success) !important; }
.bg-yellow-50, .bg-yellow-100, .bg-amber-50, .bg-amber-100 { background-color: var(--warning-c) !important; }
.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-amber-600, .text-amber-700 { color: var(--warning) !important; }
.bg-blue-50, .bg-blue-100   { background-color: var(--info-c) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--info) !important; }
.shadow-sm { box-shadow: var(--elev-1) !important; }
.shadow-md, .shadow-lg { box-shadow: var(--elev-2) !important; }
/* Oversized legacy type down to the compact scale */
.text-3xl { font-size: 1.35rem !important; line-height: 1.2 !important; }
.text-2xl { font-size: 1.2rem !important; line-height: 1.2 !important; }
.text-xl  { font-size: 1.05rem !important; line-height: 1.25 !important; }
.text-lg  { font-size: .95rem !important; line-height: 1.3 !important; }

/* simple-datatables densification (legacy datatable-overrides.css
   uses the 8px/16px cell padding; tighten to the compact scale). */
.datatable-table { font-size: .82rem !important; }
.datatable-table thead th { padding: .3rem .6rem !important; font-size: .75rem !important; }
.datatable-table tbody td { padding: .28rem .6rem !important; }