/* ============================================================================
   DNSanta admin theme - the single authoritative brand + design-system layer.

   Loaded AFTER the compiled Tailwind bundle by every backend layout (admin,
   auth, holding page, public pages). Two mechanisms do all the work:

   1. The compiled bundle routes every brand utility (bg-brand, text-brand,
      border-brand, ring-brand, btn-primary, bg-brand/10, ...) through the
      --color-brand* custom properties remapped below - so the palette lives
      here and only here.
   2. The bundle's rules sit inside CSS @layer blocks; everything in THIS file
      is unlayered and therefore wins the cascade without !important. That is
      how the visual refinements below (typography, buttons, tables, forms,
      cards, sidebar) override compiled utilities cleanly.

   Change brand colors or UI polish HERE and nowhere else. The only intended
   exceptions are HTML emails (inline literals - email clients ignore CSS
   variables) and the SVG logo files in this folder.
   ========================================================================== */

:root {
    /* ---- DNSanta palette ------------------------------------------------ */
    --brand-primary: #CC0D0E;
    --brand-primary-hover: #A90B0C;
    --brand-dark: #111111;
    --brand-sidebar: #151515;
    --surface-page: #F8F8F8;
    --surface-card: #FFFFFF;
    --border-default: #E5E7EB;
    --text-primary: #111111;
    --text-secondary: #6B7280;
    --status-success: #16A34A;
    --status-warning: #D97706;
    --status-error: #DC2626;

    /* ---- Design tokens -------------------------------------------------- */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radius-card: 12px;
    --radius-control: 8px;
    --shadow-card: 0 1px 2px 0 rgb(16 24 40 / 0.05);
    --shadow-card-hover: 0 4px 12px -2px rgb(16 24 40 / 0.10), 0 2px 4px -2px rgb(16 24 40 / 0.06);
    --shadow-popover: 0 12px 32px -8px rgb(16 24 40 / 0.16), 0 2px 6px -2px rgb(16 24 40 / 0.08);
    --focus-ring: 0 0 0 3px rgb(204 13 14 / 0.14);

    /* ---- Retarget the compiled Tailwind bundle -------------------------- */
    --color-brand: var(--brand-primary);
    --color-brand-dark: var(--brand-primary-hover);
}

/* ============================================================================
   1. Typography - Inter everywhere, tight headings, tabular numerals.
   ========================================================================== */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
h1, h2, h3 {
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

/* ============================================================================
   2. Sidebar - premium dark rail: generous logo area, quiet section labels,
      calm idle links, unmistakable red active pill.
   ========================================================================== */
#admin-sidebar {
    background-color: var(--brand-sidebar);
}
#admin-sidebar > div:first-child {              /* logo area */
    height: 4.25rem;
    padding-inline: 1.125rem;
    border-color: rgb(255 255 255 / 0.08);
}
#admin-sidebar > div:first-child img {
    height: 2.25rem;                            /* 36px, sharp, never stretched */
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}
/* Official on-white DNSanta logo sits on a white plate against the dark rail.
   Height comes from the shared logo rule above (36px); width stays auto so the
   provided artwork keeps its exact natural aspect ratio. */
#admin-sidebar .brand-plate {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.3125rem 0.5625rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
}
#admin-sidebar nav {
    padding-block: 1rem 1.5rem;
}
#admin-sidebar nav > ul {
    padding-inline: 0.875rem;
}
/* Section headings: small, tracked, muted - Linear-style rail labels. */
#admin-sidebar nav li[class*="uppercase"] {
    font-size: 0.6563rem;
    letter-spacing: 0.09em;
    color: rgb(255 255 255 / 0.42);
    font-weight: 600;
    margin-top: 1.375rem !important;
    margin-bottom: 0.375rem !important;
    padding-inline: 0.75rem;
}
/* Nav links: comfortable rhythm, soft hover, crisp focus. */
#admin-sidebar nav a,
#admin-sidebar nav summary,
#admin-sidebar nav button[type="submit"] {
    border-radius: var(--radius-control);
    font-size: 0.8438rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}
#admin-sidebar nav a { padding: 0.5625rem 0.75rem; }
#admin-sidebar nav a:hover { background-color: rgb(255 255 255 / 0.07); }
#admin-sidebar nav a svg { width: 1.125rem; height: 1.125rem; opacity: 0.72; transition: opacity 0.15s ease; }
#admin-sidebar nav a:hover svg { opacity: 1; }

/* Active navigation item (class assigned in components/admin/sidebar.blade.php). */
#admin-sidebar .sidebar-link-active {
    background-color: var(--brand-primary);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px -1px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
#admin-sidebar .sidebar-link-active svg { opacity: 1; }
#admin-sidebar .sidebar-link-active:hover {
    background-color: var(--brand-primary-hover);
    color: #ffffff;
}

/* Thin, unobtrusive scrollbar on the dark rail. */
#admin-sidebar nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.18) transparent; }
#admin-sidebar nav::-webkit-scrollbar { width: 6px; }
#admin-sidebar nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.18); border-radius: 3px; }
#admin-sidebar nav::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   3. Header / topbar - airy, blurred, perfectly aligned.
   ========================================================================== */
body > div.min-h-full header.sticky {
    height: 4.25rem;
    padding-inline: 1.5rem;
    background-color: rgb(255 255 255 / 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: var(--border-default);
}
body > div.min-h-full header.sticky h1 {
    font-size: 0.9375rem;
    font-weight: 600;
}
#user-menu-button { transition: background-color 0.15s ease, box-shadow 0.15s ease; }
#user-menu-button:hover { background-color: #F3F4F6; }
#user-menu-button > span.bg-brand {             /* avatar chip */
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
}
#user-menu {
    border-radius: 10px;
    box-shadow: var(--shadow-popover);
    padding-block: 0.375rem;
}
.dropdown-item { font-size: 0.8438rem; padding-block: 0.5rem; transition: background-color 0.12s ease; }
.dropdown-item:hover { background-color: var(--surface-page); }

