/* Main styles for MountainCircles Map */

@import 'airspacePopup.css';
@import 'installPrompt.css';
@import 'mapDock.css';
@import 'menu.css';
@import 'navbox.css';
@import 'parameters.css';
@import 'progressBar.css';
@import 'secondaryDock.css';
@import 'sidebar.css';

/* =================================
   1. CSS VARIABLES / ROOT  
   ================================= */
:root {
    /* Light mode colors */
    --bg-light: rgba(255, 255, 255, 0.8);
    --bg-light-solid: #fff;
    --bg-button-light: #eee;
    --bg-button-hover-light: #ddd;
    --text-light: #000;
    --text-heading-light: #2c3e50;
    --border-light: #ccc;
    --border-subtle-light: rgba(0, 0, 0, 0.1);
    --slider-track-light: #ccc;
    --hover-bg-light: rgba(0, 0, 0, 0.05);
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-subtle-light: rgba(0, 0, 0, 0.1);

    /* Dark mode colors */
    --bg-dark: rgba(20, 20, 20, 0.8);
    --bg-dark-solid: #222;
    --bg-button-dark: #333;
    --bg-button-hover-dark: #444;
    --text-dark: #fff;
    --text-heading-dark: #ecf0f1;
    --border-dark: #555;
    --border-subtle-dark: rgba(255, 255, 255, 0.1);
    --slider-track-dark: #555;
    --hover-bg-dark: rgba(255, 255, 255, 0.1);

    /* Accent colors */
    --accent-blue: #4285F4;
    --accent-green: #4CAF50;
    --accent-turquoise: rgba(64, 224, 208, 0.5);
    --accent-orange: #FF8C00;

    /* Airspace styling */
    --popup-highlight: rgba(64, 224, 208, 0.5);
    --altitude-line: #666;

    /* Common sizes */
    --border-radius-standard: 4px;
    --border-radius-large: 8px;

    /* Typography */
    --font-family: 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Airspace Popup Typography */
    --airspace-popup-header: 18px;
    --airspace-popup-content: 16px;
    --airspace-popup-label: 14px;

    /* Default/maximum sizes for dock elements */
    --dock-button-size: 48px;
    --sectors-slider-length: 150px;

    /* Parameters Box styling */
    --parameters-font-size: 24px; /* Default size for parameters box, will be dynamically adjusted */
}

/* =================================
   2. GLOBAL STYLES
   ================================= */
/* Global font settings */
html {
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    /* Prevent scrolling and bounce effects */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none; /* Prevent pull-to-refresh and bounce */
    -webkit-overflow-scrolling: auto; /* Disable iOS momentum scrolling */
    touch-action: none; /* Disable browser handling of touch gestures */
}

/* Standard headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
}

h2 {
    font-size: var(--font-size-large);
}

h3 {
    font-size: var(--font-size-base);
}

#map {
    width: 100%;
    height: 100vh;
}

/* =================================
   3. ICON AND BUTTON STYLES
   ================================= */
/* Material icons styling */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--dock-button-size) * 0.5);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--dock-button-size) * 0.5);
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Button with icon styling */
.button-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
}

/* Align material icons in buttons */
button .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* =================================
   4. POPUP CONTENT
   ================================= */
.popup-content {
    flex: 1;
    padding-left: 10px;
    overflow-y: auto;
    overscroll-behavior: contain; /* Prevent scroll chaining */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling in iOS */
}

/* =================================
   5. SPINNER
   ================================= */
#spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    display: none; /* Hidden by default */
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =================================
   6. TOGGLE SWITCH
   ================================= */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: var(--slider-track-light);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
    outline: none;
}

.toggle-switch.active {
    background-color: var(--accent-blue);
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: var(--bg-light-solid);
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px var(--shadow-light);
}

.toggle-switch.active .toggle-slider {
    transform: translateX(20px);
}

/* =================================
   7. DARK MODE STYLES
   ================================= */
@media (prefers-color-scheme: dark) {
    /* Global elements */
    .material-icons {
        color: var(--text-dark);
    }

    /* Toggle switch */
    .toggle-switch {
        background-color: var(--slider-track-dark);
    }

    .toggle-switch.active {
        background-color: var(--accent-blue);
    }
}

/* Notifications */
#notifications-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
    pointer-events: none;
}

.notification {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
    pointer-events: auto;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification .close-button {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 10px;
}

.notification .refresh-button {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin-left: 10px;
}