/* ─────────────────────────────────────────────────────────────────────
   HOMEi «طلب جديد» on the house design system — REQ-CREATE-V2
   (mockups s1–s7 approved by Kamal 8-10-2026, «نفذ v2»).

   One page: the chooser (.rqc-picker), then the chosen type's form
   (.rqc-card): its head, the leave kinds / attendance fixes, the fields
   beside one calendar, and the one-line summary above «ابعت».

   Prefix `rqc`. Colours: the house tokens (--lm-d-* in tokens.css, with
   their dark mirror) — no colour literal here, the ratchet holds this
   sheet at zero. Text never under 12px. Logical properties only.

   Registered as a Filament asset: a change here ships nothing until
   `php artisan filament:assets` is run and public/css/app/ is committed.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. the ground and the page head ── */
body:has(.rqc) { background: var(--lm-d-page); }
body:has(.rqc) .fi-main-ctn { background: transparent; }
body:has(.rqc) .fi-header-heading { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
body:has(.rqc) .fi-header-subheading { margin-block-start: 4px; font-size: 14px; color: var(--lm-d-muted); }
body:has(.rqc) .fi-header-actions-ctn .fi-btn {
    min-block-size: 40px;
    border-radius: 12px;
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    box-shadow: inset 0 0 0 1px var(--lm-d-control-edge);
    font-weight: 700;
}

.rqc { max-inline-size: 1040px; margin-inline: auto; color: var(--lm-d-ink); font-size: 14px; }
.rqc > .fi-sc { gap: 14px; }
.rqc :focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.rqc-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.rqc-ic { inline-size: 18px; block-size: 18px; flex: none; }
.rqc-ic.is-sm { inline-size: 16px; block-size: 16px; }
.rqc-ic.is-xs { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .rqc-flip { transform: scaleX(-1); }
.rqc .is-ok { color: var(--lm-d-ok); }
.rqc .is-info { color: var(--lm-d-info); }
.rqc .is-accent { color: var(--lm-d-accent-ink); }
.rqc .is-quiet { color: var(--lm-d-muted); }

/* buttons */
.rqc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 42px; padding-inline: 16px; border-radius: 10px;
    border: 1px solid var(--lm-d-control-edge); background: var(--lm-d-surface);
    color: var(--lm-d-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.rqc-btn:hover { background: var(--lm-d-hover); }
.rqc-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.rqc-btn.is-primary:hover { filter: brightness(0.96); }
.rqc-btn.is-quiet { border-color: transparent; background: transparent; color: var(--lm-d-danger); }
.rqc-btn.is-sm { min-block-size: 36px; padding-inline: 12px; font-size: 13.5px; }
.rqc-btn .rqc-ic { inline-size: 18px; block-size: 18px; }
.rqc-btn:disabled { opacity: .6; cursor: default; }
.rqc-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--lm-d-info); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* ── 2. «لنفسي | لموظف تاني» ── */
.rqc-who { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); }
.rqc-who button { display: inline-flex; align-items: center; gap: 6px; block-size: 30px; padding-inline: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rqc-who button.is-on { background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-weight: 700; }
.rqc-subject { padding: 12px 16px; border-radius: 14px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); }

/* ── 3. the chooser ── */
.rqc-picker { display: flex; flex-direction: column; gap: 0; }
.rqc-search { display: flex; align-items: center; gap: 8px; block-size: 38px; padding-inline: 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-muted); }
.rqc-search:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.rqc-search input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--lm-d-ink); font: inherit; font-size: 14px; box-shadow: none; padding: 0; font-size: 13.5px; block-size: 100%; }
.rqc-search input::placeholder { color: var(--lm-d-muted); }
.rqc-h { display: flex; align-items: center; gap: 8px; margin: 16px 2px 8px; font-size: 14px; font-weight: 700; color: var(--lm-d-muted); }
.rqc-h .rqc-ic { color: var(--lm-d-info); }
.rqc-h small { font-size: 13px; font-weight: 500; }

