/* -----------------------------------------------------------------------
   The Tavern Board – Global Styles
   Supplements Tailwind CDN.  Keep this thin; prefer utility classes in HTML.
   ----------------------------------------------------------------------- */

/* Custom scrollbar for a more immersive feel */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1c1917; /* stone-900 */ }
::-webkit-scrollbar-thumb { background: #57534e; border-radius: 10px; /* stone-600 */ }

/* Smooth page transitions */
html { scroll-behavior: smooth; }

/* ================================================================
   CUSTOM UTILITIES
   ================================================================ */

.tavern-card {
    @apply bg-stone-800/50 border border-stone-700/60 rounded-2xl backdrop-blur-sm transition-all duration-300;
}

.tavern-card:hover {
    @apply border-amber-500/40 shadow-lg shadow-amber-900/10;
}

.golden-border {
    @apply border border-amber-500/30;
}

/* ================================================================
   PARCHMENT LIGHT MODE
   Remaps dark Tailwind utility classes when html.dark is absent.
   No templates need modification — all overrides live here.
   ================================================================ */

html:not(.dark) body { background-color: #f5e6c8; color: #3d2b1f; }

/* --- Backgrounds --- */
html:not(.dark) .bg-stone-950     { background-color: #fdf6e3 !important; }
html:not(.dark) .bg-stone-900     { background-color: #f5e6c8 !important; }
html:not(.dark) .bg-stone-800     { background-color: #e8d5a3 !important; }
html:not(.dark) .bg-stone-700     { background-color: #d4b896 !important; }
html:not(.dark) .bg-stone-800\/95 { background-color: rgba(232,213,163,0.97) !important; }
html:not(.dark) .bg-stone-800\/80 { background-color: rgba(232,213,163,0.92) !important; }
html:not(.dark) .bg-stone-800\/50 { background-color: rgba(232,213,163,0.5) !important; }
html:not(.dark) .bg-stone-800\/40 { background-color: rgba(232,213,163,0.4) !important; }
html:not(.dark) .bg-stone-900\/80 { background-color: rgba(245,230,200,0.92) !important; }
html:not(.dark) .bg-stone-900\/50 { background-color: rgba(245,230,200,0.5) !important; }
html:not(.dark) .bg-stone-900\/40 { background-color: rgba(245,230,200,0.4) !important; }
html:not(.dark) .bg-stone-700\/60 { background-color: rgba(212,184,150,0.6) !important; }
html:not(.dark) .bg-stone-700\/50 { background-color: rgba(212,184,150,0.5) !important; }
html:not(.dark) .bg-stone-700\/20 { background-color: rgba(212,184,150,0.2) !important; }

/* --- Card & Utility Overrides --- */
html:not(.dark) .tavern-card { background-color: rgba(232,213,163,0.5) !important; border-color: rgba(196,168,130,0.6) !important; }
html:not(.dark) .tavern-card:hover { border-color: rgba(180,83,9,0.4) !important; box-shadow: 0 10px 15px -3px rgba(180,83,9,0.1) !important; }
html:not(.dark) .golden-border { border-color: rgba(180,83,9,0.3) !important; }
html:not(.dark) .btn-primary {
    background-image: linear-gradient(to bottom right, #92400e, #78350f) !important;
    color: #fdf6e3 !important;
    border: 1px solid #451a03 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) .btn-primary:hover {
    background-image: linear-gradient(to bottom right, #b45309, #92400e) !important;
}

html:not(.dark) .btn-secondary {
    background-color: transparent !important;
    color: #92400e !important;
    border: 2px solid #92400e !important;
    font-weight: 800 !important;
}
html:not(.dark) .btn-secondary:hover {
    background-color: #92400e !important;
    color: #fdf6e3 !important;
}

/* --- Text --- */
html:not(.dark) .text-white      { color: #2c1810 !important; }
html:not(.dark) .text-stone-100  { color: #3d2b1f !important; }
html:not(.dark) .text-stone-200  { color: #3d2b1f !important; }
html:not(.dark) .text-stone-300  { color: #5c3d2e !important; }
html:not(.dark) .text-stone-400  { color: #7a5c4a !important; }
html:not(.dark) .text-stone-500  { color: #9b7b6a !important; }
html:not(.dark) .text-stone-600  { color: #b89880 !important; }
html:not(.dark) .text-amber-50   { color: #3d2b1f !important; }
html:not(.dark) .text-amber-100  { color: #3d2b1f !important; }
html:not(.dark) .text-amber-400  { color: #92400e !important; }
html:not(.dark) .text-amber-500  { color: #b45309 !important; }

/* --- Borders --- */
html:not(.dark) .border-stone-800       { border-color: #d4b896 !important; }
html:not(.dark) .border-stone-700       { border-color: #c4a882 !important; }
html:not(.dark) .border-stone-700\/60   { border-color: rgba(196,168,130,0.6) !important; }
html:not(.dark) .border-stone-700\/50   { border-color: rgba(196,168,130,0.5) !important; }
html:not(.dark) .border-stone-700\/40   { border-color: rgba(196,168,130,0.4) !important; }
html:not(.dark) .border-stone-600\/50   { border-color: rgba(168,148,118,0.5) !important; }
html:not(.dark) .border-amber-600       { border-color: #d97706 !important; }
html:not(.dark) .border-amber-600\/40   { border-color: rgba(217,119,6,0.4) !important; }
html:not(.dark) .border-amber-900\/20   { border-color: rgba(120,53,15,0.15) !important; }

/* --- Amber background washes --- */
html:not(.dark) .bg-amber-900\/60 { background-color: rgba(217,119,6,0.15) !important; }
html:not(.dark) .bg-amber-900\/50 { background-color: rgba(217,119,6,0.12) !important; }
html:not(.dark) .bg-amber-900\/40 { background-color: rgba(217,119,6,0.10) !important; }
html:not(.dark) .bg-amber-950\/40 { background-color: rgba(217,119,6,0.10) !important; }
html:not(.dark) .bg-amber-950\/20 { background-color: rgba(217,119,6,0.08) !important; }

/* --- Status: scheduled (emerald) --- */
html:not(.dark) .bg-emerald-900\/60     { background-color: rgba(16,185,129,0.15) !important; }
html:not(.dark) .text-emerald-300       { color: #065f46 !important; }
html:not(.dark) .text-emerald-400       { color: #047857 !important; }
html:not(.dark) .border-emerald-800\/40 { border-color: rgba(16,185,129,0.4) !important; }

/* --- Status: cancelled / danger (red) --- */
html:not(.dark) .bg-red-900\/60     { background-color: rgba(239,68,68,0.15) !important; }
html:not(.dark) .bg-red-900\/40     { background-color: rgba(239,68,68,0.12) !important; }
html:not(.dark) .bg-red-900\/30     { background-color: rgba(239,68,68,0.10) !important; }
html:not(.dark) .bg-red-900\/20     { background-color: rgba(239,68,68,0.08) !important; }
html:not(.dark) .text-red-300       { color: #991b1b !important; }
html:not(.dark) .text-red-400       { color: #b91c1c !important; }
html:not(.dark) .border-red-800\/60 { border-color: rgba(239,68,68,0.35) !important; }
html:not(.dark) .border-red-800\/50 { border-color: rgba(239,68,68,0.30) !important; }
html:not(.dark) .border-red-900\/30 { border-color: rgba(239,68,68,0.20) !important; }

/* --- Flash success (green) --- */
html:not(.dark) .bg-green-900\/40      { background-color: rgba(16,185,129,0.12) !important; }
html:not(.dark) .text-green-300        { color: #065f46 !important; }
html:not(.dark) .border-green-800\/60  { border-color: rgba(16,185,129,0.35) !important; }

/* --- Flash info (blue) --- */
html:not(.dark) .bg-blue-900\/40      { background-color: rgba(59,130,246,0.12) !important; }
html:not(.dark) .text-blue-300        { color: #1e3a5f !important; }
html:not(.dark) .border-blue-800\/60  { border-color: rgba(59,130,246,0.35) !important; }

/* --- Game night / session badge (purple) --- */
html:not(.dark) .bg-purple-900\/40     { background-color: rgba(139,92,246,0.12) !important; }
html:not(.dark) .bg-purple-900\/60     { background-color: rgba(139,92,246,0.15) !important; }
html:not(.dark) .text-purple-300       { color: #4c1d95 !important; }
html:not(.dark) .text-purple-400       { color: #6d28d9 !important; }
html:not(.dark) .border-purple-900\/40 { border-color: rgba(139,92,246,0.25) !important; }

/* --- Scrollbar --- */
html:not(.dark) ::-webkit-scrollbar-track { background: #f5e6c8; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #c4a882; }

/* --- Browser-native form chrome (datetime pickers, select dropdowns) --- */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select { color-scheme: light; }

/* --- Bulletin body Markdown content --- */
html:not(.dark) .bulletin-body h1,
html:not(.dark) .bulletin-body h2  { color: #92400e; }
html:not(.dark) .bulletin-body h3  { color: #b45309; }
html:not(.dark) .bulletin-body p,
html:not(.dark) .bulletin-body ul,
html:not(.dark) .bulletin-body ol  { color: #5c3d2e; }
html:not(.dark) .bulletin-body a   { color: #92400e; }
html:not(.dark) .bulletin-body a:hover    { color: #78350f; }
html:not(.dark) .bulletin-body strong     { color: #3d2b1f; }
html:not(.dark) .bulletin-body code       { background: #e8d5a3; color: #92400e; }
html:not(.dark) .bulletin-body pre        { background: #e8d5a3; border-color: #c4a882; }
html:not(.dark) .bulletin-body blockquote { border-left-color: #c4a882; color: #9b7b6a; }
html:not(.dark) .bulletin-body th { background: #d4b896; color: #3d2b1f; border-color: #c4a882; }
html:not(.dark) .bulletin-body td { color: #5c3d2e; border-color: #c4a882; }

/* --- FullCalendar light-mode CSS variables --- */
html:not(.dark) .fc {
    --fc-border-color: rgba(196,168,130,0.5);
    --fc-page-bg-color: #f5e6c8;
    --fc-button-bg-color: #d4b896;
    --fc-button-border-color: #c4a882;
    --fc-button-hover-bg-color: #c4a882;
    --fc-button-hover-border-color: #b89880;
    --fc-button-active-bg-color: #d97706;
    --fc-button-active-border-color: #d97706;
    --fc-button-text-color: #3d2b1f;
    --fc-today-bg-color: rgba(217,119,6,0.12);
    --fc-neutral-bg-color: rgba(245,230,200,0.6);
    --fc-neutral-text-color: #5c3d2e;
    --fc-list-event-hover-bg-color: rgba(212,184,150,0.5);
    --fc-event-text-color: #fff;
    color: #3d2b1f;
}
/* Force light backgrounds on calendar cells and elements */
html:not(.dark) .fc .fc-scrollgrid,
html:not(.dark) .fc .fc-scrollgrid-section > td,
html:not(.dark) .fc .fc-daygrid-body,
html:not(.dark) .fc .fc-daygrid-day,
html:not(.dark) .fc .fc-col-header,
html:not(.dark) .fc .fc-col-header-cell,
html:not(.dark) .fc .fc-list,
html:not(.dark) .fc .fc-list-table,
html:not(.dark) .fc .fc-list-day th,
html:not(.dark) .fc .fc-list-event td,
html:not(.dark) .fc table,
html:not(.dark) .fc td,
html:not(.dark) .fc th { background-color: #f5e6c8 !important; }
html:not(.dark) .fc .fc-daygrid-day.fc-day-today { background-color: rgba(217,119,6,0.12) !important; }
html:not(.dark) .fc .fc-col-header-cell-cushion,
html:not(.dark) .fc .fc-daygrid-day-number,
html:not(.dark) .fc .fc-list-day-text,
html:not(.dark) .fc .fc-list-day-side-text { color: #7a5c4a; }
html:not(.dark) .fc .fc-toolbar-title { color: #2c1810; }
html:not(.dark) .fc .fc-button-primary:not(:disabled).fc-button-active { color: #f5e6c8; }

/* ================================================================
   EASYMDE RICH TEXT EDITOR — DARK & LIGHT MODE OVERRIDES
   ================================================================ */

/* Dark mode */
.dark .EasyMDEContainer .CodeMirror {
    background: rgb(28 25 23);
    color: rgb(214 211 209);
    border-color: rgb(87 83 78);
}
.dark .EasyMDEContainer .editor-toolbar {
    border-color: rgb(87 83 78);
}
.dark .EasyMDEContainer .editor-toolbar button {
    color: rgb(168 162 158) !important;
}
.dark .EasyMDEContainer .editor-toolbar button:hover,
.dark .EasyMDEContainer .editor-toolbar button.active {
    background: rgb(68 64 60);
    color: rgb(251 191 36) !important;
}
.dark .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: rgb(251 191 36);
}
.dark .EasyMDEContainer .editor-preview {
    background: rgb(41 37 36);
    color: rgb(214 211 209);
}
.dark .EasyMDEContainer .editor-toolbar.disabled-for-preview button:not(.no-disable) {
    color: rgb(120 113 108) !important;
}

/* Light mode (parchment) */
html:not(.dark) .EasyMDEContainer .CodeMirror {
    background: #f5ead4;
    color: #3d2b1f;
    border-color: #c4a882;
}
html:not(.dark) .EasyMDEContainer .editor-toolbar {
    border-color: #c4a882;
}
html:not(.dark) .EasyMDEContainer .editor-toolbar button {
    color: #5c3d2e !important;
}
html:not(.dark) .EasyMDEContainer .editor-toolbar button:hover,
html:not(.dark) .EasyMDEContainer .editor-toolbar button.active {
    background: #e8d5a3;
    color: #92400e !important;
}