/* ===== materials_tab_html (HTML form, scoped) =====
   The form's rules (Anvil strips <style> from an HTML template). Loaded eagerly
   from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   The form has three top-level nodes (`#mt-shell`, the shared file input and
   the confirm overlay), so they are wrapped in one `.mt-root` div:
   two or more top-level nodes and Anvil keeps its own wrapper as the root and
   the root rule lands on an inner div. `.mt-root` is therefore the root rule
   and stays a bare class, and it carries no `display`: test_detail_html shows
   and hides this tab with `visible`, and a `display: contents` root would race
   whatever rule that drives. The panel it mounts into is the flex column that
   sizes `.mt-shell`, so a plain block between them changes no box. The root
   takes `position: relative`, and no min-height, height or overflow.

   Everything else is `:where(.mt-root)`-scoped, which adds zero specificity
   and so cannot change which rule wins.

   `@keyframes mt-progress-indeterminate` stays at the top level and keeps its
   name: @keyframes is global, and this one is form-prefixed and unique
   across the app.

   No `.mt-*` class is declared anywhere else in the app and the form applies
   no `.px-*` class in static markup, so this sheet has no tie to audit against
   a sibling form or against the dependency's runtime theme injection.
   `.mt-select` and `.mt-input` are outranked by `training_authoring`'s
   `.ta-root select` at (0,1,1), and that rule only ever gains weight, so the
   shell wins the shell-versus-child pair. */

.mt-root { position: relative; }

:where(.mt-root) .mt-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: #1e293b;
  padding: 18px 24px 28px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:where(.mt-root) .mt-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
:where(.mt-root) .mt-h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
:where(.mt-root) .mt-h2 .mt-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .08em; margin-left: 8px; font-weight: 500;
}
:where(.mt-root) .mt-spacer { flex: 1 1 auto; }
:where(.mt-root) .mt-btn {
  padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #334155;
}
:where(.mt-root) .mt-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
:where(.mt-root) .mt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.mt-root) .mt-btn-primary {
  padding: 7px 16px; border: 1px solid #1d4ed8; border-radius: 8px;
  background: #1d4ed8; cursor: pointer; font-size: 0.88rem; font-weight: 700; color: #ffffff;
}
:where(.mt-root) .mt-btn-primary:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; }
:where(.mt-root) .mt-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.mt-root) .mt-btn-danger {
  padding: 6px 14px; border: 1px solid #dc2626; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #b91c1c;
}
:where(.mt-root) .mt-btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #b91c1c; }
:where(.mt-root) .mt-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Material card */
:where(.mt-root) .mt-row {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
:where(.mt-root) .mt-row.dragging { opacity: 0.4; }
:where(.mt-root) .mt-row.drag-over { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,0.15); }

:where(.mt-root) .mt-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:where(.mt-root) .mt-drag {
  flex: 0 0 auto;
  padding: 4px 8px; cursor: grab;
  color: #94a3b8; font-size: 1.1rem; font-weight: 700;
  border-radius: 6px; user-select: none;
  background: #f8fafc; border: 1px solid #e2e8f0;
}
:where(.mt-root) .mt-drag:hover { color: #475569; background: #f1f5f9; }
:where(.mt-root) .mt-drag.disabled { cursor: not-allowed; opacity: 0.5; }
:where(.mt-root) .mt-pos {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; color: #64748b; font-weight: 700;
  background: #eff6ff; color: #1d4ed8;
  padding: 3px 8px; border-radius: 6px;
}
:where(.mt-root) .mt-row-actions { margin-left: auto; display: flex; gap: 6px; }

:where(.mt-root) .mt-grid {
  display: grid; grid-template-columns: 200px 1fr; gap: 12px;
}

:where(.mt-root) .mt-field { display: flex; flex-direction: column; gap: 4px; }
:where(.mt-root) .mt-field-label {
  font-size: 0.7rem; color: #64748b; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
}
:where(.mt-root) .mt-input, :where(.mt-root) .mt-select {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 0.95rem; background: #ffffff; box-sizing: border-box;
  width: 100%; font-family: inherit; color: #0f172a;
}
:where(.mt-root) .mt-input:focus, :where(.mt-root) .mt-select:focus {
  outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}
:where(.mt-root) .mt-input:disabled, :where(.mt-root) .mt-select:disabled {
  background: #f8fafc; color: #94a3b8; cursor: not-allowed;
}
:where(.mt-root) .mt-cap-hint {
  font-size: 0.78rem; color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding-top: 2px;
}

/* Upload state */
:where(.mt-root) .mt-source-block {
  border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; background: #fafafa;
}
:where(.mt-root) .mt-source-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:where(.mt-root) .mt-source-info { flex: 1 1 200px; font-size: 0.85rem; color: #475569; min-width: 0; word-break: break-all; }
:where(.mt-root) .mt-source-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; color: #475569;
}
:where(.mt-root) .mt-source-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
:where(.mt-root) .mt-progress {
  height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
  flex: 1 1 200px; min-width: 120px;
}
:where(.mt-root) .mt-progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(29, 78, 216, 0.25) 0%,
    #1d4ed8 50%,
    rgba(29, 78, 216, 0.25) 100%
  );
  background-size: 200% 100%;
  width: 100%;
  animation: mt-progress-indeterminate 1.2s linear infinite;
}
@keyframes mt-progress-indeterminate {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
:where(.mt-root) .mt-error { color: #b91c1c; font-size: 0.85rem; }
:where(.mt-root) .mt-info-italic { color: #94a3b8; font-style: italic; font-size: 0.85rem; }

:where(.mt-root) .mt-embed-preview {
  display: block; margin-top: 8px;
  width: 100%; max-width: 480px; aspect-ratio: 16 / 9;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #000000; overflow: hidden;
}
:where(.mt-root) .mt-embed-preview iframe {
  width: 100%; height: 100%; border: 0; border-radius: 7px;
}

:where(.mt-root) .mt-empty {
  padding: 30px; text-align: center; color: #94a3b8;
  font-style: italic;
  background: #ffffff; border-radius: 10px; border: 1px dashed #cbd5e1;
}

:where(.mt-root) .mt-file-input { display: none; }

/* Confirm-delete inline overlay. The base `display: none` hides this block
   on the designer canvas too. The card is anvil:name'd, so staff still reach its copy through the component tree. */
:where(.mt-root) .mt-confirm-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 9100;
}
:where(.mt-root) .mt-confirm-overlay.open { display: flex; }
:where(.mt-root) .mt-confirm-card {
  background: #ffffff; border-radius: 12px; padding: 18px 20px;
  width: min(460px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
:where(.mt-root) .mt-confirm-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: #0f172a; }
:where(.mt-root) .mt-confirm-body { font-size: 0.9rem; color: #475569; line-height: 1.5; margin-bottom: 14px; }
:where(.mt-root) .mt-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }