/* ============================================================
   BunStream — SaaS skin
   ------------------------------------------------------------
   Loaded after app.css and shell.css, and overrides only the
   design tokens plus the components the SaaS screens added.
   Nothing here restyles an existing component by selector, so
   the older screens pick up the new palette for free and none
   of them need editing.

   Shape and colour both follow the reference: a permanently
   dark navigation rail, a light dense work area, stat cards
   over the fold, compact tables under it, and the same warm
   orange accent on a near-neutral ground.
   ============================================================ */

/* ---------- Palette ---------- */
/* Sampled from the reference rather than guessed. The single thing that
   makes it read as a product and not a template: text is navy (#183D6D),
   not grey. Neutral grey on white is what every admin template does; the
   navy is carried through every surface, rule and shadow, and that is what
   the eye picks up as "designed".

   Radii are small (6px) — the reference uses 6 for controls and 10 for
   cards, never the 14px pill look. */

:root {
    /* Grounds: white cards on a barely-blue page, with a pale blue for
       secondary surfaces instead of a grey. */
    --paper:       #F4F9FF;
    --surface:     #FFFFFF;
    --surface-2:   #EFF6FE;
    --surface-3:   #DCE9F8;

    /* Text: navy at three depths, never black. */
    --ink:         #183D6D;
    --ink-2:       #4B6C97;
    --ink-3:       #7C95B8;

    --rule:        #DBE6F3;
    --rule-strong: #C3D4E8;

    /* Brand orange, sampled. Warmer and softer than a pure #FF7A00. */
    --brand:       #FD8D32;
    --brand-hover: #F07C1B;
    --brand-on:    #FFFFFF;
    --brand-soft:  rgba(253, 141, 50, 0.12);
    --brand-line:  rgba(253, 141, 50, 0.34);

    /* Second accent: the mid navy, used for charts and the live marker's
       calmer states. Keeps everything in two hues. */
    --accent:      #2E6BB8;
    --accent-soft: rgba(46, 107, 184, 0.12);

    --ok:          #0F8A5F;
    --ok-soft:     rgba(15, 138, 95, 0.12);
    --warn:        #B4690E;
    --warn-soft:   rgba(180, 105, 14, 0.14);
    --bad:         #D1344B;
    --bad-soft:    rgba(209, 52, 75, 0.12);
    --info:        #2E6BB8;
    --info-soft:   rgba(46, 107, 184, 0.12);

    /* Shadows are navy-tinted, not black — black shadows on a blue-white
       ground go muddy. */
    --shadow-sm:   0 1px 2px rgba(24, 61, 109, 0.07);
    --shadow:      0 2px 10px rgba(24, 61, 109, 0.08);
    --shadow-lg:   0 14px 38px rgba(24, 61, 109, 0.16);

    --r-sm: 4px;
    --r:    6px;
    --r-lg: 10px;

    /* Readex Pro first: it is drawn Arabic-first with a matching Latin, so
       the interface reads as one typeface instead of Arabic falling back
       into whatever the Latin face happens to ship. Rubik — the reference
       face — sits behind it for anything Readex does not cover. */
    --font-display: "Readex Pro", "Rubik", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-body:    "Readex Pro", "Rubik", "IBM Plex Sans Arabic", system-ui, sans-serif;

    /* The rail is the deep navy from the reference, in both themes. */
    --rail:        #051E38;
    --rail-2:      #0C2F52;
    --rail-ink:    #EAF2FB;
    --rail-ink-2:  #8FA9C7;
    --rail-rule:   #123E63;
}

