/* ============================================================
   HKSSDC — legacy bridge
   The CRUD panels are laid out with the Bootstrap grid and a
   handful of SB-Admin-2 leftovers. Bootstrap's *grid* stays
   (it does the work); its *look* is replaced here so those
   panels read as HKSSDC rather than as a bootstrap template.
   ============================================================ */

/* ---- cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.card-body { padding: 24px; }
body.theme-teacher .card { border-radius: 14px; }
body.theme-admin .card { border-radius: 6px; }

hr { border-color: var(--line); opacity: 1; }

/* ---- the action row that sits above each panel's table ---- */
.panel-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px -4px 16px;
  padding: 0 4px 16px;
}
.panel-toolbar .p-button + .p-button { margin-left: 0; }
.panel-toolbar .loading-table { margin-left: auto; }

/* a card whose whole job is to hold a table wants tighter padding */
.panel-card > .card-body { padding: 18px 18px 6px; }

/* ---- form rows ----
   The CRUD forms are `col-4` label / `col-8` control pairs; the
   label rides centred against its control. */
.form-label {
  align-items: center;
  color: var(--ink-faint);
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}
.form-control {
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  padding: 11px 13px;
  transition: border-color .18s ease, box-shadow .18s ease;

  &::placeholder { color: var(--ink-faint); }
  &:focus {
    background: var(--paper);
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px oklch(0.715 0.105 168 / 0.25);
    color: var(--ink);
    outline: none;
  }
}
body.theme-admin .form-control:focus { box-shadow: 0 0 0 3px oklch(0.815 0.125 80 / 0.3); }
/* SB-Admin's pill input */
.form-control-user { border-radius: var(--radius); font-size: 15.5px; padding: 12px 14px; }

/* ---- alerts → design-system notices ---- */
.alert {
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 14.5px;
  padding: 14px 18px;
}
.alert-success {
  background: oklch(0.62 0.11 168 / 0.1);
  border-color: oklch(0.62 0.11 168 / 0.3);
  border-left-color: var(--ok);
  color: var(--ink);
}
.alert-danger {
  background: oklch(0.58 0.16 25 / 0.09);
  border-color: oklch(0.58 0.16 25 / 0.28);
  border-left-color: var(--bad);
  color: var(--ink);
}
.alert-warning {
  background: oklch(0.72 0.11 78 / 0.12);
  border-color: oklch(0.72 0.11 78 / 0.32);
  border-left-color: var(--warn);
  color: var(--ink);
}

/* ---- buttons ----
   `.btn` itself comes from the design system (_site.scss) — do NOT
   redeclare its `border` shorthand here, or it would beat the
   variant rules' `border-color` and flatten .btn-ghost. */
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.btn-green, .btn-blue, .btn-success {
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  color: var(--navy-deep);
  font-weight: 600;
  padding: 12px 24px;
  transition: transform .18s ease, background .2s ease;

  &:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--navy-deep); transform: translateY(-2px); }
}
.btn-block { display: block; width: 100%; }
.btn-user { border-radius: var(--radius); }

/* ---- utilities the templates assume ---- */
.o-hidden { overflow: hidden; }
.text-right { text-align: right; }
.text-red, .text-danger { color: var(--bad) !important; }
.text-success { color: var(--ok) !important; }
.text-gray-900, .text-dark { color: var(--ink) !important; }
.text-gray-600 { color: var(--ink-soft) !important; }
/* PrimeVue doc-markup leftovers */
.flex { display: flex; }
.w-full { width: 100%; }
.md\:w-80 { width: 100%; }

/* ---- spinners (the panels toggle these with jQuery show/hide) ---- */
@keyframes hkssdc-spin { to { transform: rotate(360deg); } }
.spinner-border {
  animation: hkssdc-spin .75s linear infinite;
  border: 2px solid var(--accent-deep);
  border-radius: 50%;
  border-right-color: transparent;
  display: inline-block;
  height: 1.05rem;
  vertical-align: -2px;
  width: 1.05rem;
}
.spinner-border-sm { border-width: 1.5px; height: .85rem; width: .85rem; }
/* `.text-dark` is stapled to every spinner in the panels — keep it brand-coloured */
.spinner-border.text-dark { border-color: var(--accent-deep); border-right-color: transparent; }

/* ---- tables rendered outside PrimeVue ---- */
table:not(.data):not(.p-datatable-table) {
  color: var(--ink);
  th { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
  td, th { border-color: var(--line); }
}

/* on a dark console, force-light utilities would vanish */
body.theme-admin {
  .text-dark { color: var(--ink) !important; }
  .bg-white { background: var(--card) !important; }
}