/* themes.css */

/* --- Dark Mode Variables --- */
[data-theme="dark"] {
   --bg-app-dark: #5c5e6b;
   --bg-header-dark: #3b6849;
   --bg-card-dark: #2E2F39;
   --text-main-dark: #dedce0;
   --text-muted-dark: #a79dc0;
   --border-dark: #334155;
   --input-bg-dark: #1b1c22; /* Generated dark shade for inputs */
}

/* Apply to Body */
body[data-theme="dark"] {
   background-color: var(--bg-app-dark) !important;
   color: var(--text-main-dark);
}

/* Apply to Main Page Header */
body[data-theme="dark"] header {
   background-color: var(--bg-header-dark) !important;
}

/* Apply to Cards and Modals (replacing bg-white) */
body[data-theme="dark"] .bg-white {
   background-color: var(--bg-card-dark) !important;
   color: var(--text-main-dark);
}

/* Apply to Card Headers (replacing light green bg) */
body[data-theme="dark"] .card-header {
   background-color: var(--bg-header-dark) !important;
   border-bottom-color: var(--border-dark) !important;
}

/* --- Text Color Overrides for Dark Mode --- */
body[data-theme="dark"] .text-slate-700,
body[data-theme="dark"] .text-gray-800,
body[data-theme="dark"] .text-gray-700,
body[data-theme="dark"] .text-gray-600,
body[data-theme="dark"] .label-text {
   color: var(--text-main-dark) !important;
}

body[data-theme="dark"] .text-gray-500 {
   color: var(--text-muted-dark) !important;
}

body[data-theme="dark"] .text-red-700 {
   color: #f87171 !important; /* Lighter red for readability on dark */
}

/* Headings in Card Headers */
body[data-theme="dark"] .card-header h2 {
   color: var(--text-main-dark) !important;
}

/* Borders */
body[data-theme="dark"] .border-gray-200,
body[data-theme="dark"] .border-gray-300,
body[data-theme="dark"] .border-black\/20 {
   border-color: var(--border-dark) !important;
}

/* --- Hamburger Menu --- */
body[data-theme="dark"] #main-menu {
   background-color: var(--bg-card-dark);
   border: 1px solid var(--border-dark);
}

body[data-theme="dark"] .menu-item {
   color: var(--text-main-dark) !important;
}

body[data-theme="dark"] .menu-item:hover {
   background-color: var(--bg-header-dark) !important;
}

/* --- Lists (Bestiaries, Groups, Traits, Actions) --- */

/* Modal Lists */
body[data-theme="dark"] #bestiary-list div,
body[data-theme="dark"] #group-list div,
body[data-theme="dark"] #language-list-div div,
body[data-theme="dark"] #managed-trait-list-div div {
   border-color: var(--border-dark);
   color: var(--text-main-dark);
}
body[data-theme="dark"] #bestiary-list div:hover,
body[data-theme="dark"] #group-list div:hover,
body[data-theme="dark"] #language-list-div div:hover,
body[data-theme="dark"] #managed-trait-list-div div:hover {
   background-color: var(--bg-header-dark);
}

/* Action List Items */
body[data-theme="dark"] .action-list-item {
   border-color: var(--border-dark);
}
body[data-theme="dark"] .action-list-item:hover {
   background-color: var(--bg-header-dark);
}

/* Trait List Items (Matches Actions) */
body[data-theme="dark"] #npc-trait-list > div {
   background-color: transparent !important;
   border-color: var(--border-dark) !important;
   color: var(--text-main-dark);
}
body[data-theme="dark"] #npc-trait-list > div:hover {
   background-color: var(--bg-header-dark) !important;
}

/* Sub-text in lists */
body[data-theme="dark"] .text-gray-600,
body[data-theme="dark"] p.text-xs {
    color: var(--text-muted-dark);
}

/* --- Inputs and Forms --- */

/* General Input Styling (Dark) */
body[data-theme="dark"] input:not([type='checkbox']):not([type='radio']):not(#npc-name),
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .info-input, 
body[data-theme="dark"] .info-select,
body[data-theme="dark"] .language-listbox {
   background-color: var(--input-bg-dark) !important;
   color: var(--text-main-dark) !important;
   border-color: var(--border-dark) !important;
}

/* Fix for NPC Name Box (Retain Red Styling) */
body[data-theme="dark"] #npc-name {
   background-color: #fef2f2 !important;
   color: #000000 !important;
   border-color: #b91c1c !important;
}

