/*
 * Manhali Modern: platform (teacher dashboard) shell.
 * Sidebar sits directly on the warm canvas; the main area is an inset floating
 * panel (rounded, bordered, xs shadow). Markup is injected by js/shell.js.
 */

.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-block-size: 100dvh; background: var(--canvas); }
.app[data-collapsed] { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); }
.app[data-bare] { grid-template-columns: minmax(0, 1fr); }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px 10px; background: var(--sidebar); color: var(--sidebar-foreground); min-inline-size: 0;
}
.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin-inline: -4px; padding-inline: 4px; scrollbar-width: none; }
.sidebar-scroll:hover { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.workspace {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 6px 8px 6px 6px; border-radius: 12px; text-align: start;
  transition: background-color var(--dur-fast);
}
[dir="rtl"] .workspace { padding: 6px 6px 6px 8px; }
.workspace:hover, .workspace[data-open] { background: var(--sidebar-accent); }
.workspace .logo {
  position: relative; display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 10px;
  background: linear-gradient(145deg, oklch(0.78 0.16 62), var(--brand) 55%, oklch(0.62 0.19 38));
  color: white; box-shadow: 0 1px 2px oklch(0.5 0.15 40 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.35);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 17px;
}
.workspace .name { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--foreground); line-height: 1.3; }
.workspace .sub { font-size: var(--text-xs); color: var(--sidebar-muted-foreground); line-height: 1.3; }
.workspace > .icon { color: var(--sidebar-muted-foreground); inline-size: 16px; block-size: 16px; margin-inline-start: auto; }

.search-trigger {
  display: flex; align-items: center; gap: 8px; inline-size: 100%; block-size: 36px; margin-block: 8px 6px; padding-inline: 10px;
  border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--sidebar-border); box-shadow: var(--shadow-xs);
  color: var(--sidebar-muted-foreground); font-size: var(--text-sm);
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--sidebar-foreground); }
.search-trigger .kbd { margin-inline-start: auto; }

.nav-group { display: flex; flex-direction: column; gap: 1px; padding-block: 4px; }
.nav-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 3px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--sidebar-muted-foreground); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; block-size: var(--nav-item-h); padding-inline: 10px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--sidebar-foreground); white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.nav-item .icon { color: var(--sidebar-muted-foreground); transition: color var(--dur-fast); }
.nav-item:hover { background: var(--sidebar-accent); color: var(--foreground); }
.nav-item:hover .icon { color: var(--foreground); }
.nav-item[aria-current="page"] {
  background: var(--sidebar-active); color: var(--sidebar-active-foreground);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--sidebar-border);
}
.nav-item[aria-current="page"] .icon { color: var(--brand); }
.dark .nav-item[aria-current="page"] { box-shadow: var(--inset-highlight), 0 0 0 1px var(--sidebar-border); }
.nav-item .badge { margin-inline-start: auto; }
.nav-item .badge-count { background: var(--primary-soft); color: var(--primary-soft-foreground); }
.nav-item .new { margin-inline-start: auto; }

.sidebar-foot { display: flex; flex-direction: column; gap: 6px; padding-block-start: 6px; }
.setup-card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--sidebar-border); box-shadow: var(--shadow-xs);
}
.setup-card .row { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.setup-card .row .num { margin-inline-start: auto; font-size: var(--text-xs); color: var(--muted-foreground); }
.account {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 6px; border-radius: 12px; text-align: start;
}
.account:hover, .account[data-open] { background: var(--sidebar-accent); }
.account .name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); line-height: 1.3; }
.account .sub { font-size: var(--text-xs); color: var(--sidebar-muted-foreground); line-height: 1.3; }
.account > .icon { margin-inline-start: auto; color: var(--sidebar-muted-foreground); inline-size: 16px; block-size: 16px; }

@media (max-height: 860px) and (min-width: 1024px) { .setup-card { display: none; } }
.sidebar-scroll { mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%); }

