/* =============================================================================
   MOBILE STYLES — auto-applied on viewports ≤ 767 px
   -----------------------------------------------------------------------------
   These rules override the desktop layout in style.css for narrow screens.
   The browser fires them automatically on real mobile devices and on small
   browser windows; no opt-in flag, no JS bootstrapper. To preview on desktop,
   use Chrome DevTools' device toolbar (Ctrl+Shift+M).

   767, NOT 768: Tailwind's md: kicks in AT 768 (min-width) — at exactly
   768 px (iPad Mini portrait) both "mobile" and "desktop" rules fired at
   once and the 100vw sidebar covered the whole app.
   ============================================================================= */

@media (max-width: 767px) {

/* ============================================================================
   ONBOARDING / SETUP SCREEN
   ============================================================================ */

/* Make the setup card fill the whole viewport — no inset, no rounded card */
#setup-screen {
    padding: 0 !important;
}
#setup-screen > .max-w-4xl,
#setup-screen > .max-w-6xl,
#setup-screen > div:first-of-type {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
}

/* --- Header: a touch more padding so it doesn't feel squished ------------ */
#setup-screen > div > div:first-child {
    padding: 0.85rem 0.85rem 0.7rem !important;
}
/* Step indicator dots — smaller so they read as a "progress bar" instead
   of competing with the title for attention. */
#setup-screen .border-b .flex.items-center.gap-1 > span {
    transform: scale(0.65) !important;
    transform-origin: center !important;
}
/* Force the renderSetupHeader outer flex to row on mobile so the HR/EN
   toggle sits on the RIGHT next to the title block (same as desktop),
   instead of stacking below the step indicator. Tailwind's setup.js
   markup uses `flex flex-col sm:flex-row` which would put it below at
   <640px — override that here. */
#setup-screen .border-b > div.flex {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
#setup-screen .border-b h1 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0.15rem 0 0.2rem !important;
}
#setup-screen .border-b .text-xs.text-blue-100 {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
}
/* Step indicator row — keep "Korak X od 3 ●●●" on a single line
   below the title (default position from setup.js renderSetupHeader). */
#setup-screen .border-b .flex.items-center.gap-2.mt-1 {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
}
#setup-screen .border-b .flex.items-center.gap-2.mt-1 > span.text-xs {
    white-space: nowrap !important;
}

/* Hide the content-language picker (the second HR/EN switch). On mobile we
   keep only the UI language toggle — content language has its own field
   in settings. The selector targets the bg-blue-900/40 wrapper used in
   renderSetupHeader's contentLangPicker. */
#setup-screen [class*="bg-blue-900"] {
    display: none !important;
}

/* Right-side UI lang toggle on the header — make it visibly subtler so
   it doesn't dominate the slim mobile header. Drop the white wrapper
   bg, hide the globe icon, shrink the pill buttons, no border. */
#setup-screen .border-b .flex.justify-between {
    gap: 0.5rem !important;
}
#setup-screen .border-b .bg-white\/10 {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    gap: 0 !important;
}
#setup-screen .border-b .bg-white\/10 > span {
    display: none !important;   /* globe emoji */
}
#setup-screen .border-b .bg-white\/10 button {
    padding: 0.15rem 0.45rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.3rem !important;
}

/* --- Layout C side panel: hidden on mobile. The mascot+bubble row at
   the top eats vertical space + the truncated bubble text wasn't
   readable enough to be worth it. Cards are what matter on a phone. */
#setup-mascot-side {
    display: none !important;
}

/* --- Sidebar (subject list + Mentor + Settings) — full-screen on mobile.
   Default Tailwind w-72 (288 px) leaves ~30 % of the right edge showing
   the dimmed main view, which can be misread as content. On a phone the
   menu is the user's whole context until they pick something, so cover
   the whole viewport. Desktop (md+) keeps the original sidebar width. */
#sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Hide the sidebar's X close button on the very first sidebar reveal
   after onboarding. setup.js#finalizeSetup adds .onboarding-just-finished
   to <body>; the first click inside the sidebar removes it again, so
   every subsequent reveal gets the normal close affordance back. */
body.onboarding-just-finished #sidebar button[onclick="toggleSidebar()"] {
    display: none !important;
}

/* Centre the "INGENIKO™" title in the sidebar header. Default mobile
   layout is `flex justify-between` which pushes the title to the right
   when the info button sits on the left + X button on the far right.
   Pull BOTH side buttons (info on left, X on right) out of the flex
   flow with absolute positioning so the title span is the only normal
   child — and parent's justify-content: center then centres it dead-on
   regardless of which side button is visible. */
#sidebar > div:first-child {
    justify-content: center !important;
}
#sidebar > div:first-child > button:first-child {
    position: absolute !important;
    left: 1rem !important;
}
/* X close button — absolute on the right; without this, its `ml-auto`
   absorbed all leftover flex space and dragged the title out of centre,
   right on top of the absolute "i" button. */
#sidebar > div:first-child > button:last-child {
    position: absolute !important;
    right: 1rem !important;
    margin-left: 0 !important;
}

/* --- Setup main column container ----------------------------------------- */
#setup-main-col {
    flex: 1 !important;
    min-height: 0 !important;
}

/* --- Setup card list: vertically centred in the available scroll area
   so equal whitespace sits above the first card and below the last.
   Flex column instead of the default grid because Tailwind's grid
   classes were swallowing align-content: center.

   `safe center` falls back to flex-start when the content is taller
   than the container — without it, plain `center` pushes the top of
   the list ABOVE the scroll container's start position, leaving the
   first cards unreachable on short-screen phones (iPhone SE, older
   Androids). Modern browser support is universal (Chrome/Safari/FF). */
#setup-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
    padding: 0.55rem !important;
    gap: 0.4rem !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Step 3 (predmet picker) needs different flex behaviour: the year
   <select> must stay anchored at the top of the card no matter how
   many subjects the chosen semester has. justify-content: flex-start
   pins the dropdown there; align-items: stretch + width:100% on the
   children kills the "shrink to longest option text" effect that
   appearance-none selects + flex-col children fall into on WebKit. */
#setup-list[data-step="subjects"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}
#setup-list[data-step="subjects"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
/* Programme/uni cards (createSelectionButton output) — icon ABSOLUTELY
   positioned on the left (top: 50% / translateY -50%) so it stays
   vertically centred no matter how tall the title block grows. Title
   + code stay in normal block flow on the right; the card reserves
   `padding-left: 3.4 rem` so they never slide under the icon. Solves
   the "icon glued to card top" issue on multi-line titles like
   DSE: "Znanost o podacima, UI i sistemsko inženjerstvo". */
#setup-list > div[data-module] {
    /* Card is a normal block with extra left padding to reserve room
       for the absolutely-positioned icon chip — guarantees the chip
       sits at the vertical centre of the card no matter how many lines
       the title wraps to (DSE wraps to 2 lines + a code subtitle).
       Scoped to [data-module] so this only hits programme/smjer cards
       on Step 2 — Step 3 (predmet) rows have their own chip styling. */
    display: block !important;
    position: relative !important;
    padding: 0.6rem 0.75rem 0.6rem 3.4rem !important;
    min-height: 3.4rem !important;
    border-width: 1px !important;
    border-left-width: 4px !important;
    border-right-width: 4px !important;
    border-left-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-radius: 0.6rem !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:first-child {          /* icon chip — absolute, vertically centred */
    position: absolute !important;
    left: 0.65rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.55rem !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
}
/* Per-module icon-chip tint (Tailwind 50-shade range) — same hue as the
   border accent but ultra-soft so icon stays the visual focus. */
#setup-list > div[data-module="BME"]      > div:first-child { background: #fef2f2 !important; } /* red-50 */
#setup-list > div[data-module="CCE"]      > div:first-child { background: #fff7ed !important; } /* orange-50 */
#setup-list > div[data-module="CPE"]      > div:first-child { background: #f0fdfa !important; } /* teal-50 */
#setup-list > div[data-module="DSE"]      > div:first-child { background: #faf5ff !important; } /* purple-50 */
#setup-list > div[data-module="EECS"]     > div:first-child { background: #fefce8 !important; } /* yellow-50 */
#setup-list > div[data-module="IEM"]      > div:first-child { background: #eff6ff !important; } /* blue-50 */
#setup-list > div[data-module="MAE"]      > div:first-child { background: #f8fafc !important; } /* slate-50 */
#setup-list > div[data-module="UNI"]      > div:first-child { background: #eef2ff !important; } /* indigo-50 */
#setup-list > div[data-module="PERSONAL"] > div:first-child { background: #ecfdf5 !important; } /* emerald-50 */
#setup-list > div[data-module] > div:nth-child(2) {         /* title — centered in the right area */
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:nth-child(3) {         /* module code — under title, centered */
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 0 !important;
    margin-top: 0.15rem !important;
}
/* Per-module accent — both edges, softened (Tailwind 300-shade range)
   so the stripes are visible but quiet. data-module is set by setup.js
   createSelectionButton. */
#setup-list > div[data-module="BME"]      { border-left-color: #fca5a5 !important; border-right-color: #fca5a5 !important; }
#setup-list > div[data-module="CCE"]      { border-left-color: #fdba74 !important; border-right-color: #fdba74 !important; }
#setup-list > div[data-module="CPE"]      { border-left-color: #5eead4 !important; border-right-color: #5eead4 !important; }
#setup-list > div[data-module="DSE"]      { border-left-color: #d8b4fe !important; border-right-color: #d8b4fe !important; }
#setup-list > div[data-module="EECS"]     { border-left-color: #fde047 !important; border-right-color: #fde047 !important; }
#setup-list > div[data-module="IEM"]      { border-left-color: #93c5fd !important; border-right-color: #93c5fd !important; }
#setup-list > div[data-module="MAE"]      { border-left-color: #cbd5e1 !important; border-right-color: #cbd5e1 !important; }
#setup-list > div[data-module="UNI"]      { border-left-color: #a5b4fc !important; border-right-color: #a5b4fc !important; }
#setup-list > div[data-module="PERSONAL"] { border-left-color: #6ee7b7 !important; border-right-color: #6ee7b7 !important; }

/* Breadcrumb in the setup header — redundant on mobile (the dot
   indicator already shows the current step + lets you rewind). Drop
   it to recover one row of vertical space in the blue header. */
#setup-screen .border-b .text-xs.text-blue-100.flex.items-center.gap-1 {
    display: none !important;
}

/* --- Bottom action bar — selected counter LEFT, "Krenimo" button RIGHT.
   Button no longer full-width on mobile so the counter has room. */
#setup-screen .p-6.border-t {
    padding: 0.7rem 0.9rem !important;
}
#setup-screen .p-6.border-t button {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.9rem !important;
}
/* Counter visual identity (label-stack + Ingeniko-blue pill) lives in
   style.css — here we just tighten sizes for the cramped mobile footer
   so the two stacked label words + pill fit comfortably next to Krenimo. */
#setup-selected-counter {
    gap: 0.5rem !important;
}
#setup-selected-counter .setup-counter-label {
    font-size: 0.72rem !important;
}
#setup-selected-counter .setup-counter-num {
    min-width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.78rem !important;
    padding: 0 0.45rem !important;
}

/* --- Predmet rows (step 3) — each course in its own rounded "chip"
   card so the list reads as discrete items rather than a merged blob.
   Subtle border + tiny shadow give the chip shape without shouting.
   Selected rows still get their stronger blue card from setup.js
   (border-blue-200 + bg-blue-50). */
#setup-list .p-2.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}
#setup-list .p-2.space-y-2 > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Setup tip block (Ingeniko hint) — keep snug */
#setup-tip {
    padding: 0 0.9rem 0.5rem !important;
    font-size: 0.78rem !important;
}


