@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Status palette — validated via the dataviz skill's palette
       reference against the light chart surface (#fcfcfb). Never
       repurpose these for categorical series; they only ever mean
       good/warning/serious/critical (billing traffic-light, emergency
       alert). */
    --color-status-good: #0ca30c;
    --color-status-warning: #fab219;
    --color-status-serious: #ec835a;
    --color-status-critical: #d03b3b;

    /* Light, clean surfaces. Layered from the page background up to the
       most-raised card/hover state so elevation reads through soft
       lightness steps and shadow, not heavy borders. */
    --color-surface-0: #fcfcfb;
    --color-surface-1: #ffffff;
    --color-surface-2: #f3f4f6;
    --color-surface-3: #eef0f3;
    --color-border-subtle: #e4e7ec;
    --color-border-default: #dbdee3;

    --color-ink-primary: #0b2754;
    --color-ink-secondary: #6f7b8d;
    --color-ink-muted: #98a2b3;

    /* Accent — drawn from the Meduvo Health logo's navy, so the product
       chrome (links, focus rings, primary buttons) reads as on-brand
       rather than a generic SaaS blue. */
    --color-accent: #0b2754;
    --color-accent-hover: #071b3d;
    --color-accent-muted: #e9eef7;

    /* Brand orange — the logo's cross mark. Used sparingly as a warm
       secondary accent (highlights, decorative marks), never in place
       of the reserved status palette. */
    --color-brand-orange: #ff7a35;
    --color-brand-orange-hover: #e8631f;
    --color-brand-orange-muted: #fff1e9;

    --color-chart-surface: #fcfcfb;
    --color-chart-gridline: #e1e0d9;
}

