/* ===========================================================================
   OIStudio Ops — "Sealed Horizon" stylesheet
   Adapted from Selo's Pacific Horizon language for an internal enquiry intake
   admin: light-first, Onest variable sans, teal as the single action accent,
   ocean/deep for structural gravitas. Status colours carry enquiry state.
   =========================================================================== */

/* Onest — variable sans, self-hosted (no external font dependency). */
@font-face {
    font-family: 'Onest';
    src: url('/fonts/Onest-VariableFont_wght.woff2') format('woff2-variations'),
         url('/fonts/Onest-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand & action accent */
    --teal: #00D4AA;
    --teal-dark: #00A386;
    --teal-surface: rgba(0, 212, 170, 0.10);
    --teal-glow: rgba(0, 212, 170, 0.28);

    /* Pacific Horizon accents — used sparingly */
    --coral: #FF7A59;
    --amber: #FFB347;
    --ocean: #0E5C7A;
    --deep: #052131;

    /* Neutral canvas */
    --canvas: #FAFBFC;
    --ink: #0F172A;
    --muted: #64748B;
    --border: rgba(14, 15, 12, 0.10);
    --border-subtle: rgba(14, 15, 12, 0.06);

    /* Glass + depth */
    --glass-bg: rgba(255, 255, 255, 0.82);
    --shadow-ring: 0 0 0 1px rgba(14, 15, 12, 0.08);
    --shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.07);
    --shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.10);

    /* Radius + motion */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 9999px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Aliases */
    --accent: var(--teal);
    --bg: var(--canvas);
    --surface: #FFFFFF;
    --line: var(--border);
    --font-sans: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Fixed identity tokens */
    --seal: var(--deep);
    --link: var(--teal-dark);

    /* Status identity */
    --status-new-bg: var(--teal-surface);
    --status-new-fg: #0A7C64;
    --status-inprogress-bg: rgba(255, 179, 71, 0.18);
    --status-inprogress-fg: #8A5A12;
    --status-responded-bg: rgba(14, 92, 122, 0.14);
    --status-responded-fg: var(--deep);
    --status-closed-bg: rgba(100, 116, 139, 0.16);
    --status-closed-fg: #475569;
}

/* ---- Blazor framework boilerplate ---- */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--teal-dark); }
.invalid { outline: 1px solid var(--coral); }
.validation-message { color: #B23A1C; }

.blazor-error-boundary {
    background: #B23A1C;
    padding: 1rem 1.5rem;
    color: #fff;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---- Base + typography ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-sans);
    font-feature-settings: "calt" 1;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-image:
        radial-gradient(60rem 40rem at 88% -10%, rgba(0, 212, 170, 0.06), transparent 60%),
        radial-gradient(50rem 36rem at -10% 8%, rgba(14, 92, 122, 0.05), transparent 55%);
    background-attachment: fixed;
}

h1, h2, h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--ink);
}

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-dark); }

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Shared primary "pill" — teal with dark ink text (teal is too light for white text). */
.btn,
.admin-login button,
.admin-form button[type="submit"],
.admin-form > button[type="button"]:not(.admin-action) {
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--deep);
    background: var(--teal);
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.62rem 1.25rem;
    text-decoration: none;
    text-align: center;
    transition: transform 150ms var(--ease), box-shadow 150ms ease, background 150ms ease;
}
.btn:hover,
.admin-login button:hover,
.admin-form button[type="submit"]:hover,
.admin-form > button[type="button"]:not(.admin-action):hover {
    background: var(--teal);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 18px var(--teal-glow);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { cursor: default; opacity: 0.45; transform: none; box-shadow: none; }

.error { color: #B23A1C; font-weight: 600; }

/* ---- Admin shell — light, professional (no dark chrome) ---- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    flex: 0 0 15rem; background: #fff; border-right: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; padding: 1.25rem 0;
}
.admin-brand {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 1.5rem 1.5rem;
    color: var(--seal); text-decoration: none; font-weight: 700; letter-spacing: -0.01em;
}
.admin-brand .brand-name { color: var(--ink); font-size: 1.05rem; }
.admin-nav { display: flex; flex-direction: column; gap: 1px; }
.admin-nav a {
    color: var(--muted); text-decoration: none; padding: 0.6rem 1.5rem; font-size: 0.92rem;
    font-weight: 500; border-left: 3px solid transparent; transition: background 120ms ease, color 120ms ease;
}
.admin-nav a:hover { color: var(--ink); background: var(--canvas); }
.admin-nav a.active { color: var(--teal-dark); border-left-color: var(--teal); background: var(--teal-surface); font-weight: 600; }

.admin-content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
    display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
    padding: 0.85rem 2rem; border-bottom: 1px solid var(--border-subtle);
    background: var(--glass-bg); backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px); min-height: 1.5rem; position: sticky; top: 0; z-index: 5;
}
.admin-who { font-weight: 600; font-size: 0.9rem; }
.admin-logout { margin: 0; }
.admin-logout button {
    background: none; border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 0.35rem 0.85rem; cursor: pointer; font: inherit; font-size: 0.85rem; color: var(--muted);
    transition: border-color 120ms ease, color 120ms ease;
}
.admin-logout button:hover { border-color: var(--teal); color: var(--teal-dark); }
.admin-main { flex: 1 1 auto; padding: 2rem 2.25rem; max-width: 66rem; }
.admin-main h1 { margin-top: 0; font-size: 1.7rem; }

/* ---- Admin login ---- */
.admin-login { max-width: 23rem; margin: 14vh auto 0; text-align: center; }
.admin-login h1 { margin: 1.1rem 0 1.75rem; font-size: 1.6rem; }
.admin-login form { display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }
.admin-login label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.admin-login input { padding: 0.7rem 0.85rem; font: inherit; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.admin-login input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-surface); }
.admin-login button { margin-top: 0.4rem; }
.admin-login .error { margin-top: 0; }

/* ---- Filter control ---- */
.filter {
    padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: var(--r-pill);
    min-width: 14rem; background: #fff; font: inherit;
}
.filter:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-surface); }