/* Collapsed rail */
.app[data-collapsed] .sidebar { padding-inline: 12px; align-items: center; }
.app[data-collapsed] :is(.label-text, .nav-label, .workspace .meta, .workspace > .icon, .search-trigger .label-text, .search-trigger .kbd, .setup-card, .account .meta, .account > .icon, .nav-item .badge) { display: none; }
.app[data-collapsed] .nav-item { justify-content: center; padding: 0; inline-size: 40px; }
.app[data-collapsed] .search-trigger { justify-content: center; inline-size: 40px; padding: 0; }
.app[data-collapsed] .workspace, .app[data-collapsed] .account { justify-content: center; padding: 4px; inline-size: auto; }
.app[data-collapsed] .nav-group { align-items: center; border-block-start: 1px solid var(--sidebar-border); }
.app[data-collapsed] .nav-group:first-child { border: 0; }
.app:not([data-collapsed]) .nav-item[data-tip]::after { display: none; }
.app[data-collapsed] .nav-item[data-tip]::after { inset-block-end: auto; inset-block-start: 50%; inset-inline-start: calc(100% + 10px); translate: 0 -50%; }

/* ── Main inset panel ──────────────────────────────────── */
.main {
  position: relative; min-inline-size: 0; margin: var(--panel-inset); margin-inline-start: 0;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs); display: flex; flex-direction: column; min-block-size: calc(100dvh - var(--panel-inset) * 2);
}

.topbar {
  position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; gap: 8px;
  block-size: var(--topbar-h); padding-inline: 16px 16px;
  background: color-mix(in oklch, var(--background), transparent 12%); backdrop-filter: saturate(1.4) blur(12px);
  border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl);
  border-block-end: 1px solid transparent; transition: border-color var(--dur);
}
.main[data-scrolled] .topbar { border-block-end-color: var(--border); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted-foreground); min-inline-size: 0; }
.crumbs a:hover { color: var(--foreground); }
.crumbs [aria-current] { color: var(--foreground); font-weight: var(--weight-medium); }
.crumbs .icon { inline-size: 14px; block-size: 14px; color: var(--subtle-foreground); }
.topbar .end { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
/* Refer & earn: the brand-tinted gift keeps it findable; narrower desktops show the icon only (tooltip keeps the name) */
.topbar .topbar-refer .icon { color: var(--brand); }
.topbar .topbar-refer[aria-current="page"] { background: var(--accent); }
@media (max-width: 1279px) { .topbar .topbar-refer > span { display: none; } }
.topbar .notif-dot { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--background); }

/* ── ⌘K palette ────────────────────────────────────────── */
.palette { inline-size: min(600px, calc(100vw - 32px)); inset-block-start: 14vh; translate: -50% 0; padding: 0; overflow: hidden; }
[dir="rtl"] .palette { translate: 50% 0; }
.palette .input-group { border: 0; box-shadow: none; border-radius: 0; min-block-size: 54px; padding-inline: 18px; border-block-end: 1px solid var(--border); }
.palette .input-group:focus-within { box-shadow: none; }
.palette .input-group > input { font-size: var(--text-md); }
.palette .results { max-block-size: 360px; overflow: auto; padding: 6px; }
.palette .menu-item { min-block-size: 40px; }
.palette .foot { display: flex; gap: 14px; padding: 10px 16px; border-block-start: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-xs); color: var(--muted-foreground); }
.palette .foot span { display: inline-flex; gap: 6px; align-items: center; }
.palette-empty { display: flex; gap: 12px; align-items: flex-start; padding: 18px 14px; color: var(--muted-foreground); }
.palette-empty strong { color: var(--foreground); font-weight: var(--weight-medium); }

/* ── Help menu, shortcuts, notification footer ─────────── */
.help-menu { inline-size: 290px; }
.help-menu .menu-item { align-items: center; }
.help-menu .menu-item .col { line-height: 1.35; }
.popup-foot { display: flex; justify-content: center; padding: 6px; border-block-start: 1px solid var(--border); }
.popup-foot .btn { flex: 1; }
.shortcuts { inline-size: min(440px, calc(100vw - 32px)); }
.shortcut-list { display: flex; flex-direction: column; margin: 0; }
.shortcut-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-end: 1px solid var(--border); }
.shortcut-list > div:last-child { border-block-end: 0; }
.shortcut-list dt { font-size: var(--text-sm); }
.shortcut-list dd { display: flex; gap: 4px; margin: 0; direction: ltr; }
.shortcut-list .kbd { min-inline-size: 24px; justify-content: center; }

