/* static/css/style.css */

:root, [data-theme="default-dark"] {
    --color-bg: #0f172a; /* slate-900 */
    --color-panel: #1e293b; /* slate-800 */
    --color-panel-hover: #334155; /* slate-700 */
    --color-border: #334155;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-danger: #ef4444;
}

[data-theme="pop-os"] {
    --color-bg: #2d2d2d;
    --color-panel: #383838;
    --color-panel-hover: #484848;
    --color-border: #505050;
    --color-text: #f6f6f6;
    --color-text-muted: #a1a1a1;
    --color-primary: #48b9c7;
    --color-primary-hover: #5ecad8;
    --color-danger: #e16a7d;
}

[data-theme="ubuntu-yaru"] {
    --color-bg: #2c001e;
    --color-panel: #3e002a;
    --color-panel-hover: #500037;
    --color-border: #630045;
    --color-text: #ffffff;
    --color-text-muted: #cccccc;
    --color-primary: #e95420;
    --color-primary-hover: #ff6a36;
    --color-danger: #c7162b;
}

[data-theme="tokyo-night"] {
    --color-bg: #1a1b26;
    --color-panel: #24283b;
    --color-panel-hover: #2f334d;
    --color-border: #414868;
    --color-text: #c0caf5;
    --color-text-muted: #7dcfff;
    --color-primary: #7aa2f7;
    --color-primary-hover: #2ac3de;
    --color-danger: #f7768e;
}

[data-theme="dracula"] {
    --color-bg: #282a36;
    --color-panel: #44475a;
    --color-panel-hover: #6272a4;
    --color-border: #6272a4;
    --color-text: #f8f8f2;
    --color-text-muted: #8be9fd;
    --color-primary: #bd93f9;
    --color-primary-hover: #ff79c6;
    --color-danger: #ff5555;
}

[data-theme="cyberpunk"] {
    --color-bg: #050505;
    --color-panel: #111111;
    --color-panel-hover: #222222;
    --color-border: #fcee0a;
    --color-text: #05d9e8;
    --color-text-muted: #66757f;
    --color-primary: #fcee0a;
    --color-primary-hover: #ff003c;
    --color-danger: #ff003c;
}

[data-theme="full-dark"] {
    --color-bg: #000000;
    --color-panel: #0a0a0a;
    --color-panel-hover: #171717;
    --color-border: #262626;
    --color-text: #ffffff;
    --color-text-muted: #a3a3a3;
    --color-primary: #ffffff;
    --color-primary-hover: #e5e5e5;
    --color-danger: #dc2626;
}

[data-theme="light"] {
    --color-bg: #f8fafc;
    --color-panel: #ffffff;
    --color-panel-hover: #f1f5f9;
    --color-border: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-primary: #000000;
    --color-primary-hover: #334155;
    --color-danger: #ef4444;
}

[data-theme="monokai"] {
    --color-bg: #272822;
    --color-panel: #3e3d32;
    --color-panel-hover: #49483e;
    --color-border: #75715e;
    --color-text: #f8f8f2;
    --color-text-muted: #a59f85;
    --color-primary: #a6e22e;
    --color-primary-hover: #fd971f;
    --color-danger: #f92672;
}

[data-theme="github-dark"] {
    --color-bg: #0d1117;
    --color-panel: #161b22;
    --color-panel-hover: #21262d;
    --color-border: #30363d;
    --color-text: #c9d1d9;
    --color-text-muted: #8b949e;
    --color-primary: #58a6ff;
    --color-primary-hover: #79c0ff;
    --color-danger: #ff7b72;
}

[data-theme="github-light"] {
    --color-bg: #f6f8fa;
    --color-panel: #ffffff;
    --color-panel-hover: #f3f4f6;
    --color-border: #d0d7de;
    --color-text: #24292f;
    --color-text-muted: #57606a;
    --color-primary: #0969da;
    --color-primary-hover: #0366d6;
    --color-danger: #cf222e;
}

[data-theme="cobalt"] {
    --color-bg: #002240;
    --color-panel: #002f5a;
    --color-panel-hover: #00407a;
    --color-border: #00509a;
    --color-text: #ffffff;
    --color-text-muted: #8ec4f5;
    --color-primary: #ffc600;
    --color-primary-hover: #ffdd55;
    --color-danger: #ff000f;
}

