/* ============================================================
🎨 PART 1 — THEME COLOR VARIABLES (LIGHT MODE)
    — Cleaned, organized, deduplicated —
============================================================ */
:root {

    /* ---------- BASE BACKGROUND & TEXT ---------- */
    --nv-body-bg: #ffffff;
    --nv-wrapper-bg: #ffffff;
    --nv-text: #484a4b;
    --nv-text-muted: #5c5b59;
    --nv-header: #65686a;
    --nv-border: #e1dede;
    --nv-border-dark: #c7c5c5;

    /* ---------- LINKS ---------- */
    --nv-link: #a8684a;
    --nv-link-hover: #c09783;
    --nv-breadcrumbs-text: #a0a0a0;
    --nv-transpose-controls: #6e7172;
    --nv-transpose-controls-hover: #5e9ebc;
    /* ---------- ACCENT / BRAND COLORS ---------- */
    --nv-accent: #ff878c;
    --nv-accent-hover: #bc827d;
    --nv-background-light1: #f6fbf6;
    --nv-background-light2: #e7f5ff;
    --nv-background-light3: #d2d2d2;
    --nv-background-light4: #f4eeea;
    
    /* ---------- LOGIN THEME / PANELS ---------- */
    --nv-login-theme-bg: #effbff;
    --nv-top-message-bg: #f7e4e6;
    --nv-top-message-header: #c8b7b7;
    --nv-top-verse-today-bg: #f3eed9;

    /* ---------- DASHBOARD MENU ---------- */
    --nv-dashboard-menu-item-bg: #798897;
    --nv-dashboard-menu-item-bg-hover: #617284;
    --nv-dashboard-menu-item-border: #617284;
    --nv-dashboard-menu-item-link: #ffffff;
    
    /* ---------- TRANSPOSE CONTROLS ---------- */
    --nv-transpose-controls-item-bg: #f2f3f2;
    --nv-transpose-controls-item-border: #d0d2d0;

    /* ---------- SEARCH OVERLAY ---------- */
    --nv-search-overlay-bg: #312d2d;
    --nv-search-box-input-bg: #6b6b6b;
    --nv-search-box-input-color: #fff;
    --nv-search-box-input-focus: #6b6b6b;

    /* ---------- SLIDE MENU ---------- */
    --nv-slide-menu-bg: #000000;
    --nv-slide-menu-link: #bfa5a3;
    --nv-slide-menu-link-hover: #bfa5a3;
    --nv-slide-menu-li-border: #343434;
    --nv-slide-menu-li-hover: #222121;

    /* ---------- SONG LIST ---------- */
    --nv-songlist-letter-heading: #2d2c2c;
    --nv-songlist-nav-letter-border: #d1d0d0;
    --nv-songlist-nav-letter-active: #f3eed9;
    --nv-songlist-nav-letter-active-hover: #c6c1ae;
    --nv-songlist-nav-letter-text-active: #746c6c;
    --nv-songlist-nav-letter-inactive: #dddacd;
    --nv-songlist-nav-letter-text-inactive: #ffffff;
    
    /* ---------- SONG ---------- */
    --nv-song-info-wrapper-bg: #fef9f9;

    /* ---------- FAVORITES ---------- */
    --nv-favourites-added: #779330;
    --nv-favourites-removed: #dc6360;

    /* ---------- PRE / CODE COLORS ---------- */
    --nv-pre: #565353;
    --nv-pre-span-c: #006ea1;

    /* ---------- COMMENT FOR POP UP ---------- */    
    --nv-comment-form-bg: #fcfbf5;
    --nv-comment-form-border: #e0dfdd;

    /* ---------- QUIZ ---------- */
    --nv-quiz-timer: #000000;
    --nv-quiz-option-bg: #dfe0df;
    --nv-quiz-option-bg-hover: #cdcfcd;
    --nv-quiz-option-border: #bcbbbb;
    --nv-quiz-option-text: #000000;

    /* ---------- FORM INPUTS ---------- */
    --nv-input-bg: #fcfbf9;
    --nv-input-border: #d5d4d2;
    --nv-input-focus-border: #b7b6b6;
    --nv-input-focus-bg: #fcfbf9;
    --nv-input-text: #6c6c6c;

    /* ---------- BUTTONS ---------- */
    --nv-button: #798897;
    --nv-button-text: #ffffff;
    --nv-button-hover: #5a6a7a;

    /* ---------- TABLES ---------- */
    --nv-table-bg: #352F44;
    --nv-table-header: #cccccc;
    --nv-table-border: #cfcccc;

    /* ---------- MISC ---------- */
    --nv-highlight: #404d68;
    --nv-song-info-bg: #f3eed9;
    --nv-ctf-chord-color: #525252;

    /* ---------- BLOCKQUOTE ---------- */
    --nv-blockquote-bg: #f3eed9;
    --nv-blockquote-left-border: #779330;
    --nv-blockquote-text: #6b6666;

    /* ---------- BIBLE VERSE HIGHLIGHT ---------- */
    --nv-bible-verse-highlight: #FFFF00;

    /* ---------- SCROLL TO TOP BUTTON ---------- */
    --nv-scroll-top: #A2678A;
}