/* ============================================================================
   APP HEADER (subject name + mode/mentor selectors)
   ============================================================================ */
header.bg-white {
    height: auto !important;
    min-height: 3.4rem !important;
    padding: 0.4rem 0.6rem !important;
    gap: 0.4rem !important;
}
header #current-subject {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    /* Allow 2 lines instead of single-line truncate */
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
header .px-3.py-1\.5 {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.75rem !important;
}


/* ============================================================================
   SUBJECT DASHBOARD (dash-rich)
   ============================================================================ */

#view-dashboard.dash-rich {
    /* Generous top padding so the first section breathes below the
       sticky page header (especially when the subject name wraps to
       2 lines). Bottom padding is a regular gutter — the chatbar
       now flows inline so nothing needs to be reserved. */
    padding: 1.4rem 0.7rem 1.5rem !important;
    /* The Tailwind classes on #view-dashboard include
       justify-center items-center text-center — fine on desktop where
       the dashboard fits in one viewport, but on mobile they vertically
       centre an overflowing column, which pushes the first row of
       Brzi-pristup tiles ABOVE the scroll origin and they get clipped
       by the page header. Force top-anchored stacking instead. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}
.dash-rich-wrap {
    gap: 0.65rem !important;
}

/* --- Hero: hidden on mobile entirely. The course name is already in
   the page header above; the AI greeting bubble + decorative deco
   were eating screen space without adding info on a phone. */
.dash-hero {
    display: none !important;
}

/* --- Brzi pristup on mobile: 3-col × 2-row icon-only grid.
   Title + description hidden — just the colored icon tile. The icon
   itself communicates the action (book = Skripta, lightning = Kviz,
   etc.) and a long-press / hover tooltip carries the title for
   accessibility. */
.dash-quick {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.55rem !important;
}
.dash-quick-card {
    padding: 0.25rem !important;         /* tighter — icon dominates the card */
    gap: 0 !important;
    border-radius: 0.7rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 5.5rem !important;       /* hard cap so cards stay small */
    justify-self: center !important;     /* centre the card within its grid cell so
                                            the empty room is split evenly L / R */
    width: 100% !important;
    max-width: 5.5rem !important;        /* keeps cards square + symmetrical */
}
.dash-quick-icon {
    /* Icon should visually FILL the card with only a hairline of breathing
       room. With 5.5rem card + 0.25rem padding = 5rem inner; the icon is
       sized at 4.6rem so the die-cut sticker reads at a glance. */
    width: 4.6rem !important;
    height: 4.6rem !important;
    margin: 0 auto !important;           /* horizontal centre */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dash-quick-icon > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
.dash-quick-text {
    display: none !important;
}
.dash-quick-arrow {
    display: none !important;
}

/* --- Section titles ------------------------------------------------------ */
.dash-section-title {
    font-size: 0.88rem !important;
    margin-bottom: 0.35rem !important;
}
.dash-section-bolt {
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.75rem !important;
}

/* --- Widgets: simplified for mobile.
   - Nastavi gdje si stao: hide the empty "Lekcije završene: 0/—"
     subtitle and the empty grey progress bar. Keep just the chapter
     number badge + title + "Nastavi" / "Pregledaj poglavlja" actions.
   - Tvoj napredak: hide the 3-row stats list (Lekcije / Kvizovi /
     Zadaci all "0/—" on a fresh course). Big % ring + the "Pogledaj
     detaljan napredak" link is enough until the user has data.
*/
.dash-widgets {
    /* minmax(0,…) is load-bearing — plain 1fr lets a long nowrap course
       title force the card wider than the phone screen. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
}
.dash-widget {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.7rem !important;
    min-width: 0 !important;
}
.dash-widget h3 {
    font-size: 0.78rem !important;
    margin-bottom: 0.35rem !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

/* The subject continue + knowledge-map widgets are compact by design
   now (chapter dots, kmap tiles) — the old structural grid overrides
   that reshaped the legacy widgets were removed. */
.dash-progress-ring {
    width: 70px !important;
    height: 70px !important;
}
.dash-progress-ring::before {
    inset: 7px !important;
}
.dash-progress-ring > span {
    font-size: 0.95rem !important;
}
.dash-faq-chip {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.75rem !important;
}

/* --- Dashboard chatbar — flows inline immediately under the
   "Tvoj napredak" widget instead of being pinned to the viewport
   bottom. Earlier we used position:fixed but the user prefers it
   sitting with the rest of the content so the dashboard reads as
   one coherent column. */
.dash-chatbar {
    padding: 0.65rem 0.8rem !important;
    gap: 0.55rem !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
}
/* Hide the small "Tutor je tu da ti pomogne …" footer on mobile —
   redundant noise below a tight inline bar. */
.dash-chatbar-footer {
    display: none !important;
}
.dash-chatbar-avatar {
    width: 2.1rem !important;
    height: 2.1rem !important;
}
.dash-chatbar input {
    font-size: 0.9rem !important;
}
.dash-chatbar-desc {
    font-size: 0.66rem !important;
}
.dash-chatbar-send {
    width: 2.1rem !important;
    height: 2.1rem !important;
}
.dash-chatbar-footer {
    font-size: 0.66rem !important;
}


/* ============================================================================
   LESSON CONTENT (skripta) — wide things scroll INSIDE their own box.
   A truth table with 8 columns, a long code line or a display equation
   must never drag the whole page sideways on a phone.
   ============================================================================ */
.prose table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.prose pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
mjx-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}


/* ============================================================================
   GENERIC: tighter chat input + inputs
   ============================================================================ */
#input-area {
    padding: 0.4rem 0.5rem 0.7rem !important;
}
#input-area input {
    font-size: 0.92rem !important;
}


