/* DarSage portal. Colours, sizes and type come from tokens.css; nothing here names a colour of its own.
   Logical properties throughout (inline-start, block-end), so the same rules serve English and Arabic. */

/* ---- page ---- */
* { box-sizing: border-box; }
:root { font-family: var(--font); color: var(--ink); background: var(--page); line-height: 1.6; }
body { margin: 0; }
header, nav, main, footer { padding: var(--space-4) max(var(--space-4), calc((100vw - var(--page-width)) / 2)); }
main { min-height: 70vh; overflow-wrap: anywhere; }
main > a { display: inline-block; padding-block: .3rem; margin-inline-end: var(--space-4); }
footer { color: var(--muted); font-size: .9rem; }
a { color: var(--accent); }
h1 { font-size: 2rem; line-height: 1.25; margin-block: var(--space-4) var(--space-2); }
h2 { margin-block-start: var(--space-6); }
.lead { max-width: var(--measure); color: var(--ink-soft); }
.hint { color: var(--muted); font-size: .9rem; margin-block: .3rem 0; }
.nowrap { white-space: nowrap; }
.identifier { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); padding: var(--space-4); unicode-bidi: plaintext; }

.skip { position: absolute; inset-block-start: -5rem; }
.skip:focus { inset-block-start: var(--space-2); background: var(--surface); padding: var(--space-4); z-index: 2; }

/* ---- header and navigation ---- */
header { display: flex; align-items: center; gap: var(--space-5); background: var(--brand); color: var(--on-brand); }
header a { color: var(--on-brand); }
header form { margin-inline-start: auto; }
header button { background: transparent; border: 1px solid rgba(255, 255, 255, .55); margin: 0; padding: .4rem .8rem; }
header button:hover { background: rgba(255, 255, 255, .14); }
.brand { font-size: 1.5rem; font-weight: 750; text-decoration: none; }

nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding-block: 0; background: var(--surface); border-block-end: 1px solid var(--line); }
nav a { padding: .8rem .6rem; text-decoration: none; color: var(--ink-soft); border-block-end: 3px solid transparent; }
nav a:hover { color: var(--accent-strong); border-block-end-color: var(--line-strong); }
nav a[aria-current=page] { color: var(--brand); font-weight: 650; border-block-end-color: var(--accent); }

/* ---- forms ---- */
label { display: block; font-weight: 600; margin-block-start: .8rem; }
label.check, .checks label { font-weight: 400; }
input, select, textarea, button { font: inherit; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); max-width: 100%; }
input:not([type=checkbox]):not([type=hidden]), select, textarea { display: block; width: min(100%, 38rem); background: var(--surface); color: var(--ink); }
textarea { min-height: 7rem; }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); border-width: 2px; }
.field-error { color: var(--danger-ink); font-size: .9rem; font-weight: 600; margin-block: .3rem 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-m); margin-block: var(--space-4); padding: var(--space-4); background: var(--surface); }

