/* ============================================================
 * Comet Theme - overrides the Nexus parent theme with the
 * cometbackend visual language: dark left sidebar navigation,
 * comet palette, Open Sans typography, orange primary buttons.
 * ============================================================ */

:root {
    --comet-blue-link: #4C44C1;
    --comet-light-grey: #F8F8F8;
    --comet-vlight-grey: #FbFbFb;
    --comet-orange: #D88463;
    --comet-orange-disabled: #e09f85;
    --comet-orange-hover: #ce653b;
    --comet-orange-10: #FBF3EF;
    --comet-orange-10-dark: #4A383F;
    --comet-yellow: #f8c308;
    --comet-blue: #007589;
    --comet-blue-10: #e6f1f3;
    --comet-grey: #E5E5E5;
    --comet-grey-25: #fafafa;
    --comet-grey-50: #f2f2f2;
    --comet-greyish: #74777D;
    --comet-dark-grey: #555555;
    --comet-dark-grey-75: #777777;
    --comet-green: #36772C;
    --comet-red: #e50000;
    --comet-black: #000000;
    --comet-dark: #362312;
    --comet-box-radius: 6px;
    --comet-sidebar-width: 256px;
    --comet-sidebar-width-collapsed: 64px;
    --comet-topbar-height: 64px;
    --comet-background-main: var(--comet-light-grey);
    --comet-button-text: white;
    --comet-button: var(--comet-orange);
    --comet-button-hover: var(--comet-orange-hover);

    /* Bootstrap-style aliases so parent styles look right */
    --primary: var(--comet-orange);
    --info: var(--comet-blue);
    --bg-lifted: #ffffff;
    --bg-accented: var(--comet-grey-25);
    --bg-inverted: var(--comet-dark);
    --border: var(--comet-grey);
    --border-lifted: #d5d5d5;
    --border-accented: var(--comet-orange);
    --text-lifted: var(--comet-dark-grey);
    --text-accented: var(--comet-orange);
    --text-muted: var(--comet-dark-grey-75);
    --grayscale-accented: var(--comet-dark);
    --rounding-sm: 4px;
    --rounding-md: var(--comet-box-radius);
}

/* ---------- Typography ---------- */
body.comet-theme {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--comet-dark-grey);
    background: var(--comet-background-main);
}

body.comet-theme h1 { font-size: 24px; font-weight: 700; }
body.comet-theme h2 { font-size: 20px; font-weight: 700; }
body.comet-theme h3 { font-size: 17px; font-weight: 600; }
body.comet-theme h4 { font-size: 15px; font-weight: 600; }
body.comet-theme h5 { font-size: 14px; font-weight: 600; }

/* Anchor color rules are scoped away from .btn (and its descendants) so
 * we don't repaint the label text on anchor-buttons like .btn-success,
 * .btn-order-now, or bg-color-* pills — those variants set their own
 * background and rely on the Bootstrap/nexus default label color.
 *
 * Wrapped in :where() to keep specificity low (0,1,1) so more specific
 * rules — most importantly `.comet-sidebar a` for the white nav links —
 * still win without needing !important. */
body.comet-theme :where(a:not(.btn):not(.btn *)) { color: var(--comet-blue-link); }
body.comet-theme :where(a:not(.btn):not(.btn *)):hover { color: var(--comet-orange-hover); text-decoration: none; }

/* ---------- Page layout: sidebar + main ---------- */
.comet-page {
    display: grid;
    grid-template-columns: var(--comet-sidebar-width) 1fr;
    min-height: 100vh;
}

.comet-main {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let flex children shrink */
    background: var(--comet-background-main);
}

/* ---------- Left sidebar ---------- */
.comet-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    width: var(--comet-sidebar-width);
    background: var(--comet-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: width 200ms ease-in-out;
}

/* Force sidebar anchors white; wins over `body.comet-theme a` via
 * a compound selector rather than !important. */
body.comet-theme .comet-sidebar a,
body.comet-theme .comet-sidebar a:hover,
body.comet-theme .comet-sidebar a:focus,
body.comet-theme .comet-sidebar a:active {
    color: #fff;
    text-decoration: none;
}

.comet-sidebar,
.comet-sidebar * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.comet-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 12px 16px;
}

