/* Rabt dashboard prototype — brand tokens and the few states Tailwind utilities do not cover.
   Tailwind (CDN) handles layout and components; this file adds: colour tokens for light/dark,
   the CSS-only screen switching (:target), the mobile menu (checkbox), tabs (radios), the
   sidebar look, badges/switches, focus rings, RTL and print tweaks. */

/* ── tokens (same palette as the reference: mint #7FEFA1, yellow #FCEC6B, black/white/greys) ── */
:root {
  --rabt-green: #7FEFA1; --rabt-yellow: #FCEC6B; --green-600: #1B7E39; --green-700: #176D31;
  --bg: #F3F5F4; --surface: #FFFFFF; --surface-2: #F7F8F7; --surface-3: #EFF1EF;
  --tx: #0A0A0B; --tx-2: #4A4F58; --tx-3: #666D78; --line: #E4E7E4; --line-2: #D4D9D4;
  --focus: var(--green-600);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0E1014; --surface: #15171C; --surface-2: #1B1E24; --surface-3: #22262D;
  --tx: #EDEFF2; --tx-2: #B4BAC4; --tx-3: #8F97A2; --line: #262A31; --line-2: #333842;
  --focus: var(--rabt-green);
  color-scheme: dark;
}
html { scroll-behavior: smooth; }
html[lang="ar"] body { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── base fallbacks so the page stays readable if the Tailwind CDN cannot load ── */
body { margin: 0; background: var(--bg); color: var(--tx); font-family: Inter, system-ui, 'Segoe UI', Arial, sans-serif; line-height: 1.45; }
table { border-collapse: collapse; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── accessibility ── */
.skip-link { position: absolute; inset-inline-start: 8px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--rabt-green); color: #000; font-weight: 700; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, [role="button"], a, summary, label[for] { cursor: pointer; }

/* ── buttons & inputs (base; colour variants stay as Tailwind utilities in the markup) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .375rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn-lg { padding: .5rem 1rem; }
.btn-icon { padding: .375rem; }
.btn svg { width: 1rem; height: 1rem; }
.inp { width: 100%; padding: .5rem .75rem; border: 1px solid var(--line-2); border-radius: .5rem; background: var(--surface); color: var(--tx); font: inherit; font-size: .875rem; }
.inp::placeholder { color: var(--tx-3); }
.inp:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(27, 126, 57, .25); }
.inp[readonly] { color: var(--tx-2); }
.switch { appearance: none; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; cursor: pointer; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch:checked { background: var(--green-600); }
.switch:checked::after { transform: translateX(16px); }
[dir="rtl"] .switch:checked::after { transform: translateX(-16px); }

/* ── sidebar ── */
.sidebar { background: #0A0A0B; }
.nav-link { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .625rem; font-size: .875rem; font-weight: 500; color: #A7AEB8; }
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link[aria-current="page"] { background: rgba(127, 239, 161, .12); color: var(--rabt-green); font-weight: 600; }
.rabt-logo svg { display: block; }               /* the official logo is never mirrored: the <svg> keeps its own direction */
[dir="rtl"] .rabt-logo svg { transform: none; }
html[data-shell="company"] [data-shell-nav]:not([data-shell-nav="company"]),
html[data-shell="member"] [data-shell-nav]:not([data-shell-nav="member"]),
html[data-shell="rabt"] [data-shell-nav]:not([data-shell-nav="rabt"]) { display: none; }

/* ── mobile menu: a checkbox, so it works without JavaScript ── */
@media (max-width: 1023.98px) {
  .sidebar { transform: translateX(-100%); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .nav-toggle:checked ~ .app .sidebar { transform: none; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
  .nav-toggle:checked ~ .app .scrim { display: block; }
}

/* ── screens: the URL hash decides what is shown (CSS-only); app.js only syncs the nav and title ── */
.screen { display: none; }
.screen:target { display: block; }
main:not(:has(.screen:target)) .screen[data-default][data-shell="company"] { display: block; }
html[data-shell="member"] main:not(:has(.screen:target)) .screen[data-default] { display: none; }
html[data-shell="member"] main:not(:has(.screen:target)) .screen[data-default][data-shell="member"] { display: block; }
html[data-shell="rabt"] main:not(:has(.screen:target)) .screen[data-default] { display: none; }
html[data-shell="rabt"] main:not(:has(.screen:target)) .screen[data-default][data-shell="rabt"] { display: block; }

/* ── tabs: radios + labels + panels, no script ── */
.tabset > .tablist { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tabset > .tablist .tab { flex: none; padding: .5rem .75rem; border-bottom: 2px solid transparent; font-size: .875rem; font-weight: 600; color: var(--tx-3); white-space: nowrap; }
.tabset > .tablist .tab:hover { color: var(--tx); }
.tabset > .tab-panel { display: none; }
.tab-radio:focus-visible + * .tab, .tabset:has(.tab-radio:focus-visible) .tablist { outline: none; }
.tabset > .tab-radio:nth-of-type(1):checked ~ .tablist .tab:nth-of-type(1),
.tabset > .tab-radio:nth-of-type(2):checked ~ .tablist .tab:nth-of-type(2),
.tabset > .tab-radio:nth-of-type(3):checked ~ .tablist .tab:nth-of-type(3),
.tabset > .tab-radio:nth-of-type(4):checked ~ .tablist .tab:nth-of-type(4),
.tabset > .tab-radio:nth-of-type(5):checked ~ .tablist .tab:nth-of-type(5),
.tabset > .tab-radio:nth-of-type(6):checked ~ .tablist .tab:nth-of-type(6) { color: var(--tx); border-color: var(--green-600); }
.tabset > .tab-radio:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tabset > .tab-radio:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tabset > .tab-radio:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tabset > .tab-radio:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
.tabset > .tab-radio:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5),
.tabset > .tab-radio:nth-of-type(6):checked ~ .tab-panel:nth-of-type(6) { display: block; }
.tabset > .tab-radio:focus-visible ~ .tablist { box-shadow: inset 0 -2px 0 var(--focus); }

/* ── tabs driven by Vue (components/generic/tabs.vue): same look as the radio tabset above ── */
.tablist { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tablist .tab { flex: none; padding: .5rem .75rem; border-bottom: 2px solid transparent; font-size: .875rem; font-weight: 600; color: var(--tx-3); white-space: nowrap; background: none; }
.tablist .tab:hover { color: var(--tx); }
.tablist .tab[aria-selected="true"] { color: var(--tx); border-color: var(--green-600); }

/* ── details/summary, dialogs, toast ── */
details > summary::-webkit-details-marker { display: none; }
dialog { border: 0; }
dialog::backdrop { background: rgba(10, 10, 11, .5); }
.toast { position: fixed; bottom: 1rem; inset-inline-start: 50%; transform: translate(-50%, 1rem); z-index: 60; max-width: min(92vw, 520px); padding: .625rem .875rem; border-radius: .75rem; background: #0A0A0B; color: #fff; font-size: .875rem; box-shadow: 0 18px 48px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
[dir="rtl"] .toast { transform: translate(50%, 1rem); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .toast.show { transform: translate(50%, 0); }

/* ── theme toggle icon & language button ── */
.theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-light { display: block; }
[data-theme="dark"] .theme-icon-dark { display: none; }

/* ── tables: header stays readable, long text wraps, numbers align ── */
thead th { position: sticky; top: 0; }
td, th { vertical-align: middle; }
[dir="rtl"] .text-end { text-align: left; }
[dir="rtl"] .text-start { text-align: right; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── print ── */
@media print {
  .sidebar, .topbar, .scrim, .toast, dialog, .skip-link { display: none !important; }
  .screen:target { display: block; }
  main { padding: 0; max-width: none; }
  a[href]::after { content: none; }
}