/* ------------------------------------------------------------------
   Component classes layered on top of Tailwind utilities.
   Kept here (rather than inline) so forms and tables stay consistent
   across every screen and so print output can be controlled properly.
   ------------------------------------------------------------------ */

/* GIADEC corporate palette, sampled from the logo. */
:root {
  --brand:      #E14418;  /* red-orange, primary action  */
  --brand-dark: #C63811;
  --brand-deep: #A32316;  /* maroon                     */
  --gold:       #FDC010;
  --corporate:  #A7A9AC;  /* wordmark grey              */
  --ink:        #241A17;  /* warm near-black, sidebar   */
}

body { font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
  transition: background-color .15s, box-shadow .15s, opacity .15s;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn-secondary { background: #fff; color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-success   { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-warning   { background: #d97706; color: #fff; }
.btn-warning:hover:not(:disabled) { background: #b45309; }
.btn-sm        { padding: .3rem .65rem; font-size: .78rem; border-radius: .4rem; }

.btn-quick {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff;
  padding: .4rem .7rem; font-size: .8rem; font-weight: 600; color: #334155;
  text-decoration: none; white-space: nowrap;
}
.btn-quick:hover { background: #f1f5f9; }

/* ---- Forms ---- */
.label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 600; color: #334155; }
.label .req { color: #dc2626; }
.input, .select, .textarea {
  width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem;
  padding: .5rem .7rem; font-size: .875rem; background: #fff; color: #0f172a;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 68, 24, .18);
}
.input:disabled, .select:disabled, .input[readonly] { background: #f1f5f9; color: #64748b; }
.input-error { border-color: #dc2626 !important; }

/* Password box with a reveal button sitting inside its right-hand edge.
   The input keeps its full width; only the text is inset, so the field
   still lines up with every other control on the form. */
.pw-field { position: relative; }
.pw-field .input { padding-right: 2.9rem; }
.pw-field .pw-reveal {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.75rem;   /* 44px: the tap-target floor */
  display: flex; align-items: center; justify-content: center;
  color: #64748b; background: none; border: 0; border-radius: 0 .5rem .5rem 0;
  cursor: pointer;
}
.pw-field .pw-reveal:hover { color: var(--brand); }
.pw-field .pw-reveal:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -2px;
}
/* A struck-through eye reads as "hidden"; revealing clears the stroke. */
.pw-field .pw-reveal .pw-slash { display: inline; }
.pw-field .pw-reveal[aria-pressed="true"] .pw-slash { display: none; }
.field-error { margin-top: .25rem; font-size: .75rem; color: #dc2626; }
.hint { margin-top: .25rem; font-size: .75rem; color: #64748b; }

/* ---- Cards ---- */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { padding: .9rem 1.15rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.card-title { font-size: .95rem; font-weight: 600; color: #0f172a; }
.card-body { padding: 1.15rem; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border-radius: .5rem; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table thead th {
  position: sticky; top: 0; background: #f8fafc; text-align: left;
  padding: .6rem .75rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #475569;
  border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.table tbody td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tbody tr:hover { background: #f8fafc; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-empty { padding: 2.5rem 1rem; text-align: center; color: #94a3b8; font-size: .875rem; }

/* Row emphasis for stock state */
tr.row-critical { background: #fef2f2; }
tr.row-critical:hover { background: #fee2e2; }
tr.row-warn { background: #fffbeb; }
tr.row-warn:hover { background: #fef3c7; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 9999px; padding: .15rem .6rem;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
/* Status colours stay deliberately distinct from the GIADEC brand orange:
   the brand is used for chrome and actions, these only for stock state, so
   an "out of stock" badge can never be mistaken for a button. */
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-slate  { background: #e2e8f0; color: #334155; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-brand  { background: var(--brand-50, #FDF1EC); color: var(--brand-deep); }

/* ---- Stat tiles ---- */
.stat { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem 1.15rem; }
.stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.stat-value { margin-top: .3rem; font-size: 1.6rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.stat-meta  { margin-top: .2rem; font-size: .75rem; color: #64748b; }

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before { content: ''; position: absolute; left: .45rem; top: .3rem; bottom: .3rem; width: 2px; background: #e2e8f0; }
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-dot {
  position: absolute; left: -1.75rem; top: .15rem; width: .95rem; height: .95rem;
  border-radius: 9999px; background: #fff; border: 2px solid var(--brand);
}
.timeline-dot.done   { background: var(--brand); }
.timeline-dot.reject { border-color: #dc2626; background: #dc2626; }

/* ------------------------------------------------------------------
   Collapsible navigation rail (desktop only)

   Below 1024px the sidebar is an off-canvas drawer driven by the
   hamburger, so collapsing would be meaningless there — these rules are
   scoped to the desktop breakpoint only.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* Deliberately not animated. Transitioning width/padding forces a layout
     recalculation on every frame for the whole page, and leaves the rail
     visibly stuck at the old size wherever animations are paused (background
     tabs, reduced-motion settings). Snapping is faster and always correct. */
  .main-col { padding-left: 16rem; }

  .nav-collapsed #sidebar  { width: 4rem; }
  .nav-collapsed .main-col { padding-left: 4rem; }

  /* Hide everything that needs horizontal room. */
  .nav-collapsed #sidebar .nav-label,
  .nav-collapsed #sidebar .nav-section,
  .nav-collapsed #sidebar .nav-badge { display: none; }

  /* Centre the icons and drop the gap they no longer need. */
  .nav-collapsed #sidebar .nav-item { justify-content: center; gap: 0; padding-left: .5rem; padding-right: .5rem; }
  .nav-collapsed #sidebar .nav-head { justify-content: center; padding-left: .5rem; padding-right: .5rem; gap: 0; }

  /* Keep a little breathing room where a section heading used to be. */
  .nav-collapsed #sidebar .nav-section + a { margin-top: .75rem; }

  .nav-collapsed .nav-chevron { transform: rotate(180deg); transform-origin: center; }
}

/* The collapse control is desktop-only; the drawer handles small screens. */
@media (max-width: 1023px) {
  .nav-collapse-btn { display: none !important; }
}

/* A badge count has no room on the rail, so it becomes a dot on the icon. */
.nav-dot { display: none; }
@media (min-width: 1024px) {
  .nav-collapsed #sidebar .nav-dot { display: block; }
}

/* ------------------------------------------------------------------
   Small-screen behaviour
   ------------------------------------------------------------------ */

/* Media must never be wider than the column holding it. A <canvas> carries
   an intrinsic width from its width attribute, which is what pushed the
   dashboard sideways on a phone. */
canvas, img, svg, video, iframe { max-width: 100%; }

/* Grid and flex children default to min-width:auto, so a wide child (a chart
   canvas, a long reference number) can force the whole page to scroll
   sideways instead of shrinking. This is the fix for that. */
.card, .stat, .main-col, .table-wrap { min-width: 0; }

/* Same trap one level up: a grid track sizes to its widest item's min-content,
   so a wide data table in one column stretches every column — and on a phone,
   where the grid is a single column, that stretches the whole page. Allowing
   grid children to shrink makes the table scroll inside its own box instead. */
.grid > * { min-width: 0; }

/* Touch ergonomics are about the input device, not the screen width — a
   768px tablet needs the same generous targets a phone does. `pointer:
   coarse` catches every touch device; the width clause keeps these rules
   testable in a desktop browser at a narrow window. */
@media (pointer: coarse), (max-width: 1024px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px.
     Setting exactly 16px keeps the layout still on focus. */
  .input, .select, .textarea { font-size: 16px; }

  /* Inline links in headers and tables are only ~16px tall, which is well
     under a comfortable tap target. Extra vertical padding grows the hit
     area without moving anything visually. */
  .card-header a, .table a, .table button,
  .stat-meta a, .card-body a:not(.btn):not(.badge) {
    display: inline-block;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  /* Buttons get a full-size tap target too. */
  .btn-sm { padding: .5rem .75rem; }

  /* 13px checkboxes are far too small to hit on a touch screen. Enlarging the
     control and padding the label it sits in gives a comfortable target
     without redesigning the filter bars. */
  /* flex-shrink:0 stops a flex row squashing the box narrower than it is tall. */
  input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]) { padding-top: .35rem; padding-bottom: .35rem; }

  /* Selection checkboxes in table cells have no label to enlarge, so pad the
     cell around them instead — the whole cell becomes easy to hit. */
  .table td > input[type=checkbox],
  .table th > input[type=checkbox] { margin: .5rem .25rem; }

}

@media (max-width: 640px) {
  /* Density tweaks that are about screen size, not touch. */
  .card-header { gap: .5rem; }
  .stat { padding: .75rem .85rem; }
  .stat-value { font-size: 1.35rem; }
}

/* A horizontally scrollable table should look scrollable, not truncated. */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* ---- Print ---- */
@media print {
  .print\:hidden, aside, header, footer, .no-print { display: none !important; }
  body { background: #fff !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
  main { padding: 0 !important; }
  .card { border: none !important; box-shadow: none !important; }
  .table thead th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { border: 1px solid #cbd5e1; }
  .print-only { display: block !important; }
  @page { margin: 14mm; }
}
.print-only { display: none; }

/* Numeric inputs: hide spinners so quantity entry stays clean */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ==================================================================
   Authentication screens (sign in, forced password change, sign out)

   One centred column over the brand background at every width. The
   background is decoration only — it is behind aria-hidden and carries no
   meaning, so nothing is lost if images fail or the user overrides colours.
   ================================================================== */

.auth-shell {
  min-height: 100dvh;
  background: #1A1210;
  color: #F8FAFC;
}

/* ---- Background ---- */
.auth-bg {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
}

/* Two soft washes in the brand colours, plus a vignette so the card lifts
   off the background rather than floating on flat black. */
.auth-bg__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 8% 4%,   rgba(225, 68, 24, .30) 0%, transparent 56%),
    radial-gradient(95% 75% at 96% 98%,  rgba(253, 192, 16, .17) 0%, transparent 55%),
    radial-gradient(80% 60% at 50% 45%,  rgba(0, 0, 0, .35)    0%, transparent 70%);
}

/* The GIADEC mark itself, oversized and barely there, bled off the
   bottom-right corner — brand rather than invented ornament. */
.auth-bg__motif {
  position: absolute; right: -10rem; bottom: -11rem;
  width: 38rem; height: auto; opacity: .06;
  transform: rotate(-8deg);
}
@media (max-width: 639px) {
  .auth-bg__motif { right: -7rem; bottom: -7rem; width: 24rem; opacity: .05; }
}

/* ---- Centred stage ---- */
.auth-stage {
  position: relative;                 /* above .auth-bg */
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem;
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .auth-stage { padding: 2.5rem 2rem; } }

/* ---- Task card ---- */
.auth-card {
  background: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem;
  padding: 1.5rem 1.35rem;
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .18);
}
@media (min-width: 640px) { .auth-card { padding: 1.75rem; } }

.auth-shell .label { margin-bottom: .375rem; color: #1E293B; }

/* 16px on the inputs: anything smaller makes iOS Safari zoom the page on
   focus, which then leaves the form half off-screen. */
.auth-shell .input {
  min-height: 2.875rem; font-size: 1rem; border-color: #CBD5E1;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-shell .input::placeholder { color: #94A3B8; }
.auth-shell .input:hover:not(:focus) { border-color: #94A3B8; }
.auth-shell .input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 68, 24, .16);
}
.auth-shell .input-error { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

/* ---- Caps Lock hint ---- */
.auth-caps {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .45rem; font-size: .75rem; font-weight: 600; color: #B45309;
}
.auth-caps[hidden] { display: none; }

/* ---- Primary action ----
   brand-600 rather than brand-500: white on #C63811 clears 4.5:1, white
   on #E14418 does not. Same family, one step down, AA compliant. */
.auth-submit {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 2.875rem; padding: .625rem 1rem;
  border: 0; border-radius: .625rem; cursor: pointer;
  background: var(--brand-dark); color: #fff;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(166, 40, 15, .3);
}
.auth-submit:hover:not(:disabled) { background: #A32316; }
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled { opacity: .75; cursor: progress; }

.auth-submit__spinner { display: none; }
.auth-submit[aria-busy="true"] .auth-submit__spinner {
  display: block; animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---- Flash notices ---- */
.auth-note {
  display: flex; align-items: flex-start; gap: .55rem;
  border: 1px solid; border-radius: .625rem;
  padding: .7rem .85rem; font-size: .8125rem; line-height: 1.5;
}
.auth-note--ok   { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.auth-note--bad  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.auth-note--warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.auth-note--info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }

/* ---- Focus visibility ----
   A keyboard user must always be able to see where they are; the ring is
   never removed, only restyled. */
.auth-shell :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* Buttons on the authentication screens share the sign-in button's height,
   so sign-out and change-password clear the same 44px target floor rather
   than inheriting the compact in-app button size. */
.auth-shell .btn { min-height: 2.875rem; padding-left: 1.1rem; padding-right: 1.1rem; }

/* ---- Touch ergonomics ---- */
@media (pointer: coarse) {
  .auth-shell .input,
  .auth-shell .btn,
  .auth-submit { min-height: 3rem; }
  .auth-shell .pw-reveal { width: 3rem; }
}

/* ---- Laptop heights: keep the whole form above the fold ----
   A sign-in page that scrolls is a sign-in page where the button is
   hidden. On the common 720-800px laptop viewport the brand lockup
   gives up the difference rather than the form. */
@media (max-height: 860px) {
  .auth-stage { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .auth-lockup { margin-bottom: 1.25rem; }
  .auth-lockup img { height: 3.25rem; width: 3.25rem; }
  .auth-lockup h1 { margin-top: .75rem; font-size: 1.0625rem; }
}

/* ---- Short landscape phones: give the fold back to the form ---- */
@media (max-height: 560px) and (max-width: 1023px) {
  .auth-stage { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .auth-card { padding: 1.25rem; }
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .auth-shell *,
  .auth-shell *::before,
  .auth-shell *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .auth-submit:active:not(:disabled) { transform: none; }
}