.comet-sidebar-brand {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
}

.comet-sidebar-brand:hover { color: #fff; text-decoration: none; }

.comet-sidebar-logo {
    max-height: 42px;
    max-width: 200px;
    height: auto;
    width: auto;
    filter: brightness(0) invert(1);
}

.comet-sidebar-brand-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comet-sidebar-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    padding: 6px 10px;
    cursor: pointer;
}

.comet-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 6px 0 6px 0;
    gap: 2px;
}

.comet-nav-link,
.comet-nav-sublink,
.comet-nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 18px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0 6px 6px 0;
    margin-right: 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.2s ease-out;
}

.comet-nav-toggle {
    width: calc(100% - 16px);
}

.comet-nav-link:hover,
.comet-nav-sublink:hover,
.comet-nav-toggle:hover {
    background-color: var(--comet-orange-10-dark);
    color: #fff;
    text-decoration: none;
}

.comet-nav-link.active,
.comet-nav-sublink.active {
    background-color: var(--comet-orange);
    color: #fff;
}

.comet-nav-icon {
    width: 22px;
    text-align: center;
    font-size: 18px;
    flex-shrink: 0;
}

.comet-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.comet-nav-badge {
    background-color: var(--comet-orange);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}

.comet-nav-caret {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.2s ease-out;
}

.comet-nav-toggle[aria-expanded="true"] .comet-nav-caret { transform: rotate(180deg); }

.comet-nav-submenu {
    display: none;
    flex-direction: column;
    padding: 2px 0 6px 22px;
}

.comet-nav-submenu.show,
.comet-nav-submenu.collapsing {
    display: flex;
}

.comet-nav-submenu .comet-nav-sublink {
    height: 36px;
    font-size: 14px;
    font-weight: 400;
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 6px 6px 0;
    margin-left: 4px;
}

.comet-nav-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 6px 20px;
}

.comet-sidebar-spacer { flex-grow: 1; }

/* Account block */
.comet-sidebar-account {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.comet-sidebar-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.comet-sidebar-account-link:hover { color: #fff; text-decoration: none; }

.comet-sidebar-account-icon {
    font-size: 32px;
    color: var(--comet-orange);
    flex-shrink: 0;
}

.comet-sidebar-account-body {
    overflow: hidden;
    min-width: 0;
}

.comet-sidebar-account-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comet-sidebar-account-email {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comet-sidebar-secondary {
    display: flex;
    flex-direction: column;
    padding: 6px 20px 16px 20px;
    gap: 2px;
}

.comet-sidebar-secondary-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    border-left: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    transition: background-color 0.2s ease-out;
}

.comet-sidebar-secondary-link:hover {
    background-color: var(--comet-orange-10-dark);
    color: #fff;
    text-decoration: none;
}

/* ---------- Top bar (inside .comet-main) ---------- */
.comet-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--comet-topbar-height);
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.comet-hamburger {
    background: none;
    border: 0;
    font-size: 20px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--comet-dark-grey);
}

.comet-topbar-search {
    flex: 1;
    max-width: 500px;
    margin: 0;
}

.comet-topbar-search .input-group.search {
    border: 1px solid var(--border);
    border-radius: var(--comet-box-radius);
    background: var(--comet-grey-25);
    overflow: hidden;
}

.comet-topbar-search .input-group.search .btn,
.comet-topbar-search .input-group.search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.comet-topbar-search .input-group.search:focus-within {
    border-color: var(--comet-orange);
    background: #fff;
}

.comet-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comet-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    color: var(--comet-dark-grey);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--comet-box-radius);
    position: relative;
    font-size: 15px;
}

.comet-topbar-btn:hover {
    background: var(--comet-grey-50);
    color: var(--comet-dark-grey);
}

/* Nudge the badge fully outside the button and force it to sit above
 * anything else — bootstrap's .badge-dark on the cart button would
 * otherwise repaint the background and part of the pill got clipped by
 * the button's right edge before the extra offset. */
.comet-topbar-btn .comet-badge-dot,
.comet-topbar-btn .badge,
.comet-topbar-btn.cart-btn .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--comet-orange);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 10px;
    font-weight: 700;
    z-index: 1;
}

.comet-topbar-btn {
    overflow: visible;
}

