/*
 * First Hijrah form design system (static: no asset build needed).
 * Loaded after the app bundle on the admin, public, sign-in and school layouts.
 *
 * Tokens: desktop controls 38px, phones 44px; radius 8px; labels 12.5px;
 * buttons small 32 / medium 38 / large 46; brand green actions, gold focus ring.
 * The rules use :where() so page-specific styles still win when they must.
 */
:root{
  --ff-green:#0b5d3f;--ff-green-dark:#074630;--ff-gold:#c9a227;--ff-ink:#17312a;--ff-muted:#5b6f66;
  --ff-line:#cfdcd5;--ff-line-soft:#e3ebe6;--ff-surface:#fff;--ff-soft:#f3f7f4;--ff-danger:#a1281c;--ff-danger-soft:#fdecea;
  --ff-control:38px;--ff-control-sm:32px;--ff-control-lg:46px;--ff-radius:8px;--ff-label:12.5px;--ff-text:14px;
  --ff-gap-x:14px;--ff-gap-y:10px;--ff-section-pad:14px;
}
@media (pointer:coarse),(max-width:767px){:root{--ff-control:44px;--ff-control-sm:40px;--ff-control-lg:48px;--ff-text:16px}}
html[data-cms-theme=dark]{--ff-ink:#e4efe9;--ff-muted:#a9bdb3;--ff-line:#36514a;--ff-line-soft:#2b423c;--ff-surface:#13241f;--ff-soft:#1a2f29;--ff-danger-soft:#3b1a17}

/* ---------- Fields ---------- */
:where(body.fhf-admin,body.fhf-public-reference,body.member-experience,body.school-portal-shell,body.fhf-auth,body) :where(main,.fhf-admin-main,.auth-card) :where(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image]),select){
  min-height:var(--ff-control);height:var(--ff-control);padding:0 11px;border:1px solid var(--ff-line);border-radius:var(--ff-radius);
  background-color:var(--ff-surface);color:var(--ff-ink);font-size:var(--ff-text);line-height:1.3;box-sizing:border-box;max-width:100%;
}
:where(body) :where(main,.fhf-admin-main,.auth-card) select[multiple]{height:auto;min-height:calc(var(--ff-control)*2.4);padding:4px}
:where(body) :where(main,.fhf-admin-main,.auth-card) textarea{
  min-height:calc(var(--ff-control)*2);padding:8px 11px;border:1px solid var(--ff-line);border-radius:var(--ff-radius);
  background:var(--ff-surface);color:var(--ff-ink);font-size:var(--ff-text);line-height:1.45;box-sizing:border-box;max-width:100%;resize:vertical;
}
:where(body) :where(main,.fhf-admin-main,.auth-card) :where(input,select,textarea):focus-visible{outline:2px solid var(--ff-gold);outline-offset:1px;border-color:var(--ff-green)}
:where(body) :where(main,.fhf-admin-main,.auth-card) :where(input,select,textarea)[aria-invalid=true]{border-color:var(--ff-danger)!important;box-shadow:0 0 0 1px var(--ff-danger)}
:where(body) :where(main,.fhf-admin-main,.auth-card) :where(input,select,textarea):disabled{background:var(--ff-soft);color:var(--ff-muted);cursor:not-allowed}
:where(body) :where(main,.fhf-admin-main) input[type=file]{font-size:13px;max-width:100%}
:where(body) :where(main,.fhf-admin-main) input[type=file]::file-selector-button{height:32px;margin-right:8px;padding:0 12px;border:1px solid var(--ff-line);border-radius:8px;background:var(--ff-surface);color:var(--ff-green);font-weight:600;cursor:pointer}
:where(body) :where(main,.fhf-admin-main) :where(input[type=checkbox],input[type=radio]){width:16px;height:16px;accent-color:var(--ff-green)}

