/* =====================================================================
   BiggerBlueButton – Global Dark / Light theme
   ---------------------------------------------------------------------
   Build-free theme system. All dark styles are scoped under `html.dark`
   (also `html[data-theme="dark"]`) so light mode is left completely
   untouched. The theme is toggled by public/js/theme.js and persisted
   in localStorage. This file covers the three UI families used in the
   app:
     1. Marketing site  (global.css / structure.css – #Wrapper, .section…)
     2. Breeze / Tailwind app & auth pages (.bg-white, .bg-gray-100, …)
     3. LTI dashboard (Bootstrap – .card, .navbar, .table, …)
   ===================================================================== */

/* ---- Design tokens -------------------------------------------------- */
:root {
    --tt-btn-bg: rgba(0, 0, 0, .05);
    --tt-btn-bg-hover: rgba(0, 0, 0, .1);
    --tt-btn-fg: #1f2937;
    --tt-btn-border: rgba(0, 0, 0, .12);
}

html.dark {
    /* surfaces */
    --bbb-bg: #0f172a;          /* page background            */
    --bbb-surface: #1e293b;     /* cards / panels / navbars   */
    --bbb-surface-2: #273449;   /* raised surface / hovers    */
    --bbb-surface-3: #334155;   /* inputs / borders on cards  */
    /* text */
    --bbb-text: #e5e7eb;
    --bbb-text-muted: #9ca3af;
    --bbb-heading: #f8fafc;
    /* lines */
    --bbb-border: #334155;
    --bbb-border-strong: #475569;
    /* accents kept vivid on dark */
    --bbb-link: #60a5fa;

    --tt-btn-bg: rgba(255, 255, 255, .08);
    --tt-btn-bg-hover: rgba(255, 255, 255, .16);
    --tt-btn-fg: #f8fafc;
    --tt-btn-border: rgba(255, 255, 255, .18);

    color-scheme: dark;
}

/* Smooth, but cheap, cross-fade when switching themes. */
html.dark body,
html.dark #Wrapper,
html.dark .section,
html.dark .bg-white,
html.dark .bg-gray-100,
html.dark .card,
html.dark .navbar {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =====================================================================
   1. Base page
   ===================================================================== */
html.dark,
html.dark body {
    background-color: var(--bbb-bg) !important;
    color: var(--bbb-text);
}

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: var(--bbb-heading);
}

html.dark a {
    color: var(--bbb-link);
}

html.dark hr {
    border-color: var(--bbb-border);
}

/* =====================================================================
   2. Marketing site  (global.css / structure.css)
   ===================================================================== */
html.dark #Wrapper,
html.dark #Content,
html.dark .section,
html.dark .four-column,
html.dark .mcb-section,
html.dark .mcb-wrap-inner,
html.dark .the_content_wrapper {
    background-color: var(--bbb-bg) !important;
    color: var(--bbb-text);
}

html.dark #Header_wrapper,
html.dark #Header,
html.dark #Top_bar,
html.dark #Top_bar .menu > li > a {
    background-color: var(--bbb-surface) !important;
    color: var(--bbb-text);
}

html.dark #Top_bar .menu > li > a span {
    color: var(--bbb-text) !important;
}
html.dark #Top_bar .menu > li:hover > a span,
html.dark #Top_bar .menu > li.current-menu-item > a span {
    color: #fff !important;
}

/* Footer */
html.dark #Footer {
    background-color: #0b1220 !important;
    color: var(--bbb-text-muted);
}
html.dark #Footer a,
html.dark #Footer .widget_recent_entries ul li a {
    color: var(--bbb-text);
}

/* Cards / panels that use white backgrounds in the marketing theme */
html.dark .column_column .the_content_wrapper,
html.dark .content_wrapper,
html.dark .box,
html.dark .pricing-box,
html.dark .plan {
    background-color: var(--bbb-surface) !important;
    color: var(--bbb-text);
    border-color: var(--bbb-border);
}

/* Side slide / mobile menu already dark – keep it */

/* =====================================================================
   3. Breeze / Tailwind utility classes
   (app.blade.php, guest.blade.php, navigation.blade.php, auth pages)
   These override the compiled Tailwind utilities when app.css is loaded.
   ===================================================================== */
html.dark .bg-white       { background-color: var(--bbb-surface) !important; }
html.dark .bg-gray-50     { background-color: var(--bbb-surface-2) !important; }
html.dark .bg-gray-100    { background-color: var(--bbb-bg) !important; }
html.dark .bg-gray-200    { background-color: var(--bbb-surface-2) !important; }
html.dark .bg-gray-800    { background-color: #020617 !important; }

html.dark .text-gray-900  { color: var(--bbb-heading) !important; }
html.dark .text-gray-800  { color: var(--bbb-text) !important; }
html.dark .text-gray-700  { color: var(--bbb-text) !important; }
html.dark .text-gray-600  { color: var(--bbb-text-muted) !important; }
html.dark .text-gray-500  { color: var(--bbb-text-muted) !important; }
html.dark .text-gray-400  { color: var(--bbb-text-muted) !important; }
html.dark .text-black     { color: var(--bbb-text) !important; }

html.dark .border-gray-100 { border-color: var(--bbb-border) !important; }
html.dark .border-gray-200 { border-color: var(--bbb-border) !important; }
html.dark .border-gray-300 { border-color: var(--bbb-border-strong) !important; }

/* Shadows read as muted separators on dark */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .6), 0 1px 2px 0 rgba(0, 0, 0, .5) !important;
}