button, .button { cursor: pointer; display: inline-block; background: var(--accent); color: var(--on-brand); text-decoration: none; border: 0; border-radius: var(--radius-s); padding: .65rem 1rem; margin-block: .6rem; }
button:hover, .button:hover { background: var(--accent-strong); }
button.danger, .button.danger { background: var(--danger); }
button.danger:hover, .button.danger:hover { background: var(--danger-strong); }
.button.quiet { background: transparent; color: var(--accent); border: 1px solid var(--line-strong); }
.button.quiet:hover { background: var(--surface-sunk); color: var(--accent-strong); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
form.inline { display: inline-block; margin-inline-end: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .2rem var(--space-5); align-items: start; }
.grid .full { grid-column: 1 / -1; }
.grid input:not([type=checkbox]):not([type=hidden]), .grid select { width: 100%; }
.divided { border-block-start: 1px solid var(--line); margin-block-start: 1.2rem; padding-block-start: .6rem; }

.file-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; width: min(100%, 38rem); margin-block: .3rem; }
.file-picker input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.file-button { background: var(--accent); color: var(--on-brand); padding: .55rem 1rem; border-radius: var(--radius-s); }
.file-picker:hover .file-button { background: var(--accent-strong); }
.file-picker input:focus-visible + .file-button { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- messages ---- */
[role=alert] { border-inline-start: 4px solid var(--warn-line); padding: var(--space-4); background: var(--warn-bg); }
.notice { border-inline-start: 4px solid var(--ok-line); padding: var(--space-4); background: var(--ok-bg); }
ul.reasons { margin-block: var(--space-2) 0; padding-inline-start: 1.25rem; }

/* ---- cards, lists, tables ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.2rem 1.4rem; margin-block: var(--space-5); box-shadow: var(--shadow-s); }
.card h2 { margin-block-start: 0; font-size: 1.3rem; }
.card.danger-zone { border-color: var(--danger); }
dl { display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr); gap: var(--space-2); }
dd { margin: 0; }
dl.figures { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); }
dl.figures div { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
dl.figures dt { color: var(--muted); font-size: .9rem; }
dl.figures dd { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); margin-block: var(--space-4); }
caption { text-align: start; color: var(--muted); padding-block-end: .4rem; }
th, td { text-align: start; border-block-end: 1px solid var(--line); padding: .7rem; vertical-align: top; overflow-wrap: break-word; }
thead th { background: var(--surface-sunk); font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
thead th a { color: inherit; }
th[aria-sort] a { font-weight: 750; color: var(--brand); }
td.number, th.number { text-align: end; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-sunk); }
.users tr[aria-current=true] { background: var(--surface-sunk); }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-4); margin-block: var(--space-4); }
.toolbar label { margin-block-start: 0; font-size: .9rem; }
.toolbar input:not([type=checkbox]):not([type=hidden]), .toolbar select { width: auto; min-width: 11rem; }
.toolbar button, .toolbar .button { margin-block: 0; }
.toolbar .end { margin-inline-start: auto; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-4); color: var(--muted); }

/* ---- badges ---- */
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; background: var(--neutral-bg); color: var(--neutral-ink); margin-inline-end: .3rem; white-space: nowrap; }
.badge.you { background: var(--brand); color: var(--on-brand); margin-inline-start: .4rem; }
.badge.role-super_admin { background: #f3e3c4; color: #6b4300; }
.badge.role-admin { background: var(--info-bg); color: var(--info-ink); }
.badge.status-active, .badge.result-read { background: var(--ok-bg); color: var(--ok-ink); }
.badge.status-suspended { background: var(--danger-bg); color: var(--danger-ink); }
.badge.result-limited { background: #fdf0d5; color: var(--warn-ink); }
.badge.result-none { background: #eceff1; color: #37474f; }

/* ---- the permission matrix ---- */
.matrix > fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.matrix fieldset.choices { border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin: 0; }
.matrix fieldset.choices legend { font-weight: 600; padding-inline: .35rem; }
.matrix label.check { display: block; margin-block: .4rem; font-weight: 400; }
.matrix table select { inline-size: auto; min-inline-size: 11rem; }
.matrix th[scope=row] { font-weight: 600; text-align: start; }
table.changes td.before { color: var(--danger-ink); text-decoration: line-through; }
table.changes td.after { color: var(--ok-ink); font-weight: 600; }

/* ---- small screens ---- */
@media (max-width: 650px) {
  header { flex-wrap: wrap; gap: .6rem; }
  h1 { font-size: 1.6rem; }
  th, td { padding: .4rem; }
  /* A wide table scrolls sideways inside its wrapper; its columns are not crushed to a few letters each. */
  .table-wrap table { min-width: 36rem; }
  dl { display: block; }
  dd { margin-block-end: .8rem; }
  dl.figures { display: grid; grid-template-columns: 1fr 1fr; }
  dl.figures dd { margin-block-end: 0; }
  nav a { padding: .6rem .4rem; }
}