.rqc-ti { inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--lm-d-info-soft); color: var(--lm-d-info); display: grid; place-items: center; flex: none; }
.rqc-ti.is-money { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.rqc-ti.is-lg { inline-size: 42px; block-size: 42px; }
.rqc-tt { display: flex; flex-direction: column; min-inline-size: 0; text-align: start; }
.rqc-tt b { font-size: 14px; font-weight: 700; color: var(--lm-d-ink); }
.rqc-tt small { font-size: 12.5px; color: var(--lm-d-muted); line-height: 1.45; }
.rqc-tt small.is-ok { color: var(--lm-d-ok); font-weight: 600; }
.rqc-tt small.is-info { color: var(--lm-d-info); font-weight: 600; }

.rqc-usual { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rqc-usual-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); cursor: pointer; font: inherit; min-inline-size: 0; }
.rqc-usual-tile:hover { border-color: var(--lm-d-accent-line); background: var(--lm-d-row-hl); }

.rqc-groups { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; align-items: start; }
.rqc-group { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.rqc-group h4 { display: flex; align-items: center; gap: 8px; margin: 2px 6px 4px; font-size: 13.5px; font-weight: 700; color: var(--lm-d-muted); }
.rqc-group h4 .rqc-ic { color: var(--lm-d-info); }
.rqc-tile { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; inline-size: 100%; }
.rqc-tile:hover { background: var(--lm-d-hover); }
.rqc-kinds-line { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-block-start: 4px; font-size: 12.5px; color: var(--lm-d-muted); }
.rqc-kinds-line span { white-space: nowrap; }
.rqc-kinds-line b { font-size: 12.5px; font-weight: 700; }

.rqc-rare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--lm-d-control-edge); background: var(--lm-d-surface); }
.rqc-rare > b { font-size: 13.5px; color: var(--lm-d-muted); margin-inline-end: 4px; }
.rqc-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: 12px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rqc-chip:hover { background: var(--lm-d-chip-bg); }
.rqc-nomatch { margin: 12px 4px 0; color: var(--lm-d-muted); font-size: 14px; }
.rqc-draft { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; padding: 8px 14px; border-radius: 12px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-size: 13.5px; font-weight: 600; }
.rqc-draft .rqc-btn { margin-inline-start: auto; }

/* ── 4. the chosen type's form ── */
.rqc-card { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-block-start: 3px solid var(--lm-d-info); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.rqc-card > .fi-sc { gap: 0; }
.rqc-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-block-end: 1px solid var(--lm-d-divider); }
.rqc-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--lm-d-ink); }
.rqc-for { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--lm-d-info-soft); color: var(--lm-d-info); font-size: 13px; font-weight: 700; }
.rqc-change { margin-inline-start: auto; }

.rqc-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-block-end: 1px solid var(--lm-d-divider); background: var(--lm-d-page); }
.rqc-kind { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-block-size: 40px; padding: 5px 14px; border-radius: 12px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer; }
.rqc-kind b { font-weight: 700; }
.rqc-kind small { font-size: 12px; font-weight: 600; color: var(--lm-d-muted); white-space: nowrap; }
.rqc-kind small.is-ok { color: var(--lm-d-ok); }
.rqc-kind small.is-info { color: var(--lm-d-info); }
.rqc-kind.is-on { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); cursor: default; }
.rqc-kind.is-on small { color: var(--lm-d-tab-on-count); }

.rqc-fixes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 18px 0; }
.rqc-fix { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1.5px solid var(--lm-d-control-edge); background: var(--lm-d-surface); font: inherit; cursor: pointer; text-align: start; }
.rqc-fix.is-on { border-color: var(--lm-d-accent); background: var(--lm-d-row-hl); cursor: default; }