:root[data-theme="dark"] {
    --paper:       #04121F;
    --surface:     #08213A;
    --surface-2:   #0D2B47;
    --surface-3:   #16395C;

    --ink:         #E4EEF9;
    --ink-2:       #9CB4D0;
    --ink-3:       #6E8AAC;

    --rule:        #143A5D;
    --rule-strong: #1E4C74;

    --brand:       #FF9C4D;
    --brand-hover: #FFB070;
    --brand-on:    #2A1400;
    --brand-soft:  rgba(255, 156, 77, 0.16);
    --brand-line:  rgba(255, 156, 77, 0.38);

    --accent:      #5B9BE0;
    --accent-soft: rgba(91, 155, 224, 0.16);

    --ok:          #35C48C;
    --ok-soft:     rgba(53, 196, 140, 0.16);
    --warn:        #F0AE3E;
    --warn-soft:   rgba(240, 174, 62, 0.16);
    --bad:         #F2637A;
    --bad-soft:    rgba(242, 99, 122, 0.16);
    --info:        #5B9BE0;
    --info-soft:   rgba(91, 155, 224, 0.16);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow:      0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 14px 38px rgba(0, 0, 0, 0.55);

    --rail:        #03101C;
    --rail-2:      #0A2338;
    --rail-ink:    #E4EEF9;
    --rail-ink-2:  #7C97B6;
    --rail-rule:   #10314F;
}

/* ---------- The rail ---------- */
/* Dark regardless of theme. Overriding the tokens alone would not do it,
   because the rail borrows --surface from the page. */
.sb {
    background: var(--rail);
    border-inline-end-color: var(--rail-rule);
}
.sb-brand { border-bottom-color: var(--rail-rule); }
.sb-logo { color: var(--rail-ink); }
.sb-logo-dim { color: var(--rail-ink-2); }
.sb-mark {
    background: linear-gradient(135deg, var(--brand), #FFB870);
    color: #fff;
}
.sb-label { color: var(--rail-ink-2); }
.sb-item { color: var(--rail-ink-2); }
.sb-item:hover { background: var(--rail-2); color: var(--rail-ink); }
.sb-item.is-active {
    background: var(--rail-2);
    color: var(--rail-ink);
    /* The active marker sits on the inline-start edge, which flips with RTL. */
    box-shadow: inset 3px 0 0 var(--brand);
}
:root[dir="rtl"] .sb-item.is-active,
html[dir="rtl"] .sb-item.is-active { box-shadow: inset -3px 0 0 var(--brand); }
.sb-count { background: var(--rail-2); color: var(--rail-ink-2); }
.sb-item.is-active .sb-count { background: var(--brand-soft); color: var(--brand); }
.sb-foot { border-top-color: var(--rail-rule); }
.sb-user-name { color: var(--rail-ink); }
.sb-user-role { color: var(--rail-ink-2); }
.sb-avatar { background: var(--rail-2); color: var(--rail-ink); }
.sb .btn-ghost { color: var(--rail-ink-2); }
.sb .btn-ghost:hover { background: var(--rail-2); color: var(--rail-ink); }

/* A channel that is on air gets the one animated thing in the whole rail,
   because "am I live right now" is the question it answers. */
.sb-count-live {
    background: var(--bad-soft) !important;
    color: var(--bad) !important;
    animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
    .sb-count-live { animation: none; }
}

/* ---------- Wallet block in the rail ---------- */
.sb-wallet {
    margin: 14px 10px 0;
    padding: 13px;
    border: 1px solid var(--rail-rule);
    border-radius: var(--r);
    background: var(--rail-2);
}
.sb-wallet.is-warn { border-color: rgba(251, 191, 36, 0.45); }
.sb-wallet.is-bad  { border-color: rgba(248, 113, 113, 0.55); }

.sb-wallet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--rail-ink-2);
    margin-bottom: 6px;
}
.sb-wallet-top .muted { color: var(--rail-ink-2); }

.sb-wallet-amount {
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 600;
    color: var(--rail-ink);
    line-height: 1.15;
}
.sb-wallet-cur { font-size: 12px; color: var(--rail-ink-2); font-family: var(--font-body); }

.sb-wallet-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.sb-wallet-meta {
    display: flex;
    gap: 6px;
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--rail-ink-2);
}

/* ---------- Billing screens ---------- */

/* Balance headline. Deliberately the largest thing on the page: it is the
   number the customer opened the page for. */
