/* ──────────────────────────────────────────────────────────────────────────
   Sore Turizm — Admin Bespoke Layer
   Premium framework-free admin UI. Extends app.css OKLCH tokens with
   admin-specific layer. NO Bootstrap, NO Tailwind, NO jQuery.
   2026 patterns: @scope, view-transitions, scroll-driven anim, container queries.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Admin token layer (built on app.css --c-* tokens) ─────────────────── */
:root {
    --admin-surface:        var(--c-paper-elevated);
    --admin-surface-soft:   var(--c-paper-soft);
    --admin-surface-tint:   color-mix(in oklch, var(--c-accent) 4%, var(--c-paper));

    --admin-text:           var(--c-ink);
    --admin-text-soft:      var(--c-ink-soft);
    --admin-text-muted:     var(--c-ink-muted);

    --admin-line:           var(--c-line);
    --admin-line-soft:      var(--c-line-soft);

    --admin-accent:         var(--c-accent);
    --admin-accent-warm:    var(--c-accent-warm);
    --admin-accent-tint:    var(--c-accent-tint);
    --admin-accent-glow:    color-mix(in oklch, var(--c-accent) 22%, transparent);

    --admin-radius-sm:      var(--r-sm);   /*  8px */
    --admin-radius-md:      var(--r-md);   /* 12px */
    --admin-radius-lg:      var(--r-lg);   /* 18px */
    --admin-radius-pill:    var(--r-pill);

    --admin-shadow-rest:    var(--shadow-1);
    --admin-shadow-hover:   var(--shadow-2);
    --admin-shadow-deep:    var(--shadow-3);
    --admin-shadow-glow:    var(--shadow-glow);

    --admin-status-draft:   oklch(72% 0.15 75);     /* warm amber */
    --admin-status-pub:     oklch(60% 0.12 145);    /* sage success */
    --admin-status-arch:    oklch(58% 0.015 260);   /* neutral muted */

    /* Hub layout */
    --hub-content-max:      52rem;   /* ~820px */
    --hub-topbar-height:    3.5rem;  /* 56px */
}

/* ── View transitions (hub ↔ subroutes) ────────────────────────────────── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* ── HubLayout shell ───────────────────────────────────────────────────── */
.hub-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: var(--hub-topbar-height) 1fr;
    background: linear-gradient(180deg,
        var(--c-paper) 0%,
        var(--c-paper-soft) 100%);
}

.hub-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-5);
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-line);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(1.2);
}

.hub-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
    color: var(--admin-text);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}

.hub-brand:hover {
    color: var(--admin-accent);
}

.hub-brand i {
    font-size: 1.25rem;
    color: var(--admin-accent);
}

.hub-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--admin-text-soft);
}

.hub-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--admin-accent);
    color: var(--c-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
}

.hub-main {
    width: 100%;
    max-width: var(--hub-content-max);
    margin: 0 auto;
    padding: var(--s-7) var(--s-5) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
}

/* ── Hub greeting (editorial Fraunces) ─────────────────────────────────── */
.hub-greeting {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.hub-greeting__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 500;
    font-variation-settings: "opsz" 48, "wght" 500;
    letter-spacing: -0.02em;
    color: var(--admin-text);
    margin: 0;
    line-height: 1.05;
}

.hub-greeting__sub {
    font-size: var(--fs-base);
    color: var(--admin-text-muted);
    margin: 0;
}

/* ── SoHubCard ─────────────────────────────────────────────────────────── */
.so-hub-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    container-type: inline-size;
}

@container (max-width: 640px) {
    .so-hub-cards { grid-template-columns: 1fr; }
}

.so-hub-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5);
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius-md);
    box-shadow: var(--admin-shadow-rest);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        transform var(--t-base) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
}

.so-hub-card:hover:not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow: var(--admin-shadow-hover);
    border-color: color-mix(in oklch, var(--admin-accent) 35%, var(--admin-line));
}

.so-hub-card:focus-visible {
    outline: none;
    box-shadow: var(--admin-shadow-glow);
}

.so-hub-card[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.so-hub-card__icon {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--admin-radius-md);
    background: var(--admin-accent-tint);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--t-base) var(--ease-out),
        color var(--t-base) var(--ease-out);
}

.so-hub-card:hover:not([aria-disabled="true"]) .so-hub-card__icon {
    background: var(--admin-accent);
    color: var(--c-paper);
}

.so-hub-card__icon i {
    font-size: 1.625rem;
}

.so-hub-card__body {
    flex: 1;
    min-width: 0;
}

.so-hub-card__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--admin-text);
    margin: 0 0 var(--s-1);
    letter-spacing: -0.01em;
}

.so-hub-card__sub {
    font-size: var(--fs-sm);
    color: var(--admin-text-muted);
    margin: 0 0 var(--s-2);
    line-height: 1.45;
}

.so-hub-card__kbd {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-xs);
    color: var(--admin-text-muted);
}

.so-hub-card__kbd kbd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    padding: 1px 5px;
    background: var(--admin-surface-soft);
    border: 1px solid var(--admin-line);
    border-radius: 3px;
    color: var(--admin-text-soft);
}

/* ── Drafts section ────────────────────────────────────────────────────── */
.hub-drafts {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius-md);
    padding: var(--s-5);
    box-shadow: var(--admin-shadow-rest);
}

