/* Reset, :root tokens, animations, layout containers */

/* --- Base & Body Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 1.5;
}
body {
    background-color: var(--bg-primary);
    background-image: none;
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* Kiosk-only body restrictions (class added by JS when deviceMode is kiosk) */
body.kiosk-device {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overscroll-behavior: none;
}

:root {
    /* Surfaces */
    --bg-primary: #1a2642;
    --bg-card: #0f1729;
    --bg-deep: #0f172a;

    /* Text */
    --text-primary: #e2e8f0;
    --text-heading: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --text-bright: #f8fafc;
    --text-light-blue: #e0e7ff;
    --text-selected: #dbeafe;

    /* Blue accent */
    --accent: #60a5fa;
    --accent-rgb: 96, 165, 250;
    --accent-deep: #04467C;

    /* Gold brand */
    --gold: #B0965A;
    --gold-light: #D4B574;
    --gold-accent: #C49739;
    --gold-rgb: 176, 150, 90;
    --gold-light-rgb: 212, 181, 116;
    --gold-cream: #f4ead2;

    /* Header gradient stops */
    --header-grad-1: #5a4a2d;
    --header-grad-2: #7d6a3f;
    --header-grad-3: #8a7447;
    --header-grad-4: #6b5a33;

    /* Status: red / emergency */
    --red: #ef4444;
    --red-dark: #dc2626;
    --red-deep: #b91c1c;
    --red-darker: #991b1b;
    --red-darkest: #7f1d1d;
    --red-light: #fca5a5;

    /* Buttons */
    --btn-blue: #3b82f6;
    --btn-blue-dark: #2563eb;
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-alt: #10b981;
    --green-alt-dark: #059669;

    /* Status: green / feedback */
    --green-light: #a7f3d0;
    --feedback-dark: #1a4d3a;
    --feedback-mid: #24604A;
    --feedback-light: #2d7359;

    /* Text muted RGB (for rgba) */
    --text-muted-rgb: 148, 163, 184;

    /* Floor colors */
    --floor-1: #6B6D70;  --floor-1-dark: #46474A;  --floor-1-light: #8A8C8F;
    --floor-2: #A0B8E7;  --floor-2-dark: #7a94c2;  --floor-2-light: #c5d5f0;
    --floor-3: #BED1AC;  --floor-3-dark: #9ab385;  --floor-3-light: #d4e2c5;
    --floor-4: #8A9A5B;  --floor-4-dark: #6b7a44;  --floor-4-light: #a5b478;
    --floor-5: #016667;  --floor-5-dark: #014748;  --floor-5-light: #028586;
    --floor-6: #82B0B6;  --floor-6-dark: #648a8f;  --floor-6-light: #a1c7cc;
    --floor-7: #634150;  --floor-7-dark: #4a313c;  --floor-7-light: #7e5366;
    --floor-8: #800000;  --floor-8-dark: #5a0000;  --floor-8-light: #a60000;
    --floor-9: #C49739;  --floor-9-dark: #9d7829;  --floor-9-light: #dbb05a;
    --floor-10: #9D6D27; --floor-10-dark: #7a541e; --floor-10-light: #bd8a3d;

    /* Spacing scale (kiosk touch-friendly) */
    --space-xs: 0.25rem;   /* 4px  - tight dividers */
    --space-sm: 0.5rem;    /* 8px  - compact gaps */
    --space-ms: 0.75rem;   /* 12px - medium-small gaps */
    --space-md: 1rem;      /* 16px - standard padding */
    --space-lg: 1.5rem;    /* 24px - section padding */
    --space-xl: 2rem;      /* 32px - panel gaps */
    --space-2xl: 3rem;     /* 48px - large separations */

    /* Border radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Layout constants */
    --header-height: 115px;
    --header-height-portrait: 60px;
    --bar-height: 3.5rem;
    --bar-border: 3px;
    --tab-height: 3.125rem;
    --card-header-height: 5.5rem;
    --section-header-height: 3.125rem;

    /* Touch-mode kiosk card proportions */
    --kiosk-howto: 60%;
    --kiosk-howto-nosummary: 45%;
    --kiosk-summary: 4%;

    /* Portrait card proportions (service info needs more room than kiosk) */
    --portrait-summary: 18%;

    /* Landscape card proportions */
    --landscape-service-2col: 32%;
    --landscape-service-3col: 32%;
    --landscape-summary: 15%;
}


/* --- Custom Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes viewEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}
.view-enter {
    animation: viewEnter 250ms ease-out;
    will-change: opacity;
}
.wayfinding-enter {
    animation: viewEnter 250ms ease-out;
    will-change: opacity;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(4, 70, 124, 0.3); }
    50% { box-shadow: 0 0 30px rgba(4, 70, 124, 0.6); }
}
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.6); }
}
.flash-animation {
    animation: flash 1s ease-out;
}
@keyframes flashGold {
    0%, 100% { box-shadow: none; }
    25% { box-shadow: 0 0 30px rgba(196, 151, 57, 0.8); }
    50% { box-shadow: 0 0 50px rgba(196, 151, 57, 1); }
    75% { box-shadow: 0 0 30px rgba(196, 151, 57, 0.8); }
}
.flash-gold {
    animation: flashGold 1.5s ease-in-out 3;
}


/* --- Layout Containers --- */
.app-container {
    min-height: 100vh;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-top: var(--header-height);
    padding-bottom: 5.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.main-content.kiosk-mode.lang-at-bottom {
    padding-bottom: 7.25rem;
}
.main-content.lang-at-top {
    padding-top: calc(var(--header-height) + var(--bar-height));
}
.content-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    flex: 1;
}

