/*
 * Missing-utility patch for the prebuilt bundle.
 *
 * public/css/app.css is NOT compiled from this project's markup — it is a fixed
 * bundle produced from a snapshot of the views. Any class added to a Blade file
 * afterwards is simply absent, and an absent utility fails SILENTLY: no error,
 * no warning, the element just renders wrong. That is how the proposal form
 * ended up one-fifth of its intended width (md:col-span-3 was never in there).
 *
 * Everything below was found by auditing all 150 Blade files against the bundle
 * and verifying each class was genuinely missing. Values follow Tailwind's
 * default scale (1 unit = 0.25rem) so they behave exactly as the markup expects.
 *
 * Loaded AFTER app.css. If the bundle is ever rebuilt from current markup, this
 * file becomes redundant — check before deleting it.
 */

/* ── Klokee floating launcher ─────────────────────────────────────────────────
 * Written out in full rather than composed from utilities: this element is
 * rendered on every authenticated page, so a silently-missing class here would
 * misplace it app-wide rather than on one screen.
 *
 * z-40 puts it above the mobile bottom bar (z-35) and below dialogs (z-50) — it
 * must never cover the form someone is trying to fill in.
 *
 * Sizes are in px, not vh: the desktop shell sets body{zoom:0.85}, so viewport
 * units here would render at 85% of whatever they claim.
 */
.klokee-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100vw - 2.5rem);
}
.klokee-panel {
  width: 520px;
  max-width: calc(100vw - 2.5rem);
  height: 560px;
  max-height: calc(100vh - 7rem);
}

/* Chat bubble widths. These were written as arbitrary Tailwind values
 * (max-w-[70%], max-w-[85%]) which the prebuilt bundle does not contain, so the
 * bubbles had no cap at all and Klokee's longer answers ran off the right edge.
 * overflow-wrap is belt and braces: a pasted URL or a long unbroken number
 * would otherwise push the bubble out regardless of the max-width.
 */
.max-w-\[70\%\] { max-width: 70%; }
.max-w-\[85\%\] { max-width: 85%; }
.chat-bubble, .klokee-panel .whitespace-pre-line { overflow-wrap: anywhere; }
/* ── AI routing rows (Super Admin → Settings → Keys) ──────────────────────────
 * One job per row, read left to right: what it is, who does it, which model,
 * what happens if that fails. The job column is fixed so the three controls
 * line up down the page — with equal fractions the descriptions pushed each
 * row's selects to a different place and the table stopped reading as a table.
 *
 * Stacks below 1024px, where four columns would be unreadable anyway. The
 * heading row hides there too: on a stacked layout the labels belong to
 * nothing, and each control is self-describing.
 */
/* ── Super Admin → Settings → Keys ────────────────────────────────────────────
 * One column of full-width cards, not two.
 *
 * The tab used to be a two-column grid with a hand-tuned `order:N` on each card
 * to balance the columns. Cards of very different heights (a one-field Geo key
 * beside a fifteen-field payments block) left half a screen of white space, and
 * every card then stacked its own fields down a half-width column — so a form
 * that fits on one screen ran to five. Full width plus fields laid across uses
 * the room the screen already has.
 */
.keys-stack { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Field rows inside a card. All collapse to one column on narrow screens,
 * where side-by-side inputs are unreadable rather than compact. */
.kf-2, .kf-3, .kf-4 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .kf-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kf-4 { grid-template-columns: 180px repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .kf-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Full width inside the two-column keys tab. Named rather than lg:col-span-2,
 * which cannot be verified against the prebuilt bundle — and a missing utility
 * here would silently put four columns back into a half-width card. */
.ai-route-card { grid-column: 1 / -1; }

.ai-route-row { display: grid; grid-template-columns: 1fr; }
.ai-route-head { display: none; }
@media (min-width: 1024px) {
  .ai-route-row { grid-template-columns: 260px 1fr 1.15fr 1fr; }
  .ai-route-head { display: grid; }
}

/* Klokee's mark, unboxed: the robot IS the button, with its name above its
 * head. No pill, because a container drawn around an already-distinct mark is
 * furniture. Named classes rather than arbitrary text-[40px] values, which the
 * prebuilt bundle would not contain.
 *
 * The drop-shadow is what keeps it legible: with no filled background behind
 * it, the glyph has to hold up over a white card, a grey page and a table row
 * alike. line-height 1 stops the tall glyph adding dead space under the icon.
 */
.klokee-fab-icon {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(15, 118, 110, .28));
}
.klokee-fab-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
  letter-spacing: .01em;
  /* Sits over page content, so it carries its own backing rather than
     relying on whatever happens to be underneath. */
  background: rgba(255, 255, 255, .92);
  border-radius: 9999px;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  white-space: nowrap;
}
.klokee-fab { transition: transform .12s ease; }
.klokee-fab:hover { transform: translateY(-1px); }

