/* COMMAND CENTER — CHROME (header / tab bar / drawer / footer / mobile nav). Loaded after cc-tokens.css, before MudBlazor. */


/* MudBlazor reads this for drawer / main offset.
   We make the appbar logically taller so it includes the tab bar. */
.cc-layout-root,
.cc-layout-root .mud-drawer,
.cc-layout-root .mud-main-content {
    --mud-appbar-height: calc(var(--cc-header-h) + var(--cc-tab-bar-h));
}

/* Belt-and-suspenders: explicitly position the fixed drawer below header + tab bar
   AND above the fixed footer. Without the footer offset the bottom user card
   ends up hidden behind the gray footer bar. */
.cc-drawer.mud-drawer-fixed,
.cc-layout-root .mud-drawer-fixed {
    top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important;
    height: calc(100dvh - var(--cc-header-h) - var(--cc-tab-bar-h) - var(--cc-footer-h)) !important;
}

/* The analytics session-events drawer is a full-height detail panel, so it spans the
   whole viewport height rather than being inset below the header/tab bar chrome. */
.cc-layout-root .mud-drawer.sed-drawer {
    top: 0 !important;
    height: 100dvh !important;
}

/* Same for the main content area — make sure page content starts below the tab bar. */
.cc-layout-root .mud-main-content {
    padding-top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important;
}

/* ---------------- ANALYTICS SCOPE (Company / Branch) on the tab bar ----------------
   One white rounded panel holding the Company + Branch selects, pushed to the far
   right of the gray tab bar so it reads clearly. Present only in the analytics
   context; no layout offset (lives within the existing tab-bar row). */
.cc-tabbar-scope {
    display: flex;
    align-items: stretch;
    align-self: center;                  /* vertically center in the 52px bar */
    margin-left: auto;                   /* push to the far right */
    margin-right: 24px;                  /* sit under the header notification icon */
    height: 36px;
    background: var(--cc-white);
    border: 1px solid var(--cc-gray-400);
    border-radius: var(--cc-radius-md);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
    min-width: 0;
}
.cc-context-item {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px;
    min-width: 0;
}
/* Divider between company + branch (second item onward). */
.cc-context-item + .cc-context-item { border-left: 1px solid var(--cc-border-subtle); }
.cc-context-icon { color: var(--cc-medium-gray); font-size: 18px; flex-shrink: 0; }
.cc-context-value {
    font-family: "DinotMedium", sans-serif; font-weight: 700; font-size: 13px;
    color: var(--cc-black); white-space: nowrap;
    width: 170px; overflow: hidden; text-overflow: ellipsis;
}
/* Borderless, dark, compact selects — the panel is the box (no red outline).
   Fixed width so the dropdown never resizes with the selected value. */
.cc-tabbar-scope .cc-context-select { width: 170px; }
/* Strip Mud's default label/underline spacing and vertically center the value
   in the 36px panel. */
.cc-tabbar-scope .cc-context-select .mud-input-control,
.cc-tabbar-scope .cc-context-select .mud-input-slot {
    margin: 0 !important; padding: 0 !important; min-height: 0 !important;
}
.cc-tabbar-scope .cc-context-select .mud-input-slot { align-items: center; }
.cc-tabbar-scope .cc-context-select .mud-select-input,
.cc-tabbar-scope .cc-context-select input {
    color: var(--cc-black) !important;
    font-family: "DinotMedium", sans-serif; font-weight: 700; font-size: 13px;
    line-height: 1.2;
    padding-top: 0 !important; padding-bottom: 0 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-tabbar-scope .cc-context-select .mud-input-adornment .mud-icon-root {
    color: var(--cc-dark-gray);
}
/* "Clear filter" reset — appears only when viewing a company other than the user's own. */
.cc-tabbar-scope .cc-context-clear {
    flex-shrink: 0;
    padding: 2px;
    color: var(--cc-medium-gray);
}
.cc-tabbar-scope .cc-context-clear .mud-icon-root { font-size: 16px; }
.cc-tabbar-scope .cc-context-clear:hover { color: var(--cc-red); background: var(--cc-hover-surface); }

@keyframes cc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@keyframes cc-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------- HEADER (MudAppBar override) ---------------- */
.cc-header {
    background-color: var(--cc-header-bg) !important;
    border-bottom: 1px solid #000;
    color: var(--cc-white) !important;
    padding: 0 16px !important;
    height: var(--cc-header-h) !important;
    min-height: var(--cc-header-h) !important;
    max-height: var(--cc-header-h) !important;
}
.cc-header .mud-toolbar {
    min-height: var(--cc-header-h) !important;
    height: var(--cc-header-h) !important;
}

.cc-header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* Black-bg variant of the brand mark, so it sits on the dark header without
   needing a contrast plate. No filter, no shadow. */
.cc-header-logo img {
    height: 48px;
    width: auto;
    display: block;
}
.cc-header-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
    margin: 0 10px;
}
.cc-header-title {
    font-family: "Klavika", "DinotBold", sans-serif;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-white);
    white-space: nowrap;
}

