/* ============================================================================
   admin-editor-links.css - the /editor LINKS TAB.

   WHAT GOES IN HERE: the Links tab inside the session workspace
   (`src/views/editor/EditorLinksTab.vue`) - the explanation at the top, the
   save bar, the ordered rows of name + address, and the row controls. Nothing
   about DOCUMENTS: those are `admin-editor-documents.css`, a separate file, and
   the two tabs are separate for the same reason the sheets are - one of them
   changes what a student can read and the other does not.

   FOUR RULES, each of which fails silently rather than loudly:

     1. EVERY CLASS IS PREFIXED `edtl-`. The admin bundle is ONE stylesheet
        loaded whole by every admin page and by /editor, so a bare `.foo {}`
        here is a global rule that lands on any element carrying that class
        anywhere in the panel - and because the editor sheets are linked late it
        WINS at equal specificity. `tests/editorCssIsolation.spec.ts` is the
        guard, and it opens the public sheets the editor page also carries.
     2. THE FILENAME KEEPS ITS `admin-editor` PREFIX. `bundle-css.mjs`
        partitions the public bundle from the admin bundle on
        `href.startsWith('/css/admin')` and on nothing else, so a name like
        `editor-links.css` would ship the whole admin panel's CSS to every
        marketing visitor, with a completely green build and no test to catch
        it.
     3. NO `direction`. The /editor page is English and LTR; the Hebrew it
        renders is data. A link's NAME is usually Hebrew and its ADDRESS never
        is, so the two are declared with the `dir` ATTRIBUTE on the input and on
        the text that holds them - never with a rule here.
        `tests/editorContentTranslation.spec.ts` asserts this page declares
        `direction` in exactly one place, and that place is the slide canvas in
        `admin-editor-templates.css`.
     4. NO `container-type`. A `cqw` resolves against the nearest container
        ancestor, and the editor already has one: the 1920x1080 slide box. A
        second container silently re-bases every size in the slide vocabulary.

   It is linked after `admin-editor.css`, which declares the `--edt-*` tokens
   this file reads. Sizes are in `rem` and the shell puts `rem` at 18px
   (`html:has(.edt-shell){font-size:112.5%}`), which is why the numbers here
   read small beside the rest of the panel.
   ============================================================================ */

/* ============================================================================
   L1  THE TAB
   One column. There is no second pane to open: a link is two short fields, and
   everything true about it fits on its own row.
   ============================================================================ */

.edtl-tab {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================================
   L2  WHAT THIS TAB IS
   The paragraph that keeps Links and Documents apart in the reader's head. It
   is styled as quiet prose rather than as a notice: it is always true, so it
   must never look like something has gone wrong.

   The accent edge is a SOLID `--edt-accent` and not the brand ramp. The brand
   gradient is only ever a hairline, and a 3px block of it beside a paragraph is
   a fill.
   ============================================================================ */

.edtl-intro {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--edt-glass);
  box-shadow: inset 3px 0 0 0 var(--edt-accent), inset 0 0 0 1px var(--edt-line);
}

.edtl-intro__lead {
  margin: 0 0 0.4rem;
  color: var(--edt-ink);
  font-size: 0.84rem;
  line-height: 1.55;
}

.edtl-intro__aside {
  margin: 0 0 0.3rem;
  color: var(--edt-ink-2);
  font-size: 0.78rem;
  line-height: 1.55;
}

.edtl-intro__aside:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   L3  THE SAVE BAR
   ONE axis: what is stored against what is on screen. There is no publish here
   and no draft, so there is no second sentence to conflate this one with.
   ============================================================================ */

.edtl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtl-bar__status {
  margin: 0;
  color: var(--edt-ink-2);
  font-size: 0.82rem;
}

.edtl-bar__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The phase colours the LEFT EDGE and never the whole bar: a bar that turns red
   under a sentence saying nothing was lost contradicts its own words. */
.edtl-bar--dirty {
  box-shadow: inset 3px 0 0 0 var(--edt-accent), inset 0 0 0 1px var(--edt-line);
}

.edtl-bar--refused,
.edtl-bar--error {
  box-shadow: inset 3px 0 0 0 #b42318, inset 0 0 0 1px var(--edt-line);
}

/* ============================================================================
   L4  THE BUTTON KIT
   Its own, rather than the Documents tab's `.edtdoc-btn`: two tabs sharing one
   class is how a change to one of them silently redraws the other.
   ============================================================================ */

.edtl-btn {
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
}

.edtl-btn:hover:not(:disabled) {
  color: var(--edt-accent-ink);
}

/* NO `color` HERE, DELIBERATELY. A `color` on this rule (0,2,0) would outrank
   `.edtl-btn--primary`'s white (0,1,0) below, so a disabled PRIMARY button
   would paint grey ink on the blue fill and its label would all but vanish -
   and disabled is the RESTING state of Save, which sits inert until something
   differs from what is stored. Muting is the opacity's job alone, which cannot
   defeat a variant's own colour. */