/* Labels sit right above their control. */
body :is(main,.auth-card) form label:has(> :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea,.ff-dp-wrap)),
body .fhf-field>label,.ff-label{display:block!important;font-size:var(--ff-label);font-weight:600;color:var(--ff-ink);line-height:1.35}
body :is(main,.auth-card) form label:has(> :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea,.ff-dp-wrap)) > :is(input,select,textarea,.ff-dp-wrap){display:block;margin-top:4px!important;width:100%}
/* Size wins over older page styles so every form matches. */
body.fhf-admin .fhf-admin-main :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button]),select){height:var(--ff-control);min-height:var(--ff-control);font-size:var(--ff-text);padding-block:0}
body.fhf-admin .fhf-admin-main textarea{font-size:var(--ff-text)}
.fhf-field{display:grid;gap:4px}
.fhf-help,.ff-help{margin:2px 0 0;font-size:12px;color:var(--ff-muted)}
.fhf-error,.ff-error{margin:3px 0 0;font-size:12.5px;font-weight:600;color:var(--ff-danger)}
.ff-required{color:var(--ff-danger);font-weight:700;margin-left:2px}
.ff-optional{color:var(--ff-muted);font-weight:500;font-size:11.5px;margin-left:4px}

/* ---------- Layout ---------- */
.ff-form{display:grid;gap:12px}
.ff-section{display:grid;gap:var(--ff-gap-y);padding:var(--ff-section-pad);border:1px solid var(--ff-line-soft);border-radius:12px;background:var(--ff-surface)}
.ff-section>h2,.ff-section>legend,.ff-section-title{margin:0;font-family:inherit!important;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ff-green)}
html[data-cms-theme=dark] .ff-section>h2,html[data-cms-theme=dark] .ff-section-title{color:#83e7c3}
.ff-grid{display:grid;gap:var(--ff-gap-y) var(--ff-gap-x);grid-template-columns:repeat(3,minmax(0,1fr))}
.ff-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ff-span-2{grid-column:span 2}.ff-span-full{grid-column:1/-1}
@media (max-width:1023px){.ff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-grid>.ff-span-2{grid-column:1/-1}}
@media (max-width:640px){.ff-grid,.ff-grid-2{grid-template-columns:minmax(0,1fr)}.ff-grid>*{grid-column:1/-1!important}}

/* Auto layout for existing admin forms written as one long column: short
   fields share rows; long text, checkboxes and actions take the full width. */
@media (min-width:1024px){
  body.fhf-admin .fhf-admin-main form.ff-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--ff-gap-y) var(--ff-gap-x);align-items:end}
  body.fhf-admin .fhf-admin-main form.ff-auto>:is(label:has(textarea),p,fieldset,.ff-actions,.ff-span-full,label:has(input[type=checkbox]),label:has(input[type=radio]),div:has(textarea),h2,h3,hr,ul,table){grid-column:1/-1}
  body.fhf-admin .fhf-admin-main form.ff-auto>button{grid-column:1/-1;justify-self:end;width:auto;min-width:140px}
}

/* ---------- Buttons ---------- */
.ff-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding-top:4px}
.ff-actions .ff-actions-start{margin-right:auto}
.ff-btn,:where(body.fhf-admin) .fhf-admin-main :where(.fhf-btn){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ff-control);height:auto;padding:0 16px;border:1px solid transparent;border-radius:var(--ff-radius);font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.ff-btn-sm{min-height:var(--ff-control-sm);padding:0 11px;font-size:12.5px}
.ff-btn-lg{min-height:var(--ff-control-lg);padding:0 20px;font-size:15px}
.ff-btn-primary{background:var(--ff-green);color:#fff!important}
.ff-btn-primary:hover{background:var(--ff-green-dark)}
.ff-btn-secondary{background:var(--ff-surface);color:var(--ff-green)!important;border-color:var(--ff-line)}
.ff-btn-secondary:hover{background:var(--ff-soft)}
.ff-btn-ghost{background:transparent;color:var(--ff-green)!important}
.ff-btn-ghost:hover{background:var(--ff-soft)}
.ff-btn-danger{background:var(--ff-danger);color:#fff!important}
.ff-btn:focus-visible{outline:2px solid var(--ff-gold);outline-offset:2px}
.ff-btn:disabled,.ff-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.ff-btn[data-ff-busy]{position:relative;color:transparent!important;pointer-events:none}
.ff-btn[data-ff-busy]::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:ff-spin .7s linear infinite}
.ff-btn-secondary[data-ff-busy]::after,.ff-btn-ghost[data-ff-busy]::after{border-color:var(--ff-green);border-right-color:transparent}
@keyframes ff-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ff-btn[data-ff-busy]::after{animation-duration:2s}}