.cc-header-stats { display: flex; align-items: center; gap: 18px; }
.cc-header-stat {
    display: flex; align-items: center; gap: 7px;
    font-family: "DinotMedium", sans-serif;
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.cc-header-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cc-header-stat-dot.online {
    background: var(--cc-success);
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    animation: cc-pulse 2s infinite;
}
.cc-header-stat-dot.faulted {
    background: var(--cc-red);
    box-shadow: 0 0 6px rgba(243,0,43,0.5);
    animation: cc-pulse 1.5s infinite;
}
.cc-header-stat-count { font-weight: 800; color: var(--cc-white); font-family: "DinotBold", sans-serif; }

/* MudIconButton's default Color overrides the parent color rule on the dark
   header, so we have to reach into the inner icon root explicitly. */
.cc-header-icon-btn,
.cc-header-icon-btn .mud-icon-root,
.cc-header-icon-btn .mud-icon-button-label {
    color: rgba(255,255,255,0.85) !important;
}
.cc-header-icon-btn:hover {
    background: rgba(255,255,255,0.08) !important;
}
.cc-header-icon-btn:hover,
.cc-header-icon-btn:hover .mud-icon-root,
.cc-header-icon-btn:hover .mud-icon-button-label {
    color: var(--cc-white) !important;
}

.cc-header-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "DinotBold", sans-serif; font-weight: 800; font-size: 12px;
    color: var(--cc-white); cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15);
    transition: transform 0.15s, border-color 0.15s;
    user-select: none;
}
.cc-header-avatar:hover { transform: scale(1.05); border-color: rgba(255,255,255,0.4); }
.cc-header-avatar.role-superadmin { background: var(--cc-red); }
.cc-header-avatar.role-admin      { background: #2c2c2c; }
.cc-header-avatar.role-cs         { background: var(--cc-info); }
.cc-header-avatar.role-dealer     { background: var(--cc-warning); }
.cc-header-avatar.role-sales      { background: var(--cc-success); }
.cc-header-avatar.role-operator   { background: var(--cc-dark-gray); }

/* ---------------- TAB BAR (Support / Admin contexts) ----------------
   Light treatment — sits below the dark header as a clean white strip,
   with dark text and a red underline marking the active context. */
.cc-tab-bar {
    position: fixed;
    top: var(--cc-header-h);
    left: 0; right: 0;
    height: var(--cc-tab-bar-h);
    background: var(--cc-gray-300);
    display: flex; align-items: stretch;
    z-index: 1199;                       /* above drawer, below dialogs */
    padding: 0;
    border-bottom: 1px solid #b8b8b8;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.cc-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 22px;
    font-family: "DinotBold", "Klavika", sans-serif;
    font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cc-black);
    cursor: pointer;
    border: none; background: transparent;
    border-bottom: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    height: 100%;
    /* Drop the active red underline 1px so it covers (rather than sits above)
       the tab bar's bottom border — otherwise a thin gray line shows between
       the red underline and the drawer top edge. */
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.cc-tab:hover { background: var(--cc-white); }
.cc-tab.active {
    border-bottom-color: var(--cc-red);
}
.cc-tab .mud-icon-root {
    font-size: 20px !important;
    color: var(--cc-black) !important;
}

/* Thin vertical separator placed between context tabs. Centered vertically;
   inherits the tab bar's height so it scales with --cc-tab-bar-h. */
.cc-tab-divider {
    align-self: center;
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}

@media (max-width: 599.98px) {
    .cc-tab { padding: 0 12px; font-size: 10px; letter-spacing: 0.06em; }
    .cc-tab-divider { height: 18px; }
}

/* ---------------- DRAWER (light) ---------------- */
.cc-drawer { border-right: 1px solid var(--cc-light-gray) !important; }
.cc-drawer .mud-drawer-content { background: var(--cc-white); padding: 0; }

/* Section label with hairlines on each side (Data_Analytics pattern).
   Matches the Data_Analytics typography exactly: 0.7rem / weight 600 /
   0.05em tracking / var(--cc-gray-500). */
.cc-nav-section-label {
    font-family: "DinotMedium", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cc-gray-500);
    padding: 0.5rem 1rem 0.25rem;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
    white-space: nowrap;
}
.cc-nav-section-label::before,
.cc-nav-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cc-light-gray);
}
.cc-nav-section-label:first-child { padding-top: 8px; }
.cc-nav-section-divider { height: 1px; background: var(--cc-light-gray); margin: 8px 12px; }