.hub-drafts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}

.hub-drafts__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
    font-weight: 600;
    margin: 0;
}

.hub-drafts__count {
    font-size: var(--fs-xs);
    background: color-mix(in oklch, var(--admin-status-draft) 16%, var(--admin-surface));
    color: color-mix(in oklch, var(--admin-status-draft) 60%, var(--admin-text));
    padding: 2px 10px;
    border-radius: var(--admin-radius-pill);
    font-weight: 500;
}

/* ── SoDraftItem ───────────────────────────────────────────────────────── */
.so-draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--admin-surface-soft);
    border-radius: var(--admin-radius-sm);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--s-2);
    transition:
        background var(--t-fast) var(--ease-out),
        transform var(--t-fast) var(--ease-out);
}

.so-draft-item:last-child {
    margin-bottom: 0;
}

.so-draft-item:hover {
    background: color-mix(in oklch, var(--admin-accent) 6%, var(--admin-surface-soft));
    transform: translateX(2px);
}

.so-draft-item:focus-visible {
    outline: none;
    box-shadow: var(--admin-shadow-glow);
}

.so-draft-item__left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.so-draft-item__left i {
    color: var(--admin-text-muted);
    font-size: 1.125rem;
}

.so-draft-item__title {
    font-size: var(--fs-sm);
    color: var(--admin-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.so-draft-item__title strong {
    font-weight: 600;
}

.so-draft-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.hub-drafts__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-5) var(--s-4);
    color: var(--admin-text-muted);
    gap: var(--s-2);
}

.hub-drafts__empty i {
    font-size: 2.25rem;
    color: var(--admin-text-muted);
    opacity: 0.6;
}

.hub-drafts__empty p {
    margin: 0;
    font-size: var(--fs-sm);
}

.hub-drafts__empty a {
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--admin-accent);
    text-decoration: none;
    font-weight: 500;
}

.hub-drafts__empty a:hover {
    text-decoration: underline;
}

/* ── Secondary nav ─────────────────────────────────────────────────────── */
.hub-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px dashed var(--admin-line);
    font-size: var(--fs-sm);
}

.hub-secondary a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--admin-text-muted);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}

.hub-secondary a:hover {
    color: var(--admin-accent);
}

.hub-secondary a i {
    font-size: 1rem;
}

/* ── SoStatTile ────────────────────────────────────────────────────────── */
.so-stat-tile {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius-sm);
}

.so-stat-tile__icon {
    color: var(--admin-text-muted);
    font-size: 1.25rem;
}

.so-stat-tile__body {
    display: flex;
    flex-direction: column;
}

.so-stat-tile__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    font-weight: 500;
}

.so-stat-tile__value {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.so-stat-tile__delta {
    font-size: var(--fs-xs);
    color: var(--admin-text-muted);
    margin-top: 2px;
}

/* ── SoMobileFallback ──────────────────────────────────────────────────── */
.so-mobile-fallback {
    display: none;
}

@media (max-width: 767px) {
    .hub-shell { display: none; }
    .so-mobile-fallback {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: var(--s-6);
        text-align: center;
        gap: var(--s-4);
        background: var(--c-paper);
        color: var(--admin-text);
    }
    .so-mobile-fallback__icon {
        font-size: 4rem;
        color: var(--admin-accent);
    }
    .so-mobile-fallback__title {
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        font-weight: 500;
        margin: 0;
        letter-spacing: -0.02em;
    }
    .so-mobile-fallback__lede {
        font-size: var(--fs-base);
        color: var(--admin-text-muted);
        max-width: 24rem;
        margin: 0;
    }
    .so-mobile-fallback__hint {
        font-size: var(--fs-sm);
        color: var(--admin-text-muted);
        opacity: 0.7;
    }
}

/* ── Tablet emergency (768-1023) ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .hub-main {
        padding: var(--s-5) var(--s-4) var(--s-6);
    }
    .so-hub-cards {
        grid-template-columns: 1fr;
    }
}


/* ── Bespoke Quote detail modal (admin) ─────────────────────────────────── */
.bq-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1080;
    animation: bq-fade-in 0.18s ease-out;
}
.bq-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bq-pop-in 0.22s cubic-bezier(.2,.9,.25,1);
}
@keyframes bq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bq-pop-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bq-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}
.bq-modal-eyebrow { margin: 0 0 0.25rem; font-size: 0.78rem; color: #64748b; }
.bq-modal-eyebrow code {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    color: #0f172a;
}
.bq-modal-title { margin: 0 0 0.2rem; font-size: 1.25rem; font-weight: 600; color: #0f172a; }
.bq-modal-meta { margin: 0; font-size: 0.85rem; color: #64748b; }
.bq-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.bq-modal-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #475569;
    margin: 0 0 0.6rem;
}
.bq-defs {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.4rem 0.85rem;
    margin: 0;
    font-size: 0.9rem;
}
.bq-defs dt { color: #64748b; font-weight: 500; }
.bq-defs dd { margin: 0; color: #0f172a; }
.bq-modal-note {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.5;
    white-space: pre-wrap;
}
.bq-modal-foot {
    padding: 0.85rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
@media (max-width: 720px) {
    .bq-modal { width: calc(100vw - 1rem); }
    .bq-defs { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .bq-defs dt { color: #475569; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
}