/* -----------------------------------------------
   MyGuide Connect — Light / Dark Theme Switcher
   Light is default. Add class .theme-dark to body
   to activate dark mode.
   Brand primary: #CBA86B (gold)
   ----------------------------------------------- */

/* Pre-Angular dark class applied to <html> to prevent flash */
html.theme-dark-pending body.mgConnect {
    background-color: #0b0e14;
    color: #e6edf3;
}

/* ---- CSS Variables — Light (default) ---- */
body.mgConnect {
    --mg-body-bg:        #f4f7fb;
    --mg-card-bg:        #ffffff;
    --mg-card-header-bg: #f1f3f5;
    --mg-card-header-fg: #343a40;
    --mg-text:           #343a40;
    --mg-text-muted:     #6c757d;
    --mg-border:         #e9ecef;
    --mg-input-bg:       #ffffff;
    --mg-input-border:   #dee2e6;
    --mg-roundedBg:      #f1f3f5;
    --mg-roundedBg-text: #343a40;
    --mg-table-stripe:   #f8f9fa;
    --mg-table-hover:    #f1f3f5;
    --mg-brand:          #e91d62;
    --mg-brand-rgb:      233, 29, 98;

    /* App shell — header + sidebar sit on the same surface as the page, separated
       by a hairline rather than a dark slab. */
    --mg-shell-bg:        #fbfcfe;
    --mg-topbar-bg:       rgba(255, 255, 255, 0.85);
    --mg-shell-fg:        #1f2937;
    --mg-shell-muted:     #6b7280;
    --mg-shell-border:    rgba(15, 23, 42, 0.1);
    --mg-shell-hover:     #f1f4f9;
    --mg-shell-sub-bg:    #f7f9fc;
    --mg-shell-active-bg:     rgba(233, 29, 98, 0.09);
    --mg-shell-active-grad:   linear-gradient(135deg, rgba(233, 29, 98, 0.16), rgba(244, 141, 175, 0.10));
    --mg-shell-active-border: rgba(233, 29, 98, 0.28);
    --mg-shell-active-fg:     #1a2140;

    /* Verified tier. The brand dark blue is unreadable on the dark surface,
       so the dark theme uses the brand book's light blue instead. */
    --mg-verified:       #12263e;
    --mg-verified-soft:  rgba(18, 38, 62, 0.10);

    /* Business selector — brand pink fade from the brand book, with a top sheen. */
    --mg-pill-gradient:   linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 52%),
                          linear-gradient(135deg, #f4639a 0%, #e91d62 58%, #cf1054 100%);
    --mg-pill-fg:         #ffffff;
    --mg-pill-shadow:     0 2px 6px rgba(233, 29, 98, 0.30);

    --mg-header-bg:      var(--mg-shell-bg);
    --mg-header-fg:      var(--mg-shell-fg);
    --mg-sidebar-bg:     var(--mg-shell-bg);
    --mg-sidebar-border: var(--mg-shell-border);

    /* Page title bar sits on the page, not on a slab of its own. */
    --mg-breadcrumb-bg:  transparent;
    --mg-breadcrumb-fg:  #1f2937;

    /* modal */
    --mg-modal-bg:       #ffffff;
    --mg-modal-header-bg:#f1f3f5;

    background-color: var(--mg-body-bg);
    color: var(--mg-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---- CSS Variables — Dark ---- */
body.mgConnect.theme-dark {
    --mg-body-bg:        #0b0e14;
    --mg-card-bg:        #121721;
    --mg-card-header-bg: #161c27;
    --mg-card-header-fg: #e6edf3;
    --mg-text:           #e6edf3;
    --mg-text-muted:     #8b949e;
    --mg-border:         #222834;
    --mg-input-bg:       #161c27;
    --mg-input-border:   #2a313f;
    --mg-roundedBg:      #161c27;
    --mg-roundedBg-text: #e6edf3;
    --mg-table-stripe:   #121721;
    --mg-table-hover:    #1a212c;

    --mg-shell-bg:        #0f1218;
    --mg-topbar-bg:       rgba(6, 9, 18, 0.7);
    --mg-shell-fg:        #e6edf3;
    --mg-shell-muted:     #8b949e;
    --mg-shell-border:    rgba(255, 255, 255, 0.08);
    --mg-shell-hover:     #161c27;
    --mg-shell-sub-bg:    #0a0d14;
    --mg-shell-active-bg:     rgba(233, 29, 98, 0.16);
    --mg-shell-active-grad:   linear-gradient(135deg, rgba(233, 29, 98, 0.30), rgba(244, 141, 175, 0.14));
    --mg-shell-active-border: rgba(233, 29, 98, 0.38);
    --mg-shell-active-fg:     #ffffff;

    --mg-verified:       #70bdfb;
    --mg-verified-soft:  rgba(112, 189, 251, 0.14);

    --mg-pill-gradient:   linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 52%),
                          linear-gradient(135deg, #e93f7d 0%, #e91d62 58%, #b81450 100%);
    --mg-pill-fg:         #ffffff;
    --mg-pill-shadow:     0 2px 10px rgba(233, 29, 98, 0.35);

    --mg-header-bg:      var(--mg-shell-bg);
    --mg-header-fg:      var(--mg-shell-fg);
    --mg-sidebar-bg:     var(--mg-shell-bg);
    --mg-sidebar-border: var(--mg-shell-border);

    --mg-breadcrumb-bg:  transparent;
    --mg-breadcrumb-fg:  #e6edf3;

    --mg-modal-bg:       #121721;
    --mg-modal-header-bg:#161c27;
}

/* ---- Apply variables ---- */

/* Sidebar logo follows the shell: dark wordmark on the light theme, light on dark. */
body.mgConnect.theme-dark #sidebar.offcanvas .offcanvas-header > a .logo-on-light { display: none; }
body.mgConnect.theme-dark #sidebar.offcanvas .offcanvas-header > a .logo-on-dark  { display: block; }

/* Main content area */
body.mgConnect #main {
    background-color: var(--mg-body-bg);
    color: var(--mg-text);
}
body.mgConnect #main #dashboard,
body.mgConnect #main #configuration,
body.mgConnect #main #bookings,
body.mgConnect #main #bookings-table {
    background-color: var(--mg-body-bg);
}