.rqc-body > .fi-sc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px 18px; align-items: start; }
.rqc-body.has-calendar > .fi-sc { grid-template-columns: minmax(0, 1fr) 330px; }
.rqc-col > .fi-sc { gap: 12px; }
.rqc-more { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* the calendar */
.rqc-cal { border: 1px solid var(--lm-d-border); border-radius: 14px; padding: 10px 12px; background: var(--lm-d-surface); }
.rqc-cal-head { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; }
.rqc-cal-head b { font-size: 14px; font-weight: 700; }
.rqc-cal-nav { margin-inline-start: auto; display: flex; gap: 4px; }
.rqc-cal-nav button { inline-size: 32px; block-size: 32px; border-radius: 8px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-muted); display: grid; place-items: center; cursor: pointer; }
.rqc-cal-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; }
.rqc-cal-quick button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rqc-cal-quick button:hover { background: var(--lm-d-chip-bg); }
.rqc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.rqc-cal-dh { padding: 3px 0; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); overflow: hidden; white-space: nowrap; }
.rqc-cal-slot { display: block; }
.rqc-cal-d { inline-size: 100%; block-size: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-ink); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.rqc-cal-d:hover { background: var(--lm-d-hover); }
.rqc-cal-d.is-off { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }
.rqc-cal-d.is-holiday { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); font-weight: 700; }
.rqc-cal-d.is-taken { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-weight: 700; }
.rqc-cal-d.is-today { box-shadow: inset 0 0 0 1.5px var(--lm-d-info); font-weight: 700; }
.rqc-cal-d.is-out { color: var(--lm-d-subtle); background: transparent; cursor: default; text-decoration: line-through; }
.rqc-cal-d.is-in { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); font-weight: 700; border-radius: 0; }
.rqc-cal-d:is(.is-start, .is-end, .is-one) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); font-weight: 700; }
.rqc-cal-d.is-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.rqc-cal-d.is-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.rqc-cal-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-block-start: 8px; font-size: 12px; color: var(--lm-d-muted); }
.rqc-cal-key i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; }
.rqc-cal-key i.is-pick { background: var(--lm-d-accent); }
.rqc-cal-key i.is-off { background: var(--lm-d-quiet-bg); box-shadow: inset 0 0 0 1px var(--lm-d-border); }
.rqc-cal-key i.is-holiday { background: var(--lm-d-danger-soft); box-shadow: inset 0 0 0 1px var(--lm-d-danger); }
.rqc-cal-key i.is-taken { background: var(--lm-d-warn-soft); box-shadow: inset 0 0 0 1px var(--lm-d-warn); }

/* the foot: the money facts, the one line, the buttons */
.rqc-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); background: var(--lm-d-page); }
.rqc-money { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--lm-d-muted); }
.rqc-money b { color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.rqc-notice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.rqc-notice b { color: var(--lm-d-warn); }
.rqc-notice small { font-size: 12.5px; }
.rqc-foot-row { display: flex; align-items: center; gap: 14px; }
.rqc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--lm-d-muted); min-inline-size: 0; }
.rqc-line span { display: inline-flex; align-items: center; gap: 6px; }
.rqc-line b { color: var(--lm-d-ink); }
.rqc-line .rqc-ic { color: var(--lm-d-subtle); }
.rqc-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.rqc-send { min-inline-size: 170px; }

/* ── 5. Filament's own fields, in the card's tone ── */
.rqc-card .fi-fo-field-label-content { font-size: 13.5px; font-weight: 700; color: var(--lm-d-ink); }
/* Filament draws the «*» at .75em (≈10px) — the house floor is 12px */
.rqc-card .fi-fo-field-label-required-mark { font-size: 13.5px; line-height: 1; vertical-align: baseline; top: 0; color: var(--lm-d-danger); }
.rqc-card .fi-input-wrp { border-radius: 10px; }
.rqc-card .fi-section { box-shadow: none; border: 1px solid var(--lm-d-border); border-radius: 12px; }

/* a radio question (the duration of a leave, …) reads as option cards in a row */
.rqc-card .fi-fo-radio.fi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.rqc-card .fi-fo-radio-label { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 12px; background: var(--lm-d-surface); cursor: pointer; margin: 0; }
.rqc-card .fi-fo-radio-label:has(:checked) { border-color: var(--lm-d-accent); background: var(--lm-d-row-hl); box-shadow: inset 0 0 0 1px var(--lm-d-accent); }
.rqc-card .fi-fo-radio-label :is(p, .fi-fo-radio-label-description) { font-size: 12.5px; line-height: 1.45; }
.rqc-pair > .fi-sc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }

/* Filament's own pieces inside the card (sections, helper text, the repeater
   and file buttons, the upload area) in the house tones — light and dark */
