/* Custom styles for trailerslite */

/* ── 1. Variables / @import ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* ── 2. Reset / Base ─────────────────────────────────────────── */
html {
    font-size: 62.5%; /* 1rem = 10px at default browser settings */
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #ffffff;
    background-image: url('/static/assets/page_back-x-lite.jpg');
    background-repeat: repeat-x;
    color: var(--body-text);
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #ffffff;
}

*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 0px;
    border: 3px solid #000000;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    border: #dae3eb 1px dotted;
    padding: 0 1px 0 1px;
    border-radius: 2px;
}

a:hover { 
    color: var(--primary);
    border: var(--active) 1px dotted;
    padding: 0 1px 0 1px;
    border-radius: 2px;
}

.a-stripped {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    border-radius: 0px !important;
}

.display-inline {
    display: inline !important;
}


/* ── 3. Layout: .group / .col / .grp-* ───────────────────────── */
.wrap {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem;
}
.group {
    max-width: 100%;
    display: grid;
    gap: 0;
    align-items: start;
}
.group > * {
    min-width: 0;
}
.col {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Uniform column grids */
.grp-1  { grid-template-columns: auto; }
.grp-2  { grid-template-columns: 1fr 1fr; }
.grp-3  { grid-template-columns: 1fr 1fr 1fr; }
.grp-4  { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grp-5  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.grp-6  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.grp-7  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.grp-8  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.grp-9  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.grp-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

/* Custom column grids (hex-encoded fr fractions) */
.grp-2-64    { grid-template-columns: 6fr 4fr; }
.grp-2-37    { grid-template-columns: 3fr 7fr; }
.grp-2-73    { grid-template-columns: 7fr 3fr; }
.grp-3-424   { grid-template-columns: 4fr 2fr 4fr; }
.grp-3-262   { grid-template-columns: 2fr 6fr 2fr; }
.grp-3-322   { grid-template-columns: 3fr 2fr 2fr; }
.grp-3-622   { grid-template-columns: 6fr 2fr 2fr; }
.grp-4-2241  { grid-template-columns: 2fr 2fr 4fr 1fr; }
.grp-4-4221  { grid-template-columns: 4fr 2fr 2fr 1fr; }
.grp-4-55A4  { grid-template-columns: 5fr 5fr 10fr 4fr; }
.grp-4-3222  { grid-template-columns: 3fr 2fr 2fr 2fr; }
.grp-4-4221  { grid-template-columns: 4fr 2fr 2fr 1fr; }
.grp-4-2422  { grid-template-columns: 2fr 4fr 2fr 2fr; }
.grp-4-2522  { grid-template-columns: 2fr 5fr 2fr 2fr; }
.grp-5-91111 { grid-template-columns: 9fr 1fr 1fr 1fr 1fr; }
.grp-6-222551 { grid-template-columns: 2fr 2fr 2fr 5fr 5fr 1fr; }
.grp-6-224231 { grid-template-columns: 2fr 2fr 4fr 2fr 3fr 1fr; }
.grp-6-211111 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; }
.grp-6-322221  { grid-template-columns: 3fr 2fr 2fr 2fr 2fr 1fr; }
.grp-6-444333  { grid-template-columns: 4fr 4fr 4fr 3fr 3fr 3fr; }
.grp-6-123213  { grid-template-columns: 1fr 2fr 3fr 2fr 1fr 3fr; }
.grp-6-223213  { grid-template-columns: 2fr 2fr 3fr 2fr 1fr 3fr; }
.grp-6-232225  { grid-template-columns: 2fr 3fr 2fr 2fr 2fr 5fr; }
.grp-6-232224  { grid-template-columns: 2fr 3fr 2fr 2fr 2fr 4fr; }
.grp-7-2111111 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.grp-7-34A3322 { grid-template-columns: 3fr 4fr 10fr 3fr 3fr 2fr 2fr; }
.grp-7-3C33424 { grid-template-columns: 3fr 12fr 3fr 3fr 4fr 2fr 4fr; }
.grp-7-3348822 { grid-template-columns: 3fr 3fr 4fr 8fr 8fr 2fr 2fr; }
.grp-7-3122221 { grid-template-columns: 3fr 1fr 2fr 2fr 2fr 2fr 1fr; }
.grp-7-1222311 { grid-template-columns: 1fr 2fr 2fr 2fr 3fr 1fr 1fr; }
.grp-8-23334233 { grid-template-columns: 2fr 3fr 3fr 3fr 4fr 2fr 3fr 3fr; }


/* ── 4. Typography ───────────────────────────────────────────── */
h1 {
    font-weight: 400;
    font-size: 2rem;
    font-weight: 600;
    color: var(--active);
    margin: 2rem 0 1rem 0 !important;
}
h2 {
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--secondary);
    margin: 1.5rem 0 1rem 0 !important;
}
h3 {
    display: flex;
    align-items: center;
    gap: 0px;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--active);
    margin: 0 0 0.5rem 0 !important;
}
h4 {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--accent-text);
    margin: 0.4rem 0 0.5rem 0 !important;
}
label {
    font-weight: 600;
    text-transform: capitalize;
}
.h1 {
    margin: 0;
    font-size: 1.75rem;
}
.error {
    color: #ff0000;
    font-weight: bold;
}
.lh-taller {
    line-height: 1.4em !important;
}
.lh-muchtaller {
    line-height: 1.8em !important;
}
.text-red      { color: #ff0000; }
.text-green      { color: #03b503; }
.text-orange     { color: #ffa500; }
.text-gray     { color: #939393 !important; }
.text-active   { color: var(--active) !important; }
.text-primary  { color: var(--primary) !important; }
.text-secondary  { color: var(--secondary) !important; }
.text-accent   { color: var(--accent-text) !important; }
.text-muted    { color: #acacac !important; }
.text-light    { color: #eceeee !important; }
.text-right    { text-align: right !important; }
.text-left     { text-align: left !important; }
.text-center   { text-align: center !important; }
.text-bold     { font-weight: 600 !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-italic    { font-style: italic !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-lite     { color: var(--separators) !important; }
.text-xsmall   { font-size: 1rem !important; }
.text-small    { font-size: 1.2rem !important; }
.text-medium   { font-size: 1.45rem !important; }
.text-bigger   { font-size: 1.6rem !important; }
.text-large    { font-size: 2rem !important; }
.text-xlarge   { font-size: 2rem !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}
.hide-overflow {
    white-space: nowrap;
    overflow: hidden !important;
}
.text-center-vertical { align-items: baseline !important; }


/* ── 5. Buttons ──────────────────────────────────────────────── */
.button {
    background-color: var(--primary);
    border: black;
    color: white;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: bold;
}
.button:hover {
    transition: all 0.3s ease;
    background-color: var(--accent-text);
}
.reset-password-button {
    background: none;
    border: none;
    color: #313131;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
.reset-password-button:hover {
    color: var(--accent-text);
    text-decoration: underline;
}
.clear-btn {
    background: none;
    border: none;
    color: #313131;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    outline: none;
}
.clear-btn:hover {
    color: var(--accent-text);
}
.clear-btn-sorting {
    background: none;
    border: none;
    color: #939393;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
.clear-btn-sorting:hover {
    color: var(--accent-text);
}
.btn-glow    { box-shadow: 0px 0px 20px 20px #ffffff !important; }
.btn-active  { background-color: var(--active) !important; }
.btn-primary { background-color: var(--primary); }
.btn-secondary { background-color: var(--secondary) !important; }
.btn-secondary:hover { background-color: var(--secondary-dark, #4a6378) !important; }
.btn-light   { background-color: #a7acb8 !important; }
.btn-light:hover { background-color: #8d929e !important; }

.btn-add { 
    background-color: white !important; 
    color: var(--primary) !important;
    border: 1px solid #e5e7eb !important;
    padding: 4px 8px 1px 8px !important;
}

.btn-add:hover { 
    background-color: #f6f6f6 !important; 
    border: 1px solid var(--active) !important;
}

.btn-add svg {
    width: 16px;
    height: 16px;
}

.btn-add .delete {
    width: 14px !important;
    height: 13px !important;
}

.btn-inline-with-group {
    position: relative;
    top: 3px;
    padding: 5px 8px 2px 8px !important;
}

.logout-button {
    width: 50px !important;
    height: 40px !important;
    padding: 6px !important;
}
.btn-big-square {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn-big-square svg {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}
.btn-big-square:hover {
    border: #5f5f5f 1px solid !important;
    box-shadow: inset 0 0 40px rgb(227, 230, 232);
    cursor: pointer;
}
.btn-medium {
    width: 75px !important;
    height: 26px !important;
}
.btn-large {
    width: 100px !important;
    height: 40px !important;
}
.btn-disabled, button[disabled], input[disabled], select[disabled], textarea[disabled] {
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: #3963a2 !important;
    border-color: #e7ecf3 !important;
    background-color: #f0f4f8 !important;
}
.clear-btn-disabled {
    color: #6c6c6c !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.btn-app {
    transition: all 1s ease;
    width: 120px !important;
    height: 110px !important;
    padding: 16px !important;
    margin: 10px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    border: black 1px solid;
    color: white;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
}
.btn-app:hover, .btn-app:focus, .btn-app:active {
    transition: all 0.4s ease;
    border-radius: 10px;
    background-color: var(--active);
    color: white;
    border: #42dfff 1px solid;
    box-shadow: 0px 0px 30px 0px #b8edf1;
    padding: 16px !important;
    margin: 10px !important;
}
.btn-app svg {
    width: 100px;
    height: 100px;
}
.button-group {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
}
.button-group .btn {
    padding: 6px 16px;
    background-color: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.3rem;
    text-decoration: none;
}
.button-group .btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.button-group .btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.button-group .btn:hover {
    background-color: var(--accent-text);
}

/* Switch / Toggle */
.switch-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-text {
    position: relative;
    top: 3px;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--primary);
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--primary);
}
input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}
.slider.round {
    border-radius: 17px;
}
.slider.round:before {
    border-radius: 50%;
}


/* ── 6. Forms ────────────────────────────────────────────────── */
.input {
    width: 100%;
    padding: 6px 10px;
    margin: 4px 0 8px 0;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
}
select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}
.input:focus {
    border: 1px solid var(--primary);
    outline: none;
}
.input-slim {
    padding: 4px 6px !important;
    margin: 0 !important;
}
.input-small {
    width: 30px !important;
    padding: 2px 2px !important;
}
.input-number {
    width: 60px !important;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* ── 7. Lists ────────────────────────────────────────────────── */
.list {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #c9c9c9;
    margin: 0.5rem 0 1rem 0 !important;
}
.list-item {
    padding: 0.75rem 0rem;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    transition: all 0.2s ease;
    font-size: 1.4rem;
}
.list-item svg {
    margin-top: 2px;
    width: 12px;
    height: 12px;
}
.list-item:last-child {
    border-bottom: none;
}
.list-hover .list-item:hover {
    background-color: #f9fafb;
}
.list-clickable .list-item {
    cursor: pointer;
    user-select: none;
}
.list-clickable .list-item:hover {
    background-color: #f3f4f6;
}
.list-item-active {
    background-color: var(--separators) !important;
    border-left: 4px solid var(--primary) !important;
    color: #1f2937;
}
.list-item-active:hover {
    background-color: #f9fafb !important;
}
.list-item-active .text-bold {
    color: var(--primary);
}
.list-title {
    align-items: center;
    height: 25px;
    font-weight: 600;
    font-size: 1.3rem;
    color: #939393;
}


/* ── 8. Modals ───────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal {
    position: relative;
    flex-shrink: 0;
    border-radius: 5px;
    border: none;
    padding: 0;
    background: white;
    max-height: calc(100svh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.modal:focus {
    outline: none !important;
    box-shadow: none !important;
}
.modal-content {
    padding: 2rem 1rem;
    background-color: white;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.modal-content-not-allowed {
    position: relative;
}
.modal-content-not-allowed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 5px;
    pointer-events: all;
    cursor: not-allowed;
    z-index: 100;
}
.modal-large  { width: 600px; }
.modal-xlarge { width: 960px; max-width: 96vw; }
.modal-medium { width: 500px; }
.modal-small  { width: 300px; }
.sticky-button-container {
    position: sticky;
    bottom: 20px;
    right: 0;
    padding: 0;
    margin-top: 1rem;
    z-index: 1000;
}


/* ── 9. Badges ───────────────────────────────────────────────── */
.badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    display: inline-block;
}
.list-item .badge {
    float: none;
    vertical-align: middle;
}
/* Status badges — keyed by status ID */
.badge-status-1 { background-color: #7b2fbe; } /* Ordered    — Purple      */
.badge-status-2 { background-color: #c45c00; } /* Building   — Dark Orange */
.badge-status-3 { background-color: #b81c2e; } /* Incomplete — Crimson     */
.badge-status-4 { background-color: #1d9b2a; } /* Finished   — Green       */
.badge-status-5 { background-color: #1565c0; } /* Shipped    — Blue        */
.badge-status-6 { background-color: #6f8c99; } /* Backlog    — Slate       */
.badge-status-7 { background-color: #e67e00; } /* Quoting    — Amber       */

.pb-status-1 { background-color: #7b2fbe; } /* Ordered    — Purple      */
.pb-status-2 { background-color: #c45c00; } /* Building   — Dark Orange */
.pb-status-3 { background-color: #b81c2e; } /* Incomplete — Crimson     */
.pb-status-4 { background-color: #1d9b2a; } /* Finished   — Green       */
.pb-status-5 { background-color: #1565c0; } /* Shipped    — Blue        */

.badge-primary { background-color: var(--primary); }
.badge-accent  { background-color: var(--accent-text); }
.badge-good    { background-color: green; }
.badge-bad     { background-color: red; }


/* ── 10. Alerts ──────────────────────────────────────────────── */
.alert {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.9rem;
}
.alert-info {
    background-color: #e3f2fd;
    border-color: #2196f3;
    color: #0d47a1;
}
.alert-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}
.alert-error {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}
.alert-warning {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}


/* ── 11. Components ──────────────────────────────────────────── */

/* Spinner loader */
.loader {
    width: 30px;
    aspect-ratio: 1;
    display: grid;
    border: 2px solid #0000;
    border-radius: 50%;
    border-right-color: var(--primary);
    animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}
.loader::after {
    margin: 8px;
    animation-duration: 3s;
}
@keyframes l15 {
    100% { transform: rotate(1turn) }
}

/* Dot loader */
.loader-small {
    width: 7.5px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5-small 1s infinite linear alternate;
}
@keyframes l5-small {
    0%   { box-shadow: 10px 0 #000,  -10px 0 #0002; background: #000 }
    33%  { box-shadow: 10px 0 #000,  -10px 0 #0002; background: #0002 }
    66%  { box-shadow: 10px 0 #0002, -10px 0 #000;  background: #0002 }
    100% { box-shadow: 10px 0 #0002, -10px 0 #000;  background: #000 }
}

.small-loader-container {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 4px;
}

/* Full-page loader overlay */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loader-overlay p {
    margin-top: 20px;
    font-size: 1.6rem;
    color: #666;
    font-weight: 500;
}
@keyframes cart-item-highlight {
    0%    { box-shadow: none; }
    8%    { box-shadow: inset 0 0 20px #05cfe5; border-color: var(--primary); }
    25%   { box-shadow: inset 0 0 4px #05cfe5bd; border-color: #d8d8d8; }
    40%   { box-shadow: inset 0 0 10px #05cfe5bd; border-color: #376687; }
    55%   { box-shadow: inset 0 0 4px #05cfe558; border-color: #d8d8d8; }
    68%   { box-shadow: inset 0 0 5px #05cfe558; border-color: #75a1c1; }
    100%  { box-shadow: none; border-color: #d8d8d8; }
}
.cart-item-new {
    animation: cart-item-highlight 3.5s forwards;
}
.adding-to-cart {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.loader-container {
    width: 30px;
    height: 30px;
    margin: 50px auto 30px auto;
}
.loader-margin {
    margin-top: 50px;
    margin-left: 90px;
}
.loader-margin-3 {
    margin-top: 50px;
    margin-left: 150px;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    pointer-events: none;
}
.toast {
    padding: 1.2rem 2rem;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    max-width: 40rem;
    text-align: center;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.toast-success { background-color: #1d9b2a; }
.toast-error   { background-color: #b81c2e; }
.toast-info    { background-color: #385b74; }
.toast-warning { background-color: #e67e00; }

/* Tooltips */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 250px;
    background-color: var(--primary);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1000;
    top: 125%;
    left: 50%;
    margin-left: -125px;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    white-space: normal;
}
.tooltip-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--primary) transparent;
}
.tooltip-wrapper.tooltip-top .tooltip-text {
    top: auto;
    bottom: 125%;
}
.tooltip-wrapper.tooltip-top .tooltip-text::after {
    top: 100%;
    bottom: auto;
    border-color: var(--primary) transparent transparent transparent;
}
.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.tooltip-wrapper svg {
    position: relative;
    top: 3px;
}

/* Context dropdown menu */
.rc-dropdown {
    position: fixed;
    z-index: 1001;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 140px;
    overflow: hidden;
}
.rc-dropdown-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 1.3rem;
}
.rc-dropdown-item:hover {
    background: var(--separators);
}
.rc-dropdown-item.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.rc-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* Order progress bar */
.order-progress-bar {
    display: flex;
    width: 100%;
    height: 16px;
    overflow: hidden;
    border-radius: 10px;
}
.order-progress-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    min-width: 0;
}

/* Divider */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 20px;
}


/* ── 12. Helpers — Borders ───────────────────────────────────── */
.rounded { border-radius: 4px; }
.shadow        { box-shadow: inset 0 0 20px rgb(233, 233, 233); }
.shadow-bottom { box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.border-none   { border: none !important; }
.border-red    { border-color: var(--red) !important; }
.border-bottom {
    border-bottom: 1px solid #888888;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.border-bottom-dotted {
    border-bottom: 1px dashed #d8d8d8;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
}
.border-top {
    border-top: 1px solid #888888;
    padding-top: 4px;
    margin-top: 8px;
}
.border {
    border: 1px solid #888888;
    padding: 4px;
    border-radius: 4px;
}
.border-dotted {
    border: 1px dashed #d8d8d8;
}
.border-light {
    border: 1px solid #c9c9c9;
}
.border-bottom-light {
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.border-right {
    border-right: 1px solid #888888;
    padding-right: 4px;
    margin-right: 4px;
}
.border-left {
    border-left: 1px solid #888888;
    padding-left: 4px;
    margin-left: 4px;
}


/* ── 13. Helpers — Backgrounds ───────────────────────────────── */
.back-lightgray  { background-color: #f9f9f9; }
.back-white      { background-color: #ffffff !important; }
.back-mutedslate { background-color: #254963 !important; }
.back-lightslate { background-color: #9da9b2 !important; }
.lite-background { background-color: var(--separators); }
.dark-background { background-color: var(--primary); }
.include-padding { padding: 1rem; }


/* ── 14. Helpers — Widths ────────────────────────────────────── */
.w-auto { width: auto !important; }
.w-30   { width: 30px !important; }
.w-50   { width: 50px !important; }
.w-100  { width: 100px !important; }
.w-200  { width: 200px !important; }
.w-300  { width: 300px !important; }
.w-full { width: 100% !important; }


/* ── 15. Helpers — Display / Position ───────────────────────── */
.pointer      { cursor: pointer; }
.float-left   { float: left; }
.float-right  { float: right; }
.float-center { display: block; margin-left: auto; margin-right: auto; }
.header-user-text {
    padding-top: 13px;
    line-height: 1.6rem;
    font-size: 1.2rem;
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
.sticky-tabs {
    position: sticky;
    top: 90px;
    z-index: 90;
    padding-bottom: 10px;
    background-color: #ffffff;
}
.sticky-title {
    position: sticky;
    top: 135px;
    z-index: 90;
    padding-bottom: 10px;
    background-color: #ffffff;
}
.sticky-containers {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 50;
}
.z-100 { z-index: 100 !important; }


/* ── 16. Helpers — Text Transforms (see Typography for text-*) ─ */
/* (text-truncate, hide-overflow, text-nowrap, text-center-vertical are in §4) */


/* ── 17. Helpers — Spacing ───────────────────────────────────── */

/* Margin */
.m-0  { margin: 0px !important; }

.mt-0  { margin-top: 0px !important; }
.mt-1  { margin-top: 1px !important; }
.mt-1-5  { margin-top: 1.5rem !important; }
.mt-2  { margin-top: 2px !important; }
.mt-3  { margin-top: 3px !important; }
.mt-4  { margin-top: 4px !important; }
.mt-5  { margin-top: 5px !important; }
.mt-6  { margin-top: 6px !important; }
.mt-7  { margin-top: 7px !important; }
.mt-8  { margin-top: 8px !important; }
.mt-9  { margin-top: 9px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-11 { margin-top: 11px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }

.mb-0  { margin-bottom: 0px !important; }
.mb-1  { margin-bottom: 1px !important; }
.mb-2  { margin-bottom: 2px !important; }
.mb-3  { margin-bottom: 3px !important; }
.mb-4  { margin-bottom: 4px !important; }
.mb-5  { margin-bottom: 5px !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }

.my-1  { margin-top: 1px !important;  margin-bottom: 1px !important; }
.my-2  { margin-top: 2px !important;  margin-bottom: 2px !important; }
.my-3  { margin-top: 3px !important;  margin-bottom: 3px !important; }
.my-4  { margin-top: 4px !important;  margin-bottom: 4px !important; }
.my-5  { margin-top: 5px !important;  margin-bottom: 5px !important; }
.my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }

.mx-1  { margin-left: 1px !important; margin-right: 1px !important; }
.mx-2  { margin-left: 2px !important; margin-right: 2px !important; }
.mx-3  { margin-left: 3px !important; margin-right: 3px !important; }
.mx-4  { margin-left: 4px !important; margin-right: 4px !important; }
.mx-5  { margin-left: 5px !important; margin-right: 5px !important; }

.mr-0  { margin-right: 0px !important; }
.mr-1  { margin-right: 1px !important; }
.mr-2  { margin-right: 2px !important; }
.mr-3  { margin-right: 3px !important; }
.mr-4  { margin-right: 4px !important; }
.mr-5  { margin-right: 5px !important; }
.mr-6  { margin-right: 6px !important; }
.mr-7  { margin-right: 7px !important; }
.mr-8  { margin-right: 8px !important; }
.mr-9  { margin-right: 9px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }

.ml-0   { margin-left: 0px !important; }
.ml-1   { margin-left: 1px !important; }
.ml-2   { margin-left: 2px !important; }
.ml-3   { margin-left: 3px !important; }
.ml-4   { margin-left: 4px !important; }
.ml-5   { margin-left: 5px !important; }
.ml-6   { margin-left: 6px !important; }
.ml-7   { margin-left: 7px !important; }
.ml-8   { margin-left: 8px !important; }
.ml-9   { margin-left: 9px !important; }
.ml-10  { margin-left: 10px !important; }
.ml-20  { margin-left: 20px !important; }
.ml-100 { margin-left: 100px !important; }

/* Padding */
.p-0  { padding: 0px; }
.p-1  { padding: 1px; }
.p-2  { padding: 2px; }
.p-3  { padding: 3px; }
.p-4  { padding: 4px; }
.p-5  { padding: 5px; }
.p-6  { padding: 6px; }
.p-7  { padding: 7px; }
.p-8  { padding: 8px; }
.p-9  { padding: 9px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }

.pt-0  { padding-top: 0px !important; }
.pt-1  { padding-top: 1px !important; }
.pt-2  { padding-top: 2px !important; }
.pt-3  { padding-top: 3px !important; }
.pt-4  { padding-top: 4px !important; }
.pt-5  { padding-top: 5px !important; }
.pt-6  { padding-top: 6px !important; }
.pt-7  { padding-top: 7px !important; }
.pt-8  { padding-top: 8px !important; }
.pt-9  { padding-top: 9px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-12 { padding-top: 12px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-24 { padding-top: 24px !important; }
.pt-28 { padding-top: 28px !important; }

.pb-0  { padding-bottom: 0px !important; }
.pb-1  { padding-bottom: 1px !important; }
.pb-2  { padding-bottom: 2px !important; }
.pb-3  { padding-bottom: 3px !important; }
.pb-4  { padding-bottom: 4px !important; }
.pb-5  { padding-bottom: 5px !important; }
.pb-6  { padding-bottom: 6px !important; }
.pb-7  { padding-bottom: 7px !important; }
.pb-8  { padding-bottom: 8px !important; }
.pb-9  { padding-bottom: 9px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }

.py-0  { padding-top: 0px !important;  padding-bottom: 0px !important; }
.py-1  { padding-top: 1px !important;  padding-bottom: 1px !important; }
.py-2  { padding-top: 2px !important;  padding-bottom: 2px !important; }
.py-3  { padding-top: 3px !important;  padding-bottom: 3px !important; }
.py-4  { padding-top: 4px !important;  padding-bottom: 4px !important; }
.py-5  { padding-top: 5px !important;  padding-bottom: 5px !important; }
.py-6  { padding-top: 6px !important;  padding-bottom: 6px !important; }
.py-7  { padding-top: 7px !important;  padding-bottom: 7px !important; }
.py-8  { padding-top: 8px !important;  padding-bottom: 8px !important; }
.py-9  { padding-top: 9px !important;  padding-bottom: 9px !important; }
.py-10  { padding-top: 10px !important;  padding-bottom: 10px !important; }
.py-12  { padding-top: 12px !important;  padding-bottom: 12px !important; }

.px-0  { padding-left: 0px;  padding-right: 0px; }
.px-1  { padding-left: 1px;  padding-right: 1px; }
.px-2  { padding-left: 2px;  padding-right: 2px; }
.px-3  { padding-left: 3px;  padding-right: 3px; }
.px-4  { padding-left: 4px;  padding-right: 4px; }
.px-5  { padding-left: 5px;  padding-right: 5px; }
.px-6  { padding-left: 6px;  padding-right: 6px; }
.px-12  { padding-left: 12px;  padding-right: 12px; }

.pr-0  { padding-right: 0px !important; }
.pr-1  { padding-right: 1px !important; }
.pr-2  { padding-right: 2px !important; }
.pr-3  { padding-right: 3px !important; }
.pr-4  { padding-right: 4px !important; }
.pr-5  { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-20 { padding-right: 20px !important; }

.pl-0  { padding-left: 0px !important; }
.pl-1  { padding-left: 1px !important; }
.pl-2  { padding-left: 2px !important; }
.pl-3  { padding-left: 3px !important; }
.pl-4  { padding-left: 4px !important; }
.pl-5  { padding-left: 5px !important; }
.pl-6  { padding-left: 6px; }
.pl-7  { padding-left: 7px; }
.pl-8  { padding-left: 8px; }
.pl-9  { padding-left: 9px; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px !important; }


.order-first { order: -1; }
.order-second { order: 2; }
.order-third { order: 3; }
.order-fourth { order: 4; }
.order-fifth { order: 5; }
.order-sixth { order: 6; }
.order-seventh { order: 7; }
.order-last { order: 9999; }


/* ── 18. Responsive breakpoints ──────────────────────────────── */
/*
 * Three tiers:
 *   lg  — desktop+  ≥ 1201px  (default — no query, all base classes)
 *   md  — tablet    ≤ 1200px
 *   sm  — mobile    ≤  768px
 *
 * Additive modifier classes — add alongside base class in HTML:
 *   Grid:        grp-md-{1-4} / grp-sm-{1-3}
 *   Visibility:  hide-md / sm-hide / sm-show
 *   Fluid width: w-full-md / sm-w-full
 *   Text align:  sm-text-left / sm-text-center / sm-text-right
 *   Pure CSS overrides (modals, padding, flex-wrap) — no HTML class needed
 */

/* ── md: tablet (≤ 1200px) ───────── */
@media (max-width: 1200px) {
    /* Grid overrides */
    .grp-md-1 { grid-template-columns: 1fr; }
    .grp-md-2 { grid-template-columns: 1fr 1fr; }
    .grp-md-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grp-md-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

    /* Visibility */
    .hide-md { display: none !important; }

    /* Fluid width */
    .w-full-md { width: 100% !important; }
}

/* ── sm: mobile (≤ 768px) ────────── */
@media (max-width: 768px) {
    /* Font scaling */
    html { font-size: 80% !important; }

    /* Grid overrides */
    .sm-grp-1 { grid-template-columns: 1fr; }
    .sm-grp-2 { grid-template-columns: 1fr 1fr; }
    .sm-grp-2-64 { grid-template-columns: 6fr 4fr; }
    .sm-grp-2-73 { grid-template-columns: 7fr 3fr; }
    .sm-grp-2-37 { grid-template-columns: 3fr 7fr; }
    .grp-sm-3 { grid-template-columns: 1fr 1fr 1fr; }

    .sm-order-first { order: -1 !important; }
    .sm-order-second { order: 2 !important; }
    .sm-order-third { order: 3 !important; }
    .sm-order-fourth { order: 4 !important; }

    .sm-span-2-cols { grid-column: span 2; }

    /* Visibility */
    .sm-hide { display: none !important; }
    .sm-show { display: block !important; }
    .sm-show-inline { display: inline !important; }

    /* Fluid width */
    .sm-w-full { width: 100% !important; }
    .sm-w-10 { width: 10% !important; }
    .sm-w-15 { width: 15% !important; }
    .sm-w-20 { width: 20% !important; }
    .sm-w-3333 { width: 33.33% !important; }
    .sm-w-50 { width: 50% !important; }
    .sm-w-80 { width: 80% !important; }
    .sm-w-85 { width: 85% !important; }
    .sm-w-90 { width: 90% !important; }

    /* Text alignment */
    .sm-text-left   { text-align: left !important; }
    .sm-text-center { text-align: center !important; }
    .sm-text-right  { text-align: right !important; }

    .float-right-sm  { float: right !important; }
    .float-left-sm  { float: left !important; }

    .text-waysmall-sm   { font-size: 0.7rem !important; }
    .sm-text-xsmall   { font-size: 1rem !important; }
    .sm-text-small    { font-size: 1.2rem !important; }
    .sm-text-normal    { font-size: 1.3rem !important; }
    .text-medium-sm   { font-size: 1.45rem !important; }
    .text-bigger-sm   { font-size: 1.6rem !important; }
    .text-large-sm    { font-size: 2rem !important; }

    /* Modals — constrain fixed-width to viewport */
    .modal-overlay { padding: 1rem 0.5rem; }
    .modal-xlarge,
    .modal-large,
    .modal-medium,
    .modal-small { max-width: 96vw; width: 96vw; }

    /* Main content padding — tighter on mobile */
    .include-padding { padding: 0.5rem; }
    .grp-sm-side-margin-3 { margin-left: 3rem !important; margin-right: 3rem !important; }
    .grp-sm-side-margin-1 { margin-left: 1rem !important; margin-right: 1rem !important; }

    .sm-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .sm-pr-0 { padding-right: 0 !important; }
    .sm-pt-05 { padding-top: 0.5rem !important; }
    .sm-pt-1 { padding-top: 1rem !important; }

    .sm-margin-top-05 { margin-top: 0.5rem !important; }
    .sm-margin-top-0 { margin-top: 0 !important; }
    .sm-margin-top-1 { margin-top: 1rem !important; }
    .sm-margin-top-2 { margin-top: 2rem !important; }

    .sm-padding-top-025 { padding-top: 0.25rem !important; }
    .sm-padding-top-05 { padding-top: 0.5rem !important; }
    .sm-padding-top-075 { padding-top: 0.75rem !important; }
    .sm-padding-top-1 { padding-top: 1rem !important; }

    .col-sm-padding-y-025 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .col-sm-padding-y-05 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .col-sm-padding-y-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    .sm-pl-0 { padding-left: 0 !important; }

    /* Button groups — allow wrapping */
    .button {
        font-size: 1rem !important;
    }
    .button-group { flex-wrap: wrap; }
    .btn-app {
        width: 120px !important;
        height: 80px !important;
        padding: 12px !important;
        margin: 5px !important;
        overflow: hidden;
    }
    .btn-app:hover, .btn-app:focus, .btn-app:active {
        box-shadow: none !important;
        width: 120px !important;
        height: 80px !important;
        padding: 12px !important;
        margin: 5px !important;
    }
    .btn-app span {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .btn-app svg {
        width: 40px;
        height: 40px;
    }

    .btn-big-square {
        flex-direction: row !important;
        gap: 10px;
    }
    .btn-big-square svg {
        width: 30px !important;
        height: 30px !important;
        margin-bottom: 0 !important;
    }

    /* Toasts — full width with consistent edge margin */
    .toast-container {
        left: 1.5rem;
        right: 1.5rem;
        transform: none;
        align-items: stretch;
    }
    .toast {
        max-width: none;
        white-space: normal;
        padding: 0.6rem 0.8rem;

    }

    .small-loader-container {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 6px;
        padding-bottom: 5px;
    }

    .header-user-text {
        font-size: 1rem;
        padding-top: 12px;
        line-height: 1.2rem;
    }
}

/* ── xs: phones (≤ 480px) ────────── */
@media (max-width: 480px) {
    html { font-size: 55%; }
}

/* sm-show base rule (always hidden unless ≤768px) */
.sm-show { display: none; }
.sm-show-inline { display: none; }


/* ── 19. Print ───────────────────────────────────────────────── */
@media print {
    @page {
        size: 3in 2.3in;
        margin: 0;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 3in !important;
        height: 2.3in !important;
        overflow: hidden !important;
        max-height: 2.3in !important;
    }

    header, footer, nav, .sidebar, .do-not-print {
        display: none !important;
        visibility: hidden !important;
    }

    body * {
        visibility: hidden !important;
    }

    .modal-overlay {
        display: none !important;
        visibility: hidden !important;
    }

    #printSection,
    #printSection * {
        visibility: visible !important;
    }

    #printSection {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 2.9in !important;
        height: 2.3in !important;
        max-height: 2.3in !important;
        overflow: hidden !important;
        break-after: avoid-page !important;
        break-inside: avoid-page !important;
        break-before: avoid-page !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }

    #printSection table,
    #printSection div {
        page-break-inside: avoid !important;
    }

    #printSection .label-title,
    #printSection .label-id,
    #printSection div {
        visibility: visible !important;
        display: block !important;
    }

    #printSection svg {
        visibility: visible !important;
        display: block !important;
    }
}

/* Tab slide transition */
.tab-viewport {
    position: relative;
    overflow: clip;
}
.tab-slide.ng-enter {
    transform: translateX(100%);
    transition: transform 0.28s ease;
}
.tab-slide.ng-enter-active {
    transform: translateX(0);
}
.tab-slide.ng-leave {
    transform: translateX(0);
    transition: transform 0.28s ease;
    position: absolute;
    top: 0; left: 0; right: 0;
}
.tab-slide.ng-leave-active {
    transform: translateX(-100%);
}