.wallet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .wallet-hero { grid-template-columns: 1fr; }
}

.wallet-card {
    padding: 22px;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--brand-soft), transparent 60%),
        var(--surface);
}
.wallet-card.is-warn { border-color: rgba(180, 83, 9, 0.4); }
.wallet-card.is-bad  { border-color: rgba(220, 38, 38, 0.45); }

.wallet-label { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }

.wallet-balance {
    font-family: var(--font-mono);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}
.wallet-balance small { font-size: 16px; font-weight: 400; color: var(--ink-2); }

.wallet-runway {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.wallet-runway div { min-width: 110px; }
.wallet-runway dt { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.wallet-runway dd { font-family: var(--font-mono); font-size: 15px; margin: 0; color: var(--ink); }

/* Top-up: preset amounts, because most customers pick one rather than type. */
.topup-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.topup-preset {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.topup-preset:hover { border-color: var(--brand-line); }
.topup-preset.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

/* ---------- Rate card ---------- */
.rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.rate-item {
    padding: 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface-2);
}
.rate-item-label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.rate-item-value { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink); }
.rate-item-unit  { font-size: 12px; color: var(--ink-3); }

/* ---------- Usage bars ---------- */
/* A bare table of byte counts is unreadable; the bar is what makes one
   line's share of the bill obvious at a glance. */
.usage-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.usage-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* Daily spend sparkline, drawn with flex columns rather than a chart library */
.spend-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding: 10px 0;
}
.spend-chart > div {
    flex: 1;
    min-width: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-soft);
    position: relative;
    transition: background .12s;
}
.spend-chart > div:hover { background: var(--brand); }
.spend-chart > div[data-empty="1"] { background: var(--surface-3); }

/* ---------- Live ---------- */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bad);
    margin-inline-end: 6px;
    animation: liveBlink 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.stream-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.stream-card {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.stream-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow); }
.stream-card.is-live { border-color: rgba(220, 38, 38, 0.4); }

.stream-preview {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    display: grid;
    place-items: center;
    color: var(--ink-3);
    font-size: 30px;
    position: relative;
}
.stream-preview .badge { position: absolute; top: 10px; inset-inline-start: 10px; }
.stream-body { padding: 13px 14px; }
.stream-title { font-weight: 600; margin: 0 0 4px; font-size: 14.5px; }
.stream-meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; }

/* Credential row: the value is masked until asked for, and the copy button
   is the intended way to move it — nobody should be retyping a stream key. */
.cred-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 13px;
}
.cred-row code {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    background: none;
    padding: 0;
    color: var(--ink);
}
.cred-row.is-masked code { letter-spacing: 2px; }

/* ---------- Domains ---------- */
.domain-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface);
    margin-bottom: 8px;
}
.domain-row.is-off { opacity: 0.55; }
.domain-name { font-family: var(--font-mono); font-size: 14px; flex: 1; }

/* An unlocked library is a security state the customer should not discover
   by accident, so it gets a callout rather than a footnote. */
.notice {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--r);
    border: 1px solid var(--rule);
    background: var(--surface-2);
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 16px;
}
.notice i { margin-top: 3px; }
.notice-warn { background: var(--warn-soft); border-color: rgba(180, 83, 9, 0.3); color: var(--warn); }
.notice-bad  { background: var(--bad-soft);  border-color: rgba(220, 38, 38, 0.3);  color: var(--bad); }
.notice-info { background: var(--info-soft); border-color: rgba(37, 99, 235, 0.28);  color: var(--info); }
.notice strong { font-weight: 600; }

/* ============================================================
   Sign-in / register
   ------------------------------------------------------------
   The auth pages sit outside the app shell, so they were the one
   place still wearing the old palette. Rather than restyle the
   card in isolation, they get the shell's own split: the dark
   rail on one side, the form on the light ground — so signing in
   already looks like the product you are signing in to.
   ============================================================ */

.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    place-items: stretch;
    padding: 0;
    gap: 0;
}

