/* ============================================================
   Horilla — LogiCore ERP shell skin
   Recreates LogiCore's Salesforce Lightning look: white global
   header with app launcher + search, navy icon rail, app nav bar
   with module tabs, light grey canvas and crisp white cards.

   Colours come from the "LogiCore Lightning" colour theme; this
   file only changes layout chrome. Selectors that compete with the
   inline sidebar/header <style> blocks are prefixed with
   `html body` so they win on specificity, not load order.
   ============================================================ */

:root {
    --lc-brand: #0176d3;
    --lc-brand-dark: #014486;
    --lc-brand-darker: #032d60;
    --lc-brand-accent: #1b96ff;
    --lc-brand-bg: #eef4ff;

    --lc-bg: #f3f3f3;
    --lc-surface: #ffffff;
    --lc-border: #e5e5e5;
    --lc-border-strong: #c9c9c9;
    --lc-text: #181818;
    --lc-text-weak: #444444;
    --lc-text-meta: #747474;

    --lc-radius: .25rem;
    --lc-shadow-card: 0 2px 2px 0 rgba(0, 0, 0, .10);
    --lc-shadow-pop: 0 2px 12px 0 rgba(0, 0, 0, .16);
    --lc-font: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --lc-header-h: 50px;
    --lc-nav-h: 48px;
    --lc-rail-w: 4rem;
    --lc-rail-w-open: 13rem;
}

html body {
    font-family: var(--lc-font) !important;
    background-color: var(--lc-bg);
    color: var(--lc-text);
}

/* ---------- Global header (full width, above the rail) ---------- */
html body .oh-main-header {
    left: 0 !important;
    right: 0;
    top: 0;
    height: var(--lc-header-h);
    padding: 0 12px !important;
    gap: 12px;
    z-index: 60 !important;
    background: var(--lc-surface);
    border-bottom: 1px solid var(--lc-border);
}

.lc-gh-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lc-waffle {
    width: 34px; height: 34px;
    border: none; background: transparent; border-radius: var(--lc-radius);
    display: grid; place-items: center; color: var(--lc-text-meta); cursor: pointer;
}
.lc-waffle:hover { background: var(--lc-bg); color: var(--lc-text); }
.lc-cloud {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 15px; letter-spacing: -.2px;
    color: var(--lc-brand-darker) !important; text-decoration: none !important;
}
.lc-cloud .lc-badge {
    width: 26px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, var(--lc-brand-accent), var(--lc-brand));
    display: grid; place-items: center; color: #fff;
}

/* breadcrumbs sit quietly next to the product mark */
html body .oh-main-header #breadcrumbs-container {
    min-width: 0; flex-shrink: 1; overflow: hidden; font-size: 12px;
    padding-left: 12px; border-left: 1px solid var(--lc-border);
}
html body .oh-main-header #breadcrumbs-container:empty { display: none; }