@layer components {
    .status-pill {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium;
    }

    .status-pill-good {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border border-[color-mix(in_srgb,var(--color-status-good)_40%,transparent)] bg-[color-mix(in_srgb,var(--color-status-good)_14%,transparent)] text-[color:color-mix(in_srgb,var(--color-status-good)_78%,white)];
    }

    .status-pill-warning {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border border-[color-mix(in_srgb,var(--color-status-warning)_40%,transparent)] bg-[color-mix(in_srgb,var(--color-status-warning)_14%,transparent)] text-[color:color-mix(in_srgb,var(--color-status-warning)_85%,white)];
    }

    .status-pill-critical {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border border-[color-mix(in_srgb,var(--color-status-critical)_45%,transparent)] bg-[color-mix(in_srgb,var(--color-status-critical)_16%,transparent)] text-[color:color-mix(in_srgb,var(--color-status-critical)_82%,white)];
    }

    .status-pill-neutral {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border border-border-default bg-surface-3 text-ink-secondary;
    }

    .card {
        @apply rounded-2xl border border-border-subtle bg-surface-1 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_8px_24px_-12px_rgba(11,39,84,0.10)] transition-shadow duration-200;
    }

    .card-raised {
        @apply rounded-2xl border border-border-subtle bg-surface-1 shadow-[0_2px_4px_rgba(11,39,84,0.05),0_16px_40px_-12px_rgba(11,39,84,0.16)];
    }

    .card-hover {
        @apply hover:shadow-[0_1px_2px_rgba(11,39,84,0.04),0_12px_28px_-10px_rgba(11,39,84,0.16)] hover:-translate-y-0.5 hover:border-accent/20 transition-all duration-200;
    }

    .icon-badge {
        @apply relative shrink-0 w-10 h-10 rounded-xl flex items-center justify-center;
    }

    .input-field {
        @apply w-full rounded-lg border border-border-default bg-white px-3 py-2.5 text-sm text-ink-primary placeholder:text-ink-muted focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-1.5 rounded-lg bg-accent text-white text-sm font-medium px-4 py-2 shadow-sm hover:bg-accent-hover hover:shadow-md active:scale-[0.98] transition-all;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-default bg-white text-ink-primary text-sm font-medium px-4 py-2 hover:bg-surface-2 hover:border-ink-muted transition-colors;
    }

    .table-shell {
        @apply w-full text-sm;
    }

    .table-shell thead {
        @apply bg-accent-muted text-accent text-[0.6875rem] font-bold uppercase tracking-wider border-b border-accent/15;
    }

    .table-shell tbody tr {
        @apply border-t border-border-subtle transition-colors;
    }

    .table-shell tbody tr:hover {
        @apply bg-accent-muted/40;
    }

    .nav-link {
        @apply flex items-center gap-2.5 px-3 py-2 rounded-lg font-medium text-sm transition-all;
    }

    .nav-link-active {
        @apply bg-accent text-white shadow-sm;
    }

    .nav-link-inactive {
        @apply text-ink-secondary hover:bg-surface-2 hover:text-ink-primary;
    }

    .glass-page {
        background:
            linear-gradient(135deg, rgba(232, 244, 245, 0.96) 0%, rgba(252, 252, 251, 0.98) 42%, rgba(255, 244, 236, 0.94) 100%),
            linear-gradient(90deg, rgba(11, 39, 84, 0.045) 1px, transparent 1px),
            linear-gradient(0deg, rgba(11, 39, 84, 0.035) 1px, transparent 1px);
        background-size: auto, 56px 56px, 56px 56px;
    }

    .glass-chrome {
        @apply border border-white/60 bg-white/70 backdrop-blur-xl shadow-[0_18px_55px_-38px_rgba(11,39,84,0.45)];
    }

    .glass-panel {
        @apply rounded-lg border border-white/70 bg-white/[0.72] backdrop-blur-xl shadow-[0_1px_2px_rgba(11,39,84,0.04),0_22px_60px_-42px_rgba(11,39,84,0.42)];
    }

    .glass-panel-muted {
        @apply rounded-lg border border-white/60 bg-white/[0.58] backdrop-blur-xl shadow-[0_16px_44px_-38px_rgba(11,39,84,0.34)];
    }

    .glass-section-title {
        @apply flex flex-col gap-2 border-b border-white/70 pb-4 sm:flex-row sm:items-center sm:justify-between;
    }

    .glass-nav-chip {
        @apply rounded-lg border border-white/70 bg-white/[0.64] px-3 py-2 text-sm font-semibold text-ink-secondary shadow-sm backdrop-blur transition-colors hover:bg-white/90 hover:text-accent;
    }

    .gradient-rule {
        height: 3px;
        border-radius: 9999px;
        background: linear-gradient(90deg, #23666b 0%, #ff7a35 48%, #7a9f5a 100%);
    }

    .modern-hero-panel {
        position: relative;
        overflow: hidden;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background:
            linear-gradient(135deg, rgba(7, 23, 54, 0.96) 0%, rgba(18, 82, 94, 0.92) 54%, rgba(255, 122, 53, 0.86) 142%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size: auto, 34px 34px, 34px 34px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 34px 90px -52px rgba(7, 23, 54, 0.95),
            0 0 70px -42px rgba(255, 122, 53, 0.9);
    }

    .modern-hero-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, transparent 24%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
        mix-blend-mode: screen;
    }

    .modern-hero-panel > * {
        position: relative;
        z-index: 1;
    }

    body.app-modern {
        background:
            linear-gradient(125deg, #0817341a, #0000 29%),
            linear-gradient(305deg, #f5753394, #0000 34%),
            linear-gradient(#edf8fb, #fbfcff 42%, #fff6ef);
    }

    body.app-modern::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(118deg, transparent 0 18%, rgba(35, 102, 107, 0.09) 18% 19%, transparent 19% 44%, rgba(255, 122, 53, 0.08) 44% 45%, transparent 45%),
            repeating-linear-gradient(90deg, rgba(11, 39, 84, 0.035) 0 1px, transparent 1px 72px),
            repeating-linear-gradient(0deg, rgba(11, 39, 84, 0.026) 0 1px, transparent 1px 72px);
    }

    .app-modern .glass-chrome {
        border-color: rgba(255, 255, 255, 0.72);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 250, 253, 0.64)),
            linear-gradient(90deg, rgba(255, 122, 53, 0.08), transparent 38%, rgba(35, 102, 107, 0.10));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 20px 70px -46px rgba(11, 39, 84, 0.7),
            0 0 48px -38px rgba(35, 102, 107, 0.85);
    }

    .app-modern aside.glass-chrome {
        border-color: rgba(255, 255, 255, 0.12);
        background:
            linear-gradient(180deg, rgba(7, 23, 54, 0.96), rgba(16, 69, 80, 0.92) 56%, rgba(8, 25, 48, 0.96)),
            linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: auto, 44px 44px;
        box-shadow:
            inset -1px 0 0 rgba(255, 255, 255, 0.11),
            22px 0 72px -56px rgba(7, 23, 54, 0.95);
    }

    .app-modern aside.glass-chrome .border-border-subtle {
        border-color: rgba(255, 255, 255, 0.13) !important;
    }

    .app-modern aside.glass-chrome .nav-link-inactive {
        color: rgba(229, 244, 247, 0.72);
    }

    .app-modern aside.glass-chrome .nav-link-inactive:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .app-modern aside.glass-chrome .nav-link-active {
        color: #ffffff;
        background: linear-gradient(135deg, #ff7a35 0%, #23666b 58%, #0b2754 132%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 14px 34px -22px rgba(255, 122, 53, 0.95);
    }

    .app-modern aside.glass-chrome .text-ink-muted,
    .app-modern aside.glass-chrome .text-ink-secondary {
        color: rgba(229, 244, 247, 0.62);
    }

    .app-modern aside.glass-chrome p,
    .app-modern aside.glass-chrome button {
        color: rgba(255, 255, 255, 0.82);
    }

    .app-modern aside.glass-chrome .bg-accent-muted {
        background: rgba(255, 255, 255, 0.13);
    }

    .app-modern aside.glass-chrome .text-accent {
        color: #ffffff;
    }

    .app-modern .glass-panel,
    .app-modern .card,
    .app-modern .card-raised {
        border-radius: 0.75rem;
        border-color: rgba(255, 255, 255, 0.82);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(240, 251, 253, 0.62)),
            linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 40%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            0 1px 0 rgba(255, 255, 255, 0.72),
            0 28px 78px -48px rgba(11, 39, 84, 0.62),
            0 0 64px -46px rgba(255, 122, 53, 0.72);
        backdrop-filter: blur(18px);
    }

    .app-modern .glass-panel-muted {
        border-color: rgba(255, 255, 255, 0.70);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 249, 252, 0.50)),
            linear-gradient(90deg, rgba(255, 122, 53, 0.05), transparent 34%, rgba(35, 102, 107, 0.07));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            0 18px 54px -42px rgba(11, 39, 84, 0.5),
            0 0 46px -38px rgba(35, 102, 107, 0.75);
        backdrop-filter: blur(16px);
    }

    .app-modern .card-hover:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 122, 53, 0.38);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            0 30px 82px -48px rgba(11, 39, 84, 0.68),
            0 0 70px -42px rgba(255, 122, 53, 0.82);
    }

    .app-modern .glass-section-title {
        border-color: rgba(255, 255, 255, 0.78);
    }

    .app-modern .gradient-rule {
        height: 4px;
        background: linear-gradient(90deg, #0b2754 0%, #23666b 32%, #ff7a35 68%, #f8d66d 100%);
        box-shadow: 0 0 24px rgba(255, 122, 53, 0.34);
    }

    .app-modern .glass-nav-chip {
        border-color: rgba(255, 255, 255, 0.76);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(237, 250, 252, 0.54));
        color: #244765;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.86),
            0 12px 26px -22px rgba(11, 39, 84, 0.7);
    }

    .app-modern .glass-nav-chip:hover {
        color: #0b2754;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 242, 232, 0.72));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 18px 34px -24px rgba(255, 122, 53, 0.62);
    }

    .app-modern .input-field {
        border-color: rgba(35, 102, 107, 0.20);
        background: rgba(255, 255, 255, 0.78);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.86),
            0 10px 22px -20px rgba(11, 39, 84, 0.5);
    }

    .app-modern .input-field:focus {
        border-color: rgba(35, 102, 107, 0.72);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 0 0 3px rgba(35, 102, 107, 0.12),
            0 0 28px -18px rgba(255, 122, 53, 0.8);
    }

    .app-modern .btn-primary {
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: linear-gradient(135deg, #0b2754 0%, #23666b 58%, #ff7a35 148%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 18px 34px -24px rgba(11, 39, 84, 0.9),
            0 0 42px -30px rgba(255, 122, 53, 0.95);
    }

    .app-modern .btn-primary:hover {
        background: linear-gradient(135deg, #071b3d 0%, #1d727e 56%, #ff7a35 138%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 20px 38px -24px rgba(11, 39, 84, 0.95),
            0 0 50px -28px rgba(255, 122, 53, 1);
    }

    .app-modern .btn-secondary {
        border-color: rgba(35, 102, 107, 0.20);
        background: rgba(255, 255, 255, 0.70);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.88),
            0 12px 26px -24px rgba(11, 39, 84, 0.7);
        backdrop-filter: blur(14px);
    }

    .app-modern .btn-secondary:hover {
        border-color: rgba(255, 122, 53, 0.38);
        background: rgba(255, 249, 244, 0.92);
    }

    .app-modern .icon-badge {
        border: 1px solid rgba(255, 255, 255, 0.62);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(235, 249, 252, 0.48)),
            linear-gradient(135deg, rgba(255, 122, 53, 0.12), rgba(35, 102, 107, 0.12));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.86),
            0 14px 28px -24px rgba(11, 39, 84, 0.72);
    }

    .app-modern .table-shell thead {
        border-color: transparent;
        background: linear-gradient(90deg, #0b2754, #23666b 74%, #ff7a35 160%);
        color: rgba(255, 255, 255, 0.92);
    }

    .app-modern .table-shell tbody tr {
        border-color: rgba(255, 255, 255, 0.68);
    }

    .app-modern .table-shell tbody tr:hover {
        background: rgba(255, 122, 53, 0.08);
    }

    .app-modern .status-pill-neutral {
        border-color: rgba(35, 102, 107, 0.18);
        background: rgba(255, 255, 255, 0.66);
        color: #31536a;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .app-modern .status-pill-good {
        box-shadow: 0 0 24px -15px rgba(12, 163, 12, 0.95);
    }

    .app-modern .status-pill-warning {
        box-shadow: 0 0 24px -15px rgba(250, 178, 25, 0.95);
    }

    .app-modern .status-pill-critical {
        box-shadow: 0 0 24px -15px rgba(208, 59, 59, 0.95);
    }

    .app-modern .tenant-kpi,
    .app-modern .tenant-stage-filter,
    .app-modern .tenant-review-action,
    .app-modern .tenant-row {
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease,
            color 180ms ease;
    }

    .app-modern .tenant-kpi:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.38);
        background: rgba(255, 255, 255, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 18px 42px -30px rgba(255, 122, 53, 0.9);
    }

    .app-modern .tenant-stage-filter:hover {
        transform: translateY(-1px);
    }

    .app-modern .tenant-row:hover {
        background:
            linear-gradient(90deg, rgba(255, 122, 53, 0.10), rgba(255, 255, 255, 0.30) 38%, rgba(35, 102, 107, 0.08));
        box-shadow: inset 3px 0 0 rgba(255, 122, 53, 0.72);
    }

    .app-modern .tenant-row:hover .tenant-review-action {
        transform: translateX(2px);
        border-color: rgba(255, 122, 53, 0.46);
        background: rgba(255, 249, 244, 0.96);
        box-shadow: 0 14px 28px -24px rgba(255, 122, 53, 0.95);
    }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fade-up 0.4s ease-out forwards;
}