/* Dropdown ring hairline */
html.dark .ring-black { --tw-ring-color: rgba(255, 255, 255, .12); }

/* Nav link underline colors (Breeze x-nav-link) */
html.dark .border-indigo-400 { border-color: #818cf8 !important; }
html.dark .text-indigo-700   { color: #a5b4fc !important; }

/* Hover backgrounds used by responsive nav / dropdown links */
html.dark .hover\:bg-gray-100:hover { background-color: var(--bbb-surface-2) !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: var(--bbb-surface-2) !important; }
html.dark .hover\:text-gray-700:hover { color: var(--bbb-heading) !important; }

/* =====================================================================
   4. Form controls (Tailwind + Bootstrap)
   ===================================================================== */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select,
html.dark .form-control,
html.dark .form-select {
    background-color: var(--bbb-surface-2) !important;
    color: var(--bbb-text) !important;
    border-color: var(--bbb-border-strong) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus,
html.dark .form-control:focus {
    border-color: var(--bbb-link) !important;
}

/* =====================================================================
   5. LTI dashboard  (Bootstrap)
   ===================================================================== */
html.dark .container-fluid,
html.dark .container { color: var(--bbb-text); }

html.dark .card,
html.dark .list-group-item,
html.dark .modal-content,
html.dark .dropdown-menu {
    background-color: var(--bbb-surface) !important;
    color: var(--bbb-text) !important;
    border-color: var(--bbb-border) !important;
}
html.dark .card-header,
html.dark .card-footer {
    background-color: var(--bbb-surface-2) !important;
    border-color: var(--bbb-border) !important;
}

html.dark .navbar,
html.dark .navbar.bg-light,
html.dark .navbar-light,
html.dark .sidebar {
    background-color: var(--bbb-surface) !important;
    color: var(--bbb-text) !important;
    border-color: var(--bbb-border) !important;
}
html.dark .navbar .nav-link,
html.dark .navbar-light .navbar-nav .nav-link,
html.dark .sidebar .nav-link {
    color: var(--bbb-text-muted) !important;
}
html.dark .navbar .nav-link:hover,
html.dark .sidebar .nav-link.active {
    color: var(--bbb-heading) !important;
}

/* Tables */
html.dark .table {
    color: var(--bbb-text);
    border-color: var(--bbb-border);
}
html.dark .table > :not(caption) > * > * {
    background-color: var(--bbb-surface) !important;
    color: var(--bbb-text) !important;
    border-color: var(--bbb-border) !important;
}
html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bbb-surface-2) !important;
}
html.dark .table-hover > tbody > tr:hover > * {
    background-color: var(--bbb-surface-3) !important;
}

/* Bootstrap text helpers */
html.dark .text-muted   { color: var(--bbb-text-muted) !important; }
html.dark .text-dark    { color: var(--bbb-text) !important; }
html.dark .bg-light     { background-color: var(--bbb-surface-2) !important; }
html.dark .border       { border-color: var(--bbb-border) !important; }
html.dark .close, html.dark .btn-close { filter: invert(1) grayscale(1); }

/* Alerts keep their hue but drop the bright fill */
html.dark .alert { background-color: var(--bbb-surface-2); border-color: var(--bbb-border); color: var(--bbb-text); }

/* =====================================================================
   6. Theme toggle button  (works in both light and dark)
   ===================================================================== */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid var(--tt-btn-border);
    border-radius: 9999px;
    background-color: var(--tt-btn-bg);
    color: var(--tt-btn-fg);
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.theme-toggle-btn:hover  { background-color: var(--tt-btn-bg-hover); }
.theme-toggle-btn:active { transform: scale(.94); }
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--bbb-link, #2563eb);
    outline-offset: 2px;
}
.theme-toggle-btn .theme-toggle-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-toggle-btn .theme-toggle-label { white-space: nowrap; }

/* Icon swap: moon in light mode, sun in dark mode */
.theme-toggle-sun  { display: none; }
.theme-toggle-moon { display: block; }
html.dark .theme-toggle-sun  { display: block; }
html.dark .theme-toggle-moon { display: none; }

/* Floating variant used on the guest/auth pages (no header) */
.theme-toggle-floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background-color: var(--tt-btn-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
html.dark .theme-toggle-floating {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}