/* ============================================================
   TicketLink.cz admin — dark mode
   Additive layer on top of application.css. Every rule is scoped
   under html[data-theme="dark"] body.attendize — the existing
   light admin is completely unaffected when the attribute is
   absent or "light". Same toggle mechanism, same palette, same
   localStorage key (tl-theme) as the public site (main.css).
   ============================================================ */

/* ==========================================================================
   Global chrome & navigation — dark mode
   ========================================================================== */

/* Global page canvas */
html[data-theme="dark"] body.attendize {
    background-color: #000000;
    color: rgba(255,255,255,.62);
}

/* Top navbar: logo panel (#header.navbar > .navbar-header) */
html[data-theme="dark"] body.attendize #header.navbar > .navbar-header {
    background-color: #0d0d0f;
    border-right: 1px solid rgba(255,255,255,.12);
}

/* Top navbar: toolbar strip + nav links */
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar {
    background-color: #0d0d0f;
}
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-collapse {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li > a {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li > a:hover,
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li > a:focus {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li > a:active,
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li > a.active {
    background-color: rgba(255,255,255,.06);
    color: #5FE3D4;
}
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li.open > a,
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li.open > a:hover,
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li.open > a:focus,
html[data-theme="dark"] body.attendize #header.navbar > .navbar-toolbar > .navbar-nav > li.open > a:active {
    background-color: rgba(255,255,255,.06);
    color: #ffffff;
}

/* Profile dropdown + language-switcher dropdown (plain Bootstrap .dropdown-menu) */
html[data-theme="dark"] body.attendize .dropdown-menu {
    background-color: #0d0d0f !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.55);
}
html[data-theme="dark"] body.attendize .dropdown-menu > li > a {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .dropdown-menu > li > a:hover,
html[data-theme="dark"] body.attendize .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize .dropdown-menu > .active > a,
html[data-theme="dark"] body.attendize .dropdown-menu > .active > a:hover,
html[data-theme="dark"] body.attendize .dropdown-menu > .active > a:focus {
    background-color: rgba(255,255,255,.06);
    color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .dropdown-menu .divider {
    background-color: rgba(255,255,255,.12);
}

/* Left sidebar navigation (Sidebar.blade.php: aside.sidebar.sidebar-left.sidebar-menu) */
html[data-theme="dark"] body.attendize .sidebar.sidebar-left.sidebar-menu {
    background-color: #0d0d0f;
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .sidebar .content hr {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .sidebar .content > .heading {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li a {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li a:hover {
    color: #ffffff;
    background-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li a:hover > .figure > [class^="ico-"],
html[data-theme="dark"] body.attendize .sidebar .topmenu li a:hover > .figure > [class*=" ico-"] {
    border-color: rgba(255,255,255,.24);
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li.active a {
    color: #5FE3D4;
    background-color: rgba(255,255,255,.05);
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li.active a > .figure > [class^="ico-"],
html[data-theme="dark"] body.attendize .sidebar .topmenu li.active a > .figure > [class*=" ico-"] {
    color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li.open a {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .sidebar .topmenu li.open a > .figure > [class^="ico-"],
html[data-theme="dark"] body.attendize .sidebar .topmenu li.open a > .figure > [class*=" ico-"] {
    border-color: rgba(255,255,255,.24);
}

/* Page title strip (h1 title bar directly under the navbar) */
html[data-theme="dark"] body.attendize .page-title {
    background-color: #0d0d0f;
    border-top-color: rgba(255,255,255,.12);
    border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .page-title .title {
    color: #ffffff;
}

/* Page header (secondary header row, e.g. event sub-nav under page-title) */
html[data-theme="dark"] body.attendize .page-header {
    border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .page-header .title {
    color: rgba(255,255,255,.62);
    border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .page-header.page-header-block {
    background-color: #0d0d0f;
    border-bottom-color: rgba(255,255,255,.12);
}

/* Breadcrumb */
html[data-theme="dark"] body.attendize .breadcrumb {
    background-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize .breadcrumb > li + li::before {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .breadcrumb > .active {
    color: rgba(255,255,255,.62);
}

/* Tab navigation (.nav-tabs), page-level only — not the nested .panel .panel-toolbar variant */
html[data-theme="dark"] body.attendize .nav-tabs {
    background-color: rgba(255,255,255,.06);
    border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .nav-tabs > li > a {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .nav-tabs > li > a:hover,
html[data-theme="dark"] body.attendize .nav-tabs > li.open > a {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .nav-tabs > li.active > a,
html[data-theme="dark"] body.attendize .nav-tabs > li.active > a:hover,
html[data-theme="dark"] body.attendize .nav-tabs > li.active > a:focus {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    border-bottom-color: #5FE3D4;
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .nav-tabs.nav-justified > li > a {
    border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .nav-tabs.nav-justified > li.active > a,
html[data-theme="dark"] body.attendize .nav-tabs.nav-justified > li.active > a:hover {
    border-bottom-color: #0d0d0f;
}

/* NOTE: no #footer / .footer chrome exists anywhere in the admin backend layout (Shared/Layouts/Master.blade.php has no footer markup — only Shared/Partials/GlobalFooterJS.blade.php, which is script-only, no visible DOM) — nothing to style, skipping. */
/* NOTE: .navbar-brand logo is assets/images/logo-light.png (a white/light logotype) — already used against the existing dark-navy header (#2E3254) so it reads fine on the new near-black header too; no fix needed. */
/* NOTE: .nav-tabs.nav-justified active-tab border-bottom is set to match the surface color it "merges" into visually (originally #fff to blend with a white panel below it) — set here to #0d0d0f to match this file's chosen surface color; if the Panels/cards lane picks a different surface hex, this seam will show a hairline mismatch and should be reconciled. */
/* Form controls: text inputs, textareas, selects (.form-control) */
html[data-theme="dark"] body.attendize .form-control {
  background-color: rgba(255,255,255,.06);
  color: #ffffff;
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
html[data-theme="dark"] body.attendize select,
html[data-theme="dark"] body.attendize select.form-control {
  background-color: rgba(255,255,255,.06) !important; /* light CSS forces select{background:#fff !important} */
  color: #ffffff;
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .form-control::-moz-placeholder,
html[data-theme="dark"] body.attendize .form-control:-ms-input-placeholder,
html[data-theme="dark"] body.attendize .form-control::-webkit-input-placeholder,
html[data-theme="dark"] body.attendize .form-control:-moz-placeholder {
  color: rgba(255,255,255,.42);
  opacity: 1;
}

/* Form control focus state */
html[data-theme="dark"] body.attendize .form-control:focus,
html[data-theme="dark"] body.attendize select.form-control:focus {
  border-color: #5FE3D4;
  box-shadow: 0 0 0 3px rgba(95,227,212,.25);
}

/* Form control disabled / readonly state */
html[data-theme="dark"] body.attendize .form-control[disabled],
html[data-theme="dark"] body.attendize .form-control[readonly],
html[data-theme="dark"] body.attendize fieldset[disabled] .form-control {
  background-color: rgba(255,255,255,.03);
  color: rgba(255,255,255,.42);
  border-color: rgba(255,255,255,.08);
}

/* Form control autofill (browser-saved values flash a bright native fill without this) */
html[data-theme="dark"] body.attendize .form-control:-webkit-autofill,
html[data-theme="dark"] body.attendize .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* TouchSpin numeric-stepper postfix/prefix (organiser fee % / fixed fields — inline <style> in Customize.blade.php) */
html[data-theme="dark"] body.attendize .bootstrap-touchspin-postfix {
  background-color: rgba(255,255,255,.06);
  color: #ffffff;
  border-color: rgba(255,255,255,.12);
}

/* Checkboxes & radios — custom square/circle UI (.custom-checkbox / .custom-radio, seen wrapping "notify_attendee" in CancelAttendee.blade.php and "enable_offline_payments" in Customize.blade.php) */
html[data-theme="dark"] body.attendize .custom-checkbox>label:before,
html[data-theme="dark"] body.attendize .custom-radio>label:before,
html[data-theme="dark"] body.attendize .checkbox-icon>label:before {
  border-color: rgba(255,255,255,.28);
  background-color: rgba(255,255,255,.04);
}
html[data-theme="dark"] body.attendize .custom-checkbox:hover>label:before,
html[data-theme="dark"] body.attendize .custom-radio:hover>label:before {
  border-color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .custom-checkbox>input[type="checkbox"]:checked+label:before,
html[data-theme="dark"] body.attendize .custom-radio>input[type="radio"]:checked+label:before {
  border-color: #5FE3D4;
  background-color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .custom-checkbox>input[type="checkbox"]:checked+label:after {
  color: #000000; /* checkmark glyph — was white-on-navy, needs to be dark to read on the new teal fill */
}
/* .custom-radio's checked inner dot stays white on the teal ring — already legible, left untouched */

/* Checkboxes & radios — raw/native inputs, no custom wrapper (used for "notice_enabled"/"notice_popup_enabled"/"notice_level" and category_badges[] in Customize.blade.php) */
html[data-theme="dark"] body.attendize input[type="checkbox"],
html[data-theme="dark"] body.attendize input[type="radio"] {
  accent-color: #5FE3D4;
}

/* Category-badge reorder rows (Customize.blade.php inline-styled sortable checkbox list) */
html[data-theme="dark"] body.attendize .badge-sort-row {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .badge-sort-row .sortHandle {
  color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .badge-sort-row .sortHandle:hover {
  color: rgba(255,255,255,.72);
}
html[data-theme="dark"] body.attendize .badge-sort-row-placeholder {
  border-color: rgba(255,255,255,.24);
  background: transparent;
}

/* Form labels & help text (.control-label, .help-block) */
html[data-theme="dark"] body.attendize .control-label {
  color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .help-block {
  color: rgba(255,255,255,.62);
}

/* Validation states — .has-error/.has-warning/.has-success border+text hues (#ED5466 / #FFD66A / #4e558f) are already mid-brightness brand colors that read fine on black, so left as-is; only the inline "alert-danger" validation banner needs a dark surface */
html[data-theme="dark"] body.attendize .alert-danger {
  background-color: rgba(237,84,102,.12);
  border-color: rgba(237,84,102,.35);
  color: #ff8a97 !important; /* light CSS sets color:#e8263d !important */
}

/* Buttons — .btn-primary/.btn-success/.btn-danger/.btn-warning/.btn-info/.btn-default already fill with saturated brand colors + white text that read fine on a black canvas; left untouched */

/* Buttons — .btn-link (plain navy #404675 text is unreadable on black) */
html[data-theme="dark"] body.attendize .btn-link,
html[data-theme="dark"] body.attendize .btn.btn-link {
  color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .btn-link:hover,
html[data-theme="dark"] body.attendize .btn-link:focus,
html[data-theme="dark"] body.attendize .btn.btn-link:hover,
html[data-theme="dark"] body.attendize .btn.btn-link:focus,
html[data-theme="dark"] body.attendize .btn.btn-link:active {
  color: #ffffff;
}
html[data-theme="dark"] body.attendize .btn-link[disabled],
html[data-theme="dark"] body.attendize fieldset[disabled] .btn-link {
  color: rgba(255,255,255,.42);
}

/* NOTE: native <select> dropdown option-list chrome and native <input type="file"> "Choose File" button are OS/browser-rendered and cannot be recolored via CSS in either theme. */
/* NOTE: .cover-crop-tool (image crop box) and .iframe_wrap (event-page preview border) in Customize.blade.php's "design" tab are image/preview widgets with their own inline <style>, not form controls — left for whichever lane owns image/preview panels. */
/* NOTE: .btn-default's compiled hover/focus/active/disabled rule sets color:#777 on background:#4d538c (contrast ~1.6:1) — this is a pre-existing light-mode bug (colors are self-contained, independent of page background) rather than something dark mode introduces, so left untouched per "don't touch light mode." */
/* ============================================================
   LANE: Page-specific custom widgets (non-Bootstrap)
   - Event gallery photo grid (EditEventForm.blade.php, Gallery.blade.php)
   - Ticket design accent-color swatches (AccentSwatches.blade.php)
   - Customize page preview panels (cover-crop tool, event-page iframe, ticket preview)
   - Highlights admin page (ManageOrganiser/Highlights.blade.php)
   ============================================================ */

/* Event gallery thumbnail card (EditEventForm.blade.php + reused as-is in
   ManageOrganiser/Gallery.blade.php — same class names, same colors) */
html[data-theme="dark"] body.attendize .event-gallery-thumb {
    border-color: rgba(255,255,255,.12);
    background: #0d0d0f;
}
html[data-theme="dark"] body.attendize .event-gallery-thumb.is-drag-over {
    box-shadow: inset 0 0 0 2px #5FE3D4;
}

/* Hero / Description role strip + "Shown in" language strip under each thumb */
html[data-theme="dark"] body.attendize .event-gallery-thumb-roles,
html[data-theme="dark"] body.attendize .event-gallery-thumb-lang {
    background: rgba(255,255,255,.06);
    border-top-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .event-gallery-thumb-role-label {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .event-gallery-thumb-role-input[data-role="hero"]:checked ~ span {
    color: #4fa3e0;
}
html[data-theme="dark"] body.attendize .event-gallery-thumb-role-input[data-role="description"]:checked ~ span {
    color: #6fcf6f;
}
html[data-theme="dark"] body.attendize .event-gallery-thumb.is-hero .event-gallery-thumb-imgwrap {
    box-shadow: inset 0 0 0 2px #4fa3e0;
}
html[data-theme="dark"] body.attendize .event-gallery-thumb.is-description .event-gallery-thumb-imgwrap {
    box-shadow: inset 0 0 0 2px #6fcf6f;
}
html[data-theme="dark"] body.attendize .event-gallery-thumb.is-hero.is-description .event-gallery-thumb-imgwrap {
    box-shadow: inset 0 0 0 2px #4fa3e0, inset 0 0 0 4px #6fcf6f;
}

/* "Shown in" language dropdown, incl. the amber "restricted to one language" state */
html[data-theme="dark"] body.attendize .event-gallery-thumb-lang-select {
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize .event-gallery-thumb.is-lang-scoped .event-gallery-thumb-lang-select {
    color: #ffb84d;
    border-color: #f0ad4e;
    background: rgba(240,173,78,.12);
}

/* Read-only "inherited from default gallery" preview state (currently unused
   in markup but present in the stylesheet — covered for when it's wired up) */
html[data-theme="dark"] body.attendize .event-gallery-thumb-inherited-roles {
    color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.06);
    border-top-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .event-gallery-inherited {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
}

html[data-theme="dark"] body.attendize #event-gallery-status {
    color: rgba(255,255,255,.42);
}

/* Cover-image crop tool (ManageEvent/Customize.blade.php, design tab) */
html[data-theme="dark"] body.attendize .cover-crop-tool {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize .cover-crop-handle {
    box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 1px 4px rgba(0,0,0,.6);
}

/* Accent-colour picker swatches (Shared/Partials/AccentSwatches.blade.php) —
   per-swatch dot color stays inline (it IS the color being picked); only the
   ring/border chrome around each dot changes */
html[data-theme="dark"] body.attendize .accent-swatch .dot {
    border-color: rgba(255,255,255,.25);
}
html[data-theme="dark"] body.attendize .accent-swatch input:checked + .dot {
    box-shadow: 0 0 0 3px #ffffff;
}
html[data-theme="dark"] body.attendize .accent-swatch input:focus + .dot {
    box-shadow: 0 0 0 3px rgba(95,227,212,.6);
}
html[data-theme="dark"] body.attendize .accent-swatch.is-legacy .dot {
    border-color: #ff6b6b;
}

/* Category-badge drag-to-reorder list (Customize.blade.php, general tab) */
html[data-theme="dark"] body.attendize .badge-sort-row {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .badge-sort-row .sortHandle {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .badge-sort-row .sortHandle:hover {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .badge-sort-row-placeholder {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
}

/* Event-page live preview iframe frame (Customize.blade.php, design tab) —
   border is set via an inline style="" attribute, hence !important */
html[data-theme="dark"] body.attendize .iframe_wrap {
    border-color: rgba(255,255,255,.12) !important;
}

/* Ticket design preview cushion (Customize.blade.php, ticket_design tab) —
   ticket.css itself is deliberately untouched (shared with the PDF renderer,
   hardcodes white/#fff), so we frame it in a white card instead of letting
   it collide directly against the black page */
html[data-theme="dark"] body.attendize .ticket-preview-scroll {
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12);
}

/* Highlights admin page (ManageOrganiser/Highlights.blade.php) */
html[data-theme="dark"] body.attendize #highlights-table .hl-featured {
    background: rgba(95,227,212,.1);
}

/* NOTE: ticket.css (TicketDesignPreview.blade.php / the ticket-design tab preview)
   is intentionally left unstyled per the existing blade comment — it renders
   an always-white/light ticket that must pixel-match the emailed PDF, so it
   stays a light card inside the new .ticket-preview-scroll frame above rather
   than being forced dark; do not add dark rules under .ticket itself. */
/* NOTE: .event-gallery-inherited-bar (EditEventForm.blade.php inline <style>)
   sets only layout (flex/gap/font-size), no color — nothing to override. */
/* NOTE: .event-gallery-thumb-remove / .event-gallery-thumb-move circular
   buttons already use a fixed rgba(0,0,0,.6) dark background + white icon
   (floating on top of the photo) — already correct in both themes, left
   untouched. */
/* ================================================================
   LOGIN / AUTH / CHECK-IN SCANNER — dark mode overrides
   Covers: Shared/Layouts/MasterWithoutMenus.blade.php (Login, Signup,
   ForgotPassword, ResetPassword, SelectOrganiser, CreateOrganiser,
   Installer, AlreadyInstalled, EventNotLivePage) and the two standalone
   check-in documents ManageEvent/CheckIn.blade.php (+ check_in.css) and
   ManageEvent/QrcodeCheckIn.blade.php (legacy scanner).

   IMPORTANT SCOPING NOTE: unlike the rest of the admin, none of these
   pages render <body class="attendize"> — MasterWithoutMenus, CheckIn and
   QrcodeCheckIn all emit a bare <body> (CheckIn uses id="app" only,
   QrcodeCheckIn has no id/class at all). So every rule below is scoped to
   plain `html[data-theme="dark"] body`, NOT `body.attendize`. This is
   intentional and safe: `body.attendize` (used by the rest of the admin's
   dark CSS) has higher specificity than bare `body`, so nothing here can
   leak onto/override the main admin skin, and nothing there can leak onto
   these three documents since they never carry that class.
   ================================================================ */

/* Shared page canvas — replaces the tiled background.png + navy #2E3254
   that all three documents currently hardcode via inline <style>, with the
   flat black canvas used everywhere else in dark mode. Higher specificity
   than the inline <style> blocks' plain `body{...}` (attr-selector beats
   a bare type selector) so no !important needed. color-scheme:dark also
   gets native controls (radio buttons, date pickers, scrollbars) into a
   dark rendering for free on CreateOrganiser's tax radios etc. */
html[data-theme="dark"] body {
  background-color: #000000;
  background-image: none;
  color: #ffffff;
  color-scheme: dark;
}

/* ---- Login/Signup/ForgotPassword/ResetPassword/SelectOrganiser/
   CreateOrganiser panel (MasterWithoutMenus.blade.php inline <style>) ---- */
html[data-theme="dark"] body .panel {
  background-color: #0d0d0f;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 24px rgba(0, 0, 0, .6);
  color: #ffffff;
}
html[data-theme="dark"] body .panel a {
  color: #5FE3D4;
}
html[data-theme="dark"] body .panel a:hover {
  color: #ffffff;
}
/* .forgotPassword is a low-emphasis secondary link — kept dimmer than the
   general .panel a accent above; same specificity so this must stay after
   it in source order to win the tie. */
html[data-theme="dark"] body a.forgotPassword {
  color: rgba(255, 255, 255, .62);
}
html[data-theme="dark"] body a.forgotPassword:hover {
  color: #5FE3D4;
}

/* Attendize wordmark — logo-dark.png is a dark-colored PNG wordmark meant
   for a light card; invisible on the new dark panel. Same fix already used
   elsewhere in this codebase for this exact file (see main.css
   .organiser_logo .is-fallback-logo), so applying the established pattern
   rather than flagging it. Covers both the div.logo>img wrapper used on
   the MasterWithoutMenus pages and QrcodeCheckIn's bare img.logo. */
html[data-theme="dark"] body:not(.attendize) .logo img,
html[data-theme="dark"] body:not(.attendize) img.logo {
  filter: invert(1);
}

/* Field labels — base .control-label is #6f6f6f, unreadable on #0d0d0f */
html[data-theme="dark"] body .control-label {
  color: rgba(255, 255, 255, .62);
}
html[data-theme="dark"] body .has-success .control-label {
  color: #5FE3D4;
}

/* Text inputs (email/password/name/tax fields etc.) */
html[data-theme="dark"] body .form-control {
  background-color: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #ffffff;
}
html[data-theme="dark"] body .form-control::placeholder {
  color: rgba(255, 255, 255, .42);
}
html[data-theme="dark"] body .form-control:focus {
  background-color: rgba(255, 255, 255, .08);
  border-color: #5FE3D4;
  box-shadow: 0 0 0 3px rgba(95, 227, 212, .15);
}
html[data-theme="dark"] body .form-control[disabled],
html[data-theme="dark"] body .form-control[readonly] {
  background-color: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .42);
}

/* Submit buttons (Log In / Sign Up / Submit / Create organiser) — matches
   the same flat white-pill primary button already used site-wide in dark
   mode (see main.css #event_page_wrap .btn-primary/.btn-success, --btn-bg
   #fff / --btn-text #000 / --btn-hover #e9e9e9), replacing the admin's
   default indigo #4e558f so the CTA reads consistently across the site. */
html[data-theme="dark"] body .btn-success,
html[data-theme="dark"] body .btn-primary {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] body .btn-success:hover,
html[data-theme="dark"] body .btn-success:focus,
html[data-theme="dark"] body .btn-success:active,
html[data-theme="dark"] body .btn-primary:hover,
html[data-theme="dark"] body .btn-primary:focus,
html[data-theme="dark"] body .btn-primary:active {
  background-color: #e9e9e9 !important;
  border-color: #e9e9e9 !important;
  color: #000000 !important;
}

/* Alerts (login failure notice via list-group, forgot/reset status,
   signup first_run hint, check-in "no attendees" hint). application.css
   forces `.alert{background:#fff !important}` as a base rule with only
   the text color varying by type — need !important + higher specificity
   to beat that on the background too. */
html[data-theme="dark"] body .alert {
  background: #0d0d0f !important;
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body .alert-info {
  border-color: rgba(95, 227, 212, .35);
  color: #5FE3D4 !important;
}
html[data-theme="dark"] body .alert-success {
  border-color: rgba(107, 224, 138, .35);
  color: #6be08a !important;
}
html[data-theme="dark"] body .alert-warning {
  border-color: rgba(255, 214, 106, .35);
  color: #FFD66A !important;
}
html[data-theme="dark"] body .alert-danger {
  border-color: rgba(237, 84, 102, .35);
  color: #ED5466 !important;
}
html[data-theme="dark"] body .close {
  color: #ffffff;
  text-shadow: none;
}

/* .list-group / .list-group-item — used for the login-failure message, the
   SelectOrganiser account-switcher list, and doubles as the base class for
   CheckIn's attendee rows (.at) further down. */
html[data-theme="dark"] body .list-group-item {
  background-color: #0d0d0f;
  border-color: rgba(255, 255, 255, .12);
  color: #ffffff;
}
html[data-theme="dark"] body .list-group-item:hover,
html[data-theme="dark"] body a.list-group-item:focus {
  background-color: rgba(255, 255, 255, .06);
  color: #ffffff;
}

/* Signup terms-and-conditions checkbox (.custom-checkbox) */
html[data-theme="dark"] body .custom-checkbox > label:before,
html[data-theme="dark"] body .custom-radio > label:before {
  background-color: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
}
html[data-theme="dark"] body .custom-checkbox:hover > label:before,
html[data-theme="dark"] body .custom-radio:hover > label:before {
  border-color: #5FE3D4;
}
html[data-theme="dark"] body .custom-checkbox > input[type="checkbox"]:checked + label:before,
html[data-theme="dark"] body .custom-radio > input[type="radio"]:checked + label:before {
  background-color: #5FE3D4;
  border-color: #5FE3D4;
}
html[data-theme="dark"] body .custom-checkbox > input[type="checkbox"]:checked + label:after {
  color: #000000;
}

/* CreateOrganiser: facebook.com/ and twitter.com/ input-group prefixes —
   the blade view hardcodes style="background-color:#eee" inline, so this
   needs !important to win (a normal declaration can never beat an inline
   style, only an !important one can). */
html[data-theme="dark"] body .input-group-addon {
  background-color: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: rgba(255, 255, 255, .62) !important;
}

/* ================================================================
   CHECK-IN SCANNER SCREEN — ManageEvent/CheckIn.blade.php, its own
   standalone <html>/<style> shell + assets/stylesheet/check_in.css.
   Its inline body background was already the same dark navy
   (#2E3254 + tiled background.png) as the login screen — see the shared
   body rule at the top of this file, which already neutralizes it to flat
   black. Everything below is the fixed white search header and the white
   attendee-list cards on top of it, which check_in.css hardcodes as white
   regardless of theme today.
   ================================================================ */
html[data-theme="dark"] body header {
  background-color: #0d0d0f;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body header .menuToggle {
  color: rgba(255, 255, 255, .5);
}
html[data-theme="dark"] body footer {
  background-color: #0d0d0f;
}
html[data-theme="dark"] body .attendee_search {
  background-color: transparent;
  color: #ffffff;
}
html[data-theme="dark"] body .attendee_search::placeholder {
  color: rgba(255, 255, 255, .42);
}
html[data-theme="dark"] body .qr_search {
  background-color: rgba(255, 255, 255, .06);
  border-right-color: rgba(255, 255, 255, .16);
  color: #ffffff;
}
html[data-theme="dark"] body .clearSearch {
  color: rgba(255, 255, 255, .5);
}
html[data-theme="dark"] body .attendees_title {
  color: rgba(255, 255, 255, .62);
}

/* Attendee rows (.at extends .list-group-item, styled above) — the
   arrived/not-arrived tint and the circular status badge (.ci) */
html[data-theme="dark"] body .at:active {
  background-color: rgba(255, 255, 255, .1) !important;
}
html[data-theme="dark"] body .at.arrived {
  background-color: rgba(54, 241, 88, .14);
}
html[data-theme="dark"] body .at.not_arrived .ci {
  background-color: rgba(255, 255, 255, .1);
}
/* .at.arrived .ci keeps its bright #36F158 fill with a white checkmark —
   already high-contrast on black, no change needed. */

/* QR scanner overlay (.scannerModal and children) is a full-bleed layer
   drawn OVER the live camera feed, not the page background, and its
   colors (white buttons, translucent dashed aimer, semi-opaque result
   card) are already theme-independent by design — intentionally left
   unchanged here. */

/* ================================================================
   LEGACY QR CHECK-IN PAGE — ManageEvent/QrcodeCheckIn.blade.php. This is
   a separate, older standalone scanner (webqr.js canvas-based, not the
   Vue/getUserMedia one above) that loads only application.css + an empty
   qrcode-check-in.css — so #outdiv/#mainbody/.tsel/#help-text/#result
   carry NO project styling at all today, just browser defaults on a plain
   white page. The shared body rule + .logo/img filter above already carry
   most of this page into dark mode; only its one remaining inline style
   needs a targeted fix.
   ================================================================ */
html[data-theme="dark"] body footer h5 {
  color: rgba(255, 255, 255, .42) !important; /* overrides inline style="color:#6D717A" on the PoweredBy line */
}

/* NOTE: reCAPTCHA/hCaptcha (Public/LoginAndRegister/Partials/CaptchaRecaptcha
   & CaptchaHcaptcha) render inside a cross-origin iframe widget with its own
   light-themed chrome — cannot be recolored by this stylesheet. Fixing it
   requires passing data-theme="dark" (recaptcha) / data-theme="dark" attr
   (hcaptcha) into the widget div from the Blade template + JS render call,
   not a CSS change. */
/* NOTE: CreateOrganiser's "about" textarea (class="editable") is enhanced
   client-side into a rich-text editor by OrganiserCreateAndEditJS.blade.php
   ($('.editable').each(...)); its generated toolbar/iframe chrome is
   outside this stylesheet's reach and needs its own dark config if that
   editor supports one. */
/* NOTE: SelectOrganiser.blade.php and CreateOrganiser.blade.php each carry
   their own inline `.modal-header{color:#666 !important}` for a Bootstrap
   modal on those pages (target markup not present in the pages' own
   content, likely a shared delete/confirm modal partial) — left untouched
   since modal chrome is almost certainly owned by whichever lane covers
   Bootstrap modals admin-wide; flagging so it isn't missed. */
/* NOTE: the check-in scanner's live camera view (video#videoContainer,
   #qr-canvas) and QrcodeCheckIn's <canvas id="qr-canvas"> are drawn by the
   qrcode-scan JS libraries (llqrcode.js/webqr.js) — camera pixels and
   canvas frame captures, not themeable via CSS. */
/* Stat tiles (.stat-box) — dashboard KPI numbers (event count, tickets sold, revenue, views) */
html[data-theme="dark"] body.attendize .stat-box {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .stat-box h3 {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .stat-box span {
    color: rgba(255,255,255,.62);
}

/* Dashboard panel/card chrome — wraps the 4 Morris chart panels, countdown, event-url, upcoming-events cards */
html[data-theme="dark"] body.attendize .panel {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .panel-heading {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel-heading.panel-default,
html[data-theme="dark"] body.attendize .panel-default > .panel-heading {
    background-color: rgba(255,255,255,.06);
    color: #ffffff;
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel-title {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .panel-footer {
    background-color: #0d0d0f;
    border-top-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .panel-footer a {
    color: #5FE3D4;
}

/* Revenue/total figures hardcoded as inline style="color: green" on chart panel titles + recent-orders amounts */
html[data-theme="dark"] body.attendize [style*="color: green"] {
    color: #5FE3D4 !important;
}

/* Morris.js hover tooltip (.morris-hover) — real HTML/CSS chrome around the SVG charts, not canvas-locked */
html[data-theme="dark"] body.attendize .morris-hover.morris-default-style {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: #ffffff;
}

/* Countdown + event-url side panels (.panel.panel-success) on the event dashboard */
html[data-theme="dark"] body.attendize .panel.panel-success {
    border-color: rgba(255,255,255,.12);
    background-color: #0d0d0f;
}
html[data-theme="dark"] body.attendize .panel-success > .panel-heading {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .panel-success > .panel-body {
    background-color: #0d0d0f;
    color: rgba(255,255,255,.87);
}

/* Upcoming-events cards (.event.panel) on the organiser dashboard */
html[data-theme="dark"] body.attendize .event.panel {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .event .nav-section > li > .section:after,
html[data-theme="dark"] body.attendize .event .nav-section > li > a:after {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 100%);
}
html[data-theme="dark"] body.attendize .event .section h4 {
    color: #ffffff;
}

/* Recent-orders list (.list-group-item) on the organiser dashboard sidebar */
html[data-theme="dark"] body.attendize .list-group-item {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: #ffffff;
}
html[data-theme="dark"] body.attendize .list-group-item a {
    color: #5FE3D4;
}
html[data-theme="dark"] body.attendize .list-group-item h6,
html[data-theme="dark"] body.attendize .list-group-text {
    color: rgba(255,255,255,.62);
}

/* Empty-state placeholders ("no upcoming events" / "no recent orders") */
html[data-theme="dark"] body.attendize .alert-success {
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .alert-success a {
    color: #5FE3D4;
}

/* Event calendar widget (#calendar, FullCalendar 2.7.1 month view) */
html[data-theme="dark"] body.attendize #calendar {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize #calendar h2 {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize #calendar .fc-unthemed th,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed td,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed thead,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed tbody,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-divider,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-row,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-content,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-popover {
    border-color: rgba(255,255,255,.08) !important;
}
/* Event pills: FullCalendar sets colour via an inline style
   (background-color:#4E558F;border-color:#4E558F) from the dashboard's own
   JS config, not a class — only !important can beat an inline style. Swap
   the old flat purple for a translucent teal chip matching the accent used
   everywhere else (buttons, links, the today highlight below), instead of
   a solid loud fill that would be too heavy at this size. */
html[data-theme="dark"] body.attendize #calendar .fc-event,
html[data-theme="dark"] body.attendize #calendar .fc-event-dot {
    background-color: rgba(95,227,212,.16) !important;
    border-color: rgba(95,227,212,.4) !important;
    border-left: 3px solid #5FE3D4 !important;
    border-radius: 6px !important;
    color: #eafffb !important;
    padding-left: 5px !important;
}
html[data-theme="dark"] body.attendize #calendar .fc-event:hover {
    background-color: rgba(95,227,212,.26) !important;
}
html[data-theme="dark"] body.attendize #calendar .fc-event .fc-title,
html[data-theme="dark"] body.attendize #calendar .fc-event .fc-time {
    color: #eafffb !important;
}
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-popover {
    background-color: #0d0d0f;
}
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-divider,
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-popover .fc-header {
    background: rgba(255,255,255,.06);
}
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-popover .fc-header .fc-close {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize #calendar .fc-unthemed .fc-today {
    background: rgba(95,227,212,.12);
}
html[data-theme="dark"] body.attendize #calendar .fc-day-header,
html[data-theme="dark"] body.attendize #calendar .fc-day-number {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize #calendar .fc-button {
    color: #ffffff;
}
html[data-theme="dark"] body.attendize #calendar .fc-state-hover,
html[data-theme="dark"] body.attendize #calendar .fc-state-down,
html[data-theme="dark"] body.attendize #calendar .fc-state-active,
html[data-theme="dark"] body.attendize #calendar .fc-state-disabled {
    background-color: rgba(255,255,255,.06);
    color: #ffffff;
}

/* NOTE: The 4 Morris.js/Raphael charts (#theChart, #theChart2, #theChart3, #pieChart) render as inline SVG built by a <script> block at the bottom of resources/views/ManageEvent/Dashboard.blade.php (~lines 294-394) — grid lines, axis labels, and line/donut colors (e.g. hardcoded lineColors:['#0390b5','#0066ff']) are set as JS options / SVG attributes there, not via CSS, so they'll stay on their light-mode colors until that script's config is edited (out of scope for this CSS-only pass). */
/* NOTE: EventPanel.blade.php's .panel-heading carries a dead `data-style="background-color:...;background-image:url(...)"` attribute (should be `style=`) meant to tint each upcoming-event card with the event's own bg_color/bg_image — no JS ever reads it, so it's inert in both themes and the heading always falls back to the fixed .panel-success purple; not a dark-mode regression, just pre-existing dead code worth flagging. */
/* ===== Data display lane: tables, panels, alerts, labels/badges, pagination, modals, tooltips/popovers ===== */

/* Tables — base cell/border/text */
html[data-theme="dark"] body.attendize .table>thead>tr>th,
html[data-theme="dark"] body.attendize .table>tbody>tr>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr>th,
html[data-theme="dark"] body.attendize .table>thead>tr>td,
html[data-theme="dark"] body.attendize .table>tbody>tr>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr>td {
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .table .table { background-color: transparent; }
html[data-theme="dark"] body.attendize .table>tbody+tbody { border-top-color: rgba(255,255,255,.12); }
/* header row (already dark navy #4e558f in light mode — keep, just crisp up the rule border) */
html[data-theme="dark"] body.attendize .table tr>th {
    background-color: #383d68;
}
html[data-theme="dark"] body.attendize .table>thead>tr>th {
    border-bottom: 2px solid rgba(255,255,255,.18) !important;
}
html[data-theme="dark"] body.attendize .table tr>th a,
html[data-theme="dark"] body.attendize .table tr>th a:link,
html[data-theme="dark"] body.attendize .table tr>th a:visited {
    color: #fff;
}
html[data-theme="dark"] body.attendize .table tr>th a:hover { color: #5FE3D4; }

/* Table container border */
html[data-theme="dark"] body.attendize .table-responsive {
    border-color: rgba(255,255,255,.12) !important;
}

/* Striped / hover row fills */
html[data-theme="dark"] body.attendize .table-striped>tbody>tr:nth-child(odd)>td,
html[data-theme="dark"] body.attendize .table-striped>tbody>tr:nth-child(odd)>th,
html[data-theme="dark"] body.attendize .table-striped>tbody>tr.odd>td,
html[data-theme="dark"] body.attendize .table-striped>tbody>tr.odd>th {
    background-color: rgba(255,255,255,.04);
}
html[data-theme="dark"] body.attendize .table-hover>tbody>tr:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr:hover>th {
    background-color: rgba(255,255,255,.06);
}

/* Contextual row states (bootstrap .active/.success/.info/.warning/.danger applied to <tr>, e.g. Attendees.blade.php tr.danger for cancelled attendees) — reuse the app's existing brand hues (badge-success navy #4e558f, badge-info cyan #63D3E9, badge-warning gold #FFD66A, badge-danger coral #ED5466) as tinted fills instead of the pale light-mode washes */
html[data-theme="dark"] body.attendize .table>thead>tr.active>th,
html[data-theme="dark"] body.attendize .table>tbody>tr.active>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr.active>th,
html[data-theme="dark"] body.attendize .table>thead>tr.active>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.active>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr.active>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.active:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.active:hover>th {
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff;
}
html[data-theme="dark"] body.attendize .table>thead>tr.success>th,
html[data-theme="dark"] body.attendize .table>tbody>tr.success>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr.success>th,
html[data-theme="dark"] body.attendize .table>thead>tr.success>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.success>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr.success>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.success:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.success:hover>th {
    background-color: rgba(94,102,166,.22) !important;
    border-color: rgba(94,102,166,.4) !important;
    color: #c2c5e8;
}
html[data-theme="dark"] body.attendize .table>thead>tr.info>th,
html[data-theme="dark"] body.attendize .table>tbody>tr.info>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr.info>th,
html[data-theme="dark"] body.attendize .table>thead>tr.info>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.info>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr.info>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.info:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.info:hover>th {
    background-color: rgba(99,211,233,.14) !important;
    border-color: rgba(99,211,233,.35) !important;
    color: #63D3E9;
}
html[data-theme="dark"] body.attendize .table>thead>tr.warning>th,
html[data-theme="dark"] body.attendize .table>tbody>tr.warning>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr.warning>th,
html[data-theme="dark"] body.attendize .table>thead>tr.warning>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.warning>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr.warning>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.warning:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.warning:hover>th {
    background-color: rgba(255,214,106,.14) !important;
    border-color: rgba(255,214,106,.35) !important;
    color: #FFD66A;
}
html[data-theme="dark"] body.attendize .table>thead>tr.danger>th,
html[data-theme="dark"] body.attendize .table>tbody>tr.danger>th,
html[data-theme="dark"] body.attendize .table>tfoot>tr.danger>th,
html[data-theme="dark"] body.attendize .table>thead>tr.danger>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.danger>td,
html[data-theme="dark"] body.attendize .table>tfoot>tr.danger>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.danger:hover>td,
html[data-theme="dark"] body.attendize .table-hover>tbody>tr.danger:hover>th {
    background-color: rgba(237,84,102,.14) !important;
    border-color: rgba(237,84,102,.35) !important;
    color: #ED5466;
}
html[data-theme="dark"] body.attendize .table>tbody>tr.stroke>td,
html[data-theme="dark"] body.attendize .table>tbody>tr.stroke>th {
    background-color: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.42) !important;
}

/* Row-level toolbar (hover action buttons shown per-row, e.g. Orders/Attendees row actions) */
html[data-theme="dark"] body.attendize .table td .toolbar .btn.btn-link {
    color: rgba(255,255,255,.62);
}

/* table-email list (Messages/Emails inbox-style table) */
html[data-theme="dark"] body.attendize .table-email>tbody>tr>td.meta>.sender,
html[data-theme="dark"] body.attendize .table-email>tbody>tr>td.message>.heading {
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .table-email>tbody>tr>td.meta>.date,
html[data-theme="dark"] body.attendize .table-email>tbody>tr>td.message>.text {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .table-email>tbody>tr:first-child>td {
    border-top-color: rgba(255,255,255,.12);
}

/* Panels (card-like containers wrapping tables, e.g. Orders.blade.php / Attendees.blade.php) */
html[data-theme="dark"] body.attendize .panel {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .panel-body {
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .panel .table-responsive {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel>.panel-body+.table,
html[data-theme="dark"] body.attendize .panel>.panel-body+.table-responsive {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel-heading {
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel-default>.panel-heading,
html[data-theme="dark"] body.attendize .panel-heading.panel-default {
    color: rgba(255,255,255,.87);
    background-color: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .panel-toolbar-wrapper {
    background-color: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.1);
}
html[data-theme="dark"] body.attendize .panel .panel-toolbar .static-text {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .panel.panel-default .panel-toolbar .btn-link,
html[data-theme="dark"] body.attendize .panel.panel-default .panel-toolbar>.option>.btn {
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .panel.panel-default .panel-toolbar .btn-link:hover,
html[data-theme="dark"] body.attendize .panel.panel-default .panel-toolbar>.option>.btn:hover {
    color: #fff;
}
html[data-theme="dark"] body.attendize .panel .panel-toolbar>.nav-tabs>li.active>a,
html[data-theme="dark"] body.attendize .panel .panel-toolbar>.nav-tabs>li.active>a:hover,
html[data-theme="dark"] body.attendize .panel .panel-toolbar>.nav-tabs>li.active>a:active,
html[data-theme="dark"] body.attendize .panel .panel-toolbar>.nav-tabs>li.active>a:focus {
    border-color: rgba(255,255,255,.12);
    border-bottom-color: transparent;
    background-color: #0d0d0f;
    color: #fff;
}
html[data-theme="dark"] body.attendize .panel-default .panel-toolbar>.nav-tabs>li>a {
    color: rgba(255,255,255,.42);
}
html[data-theme="dark"] body.attendize .panel-default .panel-toolbar>.nav-tabs>li>a:hover,
html[data-theme="dark"] body.attendize .panel-default .panel-toolbar>.nav-tabs>li.open>a {
    border-bottom-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .panel-footer {
    background-color: rgba(255,255,255,.04);
    border-top-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
}
/* panel-ribbon corner flags — flip the light triangle fill used behind the ribbon icon */
html[data-theme="dark"] body.attendize .panel>.panel-ribbon:after {
    border-color: #0d0d0f transparent transparent transparent;
}
html[data-theme="dark"] body.attendize .panel>.panel-ribbon.pull-right:after {
    border-color: transparent #0d0d0f transparent transparent;
}

/* Alerts — base .alert forces a white bg !important; flip to a dark surface and re-tint each variant's text/border using the app's existing brand hues so the semantic meaning (success/info/warning/danger) still reads */
html[data-theme="dark"] body.attendize .alert {
    background: #0d0d0f !important;
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .alert h4 { color: inherit; }
html[data-theme="dark"] body.attendize .alert-success {
    color: #b9bce0 !important;
    border-color: #4e558f;
}
html[data-theme="dark"] body.attendize .alert-success .alert-link { color: #fff; }
html[data-theme="dark"] body.attendize .alert-info {
    color: #63D3E9 !important;
    border-color: #2f7c8c;
}
html[data-theme="dark"] body.attendize .alert-info .alert-link { color: #9fe6f3; }
html[data-theme="dark"] body.attendize .alert-warning {
    color: #FFD66A !important;
    border-color: #8a7332;
}
html[data-theme="dark"] body.attendize .alert-warning .alert-link { color: #ffe9ab; }
html[data-theme="dark"] body.attendize .alert-danger {
    color: #ED5466 !important;
    border-color: #8a3038;
}
html[data-theme="dark"] body.attendize .alert-danger .alert-link { color: #ff8f9a; }
html[data-theme="dark"] body.attendize .alert-boring {
    color: rgba(255,255,255,.62) !important;
    background-color: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* Labels & badges — these render as small self-contained colour pills (own bg + white text, e.g. Order status label in Orders.blade.php) that don't derive from page background, so their existing brand colours (navy/cyan/gold/coral) already read fine on black. No override needed. */

/* Pagination (Orders/Attendees list footer, Html paginator) */
html[data-theme="dark"] body.attendize .pagination>li>a,
html[data-theme="dark"] body.attendize .pagination>li>span,
html[data-theme="dark"] body.attendize .pager>li>a,
html[data-theme="dark"] body.attendize .pager>li>span {
    background-color: #0d0d0f;
    color: #5FE3D4;
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.attendize .pagination>li>a:hover,
html[data-theme="dark"] body.attendize .pagination>li>span:hover,
html[data-theme="dark"] body.attendize .pagination>li>a:focus,
html[data-theme="dark"] body.attendize .pagination>li>span:focus,
html[data-theme="dark"] body.attendize .pager>li>a:hover,
html[data-theme="dark"] body.attendize .pager>li>span:hover {
    background-color: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff !important;
}
html[data-theme="dark"] body.attendize .pagination>.active>a,
html[data-theme="dark"] body.attendize .pagination>.active>span,
html[data-theme="dark"] body.attendize .pagination>.active>a:hover,
html[data-theme="dark"] body.attendize .pagination>.active>span:hover,
html[data-theme="dark"] body.attendize .pagination>.active>a:focus,
html[data-theme="dark"] body.attendize .pagination>.active>span:focus,
html[data-theme="dark"] body.attendize .pager>.active>a,
html[data-theme="dark"] body.attendize .pager>.active>span {
    background-color: #5FE3D4;
    border-color: #5FE3D4;
    color: #000 !important;
}
html[data-theme="dark"] body.attendize .pagination>.disabled>a,
html[data-theme="dark"] body.attendize .pagination>.disabled>a:hover,
html[data-theme="dark"] body.attendize .pagination>.disabled>a:focus,
html[data-theme="dark"] body.attendize .pagination>.disabled>span,
html[data-theme="dark"] body.attendize .pagination>.disabled>span:hover,
html[data-theme="dark"] body.attendize .pagination>.disabled>span:focus {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.42);
}

/* Modals (Shared/Layouts/Modal.blade.php shell — used for order details, cancel/refund, message, invite, import, etc.) */
html[data-theme="dark"] body.attendize .modal-content {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 3px 9px rgba(0,0,0,.6);
}
/* modal-header keeps its existing brand navy (#404675) fill + white title — already dark and theme-independent, left as-is */
html[data-theme="dark"] body.attendize .modal-body {
    background-color: #0d0d0f;
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .modal-footer {
    background-color: rgba(255,255,255,.04);
    border-top-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
}
html[data-theme="dark"] body.attendize .modal-backdrop {
    background: rgba(0,0,0,.75) !important;
}

/* Tooltips (bootstrap .tooltip-inner is already black-on-white text — theme independent, left as-is) */

/* Popovers */
html[data-theme="dark"] body.attendize .popover {
    background-color: #0d0d0f;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
}
html[data-theme="dark"] body.attendize .popover-title {
    background-color: rgba(255,255,255,.04);
    border-bottom-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .popover-content {
    color: rgba(255,255,255,.87);
}
html[data-theme="dark"] body.attendize .popover.top>.arrow { border-top-color: rgba(255,255,255,.18); }
html[data-theme="dark"] body.attendize .popover.top>.arrow:after { border-top-color: #0d0d0f; }
html[data-theme="dark"] body.attendize .popover.bottom>.arrow { border-bottom-color: rgba(255,255,255,.18); }
html[data-theme="dark"] body.attendize .popover.bottom>.arrow:after { border-bottom-color: #0d0d0f; }
html[data-theme="dark"] body.attendize .popover.left>.arrow { border-left-color: rgba(255,255,255,.18); }
html[data-theme="dark"] body.attendize .popover.left>.arrow:after { border-left-color: #0d0d0f; }
html[data-theme="dark"] body.attendize .popover.right>.arrow { border-right-color: rgba(255,255,255,.18); }
html[data-theme="dark"] body.attendize .popover.right>.arrow:after { border-right-color: #0d0d0f; }

/* NOTE: no DataTables plugin classes found anywhere in application.css or resources/views/ManageEvent — the admin uses plain server-rendered .table + Laravel paginator, not the JS DataTables plugin. */
/* NOTE: no .tooltip/.popover instantiation found in ManageEvent views via grep — Bootstrap tooltip/popover JS may be unused in this section; rules above are included defensively since the CSS classes exist in application.css. */
/* NOTE: .alert-warning text color #FFD66A on a near-black surface has borderline contrast for small text (~3:1) — same relative contrast issue already existed in light mode (gold text on near-white bg); flagging in case a brighter gold is wanted later. */
/* ============================================================
   Theme toggle button — shared markup/behaviour, both admin layouts
   ============================================================ */
.theme-toggle-wrap {
    float: left;
}
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 49px;
    line-height: 49px;
    padding: 0 15px;
    font-size: 16px;
    color: inherit;
    opacity: .75;
    transition: opacity .15s;
}
.theme-toggle:hover,
.theme-toggle:focus {
    opacity: 1;
    outline: none;
}
.theme-toggle i {
    vertical-align: middle;
}

/* ============================================================
   Modern flat pass — round + flatten to match the public frontpage's
   design language (rounded surfaces, no shadows on static elements,
   consistent teal accent). Dark mode only for now.
   ============================================================ */
html[data-theme="dark"] body.attendize .panel {
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}
html[data-theme="dark"] body.attendize .panel-heading {
    border-radius: 0;
}
html[data-theme="dark"] body.attendize .btn {
    border-radius: 999px;
    box-shadow: none;
    font-weight: 600;
}
html[data-theme="dark"] body.attendize .btn-success,
html[data-theme="dark"] body.attendize .btn-primary {
    background-color: #5FE3D4;
    border-color: #5FE3D4;
    color: #08201d;
}
html[data-theme="dark"] body.attendize .btn-success:hover,
html[data-theme="dark"] body.attendize .btn-success:focus,
html[data-theme="dark"] body.attendize .btn-primary:hover,
html[data-theme="dark"] body.attendize .btn-primary:focus {
    background-color: #4fd0c1;
    border-color: #4fd0c1;
    color: #08201d;
}
html[data-theme="dark"] body.attendize .form-control {
    border-radius: 10px;
}
html[data-theme="dark"] body.attendize .modal-content {
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
html[data-theme="dark"] body.attendize .label,
html[data-theme="dark"] body.attendize .badge {
    border-radius: 999px;
}
html[data-theme="dark"] body.attendize .alert {
    border-radius: 10px;
}
html[data-theme="dark"] body.attendize .dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    overflow: hidden;
}
html[data-theme="dark"] body.attendize .stat-box {
    border-radius: 14px;
}

/* Force the left navbar group (hamburger + Event Page) to stay inline at
   any width. Bootstrap's own @media (768-991px) rule stacks .navbar-main
   as a block; overriding unconditionally per explicit request, not just
   within that range, so window-resizing never reintroduces the gap. */
html[data-theme="dark"] body.attendize .navbar-nav.navbar-left {
    display: flex !important;
    align-items: center;
}
html[data-theme="dark"] body.attendize .navbar-nav.navbar-left > li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
}
/* The real cause of the stacking: #header.navbar>.navbar-toolbar>.navbar-nav>.navbar-main
   is position:absolute;top:0;left:0 in application.css (an ID selector, pinning
   it to the header corner regardless of display/float) whenever it is visible
   at all — normally masked because that li is display:none above 992px. */
html[data-theme="dark"] body.attendize .navbar-main {
    position: static !important;
}
@media (min-width: 992px) {
    html[data-theme="dark"] body.attendize li.navbar-main {
        display: inline-block !important;
    }
}