/* ============================================================
🌙 PART 1 — DARK MODE OVERRIDES
============================================================ */
body.dark-mode {

    /* ---------- BASE BACKGROUND & TEXT ---------- */
    --nv-body-bg: #031e39;
    --nv-wrapper-bg: #22282c;
    --nv-text: #bdc5ca;
    --nv-text-muted: #a0a0a0;
    --nv-header: #b0b7c7;
    --nv-border: #383d44;
    --nv-border-dark: #696d71;

    /* ---------- LINKS ---------- */
    --nv-link: #bca79d;
    --nv-link-hover: #efd5d0;
    --nv-breadcrumbs-text: #a0a0a0;
    --nv-transpose-controls: #6e8b9e;
	--nv-transpose-controls-hover: #456376;

    /* ---------- ACCENT / BRAND COLORS ---------- */
    --nv-accent: #dc6360;
    --nv-accent-hover: #f39a95;
    --nv-background-light1: #292d30;
    --nv-background-light2: #1d2023;
    --nv-background-light3: #101518;
    --nv-background-light4: #4d423d;

    /* ---------- LOGIN / PANELS ---------- */
    --nv-login-theme-bg: #282d30;
    --nv-top-message-bg: #131b20;
    --nv-top-message-header: #c8b7b7;
    --nv-top-verse-today-bg: #262d3a;

    /* ---------- DASHBOARD MENU ---------- */
    --nv-dashboard-menu-item-bg: #292b2f;
    --nv-dashboard-menu-item-bg-hover: #484a4e;
    --nv-dashboard-menu-item-border: #615e5e;
    --nv-dashboard-menu-item-link: #ffffff;
    
    /* ---------- TRANSPOSE CONTROLS ---------- */
    --nv-transpose-controls-item-bg: #303130;
    --nv-transpose-controls-item-border: #555555;

    /* ---------- SEARCH OVERLAY ---------- */
    --nv-search-overlay-bg: #252525;
    --nv-search-box-input-bg: #6b6b6b;
    --nv-search-box-input-color: #fff;
    --nv-search-box-input-focus: #646362;

    /* ---------- SLIDE MENU ---------- */
    --nv-slide-menu-bg: #474644;
    --nv-slide-menu-link: #bfa5a3;
    --nv-slide-menu-link-hover: #bfa5a3;
    --nv-slide-menu-li-border: #646362;
    --nv-slide-menu-li-hover: #575654;

    /* ---------- SONG LIST ---------- */
    --nv-songlist-letter-heading: #a0a0a0;
    --nv-songlist-nav-letter-border: #959491;
    --nv-songlist-nav-letter-active: #2f4858;
    --nv-songlist-nav-letter-active-hover: #4c6575;
    --nv-songlist-nav-letter-text-active: #fff;
    --nv-songlist-nav-letter-inactive: #44484f;
    --nv-songlist-nav-letter-text-inactive: #b6b2b2;
    
    /* ---------- SONG ---------- */
    --nv-song-info-wrapper-bg: #2e3337; 

    /* ---------- FAVORITES ---------- */
    --nv-favourites-added: #779330;
    --nv-favourites-removed: #dc6360;

    /* ---------- PRE / CODE ---------- */
    --nv-pre: #8a8585;
    --nv-pre-span-c: #bfa5a3;
    
    /* ---------- COMMENT FOR POP UP ---------- */    
    --nv-comment-form-bg: #444341;
    --nv-comment-form-border: #6a6965;

    /* ---------- QUIZ ---------- */
    --nv-quiz-timer: #ffffff;
    --nv-quiz-option-bg: #2a2a2a;
    --nv-quiz-option-bg-hover: #201c1c;
    --nv-quiz-option-border: #4a4746;
    --nv-quiz-option-text: #bdc5ca;

    /* ---------- FORMS ---------- */
    --nv-input-bg: #2e2e2e;
    --nv-input-border: #90908f;
    --nv-input-focus-border: #8488f9;
    --nv-input-focus-bg: #201d1d;
    --nv-input-text: #b0b7c7;

    /* ---------- BUTTONS ---------- */
    --nv-button: #2f4858;
    --nv-button-text: #ffffff;
    --nv-button-hover: #405273;

    /* ---------- TABLES ---------- */
    --nv-table-bg: #000;
    --nv-table-header: #cccccc;
    --nv-table-border: #ccc;

    /* ---------- MISC ---------- */
    --nv-highlight: #00bdff;
    --nv-song-info-bg: #172229;
    --nv-ctf-chord-color: #bdc5ca;

    /* ---------- BLOCKQUOTE ---------- */
    --nv-blockquote-bg: #244050;
    --nv-blockquote-left-border: #374955;
    --nv-blockquote-text: #677a86;

    /* ---------- BIBLE HIGHLIGHT ---------- */
    --nv-bible-verse-highlight: #55554e;

    /* ---------- SCROLL TO TOP ---------- */
    --nv-scroll-top: #ffffff;
}