/* ── Mobile ────────────────────────────────────────────── */
.nav-backdrop { display: none; }
@media (max-width: 1023px) {
  :root { --panel-inset: 0px; }
  .app, .app[data-collapsed] { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 110; inset-block: 0; inset-inline-start: 0; inline-size: min(300px, 86vw);
    box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform var(--dur-slow) var(--ease-out); visibility: hidden;
  }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .app[data-nav-open] .sidebar { transform: none; visibility: visible; }
  .main { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-block-size: 100dvh; padding-block-end: 72px; }
  .topbar { border-radius: 0; padding-inline: 8px 12px; }
  .toaster { inset-block-end: 84px; inset-inline: 16px; }
  .floating-bar, .save-bar { inset-block-end: 80px; }
}
@media (max-width: 1023px) {
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 105; background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur); }
  .app[data-nav-open] .nav-backdrop { opacity: 1; visibility: visible; }
}

.palette input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Phones: editors and detail pages get a back button, since the breadcrumb trail is hidden */
.topbar .crumb-back { margin-inline-end: -2px; }

/* ── File explorer (js/library.js): pick a library file or upload one ─────────── */
.dialog.file-picker { inline-size: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; block-size: min(640px, calc(100dvh - 48px)); }
.file-picker .dialog-header { padding-block-end: 16px; }
.fp-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 22px; background: var(--surface-2); border-block: 1px solid var(--border); }
.fp-search-row { display: flex; align-items: center; gap: 8px; }
.fp-search { flex: 1; min-inline-size: 0; }
.fp-locked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-upload { display: flex; flex-direction: column; gap: 8px; padding: 12px 22px; border-block-end: 1px solid var(--border); }
.fp-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.fp-drop:hover, .fp-drop:focus-within { border-color: var(--brand); background: color-mix(in oklch, var(--primary-soft), transparent 50%); }
.fp-drop[data-busy] { pointer-events: none; opacity: 0.7; }
.fp-progress { display: flex; flex-direction: column; gap: 6px; padding-inline: 2px; }
.fp-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: 14px 22px; }
.fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fp-file { display: flex; align-items: center; gap: 12px; min-inline-size: 0; padding: 10px 12px; text-align: start; border: 1px solid var(--border); border-radius: 14px; background: var(--card); transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast); }
.fp-file:hover { border-color: var(--border-strong); background: var(--hover); }
.fp-file[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in oklch, var(--primary-soft), transparent 40%); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand), transparent 85%); }
.fp-file[data-processing] { opacity: 0.8; }
.fp-thumb { position: relative; display: grid; place-items: center; flex: none; inline-size: 52px; block-size: 44px; border-radius: 10px; background: var(--tile-bg, var(--muted)); color: var(--tile-fg, var(--muted-foreground)); }
.fp-dur { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; padding-inline: 4px; border-radius: 5px; background: oklch(0.2 0.01 60 / 0.72); color: white; font-size: 9px; line-height: 14px; }
.fp-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.fp-name { display: flex; align-items: center; gap: 6px; min-inline-size: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fp-name .fp-ok { color: var(--success); flex: none; }
.fp-meta { font-size: var(--text-xs); color: var(--muted-foreground); }
.fp-check { display: grid; place-items: center; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); }
.fp-foot { align-items: center; margin-block-start: 0; }
.fp-status { display: flex; align-items: center; gap: 6px; flex: 1; min-inline-size: 0; font-size: var(--text-xs); }
@media (max-width: 720px) {
  .fp-grid { grid-template-columns: minmax(0, 1fr); }
  .fp-toolbar, .fp-upload, .fp-body { padding-inline: 16px; }
  .fp-foot { flex-wrap: wrap; }
  .fp-status { flex-basis: 100%; }
}