/* ==========================================================================
   Equipro — unified design system
   Source of truth for visual language: app/views/home.php
   This file powers the internal app (layouts/app.php, layouts/guest.php)
   and every view that extends them, so the whole product reads as one.
   ========================================================================== */

:root{
    --ink:#1B1D20;
    --ink-soft:#4A4E54;
    --paper:#F4F5F1;
    --panel:#FFFFFF;
    --line:#DBDCD5;
    --accent:#E1601F;
    --accent-ink:#7A2E0B;
    --accent-tint:#FBEAE0;
    --accent-tint-line:#F1C6AC;
    --steel:#526073;
    --steel-tint:#EEF1F4;
    --ok:#3F6E52;
    --ok-tint:#E8F1EA;
    --warn:#9C6B12;
    --warn-tint:#FBF0DA;
    --danger:#B23A2E;
    --danger-tint:#FBEAE7;
    --radius:2px;
    --sidebar-w:16rem;
}

/* -------------------------------------------------------------------------
   Base / typography — same font stack and feel as home.php
   ------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,
.display{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.05;
    color:var(--ink);
}
.mono, code, .font-mono{ font-family:'IBM Plex Mono',monospace; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-warning,
.btn-danger{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:0.875rem; line-height:1.2;
    border:1px solid transparent; border-radius:var(--radius);
    cursor:pointer; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family:'Inter',sans-serif;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); color:#fff; }
.btn-secondary{ background:var(--panel); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--ink); }
.btn-warning{ background:var(--warn); color:#fff; }
.btn-warning:hover{ background:#7d5710; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#8f2e24; }

/* generic accent text links, used in place of text-blue-600 */
.link{ color:var(--accent-ink); text-decoration:none; }
.link:hover{ color:var(--accent); text-decoration:underline; }
.link-muted{ color:var(--ink-soft); text-decoration:none; }
.link-muted:hover{ color:var(--ink); text-decoration:underline; }
.link-danger{ color:var(--danger); text-decoration:none; }
.link-danger:hover{ text-decoration:underline; }
.link-warning{ color:var(--warn); text-decoration:none; }
.link-warning:hover{ text-decoration:underline; }
.link-ok{ color:var(--ok); text-decoration:none; }
.link-ok:hover{ text-decoration:underline; }

/* -------------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------------- */
.input-field{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    font-size:0.875rem;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    transition:border-color .15s ease;
}
.input-field::placeholder{ color:#9A9D96; }
.input-field:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(27,29,32,0.08); }
select.input-field{ background-color:var(--panel); }
label{ color:var(--ink); }

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

/* -------------------------------------------------------------------------
   Stat cards (dashboard tiles)
   ------------------------------------------------------------------------- */
.stat-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-left:3px solid var(--steel);
    border-radius:var(--radius);
    padding:20px;
}
.stat-card.stat-blue{ border-left-color:var(--steel); }
.stat-card.stat-amber{ border-left-color:var(--warn); }
.stat-card.stat-green{ border-left-color:var(--ok); }
.stat-card .num,
.stat-card p.text-3xl,
.stat-card p.text-2xl{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    color:var(--ink);
}

/* icon tiles used next to stat labels / list items */
.icon-badge{
    width:2.5rem; height:2.5rem; flex-shrink:0;
    border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
    background:var(--steel-tint); color:var(--steel);
}
.icon-badge.icon-badge-accent{ background:var(--accent-tint); color:var(--accent-ink); }
.icon-badge.icon-badge-ok{ background:var(--ok-tint); color:var(--ok); }
.icon-badge.icon-badge-warn{ background:var(--warn-tint); color:var(--warn); }
.icon-badge.icon-badge-danger{ background:var(--danger-tint); color:var(--danger); }

/* -------------------------------------------------------------------------
   Badges (status pills) — sharp tags, mono label, matches asset-tag-status
   ------------------------------------------------------------------------- */
