/*
 * ERP identity layer on top of OneUI. Only colour tokens and shell overrides
 * live here; screens are built from stock OneUI / Bootstrap components.
 *
 * The navy shell is the constant "central" identity. Each business unit
 * contributes one accent, selected with data-unit="central|sales|repair|printing"
 * on #page-container, <body>, or any element (e.g. a block). The accent is
 * mapped onto Bootstrap's primary, so .btn-primary, .text-primary,
 * .bg-primary, .border-primary follow the unit automatically.
 *
 *   --unit-accent        bright brand fill (stripes, active markers)
 *   --unit-accent-strong darker variant, readable on white and under white text
 */

:root {
    --erp-navy-950: #0b1628;
    --erp-navy-900: #0f1f38;
    --erp-navy-800: #172a4a;

    --erp-central: #1e40af;
    --erp-central-rgb: 30, 64, 175;
    --erp-central-strong: #1e3a8a;
    --erp-central-strong-rgb: 30, 58, 138;

    --erp-sales: #0284c7;
    --erp-sales-rgb: 2, 132, 199;
    --erp-sales-strong: #0369a1;
    --erp-sales-strong-rgb: 3, 105, 161;

    --erp-repair: #f59e0b;
    --erp-repair-rgb: 245, 158, 11;
    --erp-repair-strong: #b45309;
    --erp-repair-strong-rgb: 180, 83, 9;

    --erp-printing: #7c3aed;
    --erp-printing-rgb: 124, 58, 237;
    --erp-printing-strong: #6d28d9;
    --erp-printing-strong-rgb: 109, 40, 217;
}

/* ---------------------------------------------------------------- units */

[data-unit],
[data-unit="central"] {
    --unit-accent: var(--erp-central);
    --unit-accent-rgb: var(--erp-central-rgb);
    --unit-accent-strong: var(--erp-central-strong);
    --unit-accent-strong-rgb: var(--erp-central-strong-rgb);
}

[data-unit="sales"] {
    --unit-accent: var(--erp-sales);
    --unit-accent-rgb: var(--erp-sales-rgb);
    --unit-accent-strong: var(--erp-sales-strong);
    --unit-accent-strong-rgb: var(--erp-sales-strong-rgb);
}

[data-unit="repair"] {
    --unit-accent: var(--erp-repair);
    --unit-accent-rgb: var(--erp-repair-rgb);
    --unit-accent-strong: var(--erp-repair-strong);
    --unit-accent-strong-rgb: var(--erp-repair-strong-rgb);
}

[data-unit="printing"] {
    --unit-accent: var(--erp-printing);
    --unit-accent-rgb: var(--erp-printing-rgb);
    --unit-accent-strong: var(--erp-printing-strong);
    --unit-accent-strong-rgb: var(--erp-printing-strong-rgb);
}

[data-unit] {
    --bs-primary: var(--unit-accent-strong);
    --bs-primary-rgb: var(--unit-accent-strong-rgb);
    --bs-link-color: var(--unit-accent-strong);
    --bs-link-color-rgb: var(--unit-accent-strong-rgb);
}

/* OneUI re-declares these with a hardcoded hex after Bootstrap's var-based ones. */
[data-unit] .text-primary {
    color: var(--unit-accent-strong) !important;
}

[data-unit] .bg-primary {
    background-color: var(--unit-accent-strong) !important;
}

[data-unit] .btn-primary {
    --bs-btn-bg: var(--unit-accent-strong);
    --bs-btn-border-color: var(--unit-accent-strong);
    --bs-btn-hover-bg: var(--erp-navy-800);
    --bs-btn-hover-border-color: var(--erp-navy-800);
    --bs-btn-active-bg: var(--erp-navy-900);
    --bs-btn-active-border-color: var(--erp-navy-900);
    --bs-btn-disabled-bg: var(--unit-accent-strong);
    --bs-btn-disabled-border-color: var(--unit-accent-strong);
    --bs-btn-focus-shadow-rgb: var(--unit-accent-rgb);
}

[data-unit] .btn-alt-primary {
    --bs-btn-color: var(--unit-accent-strong);
    --bs-btn-bg: rgba(var(--unit-accent-rgb), .12);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--unit-accent-strong);
    --bs-btn-hover-border-color: var(--unit-accent-strong);
}

[data-unit] .form-control:focus,
[data-unit] .form-select:focus {
    border-color: rgba(var(--unit-accent-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--unit-accent-rgb), .18);
}

[data-unit] .form-check-input:checked {
    background-color: var(--unit-accent-strong);
    border-color: var(--unit-accent-strong);
}

/* ---------------------------------------------------------------- brand */

/* 2x2 mark: one square per area. */
.erp-mark {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 26px;
    height: 26px;
    flex: none;
}

.erp-mark span { border-radius: 3px; }
.erp-mark span:nth-child(1) { background: var(--erp-central); }
.erp-mark span:nth-child(2) { background: var(--erp-sales); }
.erp-mark span:nth-child(3) { background: var(--erp-repair); }
.erp-mark span:nth-child(4) { background: var(--erp-printing); }