@keyframes flow-progress-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@keyframes flow-panel-rise {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flow-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes flow-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 53, 0.28); }
    70% { box-shadow: 0 0 0 12px rgba(255, 122, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 53, 0); }
}

.flow-canvas {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.96)),
        linear-gradient(90deg, rgba(11, 39, 84, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(11, 39, 84, 0.04) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
}

.flow-line {
    position: relative;
    overflow: hidden;
}

.flow-line::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--flow-progress, 16%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-status-good));
    transition: width 420ms ease;
}

.flow-line::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: flow-progress-sweep 2.8s ease-in-out infinite;
}

.flow-panel-active {
    animation: flow-panel-rise 340ms ease-out;
}

.flow-float {
    animation: flow-float 5.5s ease-in-out infinite;
}

.flow-pulse-ring {
    animation: flow-pulse-ring 1.9s ease-out infinite;
}

.flow-stage-card {
    transform: translateY(0);
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.flow-stage-card:hover,
.flow-stage-card:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.flow-stage-active {
    box-shadow: 0 16px 42px -28px rgba(11, 39, 84, 0.56), inset 0 0 0 1px rgba(11, 39, 84, 0.08);
}

.flow-signal-dot {
    transition: left 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up {
        animation-duration: 0.01ms !important;
    }

    .flow-line::after,
    .flow-panel-active,
    .flow-float,
    .flow-pulse-ring {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .flow-stage-card:hover,
    .flow-stage-card:focus-visible {
        transform: none;
    }
}

@keyframes alert-flash {
    0%, 100% { background-color: var(--color-status-critical); }
    50% { background-color: #b02e2e; }
}

.alert-flashing {
    animation: alert-flash 1s ease-in-out infinite;
}

[x-cloak] {
    display: none !important;
}

.kiosk-shell-bg {
    background:
        linear-gradient(180deg, rgba(239, 248, 249, 0.98) 0%, rgba(252, 252, 251, 0.98) 42%, rgba(244, 248, 242, 0.97) 100%),
        linear-gradient(90deg, rgba(11, 39, 84, 0.035) 1px, transparent 1px);
    background-size: auto, 56px 56px;
}

.kiosk-side-brand {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 198, 201, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(233, 245, 246, 0.76) 54%, rgba(255, 241, 233, 0.78)),
        var(--color-surface-1);
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 38px -32px rgba(11, 39, 84, 0.4);
}

.kiosk-side-brand::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--color-accent) 0%, #23666b 44%, #7fb8bd 70%, var(--color-brand-orange) 100%);
}