.badge{
    display:inline-flex; align-items:center; gap:4px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem; font-weight:600; letter-spacing:0.03em;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:var(--radius);
    line-height:1.4;
    white-space:nowrap;
}
.badge-green{ background:var(--ok-tint); color:var(--ok); }
.badge-red{ background:var(--danger-tint); color:var(--danger); }
.badge-blue{ background:var(--steel-tint); color:var(--steel); }
.badge-amber{ background:var(--warn-tint); color:var(--warn); }
.badge-gray{ background:#ECEDE8; color:var(--ink-soft); }

/* -------------------------------------------------------------------------
   Toggle switch (replaces peer/sr-only Tailwind trick with explicit classes)
   ------------------------------------------------------------------------- */
.switch{ position:relative; display:inline-flex; align-items:center; width:44px; height:24px; flex-shrink:0; }
.switch-input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch-track{
    position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background-color .15s ease;
}
.switch-thumb{
    position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:transform .15s ease;
}
.switch-input:checked + .switch-track{ background:var(--accent); }
.switch-input:checked ~ .switch-thumb{ transform:translateX(20px); }
.switch-input:focus-visible + .switch-track{ outline:2px solid var(--accent); outline-offset:2px; }

/* -------------------------------------------------------------------------
   Tables — used inside .card.overflow-x-auto > table
   ------------------------------------------------------------------------- */
.card table{ border-collapse:collapse; }
.card thead{ background:var(--paper); }
.card thead th{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem; font-weight:600; letter-spacing:0.04em;
    color:var(--ink-soft); text-transform:uppercase;
    border-bottom:1px solid var(--line);
}
.card tbody tr{ border-bottom:1px solid var(--line); }
.card tbody tr:last-child{ border-bottom:none; }
.card tbody tr:hover{ background:var(--paper); }
.card tbody tr.row-overdue{ background:var(--danger-tint); }
.card tbody tr.row-overdue:hover{ background:#f6ddd7; }
.card .divide-y > *{ border-bottom:1px solid var(--line); }
.card .divide-y > *:last-child{ border-bottom:none; }

/* -------------------------------------------------------------------------
   Animations (same easing as home.php's asset-tag settle-in)
   ------------------------------------------------------------------------- */
@keyframes fade-up-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fade-in-in{ from{ opacity:0; } to{ opacity:1; } }
.fade-up{ animation:fade-up-in .45s cubic-bezier(.2,.8,.25,1) both; }
.fade-in{ animation:fade-in-in .3s ease both; }
@media (prefers-reduced-motion: reduce){ .fade-up, .fade-in{ animation:none; } }

/* -------------------------------------------------------------------------
   App shell — sidebar + topbar (layouts/app.php)
   ------------------------------------------------------------------------- */
#sidebar{
    width:var(--sidebar-w);
    background:var(--ink);
    color:#C7C9C3;
    border-right:1px solid #2A2D31;
}
#sidebar .brand-box{
    width:2.25rem; height:2.25rem;
    background:var(--accent);
    border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
}
#sidebar nav a{
    color:#C7C9C3;
    border-radius:var(--radius);
    transition:background-color .15s ease, color .15s ease;
}
#sidebar nav a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
#sidebar nav a.nav-active{
    background:rgba(225,96,31,0.14);
    color:#fff;
    font-weight:600;
    box-shadow:inset 3px 0 0 var(--accent);
}
#sidebar .sidebar-user{
    background:rgba(255,255,255,0.05);
    border-radius:var(--radius);
}
#sidebar .sidebar-avatar{
    background:var(--accent); color:#fff; border-radius:50%;
}
#sidebar form button:hover{ color:var(--accent-tint); background:rgba(255,255,255,0.06); }

.app-topbar{
    background:rgba(244,245,241,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    position:relative;
}
.app-topbar h1{ font-family:'Inter',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink); letter-spacing:normal; }
.header-accent{ height:3px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, transparent 40%); }
.app-topbar .icon-btn{
    color:var(--ink-soft); border-radius:var(--radius); transition:background-color .15s ease, color .15s ease;
}
.app-topbar .icon-btn:hover{ background:var(--paper); color:var(--ink); }
.app-topbar .icon-btn i{ position:relative; z-index:1; color:inherit; }
.topbar-avatar{ background:var(--accent-tint); color:var(--accent-ink); border-radius:50%; }
/* Notification bell badge: fixed small circle pinned to the corner of the
   bell button so it can never grow to cover the bell icon itself. */
#notif-badge, #notif-badge-header{
    box-sizing:border-box;
    min-width:16px; height:16px;
    padding:0 3px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:10px; line-height:1; font-weight:700;
    background:var(--accent); color:#fff; border-radius:999px;
    border:2px solid var(--panel);
    z-index:2; pointer-events:none;
}
#sidebar #notif-badge{ border-color:var(--ink); }

#sidebar-overlay{ background:rgba(27,29,32,0.5); }