.edtl-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.edtl-btn--primary {
  background: var(--edt-accent);
  box-shadow: none;
  color: #fff;
}

.edtl-btn--primary:hover:not(:disabled) {
  background: var(--edt-accent-ink);
  color: #fff;
}

/* ============================================================================
   L5  WHAT THE SERVER AND THE CLIENT REFUSED
   The server's line is printed verbatim and can hold a Hebrew link name, which
   is why the markup gives it `dir="auto"`. The client's own lines are English
   and name a row by its number.
   ============================================================================ */

.edtl-notes {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(25, 26, 35, 0.04);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  list-style: none;
}

.edtl-notes--refused {
  background: rgba(180, 35, 24, 0.06);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18);
}

.edtl-notes__line {
  color: var(--edt-ink-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

.edtl-blocked {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(25, 26, 35, 0.04);
  color: var(--edt-ink-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* The two absences that are different facts: "not read yet" and "read, none". */
.edtl-quiet {
  margin: 0 0 0.75rem;
  padding: 1.6rem 0.75rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink-3);
  font-size: 0.82rem;
  text-align: center;
}

/* ============================================================================
   L6  THE ROWS
   A calm list. No heavy borders and no card per row: the rows are read as a
   SEQUENCE, because the order they are in is the order a student sees, and a
   stack of bordered boxes reads as a set of unrelated things.

   The separator is a single hairline BETWEEN rows, so the list has no outer
   frame competing with the panel it sits in.
   ============================================================================ */

.edtl-list {
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  list-style: none;
}

.edtl-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  box-shadow: inset 0 -1px 0 0 var(--edt-line);
}

.edtl-row:last-child {
  box-shadow: none;
}

.edtl-row__index {
  color: var(--edt-ink-3);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.edtl-row__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0.5rem;
  min-width: 0;
}

/* ── The fields ────────────────────────────────────────────────────────── */

/* A `<label>` wrapping its own input, so no `for`/`id` pair has to be minted
   per row and no two lectures can collide on one in the document. */
.edtl-field {
  display: block;
  min-width: 0;
}

.edtl-field__label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--edt-ink-3);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.edtl-field__input {
  width: 100%;
  padding: 0.38rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink);
  font-family: inherit;
  font-size: 0.82rem;
}

.edtl-field__input:focus-visible {
  outline: 2px solid var(--edt-accent);
  outline-offset: 1px;
}

/* An address is machine text and never Hebrew, so it is read character by
   character - a mono face is what makes a typo in a long path findable. The
   token comes from global.css and is never a stack written out here: the dead
   src/assets/fonts/fonts.css omits 'Noto Sans Hebrew' and ends in Courier New,
   and it is the first file a search finds. */
.edtl-field__input--url {
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

/* ── The row controls ──────────────────────────────────────────────────── */

.edtl-row__ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

.edtl-op {
  padding: 0.28rem 0.5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.edtl-op:hover:not(:disabled) {
  color: var(--edt-accent-ink);
}

.edtl-op:disabled {
  cursor: default;
  opacity: 0.45;
}

.edtl-op--open {
  display: inline-block;
  color: var(--edt-accent-ink);
}

/* An address with no scheme is not something this screen will follow, so the
   control is present and inert rather than an anchor that goes nowhere. */
.edtl-op--dead {
  color: var(--edt-ink-3);
  cursor: default;
  opacity: 0.45;
}

.edtl-op--remove:hover {
  color: #b42318;
}

/* ── The reader's row ──────────────────────────────────────────────────── */

.edtl-read {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  grid-column: 2 / -1;
}

.edtl-read__label {
  margin: 0;
  color: var(--edt-ink);
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.edtl-read__url {
  color: var(--edt-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.edtl-read__url--dead {
  margin: 0;
  color: var(--edt-ink-3);
}

/* ============================================================================
   L7  THE FOOT
   Adding a link, and the one number that decides whether Add is available at
   all. The count says what the server takes rather than a bare total, because
   the ceiling is the only thing about it a reader has to act on.
   ============================================================================ */

.edtl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.edtl-foot__count {
  margin: 0;
  color: var(--edt-ink-3);
  font-size: 0.74rem;
}

/* ============================================================================
   L8  NARROW
   767px is the phone breakpoint and 1024px the tablet one, and this file uses
   the phone. Below it a row's two fields stack: an address is long, a name is
   short, and side by side they leave the address unreadable in about 9rem.
   The controls drop to their own line under both, at the row's full width.
   ============================================================================ */

@media (max-width: 767px) {
  .edtl-row {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    align-items: start;
  }

  .edtl-row__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .edtl-row__ops {
    grid-column: 2 / -1;
  }

  .edtl-row__index {
    padding-top: 1.1rem;
  }
}