/* Admin console — interaction states (:hover/:focus) that inline styles can't express.
   Static styling stays inline on the elements to match the design's inline approach. */

* { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }

body { margin: 0; background: #EDF0E8; }

/* Anchor / focus scrolls land below the fixed top bar. */
html { scroll-padding-top: 130px; }

/* GLOBAL form-field styling (admin-wide) — every input/select/textarea gets the brand
   border + 10px rounding + green focus ring, and the browser-default blue outline is removed.
   Applies to current AND future fields without needing a per-field class. Checkboxes/radios/
   range/color/file are excluded HERE so they keep their native shape — they are coloured by the
   rule below instead, which recolours without squaring them off. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
    border: 1px solid #C9D4BC !important;   /* !important: the Tailwind forms plugin (CDN) squares
                                               off + greys typed inputs ([type=email]/[type=tel] …);
                                               this keeps every field on the brand border + rounding. */
    border-radius: 10px !important;         /* ~rounded-lg */
    background: #FFFFFF;
    color: #1C2A11;
    outline: none;
}
/* !important so the brand green ring reliably wins over the Tailwind forms plugin
   (loaded at runtime via the CDN in App.razor), which otherwise sets its own focus ring. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: #7A9E5A !important;
    box-shadow: 0 0 0 3px rgba(122, 158, 90, 0.3) !important;
    outline: 2px solid transparent !important;   /* kill the default blue outline; keep a11y-safe transparent outline */
    outline-offset: 2px;
}

/* ── CHECKBOXES AND RADIOS, IN LITERAL HEX (item 54's approach) ─────────────────────────────
   THE BUG: the "registered business?" radios on the onboarding form rendered browser blue. Same
   mechanism as the avatar ring fixed on 2 September — the v3 Play CDN (App.razor:28, loaded with
   ?plugins=forms) injects UNLAYERED rules that beat the layered compiled output.css, and the forms
   plugin sets its own colour on these two controls. No Tailwind class can win that, so this is
   plain CSS with literal hex and !important, using the palette already on this console: #314025
   for the mark, #7A9E5A and the existing rgba(122,158,90,0.3) token for hover and focus.

   TWO PROPERTIES FOR THE CHECKED STATE, and both are needed. accent-color is what colours a NATIVE
   control, and it is what applies if the CDN ever stops loading. But the forms plugin replaces the
   native control (appearance: none) and paints the checked mark with currentColor, so `color` is
   what actually shows today. Setting one and not the other leaves it blue in one of the two worlds.

   GLOBAL, NOT A CLASS, matching this file's stated approach for fields: the next radio anyone adds
   is brand green without having to remember an opt-in. Admin has exactly two radios today
   (OnboardBusiness.razor:62 and :68) and no checkboxes. */
[type="checkbox"],
[type="radio"] {
    accent-color: #314025 !important;   /* native rendering */
    color: #314025 !important;          /* the forms plugin paints :checked with currentColor */
    cursor: pointer;
}

[type="checkbox"]:hover,
[type="radio"]:hover {
    border-color: #7A9E5A !important;
}

/* Same green ring, and the same token, the text fields above use — never the plugin's blue. */
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible {
    border-color: #7A9E5A !important;
    box-shadow: 0 0 0 3px rgba(122, 158, 90, 0.3) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px;
    --tw-ring-color: #314025 !important;
}

/* Inputs — green focus ring per design token rgba(122,158,90,0.3) */
.admin-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #C9D4BC;
    border-radius: 10px;
    font-size: 14px;
    color: #1C2A11;
    background: #FFFFFF;
    outline: none;
}
.admin-input::placeholder { color: #9AA88C; }
.admin-input:focus {
    border-color: #7A9E5A;
    box-shadow: 0 0 0 3px rgba(122, 158, 90, 0.3);
}

/* Forest primary button */
.btn-forest {
    background: #314025;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-forest:hover { background: #3d4f2e; }

.btn-leaf { background: #7A9E5A; color: #FFFFFF; border: none; cursor: pointer; transition: filter 0.15s ease; }
.btn-leaf:hover { filter: brightness(0.94); }

.btn-dark { background: #24311C; color: #FFFFFF; border: none; cursor: pointer; transition: background 0.15s ease; }
.btn-dark:hover { background: #1C2A11; }

/* Sidebar nav item */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #BACCA8;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav-item.active { background: #314025; color: #FFFFFF; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Role toggle pill */
.role-seg {
    border: none;
    background: transparent;
    color: #5C6B4E;
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.role-seg.active { background: #314025; color: #FFFFFF; }

/* Sign out */
.sign-out {
    background: transparent;
    border: 1px solid #DDE5D4;
    color: #5C6B4E;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sign-out:hover { background: #F4F7EF; }

/* Card hover lift for clickable rows (subtle) */
.row-hover { transition: background 0.12s ease; }
.row-hover:hover { background: #F4F7EF; }