/* Count badge on the right side of an admin nav link */
.cc-nav-link-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}
.cc-nav-link-content > .cc-nav-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-nav-count {
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cc-medium-gray);
    line-height: 1;
}
.cc-drawer .mud-nav-link.rcm-nav-active .cc-nav-count,
.cc-drawer .mud-nav-link.mud-nav-link-active .cc-nav-count {
    color: var(--cc-red);
}

/* Nav link typography mirrors Data_Analytics: body2 (14px / weight 400),
   regular weight at rest, weight 600 + red text when active. Tighter
   padding (8px 12px) and 40px min-height to match the DA rhythm. */
.cc-drawer .mud-nav-link {
    display: flex !important;
    width: 100% !important;
    border-radius: 0 !important;
    margin: 1px 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    transition: background 0.2s ease, color 0.2s, padding-left 0.2s ease;
    color: var(--cc-black) !important;
    font-family: "DinotMedium", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
}
.cc-drawer .mud-nav-link:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    padding-left: 20px !important;
    text-decoration: none;
}
.cc-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--cc-gray-500);
    transition: color 0.15s;
}
.cc-drawer .mud-nav-link:hover .mud-nav-link-icon { color: var(--cc-black); }

.cc-drawer .mud-nav-link.rcm-nav-active,
.cc-drawer .mud-nav-link.active-nav-link,
.cc-drawer .mud-nav-link.mud-nav-link-active {
    background: rgba(243, 0, 43, 0.08) !important;
    color: var(--cc-red) !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cc-drawer .mud-nav-link.rcm-nav-active .mud-nav-link-text,
.cc-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-text {
    color: var(--cc-red) !important;
    font-weight: 600;
}
.cc-drawer .mud-nav-link.rcm-nav-active .mud-nav-link-icon,
.cc-drawer .mud-nav-link.active-nav-link .mud-nav-link-icon,
.cc-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--cc-red); }

