/* =========================================
   PHASE 2: WORLD CLASS THEME ENGINE
   Supports: Light (Air) & Dark (Space)
   ========================================= */

:root {
    /* -- CONSTANTS (Accents) -- */
    --blue: #007AFF;
    --orange: #FF9500;
    --red: #FF3B30;
    --purple: #AF52DE;
    --green: #34C759;
    --teal: #30B0C7;
    
    /* -- ANIMATION -- */
    --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
    --trans-theme: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* --- THEME VARIABLES --- */

/* LIGHT THEME (Default) */
.theme-light {
    --bg-app: #f2f4f6;
    --surface: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --glass-dock: rgba(255, 255, 255, 0.75);
    --glass-panel: rgba(255, 255, 255, 0.85);
    --border-dim: rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-deep: 0 20px 50px rgba(0,0,0,0.12);
    --grid-color: #cfd8dc;
    --key-bg: #f5f5f7;
    --key-border: #d1d1d6;
}

/* DARK THEME (Space) */
.theme-dark {
    --bg-app: #050505;
    --surface: #1c1c1e;
    --text-main: #f5f5f7;
    --text-sub: #a1a1a6;
    --glass-dock: rgba(30, 30, 30, 0.65);
    --glass-panel: rgba(40, 40, 40, 0.85);
    --border-dim: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-deep: 0 20px 60px rgba(0,0,0,0.6);
    --grid-color: #333;
    --key-bg: #2c2c2e;
    --key-border: #48484a;
}

/* --- 1. GLOBAL RESET & TRANSITIONS --- */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    user-select: none; -webkit-font-smoothing: antialiased;
    outline: none; font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-app);
    background-image: radial-gradient(var(--grid-color) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--text-main);
    overflow: hidden; height: 100vh; width: 100vw;
    transition: var(--trans-theme);
}

#canvas-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}

/* --- 2. TOP TAB BAR --- */
#tab-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 50px;
    background: var(--glass-panel); backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; z-index: 1000;
    transition: var(--trans-theme);
}

#tabs-scroll-area {
    display: flex; gap: 8px; overflow-x: auto; flex-grow: 1; 
    align-items: flex-end; height: 100%; scrollbar-width: none;
}

.tab {
    background: transparent;
    padding: 8px 16px; min-width: 140px; max-width: 220px;
    font-size: 13px; font-weight: 500; color: var(--text-sub);
    border-radius: 8px 8px 0 0; cursor: pointer; transition: 0.2s;
}
.tab:hover { background: var(--border-dim); color: var(--text-main); }
.tab.active-tab {
    background: var(--surface); color: var(--blue);
    border-top: 2px solid var(--blue);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* Top Actions (Theme/Help) */
.top-actions { display: flex; align-items: center; gap: 8px; }

#tab-bar button {
    background: transparent; border: none; color: var(--text-sub);
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
#tab-bar button:hover { background: var(--border-dim); color: var(--text-main); }

.vert-sep { width: 1px; height: 20px; background: var(--border-dim); margin: 0 4px; }


/* --- 3. PROJECT SWITCHER (Dashboard) --- */
.hidden_overlay { opacity: 0; pointer-events: none; transform: scale(1.03); }

#project-switcher-view {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-app); /* Solid bg for focus */
    z-index: 3000; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease-apple);
}

.switcher-container {
    width: 90%; max-width: 1100px; height: 90%;
    display: flex; flex-direction: column; gap: 20px;
}

.switcher-header { display: flex; justify-content: space-between; align-items: flex-end; }
.switcher-title { font-size: 36px; font-weight: 800; letter-spacing: -1px; color: var(--text-main); }
.switcher-date { font-size: 14px; color: var(--text-sub); font-weight: 500; }

#project-grid-container {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr); gap: 24px; flex-grow: 1;
}

.project-card {
    background: var(--surface);
    border: 1px solid var(--border-dim); border-radius: 20px;
    position: relative; overflow: hidden; cursor: pointer;
    box-shadow: var(--shadow-soft); transition: all 0.2s var(--ease-apple);
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.project-card.active-card { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3); }

.project-thumb { width: 100%; height: 100%; object-fit: cover; }

.project-label-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: var(--glass-panel); backdrop-filter: blur(10px);
    padding: 14px 20px; border-top: 1px solid var(--border-dim);
}
.project-label-overlay div:first-child { color: var(--text-main); font-weight: 600; }
.project-label-overlay div:last-child { color: var(--text-sub); }

.switcher-bottom-bar { display: flex; gap: 15px; justify-content: center; }
.premium-action-btn {
    background: var(--text-main); color: var(--bg-app); padding: 14px 28px;
    border-radius: 14px; border: none; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 10px; transition: 0.2s;
}
.premium-action-btn:hover { transform: scale(1.02); opacity: 0.9; }

.secondary-action-btn {
    background: var(--surface); color: var(--text-main); padding: 14px 28px;
    border-radius: 14px; border: 1px solid var(--border-dim);
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.secondary-action-btn:hover { background: var(--border-dim); }


/* --- 4. MAIN DOCK (Movable) --- */
#main-dock-container {
    position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
    z-index: 2000; transition: var(--trans-theme);
}

.dock-glass-panel {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--glass-dock); backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border-dim);
    box-shadow: var(--shadow-deep); border-radius: 24px;
}