.lc-search { position: relative; flex: 1; max-width: 560px; margin: 0 auto; min-width: 160px; }
.lc-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--lc-text-meta); pointer-events: none; }
.lc-search input {
    width: 100%; height: 34px;
    border: 1px solid var(--lc-border-strong); border-radius: 18px;
    padding: 0 14px 0 38px;
    font-size: 13px; color: var(--lc-text); background: var(--lc-bg);
    outline: none;
}
.lc-search input::placeholder { color: var(--lc-text-meta); }
.lc-search input:focus { background: #fff; border-color: var(--lc-brand); box-shadow: 0 0 0 1px var(--lc-brand); }
.lc-search input::-webkit-search-cancel-button { display: none; }
.lc-search-results {
    position: absolute; top: 40px; left: 0; right: 0; z-index: 90;
    background: #fff; border: 1px solid var(--lc-border); border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-pop); padding: 4px; max-height: 50vh; overflow: auto;
}
.lc-search-results .lc-gs-item {
    display: block; padding: 8px 12px; font-size: 13px; border-radius: 4px;
    color: var(--lc-text-weak); text-decoration: none;
}
.lc-search-results .lc-gs-item:hover { background: var(--lc-brand-bg); color: var(--lc-brand); }
.lc-gs-empty { padding: 10px 12px; font-size: 12px; color: var(--lc-text-meta); }

/* Header utility icons: flat grey circles instead of large tinted chips */
html body .oh-main-header .bg-primary-100 {
    width: 34px !important; height: 34px !important; padding: 0 !important;
    background: transparent !important; color: #5c5c5c !important;
    display: grid !important; place-items: center;
}
html body .oh-main-header .bg-primary-100:hover { background: var(--lc-bg) !important; }
html body .oh-main-header .bg-primary-100 i,
html body .oh-main-header .bg-primary-100:hover i { color: #5c5c5c !important; font-size: 16px; }
html body .oh-main-header > .flex.items-center.gap-8 { gap: 10px; flex-shrink: 0; }
html body .oh-main-header > .flex.items-center.gap-8 > .flex.items-center.gap-2 { gap: 2px; }

/* ---------- App navigation bar (module tabs) ---------- */
.lc-nav {
    position: fixed; top: var(--lc-header-h); right: 0; left: var(--lc-rail-w);
    height: var(--lc-nav-h); z-index: 45;
    display: flex; align-items: stretch;
    padding: 0 12px;
    background: var(--lc-surface);
    border-bottom: 1px solid var(--lc-border);
    box-shadow: var(--lc-shadow-card);
    transition: left .22s cubic-bezier(.4, 0, .2, 1);
}
html body #sidebar.sidebar-pinned ~ .oh-main-content .lc-nav { left: var(--lc-rail-w-open); }

.lc-nav-app { display: flex; align-items: center; gap: 9px; padding: 0 22px 0 4px; flex-shrink: 0; }
.lc-nav-app .lc-ic {
    width: 32px; height: 32px; border-radius: 7px;
    background: linear-gradient(135deg, var(--lc-brand-accent), var(--lc-brand-dark));
    display: grid; place-items: center; color: #fff;
}
.lc-nav-app .lc-lbl { line-height: 1.1; white-space: nowrap; }
.lc-nav-app .lc-lbl b { display: block; font-size: 15px; font-weight: 700; color: var(--lc-text); }
.lc-nav-app .lc-lbl span { font-size: 11px; color: var(--lc-text-meta); }

.lc-nav-tabs { display: flex; align-items: stretch; min-width: 0; }
.lc-tab-wrap { position: relative; display: flex; align-items: stretch; }
.lc-tab {
    border: none; background: transparent; cursor: pointer;
    padding: 0 14px; height: 100%;
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--lc-text-weak); white-space: nowrap;
    border-bottom: 3px solid transparent; text-decoration: none !important;
}
.lc-tab:hover { background: var(--lc-bg); color: var(--lc-brand); }
.lc-tab .lc-chev { opacity: .6; }
.lc-tab-wrap.active > .lc-tab { color: var(--lc-brand); font-weight: 600; border-bottom-color: var(--lc-brand); }

.lc-dd {
    display: none;
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; border: 1px solid var(--lc-border); border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-pop); z-index: 70; padding: 4px;
    max-height: 72vh; overflow: auto;
}
.lc-dd.lc-dd-right { left: auto; right: 0; }
.lc-tab-wrap.open > .lc-dd { display: block; }
.lc-dd-item {
    display: block; padding: 8px 12px; font-size: 13px; border-radius: 4px;
    color: var(--lc-text-weak) !important; white-space: nowrap; text-decoration: none !important;
}
.lc-dd-item:hover { background: var(--lc-brand-bg); color: var(--lc-brand) !important; }
.lc-dd-item.current { color: var(--lc-brand) !important; font-weight: 600; }
.lc-dd-group {
    padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--lc-text-meta);
}
.lc-dd-group:not(:first-child) { border-top: 1px solid var(--lc-border); margin-top: 4px; }
.lc-dd-sub { padding-left: 18px; }

/* Content starts below header + nav bar */
html body #ohMainContent { padding-top: calc(var(--lc-header-h) + var(--lc-nav-h) + 16px) !important; }

/* ---------- Navy icon rail (sidebar) ---------- */
html body #sidebar {
    top: var(--lc-header-h) !important;
    background: var(--lc-brand-darker) !important;
    border-right: none !important;
    --sidebar-accent: rgba(255, 255, 255, .20);
    --sidebar-accent-dark: rgba(255, 255, 255, .20);
    --sidebar-accent-soft: rgba(255, 255, 255, .12);
}
html body #sidebar nav { height: calc(100vh - var(--lc-header-h) - 130px) !important; }