.impersonation-bar{ background:var(--warn); color:#fff; }
.impersonation-bar button{ background:#fff; color:var(--warn); border-radius:var(--radius); }
.impersonation-bar button:hover{ background:var(--warn-tint); }

.app-footer{ color:#9A9D96; border-top:1px solid var(--line); }

/* -------------------------------------------------------------------------
   Toasts
   ------------------------------------------------------------------------- */
.toast-item{
    border-radius:var(--radius);
    box-shadow:0 8px 24px rgba(27,29,32,0.12);
    border:1px solid var(--line);
    background:var(--panel);
}
.toast-success{ border-color:#BFDAC9; color:var(--ok); }
.toast-info{ border-color:#C9D2DA; color:var(--steel); }
.toast-errors{ border-color:#EAC0B8; color:var(--danger); }
.toast-item i{ margin-top:2px; }

/* -------------------------------------------------------------------------
   Flash / alert banners (guest + status-check pages)
   ------------------------------------------------------------------------- */
.alert{ border-radius:var(--radius); border:1px solid var(--line); padding:12px 16px; font-size:0.875rem; }
.alert-success{ background:var(--ok-tint); border-color:#BFDAC9; color:var(--ok); }
.alert-info{ background:var(--steel-tint); border-color:#C9D2DA; color:var(--steel); }
.alert-error{ background:var(--danger-tint); border-color:#EAC0B8; color:var(--danger); }

/* unread notification row tint */
.is-unread{ background:var(--accent-tint); }

/* -------------------------------------------------------------------------
   Guest / auth shell (layouts/guest.php, status_check/show.php)
   ------------------------------------------------------------------------- */
.guest-shell{ background:var(--paper); min-height:100vh; }
.auth-card{
    background:var(--panel);
    border:1px solid var(--line);
    position:relative;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}
.auth-brand{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.5rem; color:var(--ink);
}
.auth-brand .brand-mark{ width:30px; height:30px; }

/* generic empty-state text */
.empty-state{ color:var(--ink-soft); text-align:center; }

/* -------------------------------------------------------------------------
   Tailwind CDN color remap
   Tailwind (loaded via CDN in every internal/guest layout) is kept for its
   layout utilities (flex/grid/spacing/breakpoints). This block reharmonizes
   any leftover color utility classes to the Equipro palette so the whole
   product reads as one, without having to touch every occurrence in markup.
   This stylesheet is linked after the Tailwind CDN stylesheet in every
   layout, so for equal-specificity selectors these rules win by source
   order.
   ------------------------------------------------------------------------- */
.text-gray-400{ color:#9A9D96; }
.text-gray-500{ color:var(--ink-soft); }
.text-gray-600{ color:var(--ink-soft); }
.text-gray-700{ color:var(--ink); }
.text-gray-800{ color:var(--ink); }
.text-gray-900{ color:var(--ink); }
.bg-gray-50{ background-color:var(--paper); }
.bg-gray-200{ background-color:var(--line); }
.border-gray-100, .border-gray-200{ border-color:var(--line); }
.hover\:bg-gray-50:hover{ background-color:var(--paper); }
.hover\:text-gray-900:hover{ color:var(--ink); }

.text-blue-500{ color:var(--steel); }
.text-blue-600, .text-blue-700{ color:var(--accent-ink); }
.bg-blue-50{ background-color:var(--accent-tint); }
.bg-blue-600{ background-color:var(--accent); }
.border-blue-100, .border-blue-200{ border-color:var(--accent-tint-line); }
.hover\:text-blue-600:hover{ color:var(--accent); }
.hover\:bg-blue-700:hover{ background-color:var(--accent); }

.text-red-600, .text-red-700{ color:var(--danger); }
.bg-red-50, .bg-red-50\/60{ background-color:var(--danger-tint); }
.bg-red-100{ background-color:var(--danger-tint); }
.border-red-200, .border-red-300{ border-color:#EAC0B8; }
.hover\:text-red-600:hover{ color:var(--danger); }
.hover\:border-red-300:hover{ border-color:var(--danger); }

.text-green-500, .text-green-600{ color:var(--ok); }
.bg-green-50, .bg-green-100{ background-color:var(--ok-tint); }
.border-green-200{ border-color:#BFDAC9; }

.text-amber-600{ color:var(--warn); }
.bg-amber-500{ background-color:var(--warn); }
.hover\:bg-amber-600:hover{ background-color:#7d5710; }

.text-indigo-500{ color:var(--steel); }
.text-indigo-600{ color:var(--accent-ink); }
.bg-indigo-50{ background-color:var(--accent-tint); }
.bg-indigo-600{ background-color:var(--ink); }
.hover\:bg-indigo-700:hover{ background-color:var(--accent); }

/* flatten Tailwind's rounded corners to the Equipro sharp radius, except
   perfectly circular avatars/dots which stay round */
.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl{ border-radius:var(--radius); }

/* Checkout equipment picker: grouped-by-type list with disabled/unavailable
   units shown but not selectable. */
.equipment-group:last-child .equipment-option:last-child{ border-bottom:none; }
.equipment-option.equipment-unavailable{ opacity:.55; cursor:not-allowed; }
.equipment-option.equipment-unavailable:hover{ background:transparent; }
.equipment-checkbox:disabled{ cursor:not-allowed; }
.equipment-group-header{ position:sticky; top:0; z-index:1; }