/* Fix dropdown options visibility */
body[data-theme="dark"] option {
    background-color: var(--bg-card-dark);
    color: var(--text-main-dark);
}

/* --- Trix Editor (Dark Mode) --- */
body[data-theme="dark"] trix-toolbar {
    background-color: var(--bg-header-dark) !important;
    border-bottom: 1px solid var(--border-dark);
}
body[data-theme="dark"] .trix-content {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-main-dark) !important;
    border-color: var(--border-dark) !important;
}

/* --- Icons --- */
body[data-theme="dark"] button svg.text-black {
    color: var(--text-main-dark) !important;
}
body[data-theme="dark"] button svg.text-gray-600 {
    color: var(--text-muted-dark);
}
body[data-theme="dark"] button:hover svg.text-gray-600 {
    color: var(--text-main-dark);
}

/* Header Bestiary Buttons */
body[data-theme="dark"] #bestiary-buttons button {
   color: var(--text-main-dark) !important;
}

/* --- Miscellaneous --- */

/* Stat Block Preview (Viewport) - Keep Light */
body[data-theme="dark"] #viewport {
    color: #000000; 
}

/* Stat Headers in Cards (STR, DEX, etc) - Lighter Red */
body[data-theme="dark"] .stat-header {
    color: #fca5a5; 
}

/* Modal Close Buttons */
body[data-theme="dark"] .modal-close-btn {
   color: var(--text-muted-dark);
}
body[data-theme="dark"] .modal-close-btn:hover {
   color: #ffffff;
}

/* --- Viewport Themes --- */

/* Parchment (Default) */
[data-viewport-theme="parchment"] {
   --vp-viewport-bg: url("graphics/parchment viewport.jpg");
   --vp-bg-image: url("graphics/parchment statblock texture.jpg");
   --vp-cap-image: url("graphics/parchment statblock cap.jpg");
   --vp-bg-color: #FDF1E6;
   
   --vp-text-color: #000000;
   --vp-name-color: #7A200D;
   --vp-type-color: #000000;
   --vp-header-text-color: #7A200D;
   
   --vp-line-color: #BA4E3B;
   --vp-divider-fill: #922610;
   
   --vp-action-header-color: #7A200D;
   --vp-action-line-color: #BA4E3B;
   --vp-whoosh-fill: #7A200D;
   
   --vp-drop-cap-color: #7A200D;
   --vp-box-shadow: 8px 8px 20px #472737;
}

/* Dark Parchment */
[data-viewport-theme="dark-parchment"] {
   --vp-viewport-bg: url("graphics/dark parchment viewport.jpg");
   --vp-bg-image: url("graphics/dark parchment statblock texture.jpg");
   --vp-cap-image: url("graphics/dark parchment statblock cap.jpg");
   --vp-bg-color: #dcd0c0;
   
   --vp-text-color: #000000;
   --vp-name-color: #604040; 
   --vp-type-color: #333333;
   --vp-header-text-color: #602020; 
   
   --vp-line-color: #000000; 
   --vp-divider-fill: #604040; 
   
   --vp-action-header-color: #602020; 
   --vp-action-line-color: #602020; 
   --vp-whoosh-fill: #602020; 
   
   --vp-drop-cap-color: #602020; 
   --vp-box-shadow: 8px 8px 20px #373737;
}

/* Frost */
[data-viewport-theme="frost"] {
   --vp-viewport-bg: url("graphics/frost viewport.jpg");
   --vp-bg-image: url("graphics/frost statblock texture.jpg");
   --vp-cap-image: url("graphics/frost statblock cap.jpg");
   --vp-bg-color: #FDF1E6; 
   
   --vp-text-color: #000000;
   --vp-name-color: #000065;
   --vp-type-color: #1082bb;
   --vp-header-text-color: #000065;
   
   --vp-line-color: #000065;
   --vp-divider-fill: #000065;
   
   --vp-action-header-color: #000065;
   --vp-action-line-color: #000065;
   --vp-whoosh-fill: #000065;
   
   --vp-drop-cap-color: #000065;
   --vp-box-shadow: 8px 8px 20px #000020;
}