/* Responsive CSS Grid Layout for KitaAtlas */

/* CSS Custom Property for viewport height */
:root {
    --vh: 1vh;

    /* Design Tokens: Farben & Basics */
    --color-bg: #f3f4f6;            /* Canvas */
    --color-surface: #ffffff;       /* Flächen/Karten */
    --color-text: #111827;          /* Primärtext */
    --color-muted: #6b7280;         /* Sekundärtext */
    --color-border: #e5e7eb;        /* Rahmen/Linien */
    --color-brand: #EA3891;         /* Primärfarbe */
    --color-brand-contrast: #ffffff;/* Text auf Primär */
    --sidebar-background: #fbfaf9;  /* Sidebar muted */
}

/* Basic reset to ensure proper sizing */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
}

/* Global Typography & Colors */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--color-brand); }
small, .text-muted { color: var(--color-muted); }
hr { border: none; border-top: 1px solid var(--color-border); }

/* Prevent text selection/copying */
.no-copy {
    user-select: none;           /* Standard */
    -webkit-user-select: none;   /* Safari */
    -ms-user-select: none;       /* Older Edge/IE */
    -moz-user-select: none;      /* Firefox */
    cursor: default;             /* No text cursor */
}

.appLayout {
    display: grid;
    grid-template-rows: 64px 1fr 64px;
    grid-template-columns: 25rem 1fr;
    grid-template-areas:
      "navbar  navbar"
      "sidebar content"
      "footer  footer";
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    user-select: none;           /* Standard */
    -webkit-user-select: none;   /* Safari */
    -ms-user-select: none;       /* Older Edge/IE */
    -moz-user-select: none;      /* Firefox */
}

/* Fix for older browsers and iOS Safari */
@supports not (height: 100dvh) {
    .appLayout {
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: -webkit-fill-available;
    }
}

.navbar { 
    grid-area: navbar; 
    z-index: 1000;
    height: 64px; /* Ensure fixed height */
}

.sidebar { 
    grid-area: sidebar; 
    z-index: 100;
    height: 100%;           /* Take full height of grid cell */
    overflow: auto;         /* Content scrolls within */
}

.content { 
    grid-area: content; 
    height: 100%;           /* Take full height of grid cell */
    overflow: hidden;       /* Map handles its own overflow */
    position: relative;
}

/* Map container specific styles */
#here-map-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
}

.footer { 
    grid-area: footer; 
    z-index: 1000;
    height: 64px; /* Ensure fixed height */
}

/* Primitive Components (for Tailwind phase-out) */
.container { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.surface { background: var(--color-surface); color: var(--color-text); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-sm); }
.card--flat { border-radius: var(--radius-s); box-shadow: none; }

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.btn-primary { background: var(--color-brand); color: var(--color-brand-contrast); border-color: var(--color-brand); }
.btn:disabled { opacity: .7; cursor: not-allowed; }

.input { width: 100%; padding: .625rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-surface); color: var(--color-text); }
.label { display: inline-block; margin-bottom: .375rem; color: var(--color-muted); font-weight: 600; }

.sticky-top-24 { position: sticky; top: 6rem; }

/* Pulse animation for focused markers */
@keyframes pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Mobile Portrait - use a single full-canvas grid */
@media screen and (max-width: 767px) and (orientation: portrait) {
    html, body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    
    .appLayout {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: none; /* wipe named areas for a blank canvas */
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
    }
    
    .sidebar { 
        display: none !important;  /* Hide sidebar completely */
    }
    
    .content { 
        grid-area: content;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    /* Hide structural areas except navbar; floating navbar overlays map */
    .footer, .sidebar { display: none !important; }
    .navbar { height: 0 !important; min-height: 0 !important; }

    /* Make content span the entire canvas */
    .content { grid-area: 1 / 1 / -1 / -1; }
}

/* Mobile Landscape - same full-canvas approach */
@media screen and (max-width: 767px) and (orientation: landscape) {
    html, body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    
    .appLayout {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: none;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
    }
    .footer, .sidebar { display: none !important; }
    .navbar { height: 0 !important; min-height: 0 !important; }
    .content { grid-area: 1 / 1 / -1 / -1; }
}

/* Tablet Portrait - keep 3 rows, but sidebar hidden; unchanged */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    html, body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    
    .appLayout {
        grid-template-rows: 64px 1fr 64px;
        grid-template-columns: 18rem 1fr;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
    }
    
    .content { 
        grid-area: content;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
}

/* Tablet Landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    html, body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    
    .appLayout {
        grid-template-columns: 25rem 1fr;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
    }
}

/* Desktop */
@media screen and (min-width: 1025px) {
    .appLayout {
        grid-template-columns: 25rem 1fr;
        /* Keep side-by-side layout */
    }
}