/* Oversized legacy submit buttons in admin forms: medium height, natural width. */
@media (min-width:1024px){
  body.fhf-admin .fhf-admin-main form>button[class*="h-11"],
  body.fhf-admin .fhf-admin-main form>button.w-full{height:var(--ff-control);min-height:var(--ff-control);width:auto;justify-self:end;padding:0 18px;border-radius:var(--ff-radius);font-size:13.5px}
  body.fhf-admin .fhf-admin-main form.grid>button:last-child{justify-self:end;width:auto;min-width:140px}
}

/* ---------- Tables & toolbars ---------- */
:where(body.fhf-admin) .fhf-admin-main table:not(.pp-month):not(.wp-table){border-collapse:collapse}
:where(body.fhf-admin) .fhf-admin-main table:not(.pp-month):not(.wp-table) :is(th,td){padding:7px 10px;font-size:13px;vertical-align:middle}
:where(body.fhf-admin) .fhf-admin-main table:not(.pp-month):not(.wp-table) thead th{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ff-muted);white-space:nowrap}
:where(body.fhf-admin) .fhf-admin-main table :is(td,th) :is(button,.fhf-btn){min-height:var(--ff-control-sm);padding:0 10px;font-size:12.5px}
.ff-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:10px}
.ff-toolbar>label{flex:0 1 180px}