/* Breadcrumbs: quieter, current page emphasized. */
nav[aria-label="Breadcrumb"] { font-size: 0.7813rem; }
nav[aria-label="Breadcrumb"] [aria-current="page"] { color: var(--text-primary); font-weight: 600; }

/* ============================================================================
   4. Cards - crisp borders, whisper shadows, gentle lift on interactive ones.
   ========================================================================== */
main .rounded-xl.border.bg-white,
main .form-card {
    border-radius: var(--radius-card);
    border-color: var(--border-default);
    box-shadow: var(--shadow-card);
}
main a.rounded-xl.border.bg-white {             /* clickable cards */
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
main a.rounded-xl.border.bg-white:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: #D1D5DB;
    transform: translateY(-1px);
}
main .form-card { padding: 1.75rem; }

/* KPI / statistics cards: the number is the hero. */
#stat-cards > a, #stat-cards > div { padding: 1.375rem 1.25rem; }
#stat-cards .text-sm.text-slate-500 {
    font-size: 0.7813rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}
#stat-cards .text-2xl {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.15;
}
#stat-cards .h-11 {                             /* icon tile */
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 10px;
    background-color: rgb(204 13 14 / 0.08);
}
/* Large numbers elsewhere (ops cards, contact stats). */
main .text-2xl.font-semibold {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ============================================================================
   5. Buttons - one clear hierarchy, real hover/active/focus/disabled states.
   ========================================================================== */
.btn {
    border-radius: var(--radius-control);
    font-size: 0.8438rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary { background-color: var(--brand-primary); box-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.btn-primary:hover { background-color: var(--brand-primary-hover); }
.btn-primary:focus-visible { box-shadow: var(--focus-ring), inset 0 1px 0 rgb(255 255 255 / 0.12); }

.btn-secondary { border-color: var(--border-default); box-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.04); }
.btn-secondary:hover { background-color: var(--surface-page); border-color: #D1D5DB; color: var(--text-primary); }
/* Action buttons inside data tables sit on rows that tint to slate-50 on hover;
   give their own hover a slightly deeper in-palette fill (slate-100, already used
   for row dividers) so the control still reads as interactive over the row. */
main table .btn-secondary:hover { background-color: #F1F5F9; }

.btn-danger { box-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.08); }
.btn-danger:hover { background-color: #B91C1C; }

/* ============================================================================
   6. Tables - scannable SaaS tables: quiet headers, calm rows, soft hover.
   ========================================================================== */
main table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
    background-color: #FAFAFA;
}
main table tbody td {
    font-size: 0.8438rem;
    padding-top: 0.8125rem;
    padding-bottom: 0.8125rem;
}
main table tbody tr { transition: background-color 0.12s ease; }
main table tbody tr:hover { background-color: #FAFAFA; }
main .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
main .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #F3F4F6;
}
main table thead { border-bottom: 1px solid var(--border-default); }
/* Empty states: roomy and quiet. */
main tbody td[colspan] {
    padding-block: 3rem;
    font-size: 0.8438rem;
    color: #9CA3AF;
}

/* ============================================================================
   7. Forms - modern controls with true focus affordance.
   ========================================================================== */
.form-label { font-size: 0.8125rem; margin-bottom: 0.375rem; color: #374151; }
.form-input {
    border-radius: var(--radius-control);
    border-color: var(--border-default);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:hover:not(:focus) { border-color: #D1D5DB; }
.form-input::placeholder { color: #9CA3AF; }
.form-input:focus, .form-input:focus-visible {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--focus-ring);
}
.form-input.form-input-error { border-color: var(--status-error); }
.form-input.form-input-error:focus { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.12); }
/* Native select: custom chevron, no double arrow. */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    padding-right: 2.125rem;
}
/* Checkboxes + radios: brand accent, comfortable size. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--brand-primary);
    width: 0.9375rem;
    height: 0.9375rem;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid rgb(204 13 14 / 0.4);
    outline-offset: 2px;
}
/* Validation messages. */
main p.text-red-600, main p.text-xs.text-red-600 { font-size: 0.75rem; }

/* ============================================================================
   8. Pagination - compact chips; the current page wears the brand.
   ========================================================================== */
nav[role="navigation"] a > span, nav[role="navigation"] span > span,
nav[role="navigation"] > div a, nav[role="navigation"] > div span {
    border-radius: var(--radius-control);
}
nav[role="navigation"] a { transition: background-color 0.12s ease, color 0.12s ease; }
nav[role="navigation"] span[aria-current="page"] > span {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
    font-weight: 600;
}

/* ============================================================================
   9. Toasts, alerts, modals, misc chrome.
   ========================================================================== */
.toast { border-radius: 10px; box-shadow: var(--shadow-popover); }
.toast-success { border-left: 3px solid var(--status-success); }
.toast-error { border-left: 3px solid var(--status-error); }
.modal-card { border-radius: var(--radius-card); box-shadow: var(--shadow-popover); }
/* Filter/search bars breathe a little more. */
main form.flex.flex-wrap.items-end { row-gap: 0.75rem; }
/* Links inside content adopt the brand on hover for consistency. */
main a.text-brand:hover { color: var(--brand-primary-hover); }