/**
 * ============================================================
 * Unya App Shell – Token-driven, mobile-first styling
 * (Theme Token Bridge Aware)
 * ============================================================
 *
 * This file assumes the HTML structure from Athenian_Unya_App_Shell.
 * Header expects:
 *
 * <header class="unya-app-shell__header">
 *   <div class="unya-app-shell__header-inner">
 *     <div class="unya-app-shell__brand">…</div>
 *     <div class="unya-app-shell__user">…</div>
 *   </div>
 * </header>
 */

/* ------------------------------------------------------------
 * Token bridge: map global theme tokens → Unya app tokens
 * ------------------------------------------------------------ */

:where(.unya-app-shell) {
    /* Raw brand from token bridge (if available) */
    --unya-brand-1-raw: var(--ctl-c1, #38bdf8);
    --unya-brand-2-raw: var(--ctl-c2, #f472b6);
    --unya-brand-3-raw: var(--ctl-c3, #22c55e);

    /* Allow optional project-specific aliases too (if you later set them) */
    --unya-brand-1: var(--ab-brand-1, var(--unya-brand-1-raw));
    --unya-brand-2: var(--ab-brand-2, var(--unya-brand-2-raw));
    --unya-brand-3: var(--ab-brand-3, var(--unya-brand-3-raw));

    /* Surfaces / text from site-wide token bridge */
    --unya-surface-1: var(--surface-1, #020617);
    --unya-surface-2: var(--surface-2, #020617);
    --unya-surface-3: var(--surface-3, #0f172a);

    --unya-text-high: var(--text-high, #e5e7eb);
    --unya-text-mid:  var(--text-mid,  #cbd5f5);
    --unya-text-low:  var(--text-low,  #94a3b8);

    --unya-border-raw: var(--border, #1e293b);
    --unya-border:     color-mix(in oklch, var(--unya-border-raw) 100%, transparent);

    --unya-ring:        var(--focus-ring, rgba(56, 189, 248, 0.5));
    --unya-ring-strong: var(--focus-ring-strong, rgba(56, 189, 248, 0.8));

    /* Radii / gaps from globals if present */
    --unya-radius:    var(--radius, 0.75rem);
    --unya-radius-lg: var(--radius-lg, 1rem);
    --unya-radius-sm: calc(var(--unya-radius) * 0.66);
    --unya-gap:       var(--gap, 1.25rem);

    /* Shadow / drop aliases */
    --unya-drop-sm: var(--drop-sm, 0 8px 18px rgba(0,0,0,.45));
    --unya-drop-md: var(--drop-md, 0 18px 40px rgba(0,0,0,.5));
    --unya-shadow-soft:   var(--unya-drop-md);
    --unya-shadow-subtle: var(--unya-drop-sm);

    /* Unya-local semantic aliases */
    --unya-bg:             var(--unya-surface-2);
    --unya-bg-alt:         var(--unya-surface-1);
    --unya-bg-panel:       var(--unya-surface-3);
    --unya-bg-panel-light: color-mix(in oklch, var(--unya-surface-3) 88%, transparent);

    --unya-text:        var(--unya-text-high);
    --unya-text-soft:   var(--unya-text-mid);
    --unya-text-muted:  var(--unya-text-low);

    --unya-accent:       var(--unya-brand-1);
    --unya-accent-soft:  color-mix(in oklch, var(--unya-brand-1) 16%, transparent);
    --unya-accent-strong: color-mix(in oklch, var(--unya-brand-1) 70%, black);

    --unya-danger:       var(--unya-red, #f87171);
    --unya-danger-soft:  color-mix(in oklch, var(--unya-danger) 20%, transparent);
    --unya-success:      var(--unya-green, #4ade80);
    --unya-success-soft: color-mix(in oklch, var(--unya-success) 20%, transparent);

    /* Radii & shadow detail */
    --unya-radius-xs: 0.35rem;
    --unya-radius-md: var(--unya-radius);
    --unya-radius-xl: var(--unya-radius-lg);
    --unya-radius-pill: 999px;

    /* Spacing scale */
    --unya-space-2xs: 0.15rem;
    --unya-space-xs:  0.25rem;
    --unya-space-sm:  0.5rem;
    --unya-space-md:  0.75rem;
    --unya-space-lg:  1rem;
    --unya-space-xl:  1.5rem;
    --unya-space-2xl: 2rem;

    /* Typography */
    --unya-font-sans: var(--unya-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
    --unya-text-xs: 0.75rem;
    --unya-text-sm: 0.875rem;
    --unya-text-md: 0.95rem;
    --unya-text-lg: 1.05rem;
    --unya-heading-sm: 1.1rem;
    --unya-heading-md: 1.35rem;
    --unya-heading-lg: 1.6rem;

    /* Layout tokens */
    --unya-max-width: 480px;
    --unya-bottom-nav-height: 3.75rem;
    --unya-safe-bottom: env(safe-area-inset-bottom, 0);

    color-scheme: dark;
}

/* Light-mode preference tweak (optional) */
@media (prefers-color-scheme: light) {
    :where(.unya-app-shell) {
        /* Nudge surfaces slightly brighter in light-pref environments */
        --unya-surface-1: color-mix(in oklch, var(--surface-1, #020617) 85%, white);
        --unya-surface-2: color-mix(in oklch, var(--surface-2, #020617) 80%, white);
        --unya-surface-3: color-mix(in oklch, var(--surface-3, #0f172a) 78%, white);

        --unya-bg:       var(--unya-surface-2);
        --unya-bg-alt:   var(--unya-surface-1);
        --unya-bg-panel: var(--unya-surface-3);
    }
}

/* ============================================================
 * Base layout
 * ============================================================
 */

.unya-app-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    font-family: var(--unya-font-sans);
    color: var(--unya-text);
    overflow: hidden;
    background:
        radial-gradient(
            circle at top left,
            color-mix(in oklch, var(--unya-brand-1) 10%, var(--unya-bg)),
            var(--unya-bg)
        );
}

/* Gradient background layer */
.unya-app-shell__bg {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%,  color-mix(in oklch, var(--unya-brand-1) 22%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--unya-brand-2) 20%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, color-mix(in oklch, var(--unya-brand-3) 16%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 50% 40%, rgba(15, 23, 42, 0.9), #020617 75%);
    z-index: 0;
}

/* A central content container so it feels like a phone view even on desktop */
.unya-app-shell__main,
.unya-app-shell__header,
.unya-app-shell__bottom-nav {
    position: relative;
    z-index: 1;
}

/* Constrain the inner content like a device frame */
.unya-app-shell__main {
    flex: 1 1 auto;
    padding: var(--unya-space-lg) var(--unya-space-lg)
        calc(var(--unya-bottom-nav-height) + var(--unya-safe-bottom) + var(--unya-space-md));
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* Inner "phone" container */
.unya-app-shell__views {
    width: 100%;
    max-width: var(--unya-max-width);
    margin: 0 auto;
}

/* ============================================================
 * Header
 * ============================================================
 */

.unya-app-shell__header {
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(20px);
    background: linear-gradient(
        to bottom,
        color-mix(in oklch, var(--unya-bg-panel) 96%, transparent),
        color-mix(in oklch, var(--unya-bg-panel) 80%, transparent),
        transparent
    );
    padding: var(--unya-space-md) var(--unya-space-lg) var(--unya-space-sm);
    display: flex;
    justify-content: center;
}

.unya-app-shell__header-inner {
    width: 100%;
    max-width: var(--unya-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--unya-space-lg);
}

.unya-app-shell__brand {
    display: flex;
    align-items: center;
    gap: var(--unya-space-md);
}

.unya-app-shell__logo-mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in oklch, var(--unya-brand-1) 35%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 100% 100%, color-mix(in oklch, var(--unya-brand-2) 30%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--unya-bg-panel), var(--unya-bg-alt));
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.8),
        0 0 0 1px var(--unya-border);
}

.unya-app-shell__logo-initial {
    font-weight: 700;
    font-size: 1.25rem;
    color: #f9fafb;
    letter-spacing: 0.02em;
}

.unya-app-shell__brand-text {
    display: flex;
    flex-direction: column;
    gap: var(--unya-space-2xs);
}

.unya-app-shell__brand-title {
    font-size: var(--unya-heading-md);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.unya-app-shell__brand-subtitle {
    font-size: var(--unya-text-xs);
    color: var(--unya-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.unya-app-shell__user {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.unya-app-shell__user-label {
    padding: 0.35rem 0.75rem;
    border-radius: var(--unya-radius-pill);
    font-size: var(--unya-text-xs);
    color: var(--unya-text-soft);
    background:
        radial-gradient(circle at 0 0, color-mix(in oklch, var(--unya-brand-1) 18%, transparent) 0%, transparent 60%),
        color-mix(in oklch, var(--unya-bg-panel) 90%, transparent);
    border: 1px solid var(--unya-border);
}

/* ============================================================
 * Views & cards
 * ============================================================
 */

.unya-app-shell__view {
    display: none;
}

.unya-app-shell__view.is-active {
    display: block;
}

.unya-app-shell__card {
    margin-top: var(--unya-space-lg);
    border-radius: var(--unya-radius-xl);
    background: linear-gradient(
        135deg,
        color-mix(in oklch, var(--unya-bg-panel) 96%, transparent),
        color-mix(in oklch, var(--unya-bg-panel) 88%, transparent)
    );
    border: 1px solid var(--unya-border);
    box-shadow: var(--unya-shadow-soft);
    backdrop-filter: blur(26px);
    overflow: hidden;
}

.unya-app-shell__card-header {
    padding: var(--unya-space-lg) var(--unya-space-lg) var(--unya-space-sm);
    border-bottom: 1px solid color-mix(in oklch, var(--unya-border) 65%, transparent);
}

.unya-app-shell__card-title {
    font-size: var(--unya-heading-md);
    font-weight: 600;
    margin: 0;
}

.unya-app-shell__card-subtitle {
    margin-top: var(--unya-space-xs);
    margin-bottom: 0;
    font-size: var(--unya-text-sm);
    color: var(--unya-text-soft);
}

.unya-app-shell__card-body {
    padding: var(--unya-space-lg);
}

/* Woo content container */
.unya-app-shell__card-body--wc {
    padding: var(--unya-space-md) var(--unya-space-lg) var(--unya-space-lg);
}

.unya-app-shell__placeholder {
    margin: 0;
    font-size: var(--unya-text-sm);
    color: var(--unya-text-soft);
}

/* ============================================================
 * Form elements (Sessions tab)
 * ============================================================
 */

.unya-app-shell__app-login {
    display: flex;
    flex-direction: column;
    gap: var(--unya-space-md);
    margin-bottom: var(--unya-space-lg);
}

.unya-app-shell__field {
    display: flex;
    flex-direction: column;
    gap: var(--unya-space-xs);
}

.unya-app-shell__label {
    font-size: var(--unya-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--unya-text-muted);
}

.unya-app-shell__input {
    border-radius: var(--unya-radius-md);
    border: 1px solid color-mix(in oklch, var(--unya-border) 80%, transparent);
    background-color: color-mix(in oklch, var(--unya-bg-panel) 92%, transparent);
    padding: 0.55rem 0.75rem;
    font-size: var(--unya-text-sm);
    color: var(--unya-text);
    outline: none;
    box-shadow: 0 0 0 0 transparent;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.unya-app-shell__input::placeholder {
    color: color-mix(in oklch, var(--unya-text-muted) 80%, transparent);
}

.unya-app-shell__input:focus {
    border-color: var(--unya-accent-strong);
    box-shadow: 0 0 0 1px var(--unya-ring);
    background-color: color-mix(in oklch, var(--unya-bg-panel) 98%, transparent);
}

/* ============================================================
 * Buttons
 * ============================================================
 */

.unya-app-shell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unya-space-sm);
    margin-top: var(--unya-space-xs);
}

.unya-app-shell__btn {
    appearance: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--unya-radius-md);
    padding: 0.55rem 0.95rem;
    font-size: var(--unya-text-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--unya-space-xs);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.08s ease;
    white-space: nowrap;
}

.unya-app-shell__btn--primary {
    background: linear-gradient(135deg, var(--unya-accent), var(--unya-accent-strong));
    color: var(--unya-bg-alt);
    box-shadow: 0 10px 28px color-mix(in oklch, var(--unya-accent) 40%, transparent);
}

.unya-app-shell__btn--primary:hover {
    box-shadow: 0 12px 32px color-mix(in oklch, var(--unya-accent) 55%, transparent);
    transform: translateY(-1px);
}

.unya-app-shell__btn--primary:active {
    box-shadow: 0 6px 16px color-mix(in oklch, var(--unya-accent) 30%, transparent);
    transform: translateY(0);
}

.unya-app-shell__btn--ghost {
    background-color: color-mix(in oklch, var(--unya-bg-panel) 92%, transparent);
    color: var(--unya-text-soft);
    border: 1px solid color-mix(in oklch, var(--unya-border) 80%, transparent);
}

.unya-app-shell__btn--ghost:hover {
    background-color: color-mix(in oklch, var(--unya-brand-2) 24%, var(--unya-bg-panel));
}

.unya-app-shell__btn--ghost:active {
    background-color: color-mix(in oklch, var(--unya-bg-panel) 96%, transparent);
}

/* ============================================================
 * Status messages
 * ============================================================
 */

.unya-app-shell__status {
    margin-top: var(--unya-space-xs);
    font-size: var(--unya-text-xs);
    min-height: 1.2em;
    color: var(--unya-text-soft);
}

.unya-app-shell__status.is-error {
    color: var(--unya-danger);
}

.unya-app-shell__status.is-success {
    color: var(--unya-success);
}

.unya-app-shell__session-status {
    font-size: var(--unya-text-xs);
    padding: var(--unya-space-sm);
    border-radius: var(--unya-radius-md);
    border: 1px dashed color-mix(in oklch, var(--unya-border) 75%, transparent);
    background-color: color-mix(in oklch, var(--unya-bg-panel) 88%, transparent);
    color: var(--unya-text-soft);
}

.unya-app-shell__session-status.is-empty {
    opacity: 0.75;
}

.unya-app-shell__session-status.is-ok {
    border-style: solid;
    border-color: color-mix(in oklch, var(--unya-accent) 40%, transparent);
    background:
        radial-gradient(circle at 0 0, color-mix(in oklch, var(--unya-accent) 15%, transparent) 0%, transparent 60%),
        color-mix(in oklch, var(--unya-bg-panel) 94%, transparent);
}

.unya-app-shell__session-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--unya-radius-pill);
    background-color: var(--unya-success-soft);
    color: var(--unya-success);
    font-size: var(--unya-text-xs);
    font-weight: 500;
}

.unya-app-shell__session-meta {
    margin-top: var(--unya-space-xs);
}

/* ============================================================
 * Bottom navigation
 * ============================================================
 */

.unya-app-shell__bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 var(--unya-space-lg)
        calc(var(--unya-safe-bottom) + var(--unya-space-sm));
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.unya-app-shell__bottom-nav > * {
    pointer-events: auto;
    width: 100%;
    max-width: var(--unya-max-width);
    margin: 0 auto;
    border-radius: var(--unya-radius-pill);
    background:
        radial-gradient(circle at 0 0, color-mix(in oklch, var(--unya-accent) 15%, transparent) 0%, transparent 60%),
        color-mix(in oklch, var(--unya-bg-panel) 95%, transparent);
    border: 1px solid color-mix(in oklch, var(--unya-border) 80%, transparent);
    padding: 0.3rem;
    box-shadow: var(--unya-shadow-subtle);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--unya-space-xs);
}

.unya-app-shell__nav-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--unya-text-muted);
    font-family: var(--unya-font-sans);
    font-size: var(--unya-text-xs);
    padding: 0.35rem;
    border-radius: var(--unya-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--unya-space-2xs);
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.08s ease;
}

.unya-app-shell__nav-btn:hover {
    background-color: color-mix(in oklch, var(--unya-bg-panel) 94%, transparent);
}

.unya-app-shell__nav-btn.is-active {
    background: linear-gradient(135deg, var(--unya-accent), var(--unya-accent-strong));
    color: var(--unya-bg-alt);
    transform: translateY(-1px);
}

.unya-app-shell__nav-label {
    white-space: nowrap;
}

/* ============================================================
 * WooCommerce compatibility touches
 * ============================================================
 */

/* Base Woo typography inside the card */
.unya-app-shell__card-body--wc .woocommerce {
    font-size: var(--unya-text-sm);
    color: var(--unya-text);
}

/* Stack login/register nicely; 1 column by default */
.unya-app-shell__card-body--wc .u-columns.col2-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--unya-space-lg);
}

/* On wider viewports, go back to two columns */
@media (min-width: 720px) {
    .unya-app-shell__card-body--wc .u-columns.col2-set {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.unya-app-shell__card-body--wc label {
    color: var(--unya-text-soft);
}

/* Inputs to match dark theme */
.unya-app-shell__card-body--wc input.input-text,
.unya-app-shell__card-body--wc .woocommerce-Input {
    border-radius: var(--unya-radius-md);
    border: 1px solid color-mix(in oklch, var(--unya-border) 80%, transparent);
    background-color: color-mix(in oklch, var(--unya-bg-panel) 92%, transparent);
    padding: 0.55rem 0.75rem;
    font-size: var(--unya-text-sm);
    color: var(--unya-text);
}

/* Make Woo buttons fit inside the card aesthetic */
.unya-app-shell__card-body--wc .button,
.unya-app-shell__card-body--wc button.button,
.unya-app-shell__card-body--wc a.button {
    border-radius: var(--unya-radius-md);
    border: none;
    background: linear-gradient(135deg, var(--unya-accent), var(--unya-accent-strong));
    text-transform: none;
    font-size: var(--unya-text-sm);
    padding: 0.55rem 0.9rem;
    box-shadow: 0 10px 28px color-mix(in oklch, var(--unya-accent) 35%, transparent);
    transition:
        transform 0.08s ease,
        box-shadow 0.18s ease;
    color: var(--unya-bg-alt) !important;
}

.unya-app-shell__card-body--wc .button:hover,
.unya-app-shell__card-body--wc button.button:hover,
.unya-app-shell__card-body--wc a.button:hover {
    box-shadow: 0 12px 32px color-mix(in oklch, var(--unya-accent) 50%, transparent);
    transform: translateY(-1px);
}

/* Remove excessive margins on Woo forms */
.unya-app-shell__card-body--wc .woocommerce form {
    margin-bottom: 0;
}

/* ============================================================
 * Responsive tweaks
 * ============================================================
 */

@media (min-width: 640px) {
    .unya-app-shell__header {
        padding-top: var(--unya-space-lg);
    }

    .unya-app-shell__card {
        margin-top: var(--unya-space-xl);
    }
}