.rqc-card .fi-section { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; box-shadow: none; }
.rqc-card .fi-section-header { border-color: var(--lm-d-divider); }
.rqc-card .fi-section-header-heading { color: var(--lm-d-ink); font-size: 15px; font-weight: 700; }
.rqc-card :is(.fi-section-header-description, .fi-sc-text, .fi-fo-field-wrp-helper-text, .fi-fo-radio-label-description, .fi-fo-field-label-content small) { color: var(--lm-d-muted); }
.rqc-card .fi-btn.fi-ac-btn-action:not(.fi-color-primary) { background: var(--lm-d-surface); color: var(--lm-d-ink); box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); border-radius: 10px; font-weight: 700; }
.rqc-card .fi-btn.fi-ac-btn-action:not(.fi-color-primary):hover { background: var(--lm-d-hover); }
/* Filament paints the upload area with !important inside a cascade layer,
   which no plain rule can outrank — so its own colour variables are
   pointed at the house tokens, for this area only */
.rqc .rqc-card .fi-fo-file-upload {
    --gray-400: var(--lm-d-muted);
    --gray-500: var(--lm-d-muted);
    --gray-600: var(--lm-d-muted);
    --primary-400: var(--lm-d-info);
    --primary-500: var(--lm-d-info);
    --primary-600: var(--lm-d-info);
    --primary-700: var(--lm-d-info);
}
.rqc .rqc-card .filepond--label-action { color: var(--lm-d-info); text-decoration-color: currentColor; }
.rqc .rqc-card .fi-fo-repeater-item { background: var(--lm-d-page); border: 1px solid var(--lm-d-border); box-shadow: none; }
/* a toggle is drawn 24px tall; its touch area reaches 44px */
.rqc-card .fi-toggle { position: relative; }
.rqc-card .fi-toggle::after { content: ''; position: absolute; inset: -10px -6px; }

/* ── 6. smaller screens ── */
@media (max-width: 1023.98px) {
    body:has(.rqc) .fi-header-heading { font-size: 22px; }
    .rqc-usual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rqc-groups { grid-template-columns: minmax(0, 1fr); }
    .rqc-body.has-calendar > .fi-sc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* phone: every control at least 44px tall (touch target) */
    .rqc-btn, .rqc-btn.is-sm, .rqc-search, .rqc-chip, .rqc-who button, .rqc-kind, .rqc-cal-d, .rqc-cal-quick button, .rqc-cal-nav button, .rqc-link { min-block-size: 44px; }
    .rqc-who button { block-size: auto; }
    .rqc-card .fi-input-wrp { min-block-size: 44px; }
    .rqc-card :is(.fi-btn, .fi-icon-btn) { min-block-size: 44px; }
    .rqc-card .fi-icon-btn { min-inline-size: 44px; }
    .rqc-card .fi-input-wrp .fi-input { min-block-size: 42px; }
    .rqc-cal-d { block-size: 44px; }
    .rqc-cal-nav button { inline-size: 44px; block-size: 44px; }
}
@media (max-width: 700px) {
    .rqc-usual { grid-template-columns: minmax(0, 1fr); }
    .rqc-card .fi-fo-radio.fi-grid { grid-template-columns: minmax(0, 1fr); }
    .rqc-who { display: flex; }
    .rqc-who button { flex: 1; justify-content: center; }
    .rqc-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .rqc-kind { flex: none; }
    .rqc-fixes { grid-template-columns: minmax(0, 1fr); }
    .rqc-foot { position: sticky; inset-block-end: 0; z-index: 5; box-shadow: 0 -6px 20px var(--lm-d-shadow); }
    .rqc-foot-row { flex-wrap: wrap; }
    .rqc-actions { inline-size: 100%; margin-inline-start: 0; }
    .rqc-actions .rqc-btn { flex: 1; min-inline-size: 0; }
    .rqc-change span { display: none; }
}
@media (max-height: 820px) and (min-width: 1024px) {
    .rqc-cal-d { block-size: 28px; }
    .rqc-h { margin: 10px 2px 6px; }
    .rqc-usual-tile { padding-block: 8px; }
    .rqc-tile { padding-block: 6px; }
    .rqc-body > .fi-sc { padding-block: 10px; gap: 14px; }
    .rqc-top, .rqc-kinds { padding-block: 8px; }
    .rqc-foot { padding-block: 9px; }
}