[data-theme="neon-pink"] {
    --color-bg: #09090b;
    --color-panel: #18181b;
    --color-panel-hover: #27272a;
    --color-border: #ff1493;
    --color-text: #ffffff;
    --color-text-muted: #a1a1aa;
    --color-primary: #ff1493;
    --color-primary-hover: #ff69b4;
    --color-danger: #ef4444;
}

[data-theme="cotton-candy"] {
    --color-bg: #fdf2f8;
    --color-panel: #ffffff;
    --color-panel-hover: #fce7f3;
    --color-border: #fbcfe8;
    --color-text: #831843;
    --color-text-muted: #9d174d;
    --color-primary: #0ea5e9;
    --color-primary-hover: #38bdf8;
    --color-danger: #f43f5e;
}

[data-theme="lavender"] {
    --color-bg: #faf5ff;
    --color-panel: #ffffff;
    --color-panel-hover: #f3e8ff;
    --color-border: #e9d5ff;
    --color-text: #4c1d95;
    --color-text-muted: #6d28d9;
    --color-primary: #a855f7;
    --color-primary-hover: #c084fc;
    --color-danger: #e11d48;
}

/* Font Variables */
:root {
    --font-family: 'Space Grotesk', sans-serif;
}
[data-font="roboto"] { --font-family: 'Roboto', sans-serif; }
[data-font="rajdhani"] { --font-family: 'Rajdhani', sans-serif; }
[data-font="fira-code"] { --font-family: 'Fira Code', monospace; }
[data-font="orbitron"] { --font-family: 'Orbitron', sans-serif; }
[data-font="space-grotesk"] { --font-family: 'Space Grotesk', sans-serif; }

/* Glowing shadows for futuristic feel */
.glow-primary {
    box-shadow: 0 0 10px -2px var(--color-primary);
}
.glow-primary:hover {
    box-shadow: 0 0 15px 0px var(--color-primary-hover);
}

body {
    font-family: var(--font-family) !important;
}
/* Edit Mode Utilities */
.edit-controls {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.is-editing .edit-controls {
    display: flex !important;
    opacity: 1;
}

/* Link item hover controls are completely disabled unless in edit mode */
.link-hover-actions {
    display: none !important;
}

.is-editing .link-item:hover .link-hover-actions,
.is-editing .link-item-grid:hover .link-hover-actions {
    display: flex !important;
}

/* Drag Handles */
.drag-handle {
    display: none !important;
}

.is-editing .drag-handle {
    display: inline-block !important;
}

/* --- ZEN MODE (Deep Work) --- */
body.zen-mode header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body.zen-mode header > div {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.zen-mode #zen-mode-toggle {
    position: fixed !important;
    top: 1rem;
    right: 13rem; /* Shift to the left of the escape hatch */
    z-index: 9999;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--color-bg);
    padding: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}

@keyframes alarmFlash {
    0%, 100% { background-color: #000000; }
    50% { background-color: #ff0000; }
}

.alarm-flash {
    animation: alarmFlash 0.3s infinite;
}

body.zen-mode #zen-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px var(--color-primary);
}

body.zen-mode #exit-zen-btn {
    display: flex !important;
}

body.zen-mode .fixed.top-14 { display: none !important; } /* Tab bar */
body.zen-mode [data-id^="category-"] { display: none !important; } /* Category cards */
body.zen-mode .w-full.flex.flex-wrap.gap-4 { display: none !important; } /* Quick Launch Bar */
body.zen-mode form[action="https://www.google.com/search"] { display: none !important; } /* Search bar */
body.zen-mode .pt-28 > div.flex.justify-between { display: none !important; } /* Title area */

/* Hide widgets that are not pomodoro or checklist */
body.zen-mode [data-bento-id^="scratchpad-"]:not([data-note-type="pomodoro"]):not([data-note-type="checklist"]) {
    display: none !important;
}

/* Center the remaining bento grid items */
body.zen-mode #bento-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    gap: 3rem;
    margin-top: 0;
}

body.zen-mode [data-bento-id^="scratchpad-"] {
    width: 450px !important;
    max-width: 90vw;
    margin: 0 !important;
    transform: scale(1.05);
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 10px var(--color-primary) !important;
}