.dock-drag-handle {
    color: var(--text-sub); cursor: grab; padding: 0 6px; display: flex; align-items: center;
}
.dock-drag-handle:active { cursor: grabbing; color: var(--blue); }

.dock-btn {
    width: 44px; height: 44px; border-radius: 12px; border: none; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.dock-btn:hover { background: var(--border-dim); transform: translateY(-3px); }
.dock-btn.active { background: var(--surface); box-shadow: var(--shadow-soft); color: var(--blue); }

.dock-divider { width: 1px; height: 24px; background: var(--border-dim); margin: 0 4px; }

/* Icon Colors */
.icon-blue { color: var(--blue); } .icon-orange { color: var(--orange); }
.icon-red { color: var(--red); } .icon-purple { color: var(--purple); }
.icon-green { color: var(--green); } .icon-teal { color: var(--teal); }
.icon-dark { color: var(--text-main); }
.material-icons-round { font-size: 24px; color: var(--text-sub); }
.active .material-icons-round { color: var(--blue); }


/* --- 5. PROPERTY BUBBLE --- */
#property-bubble {
    position: absolute;
    background: var(--glass-panel); backdrop-filter: blur(25px);
    border: 1px solid var(--border-dim); border-radius: 18px; padding: 12px;
    box-shadow: var(--shadow-deep); z-index: 1500; min-width: 250px;
    display: flex; flex-direction: column; gap: 10px;
    transition: opacity 0.2s, transform 0.2s;
}

.hidden_bubble { opacity: 0; pointer-events: none; transform: scale(0.95) translateY(5px); }

.bubble-actions-row { display: flex; justify-content: space-between; }
.bubble-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bubble-icon-btn:hover { background: var(--border-dim); color: var(--text-main); }
.bubble-icon-btn.danger:hover { background: rgba(255, 59, 48, 0.1); color: var(--red); }

.bubble-controls-row {
    display: flex; gap: 10px; align-items: center;
    background: var(--border-dim); padding: 8px; border-radius: 12px;
}

/* Custom UI Elements (Color, Slider) */
.color-picker-group { position: relative; width: 30px; height: 30px; }
input[type="color"] {
    -webkit-appearance: none; border: none; width: 100%; height: 100%;
    border-radius: 50%; cursor: pointer; padding: 0; background: none;
}
input[type="color"]::-webkit-color-swatch { border: 2px solid var(--border-dim); border-radius: 50%; }

.transparent-toggle {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--surface); border: 1px solid var(--text-sub); border-radius: 50%;
    color: var(--red); cursor: pointer; display: none; align-items: center; justify-content: center;
}
.transparent-toggle.active { display: flex; }

.slider-group {
    flex-grow: 1; display: flex; align-items: center; gap: 8px;
    background: var(--surface); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-dim);
}
input[type="range"] { width: 100%; -webkit-appearance: none; background: transparent; height: 20px; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--border-dim); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; margin-top: -6px; width: 16px; height: 16px;
    background: var(--blue); border: 2px solid var(--surface); border-radius: 50%; cursor: pointer;
}
.val-display { font-size: 11px; font-weight: 600; color: var(--text-sub); min-width: 28px; text-align: right; }

.bubble-arrow {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: var(--glass-panel);
    border-right: 1px solid var(--border-dim); border-bottom: 1px solid var(--border-dim);
}


/* --- 6. MODALS (Export, Rename, Shortcuts) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    z-index: 4000; display: flex; align-items: center; justify-content: center;
}

.modal-glass-card {
    background: var(--surface); padding: 30px; border-radius: 24px; width: 400px;
    box-shadow: var(--shadow-deep); text-align: center; color: var(--text-main);
}
.modal-glass-card h3 { margin-bottom: 20px; font-weight: 700; }

/* SHORTCUTS LIST */
.shortcuts-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; text-align: left; }
.shortcut-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: var(--border-dim); border-radius: 8px;
}
.shortcut-item span:first-child { font-weight: 500; font-size: 14px; }
.shortcut-item span:last-child {
    background: var(--key-bg); border: 1px solid var(--key-border); border-bottom-width: 2px;
    padding: 2px 8px; border-radius: 6px; font-size: 12px; font-family: monospace; font-weight: 600;
}

/* Inputs & Buttons */
input[type="text"] {
    width: 100%; padding: 12px; border: 1px solid var(--border-dim); border-radius: 10px;
    background: var(--bg-app); color: var(--text-main); margin-bottom: 20px;
}
.export-options-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.export-btn {
    background: var(--bg-app); border: 1px solid var(--border-dim); border-radius: 12px;
    padding: 15px 5px; cursor: pointer; color: var(--text-sub);
    display: flex; flex-direction: column; align-items: center; gap: 8px; transition: 0.2s;
}
.export-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--surface); }

.modal-close-btn { background: transparent; border: none; color: var(--text-sub); cursor: pointer; }
.modal-close-btn:hover { color: var(--text-main); text-decoration: underline; }

/* Toast */
#status-toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: var(--surface); color: var(--text-main); padding: 10px 20px;
    border-radius: 30px; font-weight: 600; box-shadow: var(--shadow-deep);
    pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 5000;
}
#status-toast.show { opacity: 1; transform: translateX(-50%) translateY(5px); }