/* One column on anything narrower than a laptop: the brand panel is
   decoration, and decoration does not get to push the form off screen. */
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

.auth-aside {
    background: var(--rail);
    color: var(--rail-ink);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* A soft accent wash rather than an image — nothing to load, and it
   survives both themes without a second asset. */
.auth-aside::after {
    content: "";
    position: absolute;
    inset: auto -20% -35% -20%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(253, 141, 50, 0.32), transparent 70%);
    pointer-events: none;
}

.auth-aside-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    position: relative;
    z-index: 1;
}
.auth-aside-brand .auth-mark {
    background: linear-gradient(135deg, var(--brand), #FFB870);
    color: #fff;
    width: 30px;
    height: 30px;
}
.auth-aside-dim { color: var(--rail-ink-2); font-weight: 400; }

.auth-pitch { position: relative; z-index: 1; }
.auth-pitch h2 {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.45;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.auth-pitch p {
    color: var(--rail-ink-2);
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
    max-width: 40ch;
}

.auth-points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--rail-ink-2);
    line-height: 1.65;
}
.auth-points i {
    color: var(--accent);
    margin-top: 3px;
    flex: none;
}

.auth-aside-foot {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    color: var(--rail-ink-2);
}

/* --- the form side --- */
.auth-main {
    background: var(--paper);
    display: grid;
    place-items: center;
    padding: 32px 24px;
}

.auth-card {
    max-width: 380px;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* The lockup is already on the dark panel at this width, so showing it
   twice is just noise. */
@media (min-width: 901px) {
    .auth-card > .auth-brand { display: none; }
}

.auth-title { font-family: var(--font-display); letter-spacing: -0.01em; }

.auth-card .form-control,
.auth-card .input {
    padding: 11px 13px;
    font-size: 14.5px;
}

.auth-submit {
    justify-content: center;
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
}
.auth-submit:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* Two fields side by side where they are naturally paired (name +
   company), so the register form does not become a long ladder. */
.auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 420px) {
    .auth-row { grid-template-columns: 1fr; gap: 0; }
}

.auth-hint {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: -8px 0 16px;
    line-height: 1.6;
}

/* ============================================================
   Forms
   ------------------------------------------------------------
   The create/edit screens were the weakest surface: inputs were
   styled but checkboxes, selects and textareas were left at
   browser defaults, so a form was half design system and half
   1998. These fill the gaps and give every form the same header,
   spacing and action bar.
   ============================================================ */

/* One column, comfortable measure. A form field wider than this
   is harder to scan, not easier — the eye loses the line. */
.form-page { max-width: 760px; }

.form-section + .form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
}
.form-section-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 3px;
}
.form-section-note {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: 0 0 16px;
    line-height: 1.7;
}

/* Two fields on one row where they are naturally paired. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-label .req { color: var(--bad); margin-inline-start: 2px; }

.form-hint {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: 5px 0 0;
    line-height: 1.65;
}

/* Focus ring. The default browser outline sits outside the 6px
   radius and looks detached; this hugs the control. */
.input:focus,
.form-control:focus,
select.input:focus,
textarea.input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

textarea.input,
textarea.form-control {
    min-height: 96px;
    resize: vertical;
    line-height: 1.7;
}

/* Native select arrows sit on the wrong side in RTL and cannot be
   styled, so the arrow is drawn here and placed by logical
   property — which flips with direction on its own. */
select.input,
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237C95B8' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left 12px center;
    padding-inline-start: 12px;
    padding-inline-end: 36px;
}
html[dir="rtl"] select.input,
html[dir="rtl"] select.form-control { background-position: left 12px center; }
html[dir="ltr"] select.input,
html[dir="ltr"] select.form-control { background-position: right 12px center; }

:root[data-theme="dark"] select.input,
:root[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236E8AAC' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ---------- Toggle rows ---------- */
/* A checkbox with a label and an explanation under it. The whole
   row is the hit target, not the 13px box — the explanation is
   usually what someone is reading when they decide to click. */
.toggle-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.toggle-row + .toggle-row { margin-top: 9px; }
.toggle-row:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.toggle-row:has(input:checked) {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}

.toggle-row input[type="checkbox"],
.toggle-row input[type="radio"] {
    /* 13px Arial default is unreadable and unclickable. */
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--brand);
    cursor: pointer;
}