.erp-mark-lg {
    width: 40px;
    height: 40px;
    gap: 4px;
}

/* ---------------------------------------------------------------- auth */

/* Centred card on a navy field. Deliberately says nothing about the business: a branch user
   should not see what other branches do. */
.erp-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(var(--erp-central-rgb), 0.35), transparent 70%),
        linear-gradient(160deg, var(--erp-navy-800), var(--erp-navy-950));
}

.erp-auth-card {
    width: 100%;
    max-width: 24rem;
    padding: 2.25rem 2rem 2rem;
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.erp-auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    text-align: center;
}

.erp-auth-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.erp-auth-card h2 { text-align: center; }
.erp-auth-card h2 + p { text-align: center; }

.erp-auth-foot {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------- app shell */

#page-container[data-unit].sidebar-dark #sidebar {
    background-color: var(--erp-navy-900);
}

#page-container[data-unit].sidebar-dark #sidebar .content-header {
    background-color: var(--erp-navy-950);
}

#page-container[data-unit].sidebar-dark #sidebar .nav-main-link.active .nav-main-link-icon {
    color: var(--unit-accent);
}

/* Thin accent line tells you which area you are in. */
#page-container[data-unit] #page-header {
    box-shadow: inset 0 3px 0 var(--unit-accent);
}

/* ---------------------------------------------------------------- POS (layouts/pos.php) */

.erp-pos {
    min-height: 100vh;
    background: var(--bs-body-bg);
}

.erp-pos-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    background: var(--erp-navy-950);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--unit-accent);
}

.erp-pos-bar-muted {
    color: rgba(255, 255, 255, .6);
}

.erp-pos-main {
    padding: 1rem;
}

/* On wide screens the till fills the window; each side scrolls on its own. */
@media (min-width: 992px) {
    .erp-pos-main {
        height: calc(100vh - 56px);
        overflow: hidden;
    }
    .erp-pos-col {
        height: calc(100vh - 56px - 2rem);
        display: flex;
        flex-direction: column;
    }
    .erp-pos-col > .block {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    .erp-pos-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

.erp-pos-tile {
    height: 100%;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
    border: 1px solid var(--bs-border-color);
}

.erp-pos-tile:disabled {
    opacity: .55;
}

/* Choice cards: a radio with a title and one line of explanation (e.g. employee sign-in method) */
.erp-choice {
    display: flex;
    gap: .75rem;
    height: 100%;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    cursor: pointer;
}
.erp-choice .form-check-input {
    flex-shrink: 0;
    margin-top: .2rem;
}
.erp-choice:has(.form-check-input:checked) {
    border-color: var(--unit-accent-strong);
    background: rgba(var(--unit-accent-rgb), .06);
}

/* Breadcrumbs (every dashboard page, built by helpers\Breadcrumb) */
.erp-breadcrumb {
    margin-bottom: .75rem;
    font-size: .8125rem;
}
.erp-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color);
}
.erp-breadcrumb .breadcrumb-item a:hover {
    color: var(--unit-accent-strong);
}
.erp-breadcrumb .breadcrumb-item.active {
    color: var(--bs-body-color);
}

/* Forms: placeholders describe a field and must never look like typed data; required fields get a red star */
.form-control::placeholder,
.form-select::placeholder {
    color: var(--bs-secondary-color);
    opacity: .55;
}
.required > .form-label::after,
.required > label.form-label::after,
.erp-required::after {
    content: " *";
    color: var(--bs-danger);
}

/* Grids (helpers\grid\GridView) */
.erp-grid > thead > tr > th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.erp-grid > thead > tr > th a {
    color: inherit;
}
.erp-grid > tbody > tr > td {
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.erp-grid-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Filter tabs above a grid (helpers\widgets\FilterTabs) */
.erp-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.erp-filter-tabs a {
    padding: .5rem .75rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    font-weight: 500;
}
.erp-filter-tabs a:hover {
    color: var(--bs-body-color);
}
.erp-filter-tabs a.active {
    border-bottom-color: var(--unit-accent-strong);
    color: var(--bs-body-color);
}
.erp-filter-tabs .erp-count {
    margin-left: .35rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* Status stepper on job / order pages: <ol class="erp-stepper"><li class="done|current">Label</li>... */
.erp-stepper {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.erp-stepper li {
    flex: 1 1 0;
    min-width: 0;
    padding-top: .5rem;
    border-top: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 500;
    counter-increment: step;
}
.erp-stepper li::before {
    content: counter(step) ". ";
}
.erp-stepper li.done {
    border-top-color: rgba(var(--unit-accent-strong-rgb), .45);
    color: var(--bs-body-color);
}
.erp-stepper li.done::before {
    content: "\2713  ";
}
.erp-stepper li.current {
    border-top-color: var(--unit-accent-strong);
    color: var(--bs-body-color);
    font-weight: 600;
}
.erp-stepper .erp-step-note {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 400;
}