/* ============================================================================
   ONBOARDING HEADER (Natrag · Korak 3 od 3) — keep slim
   ============================================================================ */
#onboarding-header {
    padding: 0.5rem 0.7rem !important;
}
#onboarding-header .text-xs {
    font-size: 0.7rem !important;
}

/* ============================================================================
   TUTOR / MENTOR INTRO CARD + SUGGESTED QUESTIONS
   ----------------------------------------------------------------------------
   The tutor- and mentor-intro cards (.chat-intro-card) render a 14rem mascot
   circle + a speech bubble + a list of starter questions. On a phone the
   14rem mascot eats the whole viewport before the bubble even shows; shrink
   the mascot, the bubble padding/text, and the suggestion buttons so the
   whole intro fits cleanly above the input bar.
   ============================================================================ */
.chat-intro-card {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
/* Mascot wrapper — first direct child, has inline width:14rem;height:14rem.
   Kept deliberately subtle on mobile (was 8.5rem, then user asked for it
   smaller still — 6rem now reads as a chat-style avatar, not a hero). */
.chat-intro-card > div:first-child {
    width: 6rem !important;
    height: 6rem !important;
    margin-bottom: 0.7rem !important;
}
/* Halo + border + shadow scaled down to match — at 6rem the original
   12px shadow + 3px white border felt overweight. */
.chat-intro-card > div:first-child > div:first-child {
    inset: -6px !important;
    filter: blur(14px) !important;
}
.chat-intro-card > div:first-child > div:nth-child(2) {
    border-width: 2px !important;
    box-shadow: 0 6px 14px -4px rgba(30, 41, 59, 0.25) !important;
}
/* Online status dot — smaller to match the smaller circle. */
.chat-intro-card > div:first-child > span {
    width: 12px !important;
    height: 12px !important;
    border-width: 2px !important;
    bottom: 6px !important;
    right: 6px !important;
}
/* Speech bubble — second direct child, the .bg-white p-5 ... block */
.chat-intro-card > div:nth-child(2) {
    padding: 0.9rem 1rem !important;
    max-width: 92% !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.chat-intro-card > div:nth-child(2) h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
}
.chat-intro-card > div:nth-child(2) p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

/* Tutor "Predloženo:" suggestion buttons — tighten padding + font so
   each chip is roughly half the height it has on desktop. */
.tutor-suggestion-btn {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    border-radius: 0.7rem !important;
}
.tutor-suggestion-btn > span:first-child {
    font-size: 1rem !important;
    margin-right: 0.45rem !important;
}

/* --- Once the user enters chat (first message sent), strip the
   frosted-glass wrapper around the message history and hide the
   sticky mini-mascot at the top. On a phone, both add visual weight
   without value — the chat reads better as plain message bubbles
   on the white background. */
.chat-history-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.chat-mascot-sticky {
    display: none !important;
}


/* ============================================================================
   HOME DASHBOARD (#view-home) — the global landing view
   ----------------------------------------------------------------------------
   Mobile-first layout: one clean column, no horizontal scroll, and the
   gamification hero KEPT (it drives daily return) but compacted — the
   mascot/deco go, the greeting + 4 tap-friendly chips stay.
   ============================================================================ */

/* Tailwind's items-center/justify-center on #view-home centre an
   OVERFLOWING column — the top of the page gets pushed above the scroll
   origin (the "big empty gap / clipped hero" bug). Anchor to the top. */
#view-home.dash-rich {
    padding: 0.9rem 0.7rem 1.5rem !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}