.kiosk-side-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 0.625rem;
}

.kiosk-side-details > div,
.kiosk-side-assessment {
    min-width: 0;
    border: 1px solid rgba(139, 198, 201, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.625rem 0.7rem;
}

.kiosk-welcome-band {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #e9f5f6 0%, #f7fbf3 58%, #fff6ef 100%);
}

.kiosk-welcome-band::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
    background: linear-gradient(90deg, #8bc6c9 0%, #9ccf9f 48%, #ffb17f 100%);
}

.kiosk-panel,
.kiosk-question-panel {
    border: 1px solid rgba(139, 198, 201, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(11, 39, 84, 0.035), 0 18px 48px -32px rgba(11, 39, 84, 0.22);
}

.kiosk-question-panel {
    position: relative;
    padding: clamp(1.25rem, 2.2vw, 2rem);
}

.kiosk-status-pulse {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--color-status-good);
    box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.38);
    animation: kiosk-status-pulse 1.8s ease-out infinite;
}

@keyframes kiosk-status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.38); }
    70% { box-shadow: 0 0 0 14px rgba(12, 163, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}

.kiosk-idle-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 84px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 1.125rem;
    box-shadow: 0 12px 36px -28px rgba(11, 39, 84, 0.36);
}

.kiosk-idle-step span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e9f5f6;
    color: #23666b;
    font-weight: 800;
    flex: 0 0 auto;
}

