/* Table headers always left-aligned — browser default is center */
table th { text-align: left; }

/* Alignment utilities missing from Metronic bundle */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.zind { z-index: 1; }

#sidebar-toggle {
    margin:-10px;
}

#header-logo {
    padding: 10px;
}

@media (min-width: 1024px) {
    #main-content-wrap {
        padding-left: calc(var(--rail-width) + var(--contextbar-width));
    }

    #context-topbar {
        top: var(--header-height);
        left: calc(var(--rail-width) + var(--contextbar-width));
        width: calc(100% - (var(--rail-width) + var(--contextbar-width)));
        max-width: calc(100% - (var(--rail-width) + var(--contextbar-width)));
        box-sizing: border-box;
    }

    #header-branding {
        width: calc(var(--contextbar-width) - 1px);
        flex: 0 0 var(--contextbar-width);
    }

    #app-main-content {
        padding-top: calc(var(--toolbar-height) + 1.25rem);
    }
}

@media (max-width: 1023px) {
    #header-brand-shell {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Inventory / Company Settings — desktop-only rail icons on mobile
       (user request, 2026-10-29: viewport hide is enough, no need to
       touch the server-side visibility logic above them). */
    .czd-rail-desktop-only {
        display: none !important;
    }

    /* Metronic's own compiled CSS has a `component-overrides` cascade
       layer (declared last, so it wins over any layered rule regardless
       of specificity) that hardcodes `.kt-input { display: flex }` —
       silently defeating Tailwind's `hidden` utility on the header search
       box at every width, not just the intended `lg:flex` breakpoint.
       This file isn't inside any @layer, so an unlayered rule here beats
       that override outright; !important is extra insurance, matching the
       pattern already used above. */
    #header-search {
        display: none !important;
    }
}

/* Contextbar nav icon follows parent link color on hover.
   !important needed: Tailwind's .text-muted-foreground on <i> loads after this file. */
#contextbar a:hover i {
    color: var(--accent-foreground) !important;
}

/* Language switcher (user menu, header.html) — two small pill buttons,
   same segmented-control look as the Operator wizard's czd-op-pill-row. */
.czd-lang-switch { display: flex; gap: .125rem; background: var(--muted); border-radius: 9999px; padding: .1875rem; }
.czd-lang-switch-btn {
    border: none; background: transparent; cursor: pointer; padding: .25rem .625rem; border-radius: 9999px;
    font-size: .75rem; font-weight: 500; color: var(--muted-foreground); line-height: 1.25;
}
.czd-lang-switch-btn.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Responsive grid helpers missing from Metronic bundle */
@media (min-width: 768px)  { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }