/*
 * ESD Wash additions to the laundry-pos theme: the family brand palette (ESD POS Core
 * brand/README.md: the Wash accent #2F62D9 on light and #6E9DFF on dark, with the family graphite
 * #1B1F25), the sectioned icon rail, order and tag screens. Loaded after style.css and core.css.
 * Tom Select's own styles come from the core (build/core/tom-select.min.css).
 * Light: white text on the accent passes 4.5:1. Dark: the lighter accent with graphite text on buttons.
 */
:root {
    --wash-accent: #2F62D9;
    --wash-accent-hover: #2552BD;
    --wash-accent-soft: #E3EBFB;
    --wash-accent-wash: #F2F6FD;
    --wash-graphite: #1B1F25;
    --wash-graphite-hover: #2A3039;
    --wash-on-primary: #FFFFFF;

    --primary: var(--wash-accent);
    --primary-hover: var(--wash-accent-hover);
    --primary-100: var(--wash-accent-soft);
    --primary-transparent: var(--wash-accent-wash);
    --primary-rgb: 47, 98, 217;
    --primary-gradient: linear-gradient(270deg, #6E9DFF 0%, #2F62D9 100%);
    --secondary: var(--wash-graphite);
    --secondary-hover: var(--wash-graphite-hover);
    --secondary-rgb: 27, 31, 37;

    --bs-primary: var(--wash-accent);
    --bs-primary-rgb: 47, 98, 217;
    --bs-link-color: var(--wash-accent);
    --bs-link-color-rgb: 47, 98, 217;
    --bs-link-hover-color: var(--wash-accent-hover);
    --bs-link-hover-color-rgb: 37, 82, 189;
    --bs-primary-bg-subtle: var(--wash-accent-soft);
    --bs-primary-text-emphasis: #173A8A;
    --bs-primary-border-subtle: #AFC4F2;
    --bs-focus-ring-color: rgba(47, 98, 217, 0.25);
}

:root[data-bs-theme=dark] {
    --wash-accent: #6E9DFF;
    --wash-accent-hover: #8DB2FF;
    --wash-accent-soft: #162443;
    --wash-accent-wash: #101a30;
    --wash-graphite: #D5D9DF;
    --wash-graphite-hover: #E6E9ED;
    --wash-on-primary: #1B1F25;

    /* The template's dark block sets these too, so they are restated here. */
    --primary: var(--wash-accent);
    --primary-hover: var(--wash-accent-hover);
    --primary-100: var(--wash-accent-soft);
    --primary-transparent: var(--wash-accent-wash);
    --primary-rgb: 110, 157, 255;
    --secondary: var(--wash-graphite);
    --secondary-hover: var(--wash-graphite-hover);
    --secondary-rgb: 213, 217, 223;
    --bs-primary-rgb: 110, 157, 255;
    --bs-link-color-rgb: 110, 157, 255;
    --bs-link-hover-color-rgb: 141, 178, 255;
    --bs-primary-text-emphasis: #B9CEFF;
    --bs-primary-border-subtle: #2B4580;
    --bs-focus-ring-color: rgba(110, 157, 255, 0.3);
}

.btn-primary,
.btn-primary:focus {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    color: var(--wash-on-primary);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    color: var(--wash-on-primary);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

/* Brand in the frame: logos from config('product.logo*'), or the product name as text. */
.wash-brand img {
    height: 36px;
    width: auto;
}

.logo-small img,
.logo-small .core-brand-text {
    width: 34px;
    height: 34px;
}

.wash-auth-brand img {
    height: 44px;
    width: auto;
}

.sidebar.sidebar .sidebar-nav .nav-link {
    width: 52px;
    height: auto;
    min-height: 44px;
    margin-bottom: 14px;
    gap: 2px;
}

.wash-rail-label {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.wash-rail-menu {
    min-width: 240px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1060;
}

.wash-rail-menu .dropdown-item.active,
.wash-rail-menu .dropdown-item:active {
    background-color: var(--primary);
    color: #fff;
}

.wash-page-header h4 {
    font-size: 20px;
}

.wash-auth .login-userheading h3 {
    margin-bottom: 4px;
}

.wash-auth .login-userheading h4 {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 24px;
}

/* Status board */
.wash-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.wash-board .card {
    margin-bottom: 0;
}

.wash-piece-row td {
    vertical-align: middle;
}

.wash-scan-input {
    font-size: 20px;
    letter-spacing: 0.5px;
}

/* Order form lines */
.wash-line {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.wash-line .form-label {
    font-size: 12px;
    margin-bottom: 2px;
}

.wash-totals dt {
    font-weight: 400;
}

.wash-totals dd {
    text-align: right;
    margin-bottom: 4px;
}

/* Printed garment tags */
.wash-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm;
}

.wash-tag {
    width: 54mm;
    height: 30mm;
    border: 1px dashed #999;
    padding: 1.5mm 2mm;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    line-height: 1.2;
}

.wash-tag svg {
    width: 100%;
    height: 9mm;
    display: block;
}

.wash-tag .wash-tag-number {
    font-weight: 700;
    font-size: 9pt;
}

@media print {
    .wash-tag {
        border-color: #ccc;
    }
}

.wash-receipt-terms {
    font-size: 10px;
    white-space: pre-line;
}