@media (max-width: 1023px) {
  /* Clear the bottom app bar and the Punch button that overhangs it. */
  .klokee-dock { bottom: 5.25rem; right: 1rem; }
  .klokee-panel { height: 420px; max-height: calc(100vh - 12rem); }
}

/* ── document review rows ─────────────────────────────────────────────────────
 * Named rather than composed from grid-cols-* utilities, because the widths are
 * not equal fractions: the date columns only ever hold a date picker, and giving
 * them a fifth of the row each starves the document title. Stacks on small
 * screens, which is where a phone camera upload lands.
 */
.doc-row-4, .doc-row-5 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .doc-row-5 { grid-template-columns: 1fr 1.4fr 1fr 150px 150px; }
  .doc-row-4 { grid-template-columns: 1.4fr 1fr 150px 150px; }
}

/* ── position ─────────────────────────────────────────────────────────────── */
.left-0   { left: 0; }
.top-full { top: 100%; }          /* blog dropdown sat over its trigger without this */

/* ── sizing ───────────────────────────────────────────────────────────────── */
.w-auto    { width: auto; }
.max-w-7xl { max-width: 80rem; }
.max-h-44  { max-height: 11rem; }  /* keeps the long checkbox list scrollable */
.max-h-52  { max-height: 13rem; }
.h-14\.5   { height: 3.625rem; }