/* NavMenu wrapper: flex column so user card pins to the bottom of the drawer. */
.cc-nav-paper {
    background: transparent !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cc-nav-menu-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* User card pinned at the bottom of the nav, mockup pattern. The card is the
   MudMenu activator — clicking it opens a Profile/Log out dropdown that
   anchors above (so it doesn't get clipped by the bottom of the viewport). */
.cc-drawer-user {
    padding: 14px 16px;
    border-top: 1px solid var(--cc-light-gray);
    display: flex; align-items: center; gap: 12px;
    background: var(--cc-white);
    min-height: 64px;
    box-sizing: border-box;
}
.cc-drawer-user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "DinotBold", sans-serif; font-weight: 800; font-size: 12px;
    color: var(--cc-white); flex-shrink: 0;
    background: var(--cc-red);
}
.cc-drawer-user-avatar.role-superadmin { background: var(--cc-red); }
.cc-drawer-user-avatar.role-admin      { background: var(--cc-black); }
.cc-drawer-user-avatar.role-cs         { background: var(--cc-info); }
.cc-drawer-user-avatar.role-dealer     { background: var(--cc-warning); }
.cc-drawer-user-avatar.role-sales      { background: var(--cc-success); }
.cc-drawer-user-info { flex: 1; min-width: 0; }
.cc-drawer-user-name {
    font-family: "DinotMedium", sans-serif;
    font-weight: 600; font-size: 13px; color: var(--cc-black);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-drawer-user-role { font-size: 11px; color: var(--cc-medium-gray); font-weight: 500; }
.cc-drawer-user-logout {
    color: var(--cc-medium-gray) !important;
    flex-shrink: 0;
}
.cc-drawer-user-logout:hover,
.cc-drawer-user-logout:focus-visible {
    color: var(--cc-red) !important;
    background: rgba(243, 0, 43, 0.08) !important;
}
.cc-drawer-user-logout .mud-icon-root { font-size: 20px !important; }

/* ---------------- FOOTER (mockup-style centered status bar) ---------------- */
.cc-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--cc-footer-h);
    background: var(--cc-light-gray);
    display: flex; align-items: center; justify-content: center;
    gap: 12px; z-index: 1100;
    font-family: "DinotMedium", sans-serif;
    font-size: 11px; font-weight: 500; color: var(--cc-dark-gray);
    border-top: 1px solid #ddd;
    white-space: nowrap;
    padding: 0 16px;
}
.cc-footer-sep { color: var(--cc-medium-gray); font-weight: 400; }
.cc-footer-link { color: var(--cc-dark-gray); text-decoration: none; font-weight: 600; }
.cc-footer-link:hover { color: var(--cc-red); }
.cc-footer-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
}
.cc-footer-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cc-success);
    box-shadow: 0 0 4px rgba(34,197,94,0.55);
    animation: cc-pulse 2s infinite;
}
.cc-footer-status.offline { color: #b45309; }
.cc-footer-status.offline .cc-footer-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245,158,11,0.6);
}

.cc-main { padding-bottom: calc(var(--cc-footer-h) + 8px) !important; }

/* ---------------- MOBILE BOTTOM NAV (visible <960px) ---------------- */
@media (max-width: 959.98px) {
    .cc-footer { display: none; }
    .cc-main   { padding-bottom: calc(var(--cc-bottom-nav-h) + 8px) !important; }
    .cc-mobile-nav { display: flex !important; }
    /* Drop the header hamburger on mobile — the bottom-nav "More" button is
       the single canonical drawer trigger below this breakpoint. */
    .cc-header-drawer-toggle { display: none !important; }
}

.cc-mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--cc-bottom-nav-h);
    background: var(--cc-white);
    border-top: 1px solid var(--cc-light-gray);
    z-index: 1100;
    align-items: stretch; justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.cc-mobile-nav a, .cc-mobile-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 4px;
    color: var(--cc-medium-gray); text-decoration: none;
    font-family: "DinotMedium", sans-serif; font-size: 10px; font-weight: 600;
    border: none; background: transparent; cursor: pointer;
    transition: color 0.15s;
}
.cc-mobile-nav a:hover, .cc-mobile-nav a.active,
.cc-mobile-nav button:hover, .cc-mobile-nav button.active {
    color: var(--cc-red); text-decoration: none;
}
.cc-mobile-nav .mud-icon-root { font-size: 22px !important; }

/* ---------------- HEADER RESPONSIVE BEHAVIOR ---------------- */
@media (max-width: 599.98px) {
    .cc-header-divider, .cc-header-title { display: none; }
    .cc-header-stats { display: none; }
    .cc-header { padding: 0 8px !important; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
    .cc-header-stats { gap: 12px; }
}