/* Shared flat controls. Fill and borders identify actions without shadows. */
/* This last-loaded rule covers admin, teacher, login and enhanced controls in
   every interaction state. Decorative pseudo-elements cannot reintroduce a glow. */
html body :is(button, .btn, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"]),
html body :is(button, .btn, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"])::before,
html body :is(button, .btn, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"])::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
html body input[type="file"]::file-selector-button {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
html body :is(button, .btn, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}
.btn {
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.btn-sm { min-height: 44px; padding: .5rem 1rem; }
.btn-primary { background: var(--gold, #fe5722); color: var(--ink, #0c0d12); }
.btn-primary:not(:disabled):hover { background: #ff6a3a; color: var(--ink, #0c0d12); }
.btn-primary:not(:disabled):active { background: #f04c18; }
.btn-ghost { background: #fff; color: var(--ink, #0c0d12); border-color: var(--line, #e7e0da); }
.btn-ghost:not(:disabled):hover { background: var(--peach2, #fff3ec); color: var(--ink, #0c0d12); }
.btn-ghost:not(:disabled):active { background: var(--peach, #ffe9df); }
.btn-danger { background: var(--bad, #c0392b); color: #fff; }
.btn-danger:not(:disabled):hover { background: #a93226; color: #fff; }
.btn:focus-visible { outline: 2px solid var(--gold, #fe5722); outline-offset: 3px; }
.btn:disabled { opacity: 1; cursor: not-allowed; background: #f3ece7; color: #a39b95; border-color: #e7e0da; }
.btn > svg { flex-shrink: 0; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn[aria-busy="true"] { cursor: progress; }

/* Native controls remain usable when progressive enhancement is unavailable. */
input[type="file"] { width: 100%; max-width: 100%; min-height: 52px; padding: .3rem; border: 0; box-shadow: var(--field); border-radius: 999px; background: #fff; font-size: .85rem; }
input[type="file"]::file-selector-button { min-height: 44px; margin-inline-end: .8rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: var(--peach, #ffe9df); color: var(--brand, #b9360e); font: inherit; font-weight: 700; cursor: pointer; }
input[type="file"]:hover::file-selector-button { background: #ffd9c9; }

/* The entire surface opens the native picker without hiding it from keyboards. */
.file-picker { display: flex; flex-direction: column; gap: .65rem; width: 100%; min-width: 0; }
.row > .file-picker { flex: 1 1 280px; }
.file-picker-label { color: var(--ink2, #4d4a49); font-size: .85rem; font-weight: 700; line-height: 1.5; }
.file-picker-surface { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; min-width: 0; min-height: 104px; padding: 1.1rem 1.25rem; border: 1.5px dashed #dccfc5; border-radius: 22px; background: #fff; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; }
.file-picker-surface:hover { border-color: var(--gold, #fe5722); background: var(--peach2, #fff3ec); }
.file-picker:focus-within .file-picker-surface { outline: 2px solid var(--gold, #fe5722); outline-offset: 3px; border-color: var(--gold, #fe5722); }
.file-picker-surface > input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; }
.file-picker-surface > input[type="file"]:focus { outline: none; }
.file-picker-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border: 0; border-radius: 16px; background: var(--peach, #ffe9df); color: var(--brand, #b9360e); }
.file-picker-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.file-picker-thumbnail { flex-shrink: 0; width: 48px; height: 48px; border: 0; border-radius: 16px; object-fit: cover; }
.file-picker [hidden] { display: none !important; }
.file-picker-copy { display: grid; flex: 1; min-width: 0; gap: .25rem; text-align: start; }
.file-picker-copy strong { color: var(--ink, #0c0d12); font-size: .9rem; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.file-picker-copy small { color: var(--ink3, #77716d); font-size: .8rem; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
.file-picker-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: .6rem 1.1rem; border: 1px solid var(--line, #e7e0da); border-radius: 999px; background: #fff; color: var(--ink, #0c0d12); font-size: .8rem; font-weight: 700; line-height: 1.4; }
.file-picker.is-selected .file-picker-surface { border-style: solid; border-color: var(--gold, #fe5722); background: linear-gradient(90deg, #ffede3, #fff8f3); }
.file-picker.is-selected .file-picker-action { color: var(--brand, #b9360e); }
.file-picker.is-invalid .file-picker-surface, .file-picker[aria-invalid="true"] .file-picker-surface { border-color: var(--bad, #c0392b); background: #fff6f3; }
.file-picker.is-invalid .file-picker-icon { background: #fdecea; color: var(--bad, #c0392b); }
.file-picker:has(input:disabled) .file-picker-surface { opacity: .65; cursor: not-allowed; }
.file-picker input:disabled { cursor: not-allowed; }

/* Native dialog handles focus and backdrop; the reading surface matches the workspace. */
.sama-confirm-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 28px; background: var(--paper, #fffcf9); color: var(--ink, #0c0d12); box-shadow: 0 30px 60px -20px rgba(12, 13, 18, .45); overflow: auto; }
.sama-confirm-dialog::backdrop { background: rgba(12, 13, 18, .54); }
.sama-confirm-body { padding: 1.75rem 1.75rem 1.25rem; }
.sama-confirm-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-block-end: 1rem; border: 0; border-radius: 18px; background: var(--peach, #ffe9df); color: var(--brand, #b9360e); }
.sama-confirm-mark svg { width: 24px; height: 24px; }
.sama-confirm-mark img { width: 26px; height: 26px; object-fit: contain; }
#sama-confirm-title { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.4px; line-height: 1.35; color: var(--ink, #0c0d12); }
#sama-confirm-message { margin: 0; color: var(--ink2, #4d4a49); font-size: .95rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.sama-confirm-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; padding: .5rem 1.75rem 1.75rem; border: 0; background: none; }
.sama-confirm-actions button { flex: 1 1 0; min-height: 48px; padding: .65rem 1.1rem; border: 1px solid transparent; border-radius: 999px; box-shadow: none; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease-out; }
.sama-confirm-actions .sama-confirm-cancel { background: #fff; color: var(--ink, #0c0d12); border-color: var(--line, #e7e0da); }
.sama-confirm-cancel:hover { background: var(--peach2, #fff3ec); }
.sama-confirm-accept { background: var(--gold, #fe5722); color: var(--ink, #0c0d12); }
.sama-confirm-accept:hover { background: #ff6a3a; }
.sama-confirm-dialog.is-danger .sama-confirm-mark { background: #fdecea; color: var(--bad, #c0392b); }
.sama-confirm-dialog.is-danger .sama-confirm-accept { background: var(--bad, #c0392b); color: #fff; }
.sama-confirm-dialog.is-danger .sama-confirm-accept:hover { background: #a93226; }
.sama-confirm-actions button:focus-visible { outline: 2px solid var(--gold, #fe5722); outline-offset: 3px; }

@media (max-width: 500px) {
  .file-picker-surface { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; padding: 1rem; }
  .file-picker-icon, .file-picker-thumbnail { width: 44px; height: 44px; }
  .file-picker-action { grid-column: 2; justify-self: start; }
}
@media (max-width: 360px) {
  .sama-confirm-body { padding: 1.25rem; }
  .sama-confirm-actions { flex-direction: column-reverse; align-items: stretch; padding: 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .file-picker-surface, .sama-confirm-actions button { transition: none; }
}
.sama-confirm-dialog[data-reduced-motion="true"] .btn { transition: none; }
.course-change-note, .course-change-reply { white-space: pre-wrap; overflow-wrap: anywhere; }
.course-change-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.course-change-card { margin: 0; min-width: 0; }
.course-change-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.course-change-review { margin-block: 24px; }
.course-change-reply { padding-block-start: 16px; border-block-start: 1px solid var(--line, #e7e0da); }
.course-change-context { flex-direction: row; align-items: center; margin-block-end: 24px; }
.course-change-context .media-cover { flex: 0 0 160px; }
.course-change-context .media-body { min-width: 0; }
@media (max-width: 500px) { .course-change-context .media-cover { flex-basis: 96px; } }