#view-home .dash-rich-wrap {
    gap: 0.65rem !important;
}

/* Hero: style.css hides .dash-hero on mobile (subject dashboard doesn't
   need it) — but the HOME hero carries the level/XP/streak/quests chips,
   so it must survive. Single centered column, no mascot, no 🎓 deco,
   no corner glyphs, compact type. */
.dash-hero--home {
    display: block !important;
    padding: 0.9rem 0.85rem 0.85rem !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 1rem !important;
}
.dash-hero--home .dash-hero-mascot,
.dash-hero--home > .relative,
.dash-hero--home .dash-hero-deco {
    display: none !important;
}
.dash-hero--home::before, .dash-hero--home::after {
    display: none !important;
}
.dash-hero--home .dash-hero-content h1 {
    font-size: 1.05rem !important;
}
.dash-hero--home .dash-hero-content h1 .accent {
    display: inline !important;          /* name on the same line — saves a row */
    font-size: 1.05rem !important;
}
.dash-hero--home .dash-hero-content p.tagline {
    font-size: 0.72rem !important;
    margin-top: 0.25rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

/* Gamify status strip: styled globally for ≤1160 in style.css (one
   segmented instrument). Here only phone-size tightening. */
.dash-hero--home .hg-chip { padding: 6px 11px !important; }
.dash-hero--home .hg-level { padding: 4px 9px !important; }

/* Course quick-access cards — tighter, and never wider than the screen. */
/* Course tiles: rail styling lives in style.css (<=1160); no overrides. */

/* ============================================================================
   ADAPTIVE DENSITY — tall phones (S20/Pixel 7 @915px, S8+ @740px…).
   Short content left a big dead band at the bottom; instead the wrap
   stretches to the viewport and the LEFTOVER space distributes evenly
   BETWEEN sections, while quick tiles grow a notch. Same design, no void.
   ============================================================================ */
@media (min-height: 700px) {
    /* Content stays top-anchored; ONLY the tutor bar rides at the bottom,
       by the thumb (like a chat input). One intentional gap instead of
       leftover space scattered between every card. */
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-home.dash-rich .dash-rich-wrap {
        min-height: 100%;
    }
    #view-dashboard.dash-rich .dash-rich-wrap > section:last-child,
    #view-home.dash-rich .dash-rich-wrap > section:last-child {
        margin-top: auto;
    }
}
@media (min-height: 800px) {
    .dash-quick { gap: 0.8rem !important; }
    .dash-quick-card { max-width: 6.6rem !important; max-height: 6.6rem !important; }
    .dash-quick-icon { width: 5.5rem !important; height: 5.5rem !important; }
    #dash-map-widget { padding: 0.85rem 1rem !important; }
    .kbar-seg { height: 36px; }
    .kbar-seg i { height: 14px; }
    .dash-chatbar { padding: 0.85rem 1rem !important; }
}

/* "Nastavi gdje si stao" — phone-tight: small icon, one bar line with the
   % beside it, slim buttons. Cuts the card by ~30% without losing info. */
.dash-widget-continue { padding: 0.55rem 0.75rem !important; }
.dash-widget-continue h3 { margin-bottom: 0.15rem !important; }
/* On phones the HOME continue card drops its title — the blue card +
   "Nastavi lekciju" button say it all; saves a full row. (The subject
   page card is the merged knowledge map and KEEPS its header row.) */
#view-home .dash-widget-continue > .flex.items-center.justify-between:first-child,
#view-home .dash-widget-continue > h3 { display: none !important; }
#view-home .dash-widget-continue .flex.items-center.gap-3 { margin-top: 0 !important; }
.dash-widget-continue .w-10 { width: 1.9rem !important; height: 1.9rem !important; border-radius: 0.5rem !important; }
.dash-widget-continue .w-10 img, .dash-widget-continue .w-10 svg { width: 1.3rem !important; height: 1.3rem !important; }
.dash-widget-continue .font-semibold { font-size: 0.8rem !important; }
.dash-widget-continue .hcw-bar { margin: 0.4rem 0 0.1rem !important; }
.dash-widget-continue .hcw-meta span:first-child { display: none; }   /* drop the label, keep the % */
.dash-widget-continue .hcw-meta { justify-content: flex-end !important; margin-top: -1.1rem !important; padding-bottom: 0.15rem; }
.dash-widget-continue .hcw-bar { margin-right: 2.4rem !important; }   /* room for the % beside the bar */
.dash-widget-continue .mt-2 { margin-top: 0.45rem !important; }
.dash-widget-continue #home-continue-btn, .dash-widget-continue .dash-resume-btn {
    padding: 0.45rem 0.8rem !important; font-size: 0.72rem !important;
}
/* The HOME continue card drops its % bar on phones — the same number is
   already on the course tile above and in Ukupan napredak below. Two
   rows saved: icon + name, then the buttons. */
#view-home .dash-widget-continue .hcw-bar,
#view-home .dash-widget-continue .hcw-meta { display: none !important; }
#view-home .dash-widget-continue .mt-2 { margin-top: 0.35rem !important; }

/* Ukupan napredak, phone-tight: smaller ring + tighter week line. */
#view-home #home-progress-widget .hpw-ring {
    width: 48px !important; height: 48px !important;
}
#view-home #home-progress-widget .hpw-ring::before { inset: 4px !important; }
#view-home #home-progress-widget .hpw-ring > span { font-size: 0.72rem !important; }
#view-home #home-progress-widget .hpr-week {
    margin-top: 0.15rem !important;
    padding-top: 0.3rem !important;
}

/* ============================================================================
   FIT HOME ON ONE SCREEN — the goal: "Pitaj mentora" visible with NO
   scrolling (measured 76px over the fold on a 667px phone).
   ============================================================================ */
/* 1 · The loud "Nastavi lekciju" text button becomes a quiet round arrow
   riding the right edge of the card, vertically centred; the bottom row
   keeps only the "Brzi kviz" link. Saves a row AND reads subtler. */
/* Doubled class = higher specificity than the '#view-home .dash-widget'
   padding shorthand further down this file (equal (1,1,0) would lose by
   order and re-zero the right padding under the arrow). */
#view-home .dash-widget-continue.dash-widget-continue {
    position: relative;
    padding-right: 3.6rem !important;
}
#view-home #home-continue-btn {
    position: absolute !important; right: 0.7rem; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important;
    display: grid !important; place-items: center;
    font-size: 0.78rem !important; line-height: 1 !important;
    font-weight: 800 !important;
}
/* Text + arrow go; the chapter badge ("P3" = where you stopped) stays.
   White chip with blue type — same family as the card's icon square,
   so the badge reads as part of the card instead of a dark blue blob. */