/* General text */
body.mgConnect p,
body.mgConnect h1, body.mgConnect h2, body.mgConnect h3,
body.mgConnect h4, body.mgConnect h5, body.mgConnect h6,
body.mgConnect label,
body.mgConnect strong {
    color: var(--mg-text);
}
/* Header entity title inherits header foreground, not body text */
body.mgConnect header .header-entity-title strong,
body.mgConnect header .header-entity-title small {
    color: inherit;
}
body.mgConnect .text-muted {
    color: var(--mg-text-muted) !important;
}
body.mgConnect a {
    color: var(--mg-brand);
}
body.mgConnect a:hover {
    color: var(--mg-brand);
    filter: brightness(0.85);
}

/* Cards */
body.mgConnect .card {
    background-color: var(--mg-card-bg);
    border-color: var(--mg-border);
    color: var(--mg-text);
}
body.mgConnect .card-header {
    background-color: var(--mg-card-header-bg);
    color: var(--mg-card-header-fg);
    border-bottom-color: var(--mg-border);
}
body.mgConnect .card-footer {
    background-color: var(--mg-card-bg);
    border-top-color: var(--mg-border);
    color: var(--mg-text-muted);
}

/* List groups — Bootstrap 5.1 hardcodes #fff here, so rows inside a card
   stayed white in the dark theme (opening hours, people with access). */
body.mgConnect .list-group-item {
    background-color: var(--mg-card-bg);
    border-color: var(--mg-border);
    color: var(--mg-text);
}
body.mgConnect .list-group-item-action:hover,
body.mgConnect .list-group-item-action:focus {
    background-color: var(--mg-shell-hover);
    color: var(--mg-text);
}

/* Login box — override card theming so the semi-transparent dark bg shows through */
body.mgConnect #login .card,
body.mgConnect #login .card-header,
body.mgConnect #login .card-footer {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    box-shadow: none !important;
}

/* text-bg-light Bootstrap utility used in package editor cards */
body.mgConnect .text-bg-light {
    background-color: var(--mg-card-bg) !important;
    color: var(--mg-text) !important;
}

/* roundedBg (dashboard widgets) */
body.mgConnect .roundedBg {
    background: var(--mg-roundedBg);
    color: var(--mg-roundedBg-text);
}

/* Header (dark in both themes, but uses variable for easy override) */
body.mgConnect header {
    background: var(--mg-header-bg);
    color: var(--mg-header-fg);
}
body.mgConnect header a,
body.mgConnect header button {
    color: var(--mg-header-fg);
}

/* Sidebar */
body.mgConnect #sidebar .offcanvas-header {
    background-color: var(--mg-header-bg);
}
body.mgConnect #sidebar .offcanvas-body {
    background-color: var(--mg-sidebar-bg);
}
body.mgConnect #sidebar .offcanvas-body ul li a {
    border-bottom-color: var(--mg-sidebar-border);
}
body.mgConnect #sidebar .offcanvas-footer {
    background: var(--mg-sidebar-bg);
}

/* Breadcrumb config bar — sticky under header, themed background */
body.mgConnect .breadcrumbsConfig,
body.mgConnect #main #configuration .breadcrumbsConfig,
body.mgConnect #main #dashboard .breadcrumbsConfig,
body.mgConnect #main #bookings .breadcrumbsConfig,
body.mgConnect #main #account .breadcrumbsConfig {
    background: var(--mg-breadcrumb-bg);
    color: var(--mg-breadcrumb-fg);
}
body.mgConnect #main #configuration .breadcrumbsConfig h3,
body.mgConnect #main #configuration .breadcrumbsConfig h4,
body.mgConnect .breadcrumbsConfig h3,
body.mgConnect .breadcrumbsConfig h4 {
    color: var(--mg-breadcrumb-fg);
}

