/* MelodyMe ID's copy of melodyme-school's design system CSS ("Forest" shell).
   Sources, all in melodyme-school:
     app/assets/stylesheets/shell.css     palette, .shell-workspace, header, account menu
     app/assets/tailwind/application.css  --color-surface-*, --color-border-selected, .surface-*
   Only what this server uses is copied, with the school's values. Keep it in step
   with the school rather than tweaking it here. See docs/design.md. */

/* Shared application surface for selected cards and rows. */
:root {
  --color-surface-selected: #233e2e;
  --color-surface-hover: var(--color-surface-selected);
  --color-border-selected: #90cda1;
}
.surface-selected { background-color: var(--color-surface-selected); }
.border-selected { border-color: var(--color-border-selected); }

/* Opt in on cards, navigation items and rows. Preserve selected states and
   avoid sticky hover on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .surface-interactive:not([aria-current]):where(:not([disabled], [aria-disabled="true"])):hover {
    background-color: var(--color-surface-hover);
  }
}
.surface-interactive:not([aria-current]):where(:not([disabled], [aria-disabled="true"])):focus-within {
  background-color: var(--color-surface-hover);
}

.shell-workspace { --shell-bg:#101b17; --shell-panel:#172720; --shell-border:#2d4036; --shell-muted:#99afa2; --shell-accent:#a4e5b6; margin:0; background:var(--shell-bg); color:#edf4ee; font:15px/1.5 system-ui,sans-serif; min-height:100vh; }
.shell-workspace { --color-base-100:var(--shell-panel); --color-base-200:var(--shell-bg); --color-base-300:var(--shell-border); --color-base-content:#edf4ee; --radius-field:.5rem; --radius-box:.75rem; }
.shell-workspace * { box-sizing:border-box; }
.shell-workspace { --color-primary:var(--shell-accent); --color-primary-content:#143021; }
.shell-workspace a { text-decoration:none; }
.shell-workspace h1 { margin:0; font-size:34px; letter-spacing:-1px; font-weight:650; }
.shell-workspace h2 { margin:0; font-size:22px; letter-spacing:-.4px; font-weight:650; }
.shell-workspace h3 { font-weight:650; }
/* Added here: the school's headings inherit the body's 1.5 line height, which is loose when they wrap. */
.shell-workspace :is(h1,h2) { line-height:1.2; }
.shell-workspace a:focus-visible,.shell-workspace summary:focus-visible,.shell-workspace input:focus-visible { outline:2px solid var(--shell-accent); outline-offset:4px; }
/* Added here: an input inside a DaisyUI `label.input` (the search box) is already ringed by its label. */
.shell-workspace .input input:focus-visible { outline:none; }
.shell-workspace .btn:disabled { color:#abc1b1; border-color:#536b5b; background-color:#22382a; opacity:1; }
@media(hover:hover) and (pointer:fine) { .shell-workspace .btn-ghost:not(:disabled, .btn-disabled, .shell-avatar):hover { background-color:var(--color-surface-hover); } }

.shell-header { position:sticky; top:0; z-index:50; background:var(--shell-bg); border-bottom:1px solid var(--shell-border); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 36px; min-height:60px; gap:20px; }
.shell-brand { font-size:19px; font-weight:750; letter-spacing:-.6px; white-space:nowrap; }
.shell-brand > span:first-child { display:inline-grid; place-items:center; background:var(--shell-accent); color:#143021; width:34px; height:34px; border-radius:10px; margin-right:6px; }
.shell-account { display:flex; align-items:center; gap:16px; color:var(--shell-muted); font-size:13px; grid-column:3; justify-self:end; }
.shell-avatar { display:inline-grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#304a3a; color:#d9ecdf; font-size:12px; font-weight:700; }
.shell-main { max-width:1400px; width:100%; margin:0 auto; padding:42px 48px 100px; }
.shell-eyebrow { color:var(--shell-accent); text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:750; margin:0 0 10px; }
.shell-muted { color:var(--shell-muted); }

.shell-account-menu { width:180px; margin-top:12px; border:1px solid var(--shell-border); z-index:40; color:var(--color-base-content); }
/* Added here: wide enough for "Superadmin panel" on one line, and clear of the header border. */
.shell-account-menu { width:14rem; margin-top:20px; }
.shell-account-menu :is(a,button) { white-space:nowrap; }
.shell-account-menu form { padding:0; }
.shell-account-menu form button { width:100%; text-align:left; padding:6px 12px; cursor:pointer; }

/* The school's narrow-screen rule, minus its slide-away header (no script here). */
@media(max-width:639px) { .shell-header { display:flex; justify-content:space-between; } }
@media(max-width:850px) { .shell-header { padding:12px 16px; gap:8px; } .shell-main { padding:26px 20px 80px; } .shell-workspace h1 { font-size:28px; } }