#view-home #home-continue-btn > span { display: none !important; }
#view-home #home-continue-btn > .hcb-ch { display: block !important; }
#view-home #home-continue-btn {
    background: #fff !important;
    color: #2563eb !important;
    border: 1.5px solid #93c5fd !important;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.35) !important;
}
#view-home #home-continue-btn:active { background: #eff6ff !important; }
html.dark-theme #view-home #home-continue-btn {
    background: #172554 !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

/* 2 · Course tiles: ONE clean ellipsis line — the inherited two-line
   clamp rendered as flow-root with a height cap, clipping mid-line
   ("Introduction to.. / Computing:" sliver). Bar + % carry the state;
   the full name lives one tap away on the subject page. */
#view-home .hcc-title {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    height: auto !important; max-height: none !important;
}

/* 3 · Slimmer column gaps + chatbar. (Widget padding is tuned in the
   "Widget column" block below — one owner, no duplicate rules.) */
#view-home .dash-rich-wrap { gap: 0.5rem !important; }
#view-home .dash-chatbar { padding: 0.65rem 0.8rem !important; }

/* 4 · Short phones (≤760px tall): trim what keeps "Pitaj mentora" near
   the fold — the chatbar's helper lines go (the placeholder explains
   itself) plus hair-thin spacing cuts. Liga stays FULL per Drago. */
@media (max-height: 760px) {
    #view-home .dash-chatbar-desc,
    #view-home .dash-chatbar-footer { display: none !important; }
    /* Single-course progress row duplicates the ring beside it. */
    #view-home #home-progress-widget .hpr-solo { display: none !important; }
    #view-home .dash-chatbar { padding: 0.55rem 0.8rem !important; }
    #view-home.dash-rich { padding-top: 0.35rem !important; }
    #view-home .dash-section-title { margin-bottom: 0.2rem !important; }
    #view-home .dash-rich-wrap { gap: 0.4rem !important; }
    #view-home .dash-hero--home { padding-bottom: 0.6rem !important; margin-top: 22px !important; }
    #view-home .dash-hero--home .hg-chip { padding: 5px 10px !important; }
    #view-home .dash-widget-continue .mt-2 { margin-top: 0.2rem !important; }
}

/* Widget column (Nastavi / Ukupan napredak / Liga genija) — the generic
   .dash-widgets 1fr stack applies; just tighten the cards. */
#view-home .dash-widget { padding: 0.6rem 0.8rem !important; }
#view-home .dash-widget h3 { font-size: 0.8rem !important; margin-bottom: 0.3rem !important; }
#view-home .dash-progress-ring { width: 56px !important; height: 56px !important; }
#view-home .dash-progress-ring::before { inset: 5px !important; }
#view-home .dash-progress-ring > span { font-size: 0.85rem !important; }

/* ============================================================================
   TAP TARGETS — audit fixes (fingers, not cursors)
   ----------------------------------------------------------------------------
   Small text-links ("Pogledaj sve →", "+ Dodaj još", "Pregledaj poglavlja")
   keep their visual size but get an invisible ≥40px hit area via padding +
   negative margin, so the layout doesn't shift.
   ============================================================================ */
#view-home .text-\[11px\],
#view-dashboard .text-\[11px\],
#home-add-course,
#home-view-all-courses,
.dash-browse-btn {
    padding: 12px 10px !important;
    margin: -12px -10px !important;
}
#home-continue-btn { padding: 0.55rem 0.95rem !important; }
/* Chat send + modal controls at comfortable thumb sizes. */
.dash-chatbar-send { width: 2.5rem !important; height: 2.5rem !important; }
.modal-x { width: 2.5rem !important; height: 2.5rem !important; }
.lb-back { padding: 9px 12px !important; margin: -9px -6px !important; }
.lb-period-btn { padding-top: 9px !important; padding-bottom: 9px !important; }

}