/* ---------- Content area ---------- */
.comet-main #main-body {
    padding: 20px 0;
}

.comet-main .master-breadcrumb {
    background: transparent;
    padding: 12px 20px 0 20px;
}

.comet-main .master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 13px;
}

.comet-main .primary-content .card {
    background: #fff;
    border-radius: var(--comet-box-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.comet-main .primary-content .card-title {
    font-size: 18px;
    font-weight: 700;
}

/* ---------- Buttons ----------
 * Keep this section minimal on purpose. Nexus and Bootstrap already
 * define sensible bg/text pairs for every .btn-* variant; per-variant
 * overrides here just create edge cases (e.g. .btn-success ending up
 * with unreadable link-color text, .bg-color-* pills going white-on-
 * white on hover). We only claim the primary variant for the comet
 * brand — everything else keeps the nexus look.
 */
body.comet-theme .btn {
    border-radius: var(--comet-box-radius);
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

body.comet-theme .btn-primary,
body.comet-theme .btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--comet-orange);
    border-color: var(--comet-orange);
    color: #fff;
}

body.comet-theme .btn-primary:hover,
body.comet-theme .btn-primary:focus,
body.comet-theme .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--comet-orange-hover);
    border-color: var(--comet-orange-hover);
    color: #fff;
}

body.comet-theme .btn-primary:disabled,
body.comet-theme .btn-primary.disabled {
    background-color: var(--comet-orange-disabled);
    border-color: var(--comet-orange-disabled);
}

/* ---------- Forms ---------- */
body.comet-theme .form-control {
    border-radius: var(--comet-box-radius);
    border-color: var(--comet-grey);
    font-size: 14px;
}

body.comet-theme .form-control:focus {
    border-color: var(--comet-orange);
    box-shadow: 0 0 0 0.15rem rgba(216, 132, 99, 0.15);
}

/* ---------- Sidebar (in-content sidebars from nexus) ---------- */
.comet-main .sidebar .card {
    border-radius: var(--comet-box-radius);
}

.comet-main .sidebar .list-group-item.active,
.comet-main .sidebar .list-group-item-action.active {
    background-color: var(--comet-orange);
    border-color: var(--comet-orange);
    color: #fff;
}

/* ---------- Tables ---------- */
body.comet-theme .table thead th {
    background: var(--comet-grey-25);
    border-bottom: 2px solid var(--comet-grey);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--comet-dark-grey-75);
}

/* ---------- Footer ---------- */
.comet-footer {
    margin-top: auto;
    padding: 24px 0 16px;
    background: #eeeeee;
    color: var(--comet-dark-grey);
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
}

.comet-footer a,
.comet-footer .nav-link {
    color: var(--comet-blue-link);
}

.comet-footer a:hover,
.comet-footer .nav-link:hover { color: var(--comet-orange-hover); }

.comet-footer .copyright {
    margin-top: 16px;
    text-align: center;
    color: var(--comet-dark-grey-75);
}

.comet-footer-nav {
    display: flex;
    gap: 16px;
}

/* ---------- Sidebar backdrop (mobile) ---------- */
.comet-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

body.comet-sidebar-open .comet-sidebar-backdrop {
    display: block;
}

/* ---------- Logged-out layout (no sidebar makes sense on login pages) ---------- */
body.comet-theme-logged-out .comet-page {
    grid-template-columns: var(--comet-sidebar-width) 1fr;
}

/* ---------- Responsive ----------
 * On small viewports the sidebar becomes an off-canvas drawer. Even
 * though `position: fixed` removes it from grid layout in most
 * browsers, the grid still auto-placed the sidebar into a first column
 * with `width: var(--comet-sidebar-width)` — squishing .comet-main into
 * whatever space remained. Drop the grid entirely so .comet-main is a
 * normal block element at 100% width.
 */
@media (max-width: 991.98px) {
    .comet-page {
        display: block;
    }

    .comet-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform 200ms ease-in-out;
    }

    body.comet-sidebar-open .comet-sidebar {
        transform: translateX(0);
    }

    .comet-main {
        width: 100%;
        min-height: 100vh;
    }
}

@media (min-width: 992px) {
    .comet-hamburger { display: none; }
}