/* /css/base.css */

/* Scrollbar always visible - fix for horizontal "jiggle" when content changes */
body {
    overflow-y: scroll !important;
}

/* ==========================================================================
   Apple macOS Custom Glassmorphism Scrollbars (Global)
   ========================================================================== */
html,
body,
*,
*::before,
*::after {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.28) transparent;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.28);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.55);
    border: 1px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--apple-accent-color, #0d6efd);
    border: 1px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- Custom Properties for Sidebar & Apple Theme --- */
:root {
    --sidebar-width-expanded: 300px;
    --sidebar-width-collapsed: 70px;

    --sidebar-bg-color: #f8f9fa;
    --sidebar-text-color: #1c1c1e;
    --sidebar-link-hover-bg: rgba(0, 0, 0, 0.05);

    --sidebar-link-active-bg: var(--apple-accent-color);
    --sidebar-active-link-text-color: #fff;
    --sidebar-border-color: rgba(0, 0, 0, 0.08);

    --user-avatar-bg-color: var(--apple-accent-color);
    --user-avatar-text-color: #fff;

    --main-content-left-padding-gap: 1rem;

    --apple-bg-light-start: #f5f5f7;
    --apple-bg-light-end: #e8e8ed;
    --apple-card-bg-light: rgba(255, 255, 255, 0.6);
    --apple-card-border-light: rgba(220, 220, 225, 0.7);

    --apple-accent-color: #6c63ff;
    --accent-hover: #5850ec;
    --button-glow: rgba(108, 99, 255, 0.35);

    /* --- ADDED: Global Light Mode Form/Text Variables --- */
    --apple-card-bg: var(--apple-card-bg-light);
    --apple-text-color: var(--sidebar-text-color);
    --apple-card-border: var(--apple-card-border-light);
    --apple-secondary-text: rgba(60, 60, 67, 0.6);
    --apple-placeholder-color: rgba(60, 60, 67, 0.4);
    --apple-hover-bg: rgba(0, 0, 0, 0.03);

    /* --- Sidebar Note Colors (Light Theme) --- */
    --note-default-bg: rgba(0, 0, 0, 0.05);
    --note-default-border: rgba(0, 0, 0, 0.1);
    --note-default-text: inherit;

    --note-red-bg: rgba(255, 59, 48, 0.08);
    --note-red-border: rgba(255, 59, 48, 0.25);
    --note-red-text: #b01b11;

    --note-yellow-bg: rgba(255, 159, 10, 0.12);
    --note-yellow-border: rgba(255, 159, 10, 0.35);
    --note-yellow-text: #8a5800;

    --note-green-bg: rgba(52, 199, 89, 0.08);
    --note-green-border: rgba(52, 199, 89, 0.25);
    --note-green-text: #1b7a33;

    --note-blue-bg: rgba(0, 122, 255, 0.08);
    --note-blue-border: rgba(0, 122, 255, 0.25);
    --note-blue-text: #004fb0;
}

[data-bs-theme="dark"] {
    /* --- Your Custom Apple/Sidebar Variables --- */
    --sidebar-bg-color: #212529;
    --sidebar-text-color: #f2f2f7;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);

    --sidebar-link-active-bg: var(--apple-accent-color);
    --sidebar-active-link-text-color: #1c1c1e;
    --sidebar-border-color: rgba(100, 100, 110, 0.35);

    --user-avatar-bg-color: var(--apple-accent-color);
    --user-avatar-text-color: #1c1c1e;

    --apple-bg-dark-start: #1b1b1e;
    --apple-bg-dark-end: #000;
    --apple-card-bg-dark: rgba(44, 44, 46, 0.55);
    --apple-card-border-dark: rgba(90, 90, 95, 0.45);


    /* * =================================================================
     * !! GLOBAL DARK MODE STYLES (THE FIX) !!
     * These variables are now available on ALL pages.
     * =================================================================
     */
    --apple-card-bg: var(--apple-card-bg-dark);
    --apple-text-color: var(--sidebar-text-color);
    --apple-card-border: var(--apple-card-border-dark);
    --apple-secondary-text: rgba(255, 255, 255, 0.6);
    --apple-placeholder-color: rgba(255, 255, 255, 0.45);
    --apple-hover-bg: rgba(255, 255, 255, 0.08);

    /* --- Sidebar Note Colors (Dark Theme) --- */
    --note-default-bg: rgba(255, 255, 255, 0.05);
    --note-default-border: rgba(255, 255, 255, 0.1);
    --note-default-text: inherit;

    --note-red-bg: rgba(255, 59, 48, 0.18);
    --note-red-border: rgba(255, 59, 48, 0.4);
    --note-red-text: #ff9b9b;

    --note-yellow-bg: rgba(255, 204, 0, 0.18);
    --note-yellow-border: rgba(255, 204, 0, 0.4);
    --note-yellow-text: #ffeb3b;

    --note-green-bg: rgba(52, 199, 89, 0.18);
    --note-green-border: rgba(52, 199, 89, 0.4);
    --note-green-text: #a4ffa4;

    --note-blue-bg: rgba(0, 122, 255, 0.18);
    --note-blue-border: rgba(0, 122, 255, 0.4);
    --note-blue-text: #9ecfff;
}

/* === Body and Global Styles === */
body {
    background-color: var(--apple-bg-light-end);
    color: var(--apple-text-color);
    /* Ensures text color is correct */
    background-image: radial-gradient(circle at top, var(--apple-bg-light-start) 0%, var(--apple-bg-light-end) 100%);
    background-attachment: fixed;
    transition: background 0.5s ease-in-out, color 0.3s ease;
}

[data-bs-theme="dark"] body {
    background-color: var(--apple-bg-dark-end);
    color: var(--apple-text-color);
    /* Ensures text color is correct */
    background-image: radial-gradient(circle at top, var(--apple-bg-dark-start) 0%, var(--apple-bg-dark-end) 100%);
}

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body.no-transition * {
    transition: none !important;
}

::selection {
    background-color: var(--apple-accent-color);
    color: white;
}