/* ============================================================
PART 2 — LAYOUT, HEADER, SEARCH OVERLAY, SLIDE MENU,
WRAPPER, LOGIN BAR, RESPONSIVE RULES
============================================================ */


/* ============================================================
1. GLOBAL RESET + BASE
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    width: 100%;
    height: 100%;
    margin: auto;
    color: var(--nv-text);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
}

/* Dark mode background override */
body.dark-mode {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                url('../images/worship.jpg') center/cover no-repeat fixed;
}

        .sidebar {
            width: 280px;
            height: 100vh;
            background: #2c3e50;
            color: #fff;
            position: fixed;
        }
        .sidebar-links {
            margin: 40px 0;
        }
        .sidebar h2 {
            padding: 15px;
            text-align: center;
            background: #1a252f;
            margin: 0 !important;
        }

        .sidebar h2 a {
            text-decoration: none;
            color: #ffffff;
        }

        .sidebar h2 a:hover {
            text-decoration: none;
            color: #ffffff;
        }
        .sidebar-links a {
            display: block;
            padding: 12px 15px;
            color: #fff;
            text-decoration: none;
        }
        .sidebar-links a:hover {
            background: #34495e;
        }
        
        .sidebar-links a.active {
    background: #34495e;
}

        .content {
            margin-left: 310px;
            padding: 20px 30px 20px 0;
        }
        .box {
             background: #f9f9f9;
            padding: 30px;
            border: 1px solid #a0a0a0;
            border-radius: 5px;
            margin: 40px 0;
        }
        input, select, textarea, button {
            width: 100%;
            padding: 10px;
        }
        
        input, select, textarea {
            margin-top: 10px;
            margin-bottom: 30px;
        }
        
        button {
            background: #2c3e50;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background: #1a252f;
        }
        .msg { color: green; }
        .error { color: red; }
        
        .icon-inline {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  stroke-width: 2;
  margin-right: 8px;
  position: relative;
  top: -0.05em;
}