/* ==========================================================================
   App shell - phone-width chrome that matches the EXAMIN mobile app.

   Loaded only below a breakpoint (the <link media="..."> attribute decides,
   see includes/app_shell.php), so nothing here can touch the desktop layout.
   Plain CSS on purpose: the student pages run a CDN Tailwind with a different
   palette, and this has to look the same on both.

   Tokens mirror mobile/src/theme.js.
   ========================================================================== */

:root {
    --app-primary: #5A3EE8;
    --app-primary-soft: #EDE8FF;
    --app-accent: #FF5C39;
    --app-text: #131326;
    --app-muted: #65657E;
    --app-faint: #B1B2C8;
    --app-bg: #F8F8FC;
    --app-card: #FFFFFF;
    --app-card-alt: #F7F7FD;
    --app-border: #E2E2EC;
    --app-border-soft: #F1F1F6;
    --app-tabbar-h: 60px;
}

html.dark {
    --app-primary: #9C88FF;
    --app-primary-soft: #2E2168;
    --app-text: #EDECF8;
    --app-muted: #A8A8BE;
    --app-faint: #6F6F88;
    --app-bg: #0B0F19;
    --app-card: #111726;
    --app-card-alt: #1B2233;
    --app-border: #2A3142;
    --app-border-soft: #1B2233;
}

body {
    background: var(--app-bg);
    padding-bottom: calc(var(--app-tabbar-h) + 8px + env(safe-area-inset-bottom)) !important;
}

/* Plus Jakarta Sans, as in the app. Icon fonts are left alone. The script font
   for non-Latin languages is appended by app_shell_head(). */
body :not(.material-symbols-outlined):not(i):not([class*="fa-"]):not(svg):not(path) {
    font-family: var(--app-font);
}

/* ----------------------------------------------------- the site's own chrome
   Replaced by the app top bar, tab bar and compact footer below. */
#navbar,
#examin-announcement,
#examin-footer,
#student-topbar,
#student-mobile-nav {
    display: none !important;
}

/* ----------------------------------------------------------------- top bar */
.app-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--app-card);
    border-bottom: 1px solid var(--app-border-soft);
}
.app-topbar-side {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.app-topbar-side--end { justify-content: flex-end; }
.app-topbar-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.app-topbar-logo img { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.app-topbar-logo span {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.3px;
    color: var(--app-text);
}
.app-topbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-round-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--app-card-alt);
    color: var(--app-text);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.app-round-btn svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- tab bar */
.app-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    height: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
    padding: 8px 4px env(safe-area-inset-bottom);
    background: var(--app-card);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -4px 16px rgba(90, 62, 232, 0.10);
}
.app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    color: var(--app-faint);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.app-tab svg { width: 24px; height: 24px; }
.app-tab span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
.app-tab[aria-current="page"] { color: var(--app-primary); }
.app-tab .app-ico-fill { fill: none; }
.app-tab[aria-current="page"] .app-ico-fill { fill: currentColor; }
.app-tab[aria-current="page"] .app-ico-detail { stroke: var(--app-card); }

/* ------------------------------------------------------- compact footer */
.app-mfooter {
    display: block;
    padding: 20px 20px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--app-muted);
}
.app-mfooter nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-bottom: 8px;
}
.app-mfooter a { color: var(--app-muted); text-decoration: none; font-weight: 600; }