/* Landscape layout for wide screens */
.layout-landscape {
    max-width: none !important;
}

.content-grid.layout-landscape {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}
body.kiosk-device .content-grid.layout-landscape {
    overflow: hidden;
}

.content-grid.layout-landscape > .card {
    height: 100%;
    border-bottom: none;
}

.content-grid.layout-landscape > .card {
    border-right: 2px solid rgba(var(--accent-rgb), 0.3);
}
.content-grid.layout-landscape > .card:last-child,
.content-grid.layout-landscape.three-column > .card:nth-child(2) {
    border-right: none;
}

/* Two-column layout (when no journey summary) */
.content-grid.layout-landscape.two-column > .card:nth-child(1) {
    flex: 0 0 var(--landscape-service-2col);
}

.content-grid.layout-landscape.two-column > .card:nth-child(2) {
    flex: 1;
}

/* Three-column layout (with journey summary) */
/* HTML order: service(1) → how-to(2) → journey(3). CSS reorders for landscape: service → journey → how-to */
.content-grid.layout-landscape.three-column > .card:nth-child(1) {
    flex: 0 0 var(--landscape-service-3col);
    order: 1;
}

.content-grid.layout-landscape.three-column > .card:nth-child(2) {
    flex: 1;
    order: 3;
}

.content-grid.layout-landscape.three-column > .card:nth-child(3) {
    flex: 0 0 var(--landscape-summary);
    order: 2;
}

.content-grid.layout-landscape .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}



/* --- Utility Classes (extracted from inline styles) --- */

/* Action buttons (back, reset, gateway confirm/redirect, search popup close) */
.btn-action {
    min-width: 10rem;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg) 0.4rem var(--space-lg);
    border-radius: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 200ms ease-in-out;
    font-weight: 600;
    font-size: 1.125rem;
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: none;
}
.btn-action:hover { filter: brightness(0.9); }
.btn-action-blue { background: linear-gradient(135deg, var(--btn-blue) 0%, var(--btn-blue-dark) 100%); }
.btn-action-blue:hover { background: var(--btn-blue-dark); }
.btn-action-red { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); }
.btn-action-red:hover { background: var(--red-dark); }
.btn-action-green { background: linear-gradient(135deg, var(--feedback-mid) 0%, var(--feedback-dark) 100%); }
.btn-action-green:hover { background: var(--feedback-dark); }

/* Analytics export buttons (smaller variant) */
.btn-export {
    padding: var(--space-ms);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}
.btn-export:hover { filter: brightness(0.9); }
.btn-export-green { background: linear-gradient(135deg, var(--green-alt) 0%, var(--green-alt-dark) 100%); }
.btn-export-blue { background: linear-gradient(135deg, var(--btn-blue) 0%, var(--btn-blue-dark) 100%); }
.btn-export-red { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); }

/* Gateway modal action buttons (medium variant) */
.btn-gateway {
    padding: var(--space-ms) var(--space-lg);
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    cursor: pointer;
}

/* SVG icon sizes */
.icon-sm { width: 1.25rem; height: 1.25rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }

/* Search state messages */
.search-state { text-align: center; color: var(--text-muted); }
.search-state-lg { padding: var(--space-2xl) var(--space-md); }
.search-state-md { padding: var(--space-lg) var(--space-md); }
.search-state-icon { margin-bottom: var(--space-md); }
.search-state-icon-lg { font-size: 3rem; }
.search-state-icon-md { font-size: 2rem; margin-bottom: var(--space-sm); }
.search-results-count {
    margin-bottom: var(--space-md);
    padding: var(--space-ms) var(--space-md);
    background: rgba(var(--accent-rgb), 0.1);
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
}
.search-results-count-sm { margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: 0.875rem; }

/* Config modal utilities */
.config-label { color: var(--text-primary); min-width: 8rem; }
.config-section-divider {
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
    padding-top: var(--space-md);
}
.config-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-ms); }
.config-col { display: flex; flex-direction: column; gap: var(--space-md); }
.config-checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.config-hint { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.25rem; }
.config-description { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.config-description-sm { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0; }

/* Announcement links */
.announcement-link { text-decoration: none; font-size: 1rem; }

/* Service badge (in renderServiceButton) */
.service-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 2.5rem;
    width: 2.5rem;
}
.service-badge-floor {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.375rem var(--space-xs);
    text-align: center;
}
.service-badge-phone {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.35rem var(--space-xs);
    text-align: center;
}
.service-badge-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.service-badge-icon {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    padding: 0.375rem var(--space-xs);
    text-align: center;
}

/* Flex utility */
/* Need/Org selector button content */
/* Search input button (kiosk/touch mode) */
.search-touch-button {
    width: 100%;
    padding: var(--space-md) 1.25rem;
    font-size: 1.125rem;
    background: rgba(30, 41, 59, 0.7);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-md);
    outline: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-ms);
}
.search-touch-button-placeholder { color: var(--text-dim); }
.search-touch-button-active { color: white; }

/* Search text input (device mode) */
.search-device-input {
    width: 100%;
    padding: var(--space-md) 1.25rem;
    font-size: 1.125rem;
    background: rgba(30, 41, 59, 0.7);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-md);
    color: white;
    outline: none;
    transition: all 0.2s;
}

html[dir="rtl"] .service-badge {
    right: auto;
    left: 0.5rem;
}
html[dir="rtl"] .service-name { padding-right: 0; padding-left: 3.5rem; }
html[dir="rtl"] .service-button { text-align: right; }