/* rail header: company mark + pin toggle in light ink */
html body #sidebar .oh-sidebar__company-title { color: #fff !important; }
html body #sidebar .oh-sidebar__company-link { color: #9cc3f0 !important; }
html body #sidebar #sidebarPinBtn { color: #fff !important; }
html body #sidebar #sidebarPinBtn:hover,
html body #sidebar.sidebar-pinned #sidebarPinBtn { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }

/* module buttons: rounded squares like LogiCore's rail items */
html body #sidebar .sideboxmain { color: #fff; position: relative; }
html body #sidebar:not(:hover):not(.sidebar-pinned) .sideboxmain { border-radius: 8px !important; }
html body #sidebar .sideboxmain .oh-sidebar-label { color: #d6e6fb !important; }
html body #sidebar .sideboxmain:hover,
html body #sidebar .sideboxmain.sidebox-active:not(.sidebox-current) { background: rgba(255, 255, 255, .14) !important; }
html body #sidebar .sideboxmain:hover .oh-sidebar-label,
html body #sidebar .sideboxmain.sidebox-active .oh-sidebar-label { color: #fff !important; }
html body #sidebar .sideboxmain.sidebox-current { background: rgba(255, 255, 255, .22) !important; box-shadow: none !important; }
html body #sidebar .sideboxmain.sidebox-current .oh-sidebar-label { color: #fff !important; font-weight: 600; }
html body #sidebar .sideboxmain.sidebox-current::before {
    content: ""; position: absolute; left: -.25rem; top: 9px; bottom: 9px;
    width: 3px; border-radius: 0 2px 2px 0; background: #fff;
}

/* icons: light glyphs on navy */
html body #sidebar nav .sideboxmain img,
html body #sidebar nav .sideboxmain svg:not(.sidebar-chevron) { filter: brightness(0) invert(1) !important; }
html body #sidebar nav .sideboxmain:hover img,
html body #sidebar nav .sideboxmain.sidebox-current img,
html body #sidebar nav .sideboxmain.sidebox-current svg:not(.sidebar-chevron) { filter: brightness(0) invert(1) !important; }

/* expanded accordion submenu (pinned mode) */
html body #sidebar .sidebar-subnav-link { color: #bcd8ff !important; }
html body #sidebar .sidebar-subnav-link:hover { background: rgba(255, 255, 255, .10) !important; color: #fff !important; }
html body #sidebar .oh-sidebar-active-link { background: rgba(255, 255, 255, .20) !important; color: #fff !important; box-shadow: none !important; }

html body #sidebar .sidebar-version { color: #8fb3e0 !important; border-top-color: rgba(255, 255, 255, .12) !important; }

/* hover flyout: SLDS popover */
html body #sidebarFlyout { border-radius: var(--lc-radius) !important; box-shadow: var(--lc-shadow-pop) !important; border-color: var(--lc-border) !important; }
html body #sidebarFlyout a.sidebar-subnav-link:hover { background: var(--lc-brand-bg) !important; color: var(--lc-brand) !important; }
html body #sidebarFlyout a.sidebar-subnav-link.oh-sidebar-active-link { background: var(--lc-brand) !important; color: #fff !important; box-shadow: none !important; }

/* ---------- App launcher ---------- */
.lc-overlay {
    position: fixed; inset: 0; z-index: 10070;
    background: rgba(0, 0, 0, .45);
    display: grid; place-items: start center; padding-top: 70px;
}
.lc-launcher {
    width: 760px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: .5rem; box-shadow: var(--lc-shadow-pop); overflow: hidden;
}
.lc-lh { padding: 16px 22px; border-bottom: 1px solid var(--lc-border); display: flex; align-items: center; gap: 12px; }
.lc-lh h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--lc-text-meta); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.lc-ls { flex: 1; position: relative; }
.lc-ls svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--lc-text-meta); }
.lc-ls input { width: 100%; height: 34px; border: 1px solid var(--lc-border-strong); border-radius: 18px; padding: 0 14px 0 36px; font-size: 13px; outline: none; }
.lc-ls input:focus { border-color: var(--lc-brand); box-shadow: 0 0 0 1px var(--lc-brand); }
.lc-close { width: 30px; height: 30px; border: none; background: transparent; border-radius: 50%; color: var(--lc-text-meta); cursor: pointer; }
.lc-close:hover { background: var(--lc-bg); }
.lc-lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 18px 22px 24px; max-height: 60vh; overflow: auto; }
.lc-lapp { display: flex; gap: 11px; padding: 12px; border-radius: var(--lc-radius); align-items: flex-start; text-decoration: none !important; color: var(--lc-text) !important; }
.lc-lapp:hover { background: var(--lc-bg); }
.lc-lic { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; font-weight: 700; }
.lc-lic img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.lc-lbody { display: flex; flex-direction: column; min-width: 0; }
.lc-lnm { font-size: 13px; font-weight: 600; }
.lc-lds { font-size: 11px; color: var(--lc-text-meta); margin-top: 1px; line-height: 1.3; }