/* ---- Admin tables ---- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lift); }
.admin-table th, .admin-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.admin-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--canvas); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.row-link { cursor: pointer; transition: background 120ms ease; }
.admin-table tr.row-link:hover { background: var(--teal-surface); }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-table .actions button, .admin-action {
    cursor: pointer; font: inherit; font-size: 0.8rem; padding: 0.28rem 0.6rem;
    border: 1px solid var(--border); border-radius: var(--r-pill); background: #fff; color: var(--ink);
    transition: border-color 120ms ease, color 120ms ease;
}
.admin-table .actions button:hover, .admin-action:hover { border-color: var(--teal); color: var(--teal-dark); }
.admin-table .actions button.danger { border-color: var(--coral); color: var(--coral); }
.admin-table .actions button.danger:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---- Status badges ---- */
.status-badge {
    display: inline-flex; align-items: center; padding: 0.22rem 0.65rem;
    border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.status-badge.status-new { background: var(--status-new-bg); color: var(--status-new-fg); }
.status-badge.status-inprogress { background: var(--status-inprogress-bg); color: var(--status-inprogress-fg); }
.status-badge.status-responded { background: var(--status-responded-bg); color: var(--status-responded-fg); }
.status-badge.status-closed { background: var(--status-closed-bg); color: var(--status-closed-fg); }

/* ---- Admin forms ---- */
.admin-form {
    display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin: 1rem 0;
    padding: 1.25rem; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-lift);
}
.admin-form input, .admin-form select, .admin-form textarea {
    padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: #fff;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-surface); }
.admin-form textarea { flex-basis: 100%; resize: vertical; }
.admin-form > button[type="button"]:disabled { cursor: default; opacity: 0.45; }
.admin-form > button.admin-action { color: var(--ink); background: #fff; }

.admin-form--stacked { flex-direction: column; align-items: stretch; max-width: 36rem; }
.admin-form--stacked label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.admin-form--stacked label.check { flex-direction: row; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 0.9rem; }
.admin-form--stacked label.check input { width: auto; }
.admin-form--stacked button { align-self: flex-start; }

/* ---- Enquiry detail ---- */
.detail-meta { color: var(--muted); margin: 0 0 1.25rem; }
.detail-block { margin: 1.25rem 0; }
.detail-block > .label {
    display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 600; margin-bottom: 0.35rem;
}
.detail-message { white-space: pre-wrap; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 1rem 1.15rem; box-shadow: var(--shadow-ring); }
.notes { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.notes li { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 0.75rem 0.95rem; box-shadow: var(--shadow-ring); }
.notes li small { color: var(--muted); }

.hidden-hp { position: absolute; left: -9999px; }

/* ===========================================================================
   Responsive — desktop / tablet / mobile
   =========================================================================== */
@media (max-width: 992px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar {
        flex: 0 0 auto; width: 100%; flex-direction: column;
        border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: 0.5rem 0;
        position: sticky; top: 0; z-index: 6; background: var(--glass-bg);
        backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    }
    .admin-brand { padding: 0.5rem 1.25rem; }
    .admin-nav { flex-direction: row; gap: 0; overflow-x: auto; padding: 0 0.75rem; -webkit-overflow-scrolling: touch; }
    .admin-nav a {
        border-left: 0; border-bottom: 3px solid transparent;
        white-space: nowrap; padding: 0.55rem 0.85rem;
    }
    .admin-nav a.active { border-left: 0; border-bottom-color: var(--teal); background: transparent; }
    .admin-topbar { padding: 0.75rem 1.25rem; }
    .admin-main { padding: 1.5rem 1.25rem; }
}

@media (max-width: 576px) {
    .admin-main { padding: 1rem; }
    .filter { min-width: 0; width: 100%; }
    /* Wide admin tables scroll horizontally within their own box. */
    .admin-table { display: block; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    .admin-form { padding: 1rem; }
}