.kiosk-idle-step p {
    color: var(--color-ink-primary);
    font-weight: 700;
    font-size: 1.0625rem;
}

.kiosk-menu-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 112px;
    border: 2px solid rgba(139, 198, 201, 0.42);
    border-radius: 8px;
    background: var(--color-surface-1);
    padding: 1rem;
    text-align: left;
    box-shadow: 0 1px 2px rgba(11, 39, 84, 0.035), 0 16px 40px -31px rgba(11, 39, 84, 0.24);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.kiosk-menu-action:hover,
.kiosk-menu-action:focus-visible,
.kiosk-answer-option:hover,
.kiosk-answer-option:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-accent-muted);
    box-shadow: 0 1px 2px rgba(11, 39, 84, 0.06), 0 18px 44px -28px rgba(11, 39, 84, 0.34);
    outline: none;
}

.kiosk-menu-action:active,
.kiosk-answer-option:active {
    transform: scale(0.985);
}

.kiosk-menu-icon,
.kiosk-action-arrow,
.kiosk-option-index,
.kiosk-answer-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.kiosk-menu-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

.kiosk-soft-icon {
    background: #e9f5f6;
    color: #23666b;
}

.kiosk-action-arrow,
.kiosk-answer-check {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--color-surface-2);
    color: var(--color-ink-secondary);
}

.kiosk-mini-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 9999px;
    background: var(--color-surface-2);
    color: var(--color-ink-secondary);
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.kiosk-support-note {
    border: 1px solid rgba(139, 198, 201, 0.35);
    border-radius: 8px;
    background: rgba(233, 245, 246, 0.72);
    color: #355f62;
    padding: 0.875rem 1rem;
    font-weight: 700;
}

.kiosk-comfort-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    border-radius: 9999px;
    background: rgba(233, 245, 246, 0.9);
    color: #23666b;
    padding: 0.35rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 800;
}

.kiosk-comfort-pill span {
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: #7fb8bd;
    box-shadow: 0 0 0 0 rgba(127, 184, 189, 0.28);
    animation: kiosk-status-pulse 2.2s ease-out infinite;
}

.kiosk-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.kiosk-loading-card {
    min-height: 132px;
    border-radius: 8px;
    border: 1px solid var(--color-border-subtle);
    background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface-1) 45%, var(--color-surface-2) 90%);
    background-size: 220% 100%;
    animation: kiosk-loading-sweep 1.15s ease-in-out infinite;
}

@keyframes kiosk-loading-sweep {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.kiosk-spinner {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--color-accent);
    animation: kiosk-spin 0.7s linear infinite;
}

@keyframes kiosk-spin {
    to { transform: rotate(360deg); }
}