/* ── spacing ──────────────────────────────────────────────────────────────── */
.py-9  { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.pt-9  { padding-top: 2.25rem; }
.pt-12 { padding-top: 3rem; }
.pb-9  { padding-bottom: 2.25rem; }
.mt-7  { margin-top: 1.75rem; }
.my-6  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-px { margin-top: 1px; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:p-4      { padding: 1rem; }
    .sm\:p-5      { padding: 1.25rem; }
    .sm\:px-9     { padding-left: 2.25rem; padding-right: 2.25rem; }
    .sm\:px-10    { padding-left: 2.5rem; padding-right: 2.5rem; }
    .sm\:py-6     { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .sm\:py-8     { padding-top: 2rem; padding-bottom: 2rem; }
    .sm\:py-10    { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .sm\:w-14     { width: 3.5rem; }
}

@media (min-width: 1280px) {
    .xl\:w-52 { width: 13rem; }
}


/* Punch screen — the prebuilt bundle has no border-4 or transform variants,
   and a missing utility fails silently, so the check-out ring disappeared. */
.border-4 { border-width: 4px; }
.active\:scale-95:active { transform: scale(.95); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.punch-shadow { box-shadow: 0 10px 30px -8px rgba(15,118,110,.55); }
.punch-shadow-soft { box-shadow: 0 10px 30px -12px rgba(15,118,110,.45); }

/* Month calendar grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cell { border: 1px solid #eef2f1; border-radius: 10px; padding: 6px 8px; min-height: 62px; }

/* Filled dark check-out button. The outlined ring it replaced read as a
   disabled control — on a screen whose whole job is one action, the action
   must look pressable. */
.punch-shadow-dark { box-shadow: 0 10px 30px -8px rgba(17,24,39,.45); }

/* ── Modal sheets ──────────────────────────────────────────────────────
   Dialogs were capped at 85–88vh, but the desktop shell sets body{zoom:.85},
   so a vh height renders at 85% of what it claims — an "88vh" dialog filled
   about three quarters of the screen and every long form scrolled inside it.
   Same compensation the app shell already uses. Mobile has no zoom, so the
   plain value is correct there. */
.modal-sheet { max-height: 92vh; overflow-y: auto; }
@media (min-width: 1024px) { .modal-sheet { max-height: calc(92vh / 0.85); } }

/* Header/tabs/footer pinned, body scrolls — so on a five-tab form the tab bar
   and the Save button cannot scroll out of reach while you fill the last tab.
   The shell owns the height; the body just takes what is left, which means no
   second magic number to keep in sync with the header's size. */
.modal-shell { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
@media (min-width: 1024px) { .modal-shell { max-height: calc(92vh / 0.85); } }
.modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Employee form pill tabs — two utilities the prebuilt bundle lacks.
   brand-200 derived between brand-50 (245 250 249) and brand (12 104 95). */
.border-brand-200 { border-color: rgb(178 214 209); }
.gap-1\.5 { gap: 0.375rem; }
.pe-8 { padding-inline-end: 2rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
/* Drawer header: action buttons take their own full row on phones. */
@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
  .sm\:flex-none { flex: none; }
}
.p-0\.5 { padding: 0.125rem; }

/* Candidate-panel colour pass (2026-07-31): stage chips and timeline dots.
   Values are Tailwind's own slate/violet/sky, verified absent from app.css. */
.bg-slate-100{background-color:#f1f5f9}
.text-slate-700{color:#334155}
.bg-violet-500{background-color:#8b5cf6}
.bg-sky-400{background-color:#38bdf8}
.hover\:bg-white\/20:hover{background-color:rgb(255 255 255/.2)}

/* Form focus ring (2026-07-31). Tailwind's ring utilities are absent from the
   prebuilt bundle, so box-shadow is written directly — an invisible focus
   state is an accessibility problem, not a cosmetic one. */
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color,rgb(15 118 110/.15))}
.focus\:ring-brand\/15:focus{--tw-ring-color:rgb(15 118 110/.15)}
.max-w-\[170px\]{max-width:170px}
@media (min-width:640px){.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (min-width:640px){.sm\:col-span-1{grid-column:span 1/span 1}}
@media (min-width:640px){.sm\:w-2\/3{width:66.666667%}}
.hover\:bg-emerald-700:hover{background-color:#047857}
.border-sky-200{border-color:#bae6fd}
.text-sky-800{color:#075985}
.break-words{overflow-wrap:break-word}
.text-red-800{color:#991b1b}
.text-\[44px\]{font-size:44px}
.text-\[14\.5px\]{font-size:14.5px}
.text-\[13\.5px\]{font-size:13.5px}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.bg-red-500\/25{background-color:rgba(239,68,68,.25)}
.border-red-300\/40{border-color:rgba(252,165,165,.4)}

/* CRM pipeline — gaps the prebuilt bundle never emitted. */
.text-left{text-align:left}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.-mt-1{margin-top:-0.25rem}
.-mt-2{margin-top:-0.5rem}
.bg-black\/10{background-color:rgba(0,0,0,.1)}
.border-white{border-color:#fff}
.\[\&\>svg\]\:w-full>svg{width:100%}
.\[\&\>svg\]\:h-auto>svg{height:auto}

/* Vendor kind block. */
.self-end{align-self:flex-end}

.min-w-\[560px\]{min-width:560px}

.max-h-48{max-height:12rem}

/* The six-digit code box. */
.tracking-\[0\.4em\]{letter-spacing:0.4em}

.first\:border-0:first-child{border-width:0}

.min-w-\[620px\]{min-width:620px}
.min-w-\[680px\]{min-width:680px}

/* Visually hidden, still read aloud. Its absence is why the attendance chart
   printed a status word under every icon. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Alpine hides these until it has initialised. Nothing shipped the rule. */
[x-cloak]{display:none !important}

/* A paging arrow at the end of a list is not clickable, and should not look it. */
.disabled\:opacity-40:disabled{opacity:0.4}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}