/* ---------- Content: Lightning cards, buttons, tables ---------- */
html body .oh-btn,
html body .btn,
html body button.bg-primary-600,
html body a.bg-primary-600 { border-radius: var(--lc-radius) !important; }

html body .oh-card,
html body .oh-card-dashboard,
html body .oh-sticky-table,
html body .oh-modal__dialog { border-radius: var(--lc-radius) !important; }

html body .oh-sticky-table thead th,
html body .oh-sticky-table__th {
    font-size: 11px !important; text-transform: uppercase; letter-spacing: .3px;
    color: var(--lc-text-meta) !important; background: #fafafa !important; font-weight: 600 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .lc-nav-app .lc-lbl { display: none; }
    .lc-nav-app { padding-right: 8px; }
    html body .oh-main-header #breadcrumbs-container { display: none; }
}
@media (max-width: 991.98px) {
    html body #sidebar.sidebar-pinned ~ .oh-main-content .lc-nav { left: var(--lc-rail-w); }
}
@media (max-width: 767.98px) {
    .lc-search { display: none; }
    .lc-cloud { display: none; }
    .lc-nav { overflow-x: auto; }
    .lc-nav-app { display: none; }
}

/* ---------- Dark mode ---------- */
html body.dark .oh-main-header,
html body.dark .lc-nav { background: #242424; border-color: #333; }
html body.dark .lc-cloud { color: #e5e7eb !important; }
html body.dark .lc-nav-app .lc-lbl b,
html body.dark .lc-tab { color: #e5e7eb; }
html body.dark .lc-tab:hover,
html body.dark .lc-waffle:hover { background: #2e2e2e; }
html body.dark .lc-search input { background: #1a1a1a; border-color: #444; color: #e5e7eb; }
html body.dark .lc-dd,
html body.dark .lc-search-results,
html body.dark .lc-launcher { background: #242424; border-color: #333; }
html body.dark .lc-dd-item,
html body.dark .lc-lapp { color: #d1d5db !important; }
html body.dark .lc-dd-item:hover,
html body.dark .lc-lapp:hover { background: #2e2e2e; }
html body.dark .oh-main-header .bg-primary-100 i { color: #e5e7eb !important; }
html body.dark #sidebar { background: #0b1a33 !important; }

/* ---------- Profile: compact Lightning avatar ---------- */
html body .oh-main-header img.w-11.h-11 { width: 32px !important; height: 32px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lc-border); }
html body .oh-main-header .dropdown-wrapper h5 { font-size: 13px !important; line-height: 1.2; }
html body .oh-main-header .dropdown-wrapper h5 + p,
html body .oh-main-header .dropdown-wrapper p.text-xs { font-size: 11px !important; color: var(--lc-text-meta) !important; }

/* ---------- Login: LogiCore split screen ---------- */
.lc-login {
    min-height: 100vh; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, var(--lc-brand-darker) 100%);
}
.lc-login-hero { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; }
.lc-login-glow {
    position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(27, 150, 255, .16) 0%, transparent 65%);
}
.lc-login-hero-inner { position: relative; text-align: center; color: #fff; }
.lc-login-mark {
    width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 16px;
    display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--lc-brand-accent), var(--lc-brand));
    box-shadow: 0 16px 40px rgba(1, 118, 211, .35);
}
.lc-login-hero h2 { margin: 0 0 6px; font-size: 46px; font-weight: 700; letter-spacing: -.5px; color: #fff; }
.lc-login-suite { margin: 0 0 10px; font-size: 18px; color: #7cc4ff; }
.lc-login-desc { margin: 0 auto; max-width: 420px; font-size: 14px; color: #94a3b8; }
.lc-login-feats { display: flex; justify-content: center; gap: 30px; margin-top: 46px; }
.lc-login-feats > div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; }
.lc-login-feats span {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #38bdf8;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10);
}
.lc-login-main { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
html body .lc-login-card {
    background: #fff !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45) !important;
    max-width: 100%;
}
html body .lc-login-card .oh-input,
html body .lc-login-card input { background: #f8fafc; }
html body .lc-login-card button[type="submit"] { background: var(--lc-brand) !important; border-radius: .5rem !important; font-weight: 600; }
html body .lc-login-card button[type="submit"]:hover { background: var(--lc-brand-dark) !important; }
html body .lc-login-forgot { color: var(--lc-brand) !important; }
@media (max-width: 991.98px) {
    .lc-login { grid-template-columns: minmax(0, 1fr); }
    .lc-login-hero { display: none; }
}
@media (max-width: 520px) {
    html body .lc-login-card { width: 100% !important; padding: 32px 22px !important; }
    html body .lc-login-card h1 { font-size: 1.5rem !important; }
}

/* ============================================================
   Sidebar collapse / expand
   The header button (#lcSidebarToggle) is the single control.
   Collapsed = icon rail that stays an icon rail on hover (the
   module's pages open in the hover flyout instead), matching
   LogiCore. Horilla's base rules key the collapsed look on
   :not(:hover), so they are restated here for the hover state.
   ============================================================ */
.lc-side-toggle .lc-ico-collapse { display: none; }
html body #sidebar.sidebar-pinned ~ .oh-main-content .lc-side-toggle .lc-ico-collapse { display: block; }
html body #sidebar.sidebar-pinned ~ .oh-main-content .lc-side-toggle .lc-ico-expand { display: none; }
html body #sidebar.sidebar-pinned ~ .oh-main-content .lc-side-toggle { background: var(--lc-brand-bg); color: var(--lc-brand); }

/* the old in-sidebar padlock is replaced by the header button */
html body #sidebar #sidebarPinBtn { display: none !important; }

html body #sidebar:not(.sidebar-pinned),
html body #sidebar:not(.sidebar-pinned):hover { width: var(--lc-rail-w) !important; }
html body #sidebar:not(.sidebar-pinned) > div { padding-left: .25rem !important; padding-right: .25rem !important; }
html body #sidebar:not(.sidebar-pinned) nav > * + * { margin-top: .625rem !important; }
html body #sidebar:not(.sidebar-pinned) nav { scrollbar-width: none; }
html body #sidebar:not(.sidebar-pinned) nav::-webkit-scrollbar { display: none; }
html body #sidebar:not(.sidebar-pinned) > div > div:first-child { justify-content: center !important; gap: 0 !important; }
html body #sidebar:not(.sidebar-pinned) > div > div:first-child > div { flex: 0 0 auto !important; justify-content: center !important; gap: 0 !important; }
html body #sidebar:not(.sidebar-pinned) > div > div:first-child img.oh-sidebar-label {
    flex: 0 0 auto !important; width: 2rem !important; height: 2rem !important; opacity: 1 !important;
}
html body #sidebar:not(.sidebar-pinned) .sideboxmain {
    justify-content: center !important; width: 2.5rem !important; height: 2.5rem !important;
    margin: 0 auto !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important;
}
html body #sidebar:not(.sidebar-pinned) .oh-sidebar-label:not(img),
html body #sidebar:not(.sidebar-pinned) .sidebar-chevron {
    flex: 0 0 0 !important; width: 0 !important; overflow: hidden !important;
    opacity: 0 !important; pointer-events: none !important;
}
html body #sidebar:not(.sidebar-pinned) .sidebar-subnav:not(.hidden) { display: none !important; }
html body #sidebar:not(.sidebar-pinned) .sidebar-version__label { display: none !important; }
html body #sidebar:not(.sidebar-pinned) .sidebar-version { text-align: center; padding-left: .25rem; padding-right: .25rem; }
html body #sidebar:not(.sidebar-pinned):hover ~ #floating-buttons .fab-container { left: var(--lc-rail-w); }

/* hover flyout heading = module name (the rail itself shows icons only) */
html body #sidebarFlyout .sidebar-flyout-title {
    padding: 6px 10px 8px; margin-bottom: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--lc-text-meta); border-bottom: 1px solid var(--lc-border);
}

/* below 992px Horilla always renders the rail, so the toggle has nothing to do */
@media (max-width: 991.98px) {
    .lc-side-toggle { display: none !important; }
}

/* The flyout lives inside #sidebar, so undo the light-on-navy link colours there */
html body #sidebar #sidebarFlyout a.sidebar-subnav-link { color: var(--lc-text-weak) !important; background: transparent; }
html body #sidebar #sidebarFlyout a.sidebar-subnav-link:hover { background: var(--lc-brand-bg) !important; color: var(--lc-brand) !important; }
html body #sidebar #sidebarFlyout a.sidebar-subnav-link.oh-sidebar-active-link { background: var(--lc-brand) !important; color: #fff !important; }
html body.dark #sidebar #sidebarFlyout a.sidebar-subnav-link { color: #d1d5db !important; }

/* ---------- Demo instance marker (HORILLA_DEMO_MODE) ---------- */
.lc-demo-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap;
    background: #fef0d8; color: #8a4b00; border: 1px solid #f6d9a8;
}
.lc-demo-note {
    margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; text-align: center;
    font-size: 12.5px; background: #fef0d8; color: #8a4b00; border: 1px solid #f6d9a8;
}

/* ============================================================
   QA pass 2 — header & sidebar polish
   ============================================================ */

/* Header stays identical on every page: location is shown by the module
   tab bar + the page's own title, so the growing breadcrumb trail
   (with raw URL names like "employee-view") is not shown here. */
html body .oh-main-header #breadcrumbs-container { display: none !important; }
.lc-gh-left { min-width: 0; }

/* Sample-data indicator: compact pill with icon, vertically centred */
.lc-demo-badge {
    gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .1px; text-transform: none;
    cursor: help; line-height: 1;
}
.lc-demo-badge svg { flex-shrink: 0; }

/* Check In / Check Out: compact Lightning button sized like the header controls */
html body .oh-main-header #attendance-activity-container .check {
    height: 32px !important; min-width: 0 !important; padding: 0 12px !important;
    border-radius: var(--lc-radius) !important; font-size: 13px !important; font-weight: 600;
    display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap;
    box-shadow: none !important;
}
html body .oh-main-header #attendance-activity-container .check .date { display: inline-flex; align-items: center; }
html body .oh-main-header #attendance-activity-container .check i { padding-right: 6px !important; }

/* Sidebar header: company logo on a white tile so any logo reads on navy */
html body #sidebar > div > div:first-child { min-height: 40px; margin-bottom: 1rem !important; }
html body #sidebar > div > div:first-child img.oh-sidebar-label {
    width: 2rem !important; height: 2rem !important; flex: 0 0 auto;
    object-fit: contain; background: #fff; padding: 3px;
    border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
html body #sidebar.sidebar-pinned > div > div:first-child { padding-left: .5rem; gap: .6rem !important; }
html body #sidebar .oh-sidebar__company-title { font-size: 13px !important; line-height: 1.2; }
html body #sidebar .oh-sidebar__company-link { font-size: 11px !important; }

/* Sidebar icons: one consistent size and weight for every module */
html body #sidebar nav .sideboxmain img,
html body #sidebar nav .sideboxmain > svg:not(.sidebar-chevron) {
    width: 20px !important; height: 20px !important; object-fit: contain; flex-shrink: 0;
}
html body #sidebar nav .sideboxmain img { filter: brightness(0) invert(1) !important; }
html body #sidebar nav .sideboxmain:hover img,
html body #sidebar nav .sideboxmain.sidebox-current img { filter: brightness(0) invert(1) opacity(1) !important; }
html body #sidebar.sidebar-pinned .sideboxmain { min-height: 42px; padding-left: .85rem !important; }
html body #sidebar.sidebar-pinned nav { padding: 0 .25rem; }

/* Top loading bar (logicore-shell.js) */
#lcProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0;
    z-index: 10080; pointer-events: none;
    background: linear-gradient(90deg, var(--lc-brand-accent), var(--lc-brand));
    box-shadow: 0 0 8px rgba(1, 118, 211, .5);
}

/* Sidebar icons: solid white on the navy rail (all states) */
html body #sidebar nav .sideboxmain i,
html body #sidebar nav .sideboxmain .sidebar-chevron,
html body #sidebar nav .sideboxmain ion-icon { color: #fff !important; }
html body #sidebar nav .sideboxmain .sidebar-chevron { stroke: #fff !important; }