.toggle-title {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
}
.toggle-note {
    display: block;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.7;
    margin-top: 3px;
}

/* ---------- Action bar ---------- */
/* Pinned to the card's bottom edge with a rule above it, so the
   form has an obvious end. Primary action first in reading order,
   which flips correctly under RTL. */
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.form-actions .spacer { margin-inline-start: auto; }

/* A destructive action belongs at the far end, away from Save. */
.form-actions .btn-danger { margin-inline-start: auto; }

/* ---------- Impersonation banner ---------- */
/* Deliberately loud. It is the only thing standing between a support session
   and a staff member acting on the wrong account by mistake. */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 9px 18px;
    background: var(--warn);
    color: #fff;
    font-size: 13.5px;
}
.impersonation-bar strong { font-weight: 600; }
.impersonation-bar .btn {
    background: rgba(0, 0, 0, 0.22);
    border-color: transparent;
    color: #fff;
}
.impersonation-bar .btn:hover { background: rgba(0, 0, 0, 0.34); border-color: transparent; }

/* ============================================================
   Library cards
   ------------------------------------------------------------
   The folder and video cards. The markup nests .name/.meta/.usage
   inside .content, but folders.css only ever padded .meta, so the
   card had no consistent internal spacing and the three rows ran
   together. These fix the layout to match the markup that is
   actually rendered.
   ============================================================ */

.item .content { padding: 13px 14px 14px; }

.item .content .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Rename is a double-click on the title, so it needs to look editable. */
.item .content .name:hover {
    text-decoration: underline dotted var(--rule-strong);
    text-underline-offset: 3px;
}

.item .content .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    font-size: 12px;
    color: var(--ink-3);
}
.item .content .meta > span:not([class]) { color: var(--rule-strong); }

.item .content .usage {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}
.item .content .usage-badge {
    font-size: 11.5px;
    padding: 3px 8px;
    gap: 5px;
}
.item .content .usage-badge i { font-size: 10px; opacity: .7; }

/* Actions: hidden until the card is hovered on a pointer device, so a
   grid of forty lessons is not forty rows of buttons. Always visible on
   touch, where there is no hover to reveal them. */
.item .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 13px;
}
.item .actions button,
.item .actions a {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.item .actions button:hover,
.item .actions a:hover {
    border-color: var(--brand-line);
    color: var(--brand);
    background: var(--brand-soft);
}
.item .actions .btn-delete:hover,
.item .actions button[onclick*="delete"]:hover,
.item .actions button[onclick*="Delete"]:hover {
    border-color: var(--bad);
    color: var(--bad);
    background: var(--bad-soft);
}

@media (hover: hover) and (pointer: fine) {
    .item .actions {
        max-height: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .18s ease, opacity .14s ease, padding .18s ease;
    }
    .item:hover .actions,
    .item:focus-within .actions {
        max-height: 120px;
        padding-bottom: 13px;
        opacity: 1;
    }
}

/* Thumbnail area. A folder gets the brand tint, a video a neutral one, and
   a failed video is marked on the tile itself — otherwise a broken lesson
   looks identical to a working one until you read the badge. */
.item.video .icon-wrapper { color: var(--ink-3); }
.item .icon-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.14), transparent 45%);
    pointer-events: none;
}
.item.folder .icon-wrapper::after { display: none; }

.item:has(.badge-bad) .icon-wrapper {
    background: var(--bad-soft);
    color: var(--bad);
}

/* The selection checkbox sits over the thumbnail; give it a readable
   backing rather than a bare native box on artwork. */
.item .item-checkbox {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    width: 17px;
    height: 17px;
    accent-color: var(--brand);
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .75);
}
:root[data-theme="dark"] .item .item-checkbox {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .5);
}