/* Notes & Tasks OS - Consolidated Styling & Themes */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Root Variable Specifications --- */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f0f0f0;
    --border-color: #eaeaea;
    --border-hover: #cbcbcb;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-muted: #8e8e8e;

    --accent-color: #0070f3;
    --accent-hover: #0051bf;
    --accent-rgb: 0, 112, 243;
    --accent-text: #ffffff;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius-base: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --glow-intensity: 0px 0px 0px rgba(0, 0, 0, 0);
}

/* --- Dark Theme: Vercel Ink --- */
.dark,
.vercel-dark {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --border-color: #1f1f1f;
    --border-hover: #333333;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: #444444;

    --accent-color: #ffffff;
    --accent-hover: #eaeaea;
    --accent-rgb: 255, 255, 255;
    --accent-text: #000000;

    --radius-base: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --glow-intensity: 0 0 10px rgba(255, 255, 255, 0.05);
}

/* --- System24 Monospace Terminal Theme --- */
.system24 {
    --bg-primary: #030703;
    --bg-secondary: #061006;
    --bg-tertiary: #081a08;
    --border-color: #00ff00;
    --border-hover: #39ff14;
    --text-primary: #39ff14;
    --text-secondary: #00cc00;
    --text-muted: #005500;

    --accent-color: #39ff14;
    --accent-hover: #00ff00;
    --accent-rgb: 57, 255, 20;
    --accent-text: #030703;

    --radius-base: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;

    --font-sans: 'Fira Code', 'Courier New', Courier, monospace;
    --glow-intensity: 0 0 8px rgba(57, 255, 20, 0.35);
}

/* --- Globals & Core Components --- */
body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

[x-cloak] {
    display: none !important;
}

/* Override tailwind default colors of layout panels to use our theme-variables */
.theme-bg-main {
    background-color: var(--bg-primary);
}

.theme-bg-panel {
    background-color: var(--bg-secondary);
}

.theme-bg-card {
    background-color: var(--bg-tertiary);
}

.theme-border {
    border-color: var(--border-color);
}

.theme-border-hover:hover {
    border-color: var(--border-hover);
}

.theme-text-main {
    color: var(--text-primary);
}

.theme-text-sub {
    color: var(--text-secondary);
}

.theme-text-mute {
    color: var(--text-muted);
}

.theme-radius {
    border-radius: var(--radius-base);
}

.theme-radius-lg {
    border-radius: var(--radius-lg);
}

.theme-radius-xl {
    border-radius: var(--radius-xl);
}

/* --- System24 Special retro terminal attributes --- */
.system24 .crt-scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg,
            rgba(255, 0, 0, 0.05),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.05));
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
}

/* CRT monitor flicker/glowing effects */
.system24 .glow-text {
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.6);
}

.system24 .glow-border {
    box-shadow: var(--glow-intensity);
}

/* Custom styled scrollbars conforming to themes */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-base);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Hide horizontal and custom scrollbars when essential */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Micro-interaction on cards & elements */
.interactive-card {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--glow-intensity);
}

.interactive-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
}

/* Custom toast and modal transitions */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Customize Quill Theme colors to match Vercel/System24 */
.ql-toolbar.ql-snow {
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.ql-container.ql-snow {
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-primary) !important;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
}

.ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-picker {
    color: var(--text-secondary) !important;
}

/* Customize details tags for neat bento accordion toggle */
details summary::-webkit-details-marker {
    display: none;
}

/* Drag & Drop helpers */
.sortable-ghost {
    opacity: 0.3;
}

.sortable-drag {
    background: var(--bg-tertiary);
}

/* --- High-End Custom Context Menu & Anim --- */
.context-menu-container {
    position: fixed;
    z-index: 10000;
    min-width: 190px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.45), var(--glow-intensity);
    font-size: 11px;
    backdrop-filter: blur(12px);
    border-radius: var(--radius-base);
    animation: contextMenuFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.system24 .context-menu-container {
    background-color: #020502 !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--glow-intensity) !important;
    border-radius: 0px !important;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.1s ease;
}

.context-menu-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.system24 .context-menu-item:hover {
    background-color: var(--text-primary) !important;
    color: #020502 !important;
}

/* Custom Phosphor customizer & preset frames */
.preset-badge {
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
}

.preset-badge:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

/* Make phosphor icons feel chunkier & high-definition */
.ph,
.ph-duotone {
    font-size: 1.15rem;
    /* Upgraded size from typical standard fine text */
    vertical-align: middle;
}

.sidebar-icon {
    font-size: 1.3rem !important;
}

.text-danger {
    color: #ef4444;
}

.system24 .text-danger {
    color: var(--text-primary) !important;
    text-decoration: underline;
}

/* --- Drag Resizing and Rich Card Adjustments --- */
.cursor-col-resize {
    cursor: col-resize;
}

.note-list-card {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.note-list-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.system24 .note-list-card:hover {
    box-shadow: var(--glow-intensity) !important;
    transform: none !important;
}