/* nav-link colors in content area */
body.mgConnect #main #configuration .nav-link,
body.mgConnect #main #configuration .flex-column li a {
    color: var(--mg-text);
}

/* Tables */
body.mgConnect .table {
    color: var(--mg-text);
    border-color: var(--mg-border);
    --bs-table-color: var(--mg-text);
    --bs-table-bg: var(--mg-card-bg);
    --bs-table-border-color: var(--mg-border);
    --bs-table-striped-bg: var(--mg-table-stripe);
    --bs-table-striped-color: var(--mg-text);
    --bs-table-hover-bg: var(--mg-table-hover);
    --bs-table-hover-color: var(--mg-text);
}
body.mgConnect .table thead.table-light th {
    background-color: var(--mg-table-stripe);
    color: var(--mg-text);
    border-color: var(--mg-border);
}

/* Form controls */
body.mgConnect .form-control,
body.mgConnect .form-select {
    background-color: var(--mg-input-bg) !important;
    border-color: var(--mg-input-border) !important;
    color: var(--mg-text) !important;
}
body.mgConnect .form-control::placeholder {
    color: var(--mg-text-muted);
}
body.mgConnect .input-group-text {
    background-color: var(--mg-table-stripe);
    border-color: var(--mg-input-border);
    color: var(--mg-text);
}

/* Dropdown menus */
body.mgConnect .dropdown-menu {
    background-color: var(--mg-card-bg);
    border-color: var(--mg-border);
}
body.mgConnect .dropdown-item {
    color: var(--mg-text);
}
body.mgConnect .dropdown-item:hover,
body.mgConnect .dropdown-item:focus {
    background-color: var(--mg-table-hover);
    color: var(--mg-text);
}

/* Modals */
body.mgConnect .modal-content {
    background-color: var(--mg-modal-bg);
    border-color: var(--mg-border);
    color: var(--mg-text);
}
body.mgConnect .modal-header {
    background-color: var(--mg-modal-header-bg);
    border-bottom-color: var(--mg-border);
    color: var(--mg-card-header-fg);
}
body.mgConnect .modal-footer {
    background-color: var(--mg-modal-bg);
    border-top-color: var(--mg-border);
}

/* Alerts */
body.mgConnect .alert-info {
    background-color: rgba(var(--mg-brand-rgb), 0.12);
    border-color: rgba(var(--mg-brand-rgb), 0.3);
    color: var(--mg-text);
}

/* Bootstrap bg utilities used in cards */
body.mgConnect.theme-dark .bg-light {
    background-color: var(--mg-table-stripe) !important;
    color: var(--mg-text) !important;
}
body.mgConnect.theme-dark .bg-white {
    background-color: var(--mg-card-bg) !important;
}

/* Accordion */
body.mgConnect.theme-dark .accordion-item {
    background-color: var(--mg-card-bg);
    border-color: var(--mg-border);
    color: var(--mg-text);
}
body.mgConnect.theme-dark .accordion-button {
    background-color: var(--mg-card-header-bg);
    color: var(--mg-card-header-fg);
}

/* Bookings table action buttons — light theme */
body.mgConnect #main #bookings .btn-outline-primary,
body.mgConnect #main #bookings-table .btn-outline-primary {
    font-size: 12px;
    color: #212529;
    background-color: #ffffff;
    border-color: #ffffff;
}

/* Bookings table action buttons — dark theme */
body.mgConnect.theme-dark #main #bookings .btn-outline-primary,
body.mgConnect.theme-dark #main #bookings-table .btn-outline-primary {
    color: #e2e6ea;
    background-color: #2d3142;
    border-color: #2d3142;
}

/* Brand accent */
body.mgConnect .btn-pink {
    background-color: #e91d62;
    border-color: #e91d62;
    color: #ffffff;
}
body.mgConnect .pink,
body.mgConnect .pink-color {
    color: #e91d62 !important;
}

/* -----------------------------------------------
   Persistent sidebar on large screens (lg+)
   Bootstrap offcanvas is overridden to always show.
   On small screens the hamburger + offcanvas behaviour
   is preserved unchanged.
   ----------------------------------------------- */
@media (min-width: 992px) {

    /* Sidebar geometry (width, pinning, content offset) lives in
       sass/partials/_sidebar.scss. Only the close button is handled here. */
    body.mgConnect #sidebar .btn-close {
        display: none !important;
    }

    body.mgConnect .offcanvas-backdrop {
        display: none !important;
    }

    body.mgConnect header .navbar-toggler[data-bs-target="#sidebar"] {
        display: none !important;
    }
}

/* Theme toggle button in header */
body.mgConnect .btn-theme-toggle {
    background: transparent;
    border: 1px solid var(--mg-shell-border);
    color: var(--mg-shell-fg);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
body.mgConnect .btn-theme-toggle:hover {
    border-color: var(--mg-brand);
    background: rgba(var(--mg-brand-rgb), 0.15);
}
body.mgConnect .btn-theme-toggle i {
    font-size: 13px;
}