.kiosk-progress-ring {
    --progress: 0%;
    position: relative;
    width: 136px;
    height: 136px;
    border-radius: 9999px;
    background: conic-gradient(#23666b var(--progress), #eef0f3 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiosk-progress-ring::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background: var(--color-surface-1);
}

.kiosk-progress-ring span {
    position: relative;
    z-index: 1;
    color: var(--color-ink-primary);
    font-size: 1.5rem;
    font-weight: 800;
}

.kiosk-progress-ring-orange {
    background: conic-gradient(#d77942 var(--progress), #eef0f3 0);
}

.kiosk-answer-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 88px;
    border: 2px solid rgba(139, 198, 201, 0.42);
    border-radius: 8px;
    background: var(--color-surface-1);
    color: var(--color-ink-primary);
    padding: 1.125rem 1.25rem;
    text-align: left;
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    font-weight: 700;
    line-height: 1.25;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.kiosk-option-index {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #e9f5f6;
    color: #23666b;
    font-size: 1rem;
    font-weight: 800;
}

.kiosk-choice-active {
    border-color: #23666b !important;
    background: #e9f5f6 !important;
}

.kiosk-choice-active .kiosk-option-index,
.kiosk-choice-active .kiosk-answer-check,
.kiosk-choice-active .kiosk-action-arrow {
    background: #23666b;
    color: #ffffff;
}

.kiosk-identity-shell {
    background:
        linear-gradient(180deg, rgba(35, 102, 107, 0.96) 0%, rgba(72, 133, 125, 0.95) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: auto, 48px 48px;
}

.kiosk-identity-card {
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 64px -28px rgba(0, 0, 0, 0.48);
}

.kiosk-soft-button {
    background: #ffffff;
    color: #23666b;
    box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.5);
}

.kiosk-staff-button {
    border-color: rgba(208, 59, 59, 0.28);
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
    .kiosk-side-details {
        grid-template-columns: 1fr;
    }

    .kiosk-menu-action,
    .kiosk-answer-option {
        align-items: flex-start;
    }

    .kiosk-menu-icon {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-status-pulse,
    .kiosk-loading-card,
    .kiosk-spinner {
        animation: none !important;
    }

    .kiosk-menu-action,
    .kiosk-answer-option {
        transition: none;
    }
}

/*
 * Kiosk safety-halt screen (resources/views/kiosk/terminal.blade.php) —
 * deliberately its own warm/soft palette, entirely separate from the
 * app's clinical navy/orange brand colors used everywhere else. This is
 * the one screen where the goal is to feel calming to a patient who just
 * disclosed something serious, not to look like the rest of the product.
 */
.kiosk-calm-bg {
    background: linear-gradient(160deg, #f3ede1 0%, #e8ecdf 55%, #dde6dc 100%);
}

.kiosk-breathe-wrap {
    position: relative;
    width: 176px;
    height: 176px;
}

.kiosk-breathe-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(140, 168, 143, 0.25);
    animation: kiosk-breathe-scale 8s ease-in-out infinite;
}

.kiosk-breathe-circle {
    position: absolute;
    inset: 28px;
    border-radius: 9999px;
    background: linear-gradient(160deg, #9db89f 0%, #7fa084 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(90, 120, 95, 0.25);
    animation: kiosk-breathe-scale 8s ease-in-out infinite;
}

/* Paced 4s-in / 4s-out cycle (8s total) — a standard, gentle grounding
   cadence, slow enough not to feel rushed on a device someone may be
   looking at while distressed. */
@keyframes kiosk-breathe-scale {
    0%, 100% { transform: scale(0.82); }
    50% { transform: scale(1); }
}

.kiosk-breathe-word {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 18px;
    width: max-content;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #5c6f5e;
    opacity: 0;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.kiosk-breathe-word-in {
    animation-name: kiosk-breathe-word-in;
}

.kiosk-breathe-word-out {
    animation-name: kiosk-breathe-word-out;
}

@keyframes kiosk-breathe-word-in {
    0%, 4% { opacity: 0; }
    12%, 38% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

@keyframes kiosk-breathe-word-out {
    0%, 46% { opacity: 0; }
    54%, 88% { opacity: 1; }
    96%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-breathe-ring,
    .kiosk-breathe-circle {
        animation: none;
        transform: scale(0.94);
    }

    .kiosk-breathe-word {
        animation: none;
        opacity: 0;
    }

    .kiosk-breathe-word-in {
        opacity: 1;
    }
}