/* ---------- Date & time picker ---------- */
.ff-dp-wrap{position:relative;display:block}
.ff-dp-wrap>input{width:100%;padding-right:38px!important}
.ff-dp-wrap>input::-webkit-calendar-picker-indicator{opacity:0;pointer-events:none;width:0}
.ff-dp-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--ff-green);cursor:pointer}
.ff-dp-toggle:hover{background:var(--ff-soft)}
.ff-dp-toggle:focus-visible{outline:2px solid var(--ff-gold)}
.ff-dp{position:fixed;z-index:2147483000;width:292px;padding:10px;border:1px solid var(--ff-line-soft);border-radius:12px;background:var(--ff-surface);color:var(--ff-ink);box-shadow:0 18px 44px rgba(7,40,28,.22);font-size:13px}
.ff-dp[hidden]{display:none}
.ff-dp-head{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.ff-dp-head select{flex:1;height:32px!important;min-height:32px!important;padding:0 6px!important;font-size:13px!important;font-weight:600}
.ff-dp-nav{width:32px;height:32px;border:1px solid var(--ff-line-soft);border-radius:8px;background:var(--ff-surface);color:var(--ff-green);font-size:16px;cursor:pointer}
.ff-dp-nav:hover{background:var(--ff-soft)}
.ff-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ff-dp-dow{padding:4px 0;font-size:11px;font-weight:700;color:var(--ff-muted)}
.ff-dp-day{height:34px;border:0;border-radius:8px;background:transparent;color:var(--ff-ink);font-size:13px;cursor:pointer}
.ff-dp-day:hover{background:var(--ff-soft)}
.ff-dp-day.is-other{color:#9aa8a1}
.ff-dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--ff-gold);font-weight:700}
.ff-dp-day[aria-selected=true]{background:var(--ff-green);color:#fff;font-weight:700}
.ff-dp-day:disabled{color:#c3ccc7;text-decoration:line-through;cursor:not-allowed;background:transparent}
.ff-dp-day:focus-visible{outline:2px solid var(--ff-gold);outline-offset:-2px}
.ff-dp-time{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--ff-line-soft)}
.ff-dp-time span{font-size:12px;font-weight:600;color:var(--ff-muted);margin-right:auto}
.ff-dp-time select{width:auto!important;height:32px!important;min-height:32px!important;padding:0 6px!important;font-size:13px!important}
.ff-dp-foot{display:flex;justify-content:space-between;gap:6px;margin-top:8px}
.ff-dp-foot button{height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ff-green);font-size:12.5px;font-weight:600;cursor:pointer}
.ff-dp-foot button:hover{background:var(--ff-soft)}
.ff-dp-foot .ff-dp-done{background:var(--ff-green);color:#fff}
.ff-dp-foot .ff-dp-done:hover{background:var(--ff-green-dark)}

/* ---------- Searchable select ---------- */
.ff-select-search{display:block;width:100%;height:30px!important;min-height:30px!important;margin:0 0 4px;padding:0 9px!important;font-size:12.5px!important;border-style:dashed!important}

/* ---------- Image picker ---------- */
.ff-image{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.ff-image-thumb{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px dashed var(--ff-line);border-radius:10px;background:var(--ff-soft) center/cover no-repeat;color:var(--ff-muted);font-size:11px;overflow:hidden}
.ff-image-controls{display:grid;gap:6px}
.ff-image-row{display:flex;gap:6px;align-items:center}
.ff-image-row input[type=text],.ff-image-row input:not([type]){flex:1}
.ff-image-status{font-size:12px;color:var(--ff-muted)}

/* ---------- Messages ---------- */
.ff-alert{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.45}
.ff-alert-success{background:#e7f5ec;color:#0b4d34}
.ff-alert-error{background:var(--ff-danger-soft);color:#7c1d14}
.ff-alert ul{margin:2px 0 0;padding-left:18px}
.ff-dirty-note{font-size:12px;color:#7a5d00}

/* ---------- Events list (CMS) ---------- */
.ev-create>summary{list-style:none;display:inline-flex;margin-top:8px}
.ev-create>summary::-webkit-details-marker{display:none}
.ev-create[open]>summary{background:var(--ff-surface);color:var(--ff-green)!important;border-color:var(--ff-line)}
.ev-table{overflow-x:auto;border:1px solid var(--ff-line-soft);border-radius:12px;background:var(--ff-surface)}
.ev-table table{width:100%;border-collapse:collapse}
.ev-table :is(th,td){padding:8px 12px!important;border-top:1px solid var(--ff-line-soft);text-align:left;font-size:13px}
.ev-table thead th{border-top:0;background:var(--ff-soft)}
.ev-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.ev-actions form{margin:0}
.ev-status{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef1f0;color:#4a5b54;font-size:11.5px;font-weight:600}
.ev-status-published{background:#dff2e7;color:#0b5d3f}.ev-status-scheduled{background:#e5eefb;color:#1f4f8a}.ev-status-in_review{background:#fbf1cf;color:#7a5d00}.ev-status-archived{background:#e9e9ef;color:#4b4b5c}
@media (max-width:640px){.ev-table thead{display:none}.ev-table :is(table,tbody,tr,td){display:block;width:100%}.ev-table tr{padding:6px 0;border-top:1px solid var(--ff-line-soft)}.ev-table td{border:0;padding:3px 12px!important}.ev-actions{justify-content:flex-start}}

/* Checkbox and radio rows */
body .ff-check{display:flex!important;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ff-ink);min-height:32px}
body .ff-check>input{display:inline-block!important;margin:0!important;width:16px;height:16px}
@media (pointer:coarse){body .ff-check{min-height:44px}}
body.fhf-admin .fhf-admin-main select{font-size:var(--ff-text)!important}
.ff-image,.ff-image-controls,.ff-image-row,.ff-grid>*{min-width:0}
.ff-image-row input[type=file]{width:100%;min-width:0}
body .fhf-required{color:var(--ff-danger)!important;font-weight:700}
/* Dark theme surfaces for the new form pieces */
html[data-cms-theme=dark] body.fhf-admin .ff-section,html[data-cms-theme=dark] body.fhf-admin .ev-table{background:var(--cms-surface,#13241f);border-color:var(--cms-line,#2b423c)}
html[data-cms-theme=dark] body.fhf-admin .fhf-admin-main :is(input:not([type=checkbox],[type=radio],[type=file]),select,textarea){background:var(--cms-surface-2,#0f1d19);color:var(--cms-ink,#e4efe9);border-color:var(--cms-line,#36514a)}
html[data-cms-theme=dark] .ff-dp{background:#13241f;border-color:#2b423c;color:#e4efe9}
html[data-cms-theme=dark] .ff-dp-day.is-other{color:#6f837a}
html[data-cms-theme=dark] .ev-table thead th{background:#1a2f29}
html[data-cms-theme=dark] :is(.ff-dp-nav,.ff-dp-foot button:not(.ff-dp-done),.ff-dp-toggle,.ff-btn-secondary,.ff-btn-ghost){color:#83e7c3!important;background:transparent;border-color:#36514a}
html[data-cms-theme=dark] .ff-dp-day{color:#e4efe9}
html[data-cms-theme=dark] .ff-dp-day:disabled{color:#55675f}