/* ==============================================
   COMPONENTS - Buttons, Cards, Modals, etc.
   ============================================== */

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.01em;
    line-height: 1.2;
    user-select: none;
}
.btn:active { transform: scale(0.97) !important; }
.btn svg { flex-shrink: 0; }

/* Primary — brand orange, main CTA */
.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(234, 148, 54, 0.28);
}
.btn-primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 18px rgba(234, 148, 54, 0.38);
    transform: translateY(-1px);
}

/* Secondary — dark slate, important secondary action */
.btn-secondary {
    background: var(--gradient-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.btn-secondary:hover {
    filter: brightness(1.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* Ghost — neutral, for utility/tertiary actions */
.btn-ghost {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--border-color);
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Outline — for dark/colored backgrounds (header, banners) */
.btn-outline {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Outline dark — brand accent border, for cards */
.btn-outline-dark {
    background: transparent;
    color: var(--brand-primary);
    border-color: rgba(234, 148, 54, 0.40);
    box-shadow: none;
}
.btn-outline-dark:hover {
    background: rgba(234, 148, 54, 0.08);
    border-color: rgba(234, 148, 54, 0.65);
    transform: translateY(-1px);
}

/* Collapse — for inline expand/collapse toggles */
.btn-collapse {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border-color: var(--border-color);
    box-shadow: none;
    padding: 5px 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: 8px;
}
.btn-collapse:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Danger */
.btn-danger {
    background: rgba(239, 68, 68, 0.07);
    color: #DC2626;
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: none;
}
.btn-danger:hover {
    background: #EF4444;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
}

/* Tooltip helper text on hover via [data-tooltip] */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: #1e1e1e;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    border: 5px solid transparent;
    border-top-color: #1e1e1e;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Size modifiers */
.btn-sm {
    padding: 5px 11px;
    font-size: var(--font-size-xs);
    border-radius: 8px;
    font-weight: 600;
}

.btn-lg {
    padding: 11px 22px;
    font-size: var(--font-size-base);
    border-radius: 12px;
    gap: 8px;
}

/* ---- Entry Main Page ---- */
.entry-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at top, #fff8ef, #f3f4f6 65%);
}

.entry-main__card {
    width: 100%;
    max-width: 680px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    text-align: center;
}

.entry-main__logo {
    display: block;
    width: 150px;
    max-width: 60%;
    margin-inline: auto;
    margin-bottom: 16px;
}

.entry-main__card h1 {
    margin-bottom: 8px;
    color: var(--brand-primary);
}

.entry-main__card p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* ---- Login Screen ---- */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at top, #fff8ef, #f3f4f6 65%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    padding: 22px;
}

.login-card__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.login-card__logo img {
    height: 52px;
}

.login-card h2 {
    margin: 0;
    text-align: center;
    color: var(--brand-primary);
}

.login-card p {
    margin: 6px 0 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

.login-error {
    margin-top: 10px;
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
}

.inline-field-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.inline-field-action .btn {
    height: 100%;
    min-height: 40px;
}

/* ---- Totals Panel ---- */
.totals-panel {
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    padding: 16px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.total-row span:last-child,
#products-subtotal {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.total-row:last-child {
    border-bottom: none;
}

.total-row--grand {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--brand-primary);
    padding: 10px 12px;
    margin-top: 8px;
    border-top: none;
    border-radius: 12px;
    background: rgba(234,148,54,0.10);
}

/* ---- Line Items Table ---- */
.table-wrapper {
    overflow-x: auto;
}

.line-items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.line-items-table thead th {
    background: #2f2f2f;
    color: var(--text-inverse);
    padding: 10px 12px;
    text-align: right;
    font-weight: 600;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.line-items-table tbody tr {
    border-bottom: 1px solid #edf1f7;
    transition: background var(--transition);
    background: #fff;
}

.line-items-table tbody tr:hover {
    background: #f8f7f5;
}

.line-items-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #edf1f7;
}
.line-items-table tbody td:has(.li-desc) {
    vertical-align: top;
    padding-top: 10px;
}

.line-items-table input,
.line-items-table select,
.line-items-table textarea {
    padding: 5px 7px;
    font-size: var(--font-size-xs);
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.line-items-table input:hover,
.line-items-table select:hover,
.line-items-table textarea:hover {
    border-color: var(--border-color);
    background: #ffffff;
}

.line-items-table input:focus,
.line-items-table select:focus,
.line-items-table textarea:focus {
    border-color: rgba(234,148,54,0.65);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(234,148,54,0.14);
    outline: none;
}

.line-items-table .li-desc {
    resize: vertical;
    min-height: 34px;
    max-height: 120px;
    width: 100%;
    font-family: inherit;
    line-height: 1.4;
    vertical-align: top;
}

/* Roomier description editing on desktop */
@media (min-width: 769px) {
    .line-items-table .li-desc {
        min-height: 64px;
        max-height: 220px;
    }
}

.line-item-image {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.line-item-image--placeholder {
    display: grid;
    place-items: center;
    color: #6b7280;
    background: #f3f4f6;
    font-weight: 600;
    font-size: 9px;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    padding: 4px;
}

/* ---- Category Chips (the picker modal only; the sidebar uses .cat-select) ---- */
/* RECTANGULAR, not pills. A 999px radius read as a tag cloud; square corners read as a
   filter control, which is what these are. */
.cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}

.cat-btn:hover {
    background: #FFF6EC;
    border-color: rgba(234,148,54,0.45);
    color: #8A4E10;
}

/* Solid fill, white text: the previous active state was orange on a pale tint (~2.3:1, under
   the 4.5:1 minimum) and colour was its only signal. */
.cat-btn.active {
    background: #8A4E10;
    border-color: #8A4E10;
    color: #fff;                 /* measured 6.61:1 */
    font-weight: 700;
}

.cat-btn.active:hover { background: #7A450E; border-color: #7A450E; color: #fff; }

.cat-btn__icon { display: inline-flex; opacity: 0.6; }
.cat-btn.active .cat-btn__icon { opacity: 1; }

.cat-btn__count {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    background: #EFEDEA;
    color: #44506B;              /* measured 6.90:1 on the badge ground */
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

.cat-btn.active .cat-btn__count {
    background: rgba(0,0,0,0.18); /* darkened, not lightened: a white veil gave 4.03:1 */
    color: #fff;                  /* measured 8.60:1 on the active chip */
}

/* ---- Category Filter (one native select: families are optgroups) ---- */
.cat-select {
    width: 100%;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cat-select:hover { border-color: rgba(234,148,54,0.55); }

.cat-select:focus {
    outline: none;
    border-color: #8A4E10;
    box-shadow: 0 0 0 3px rgba(138,78,16,0.15);
}

/* The browser draws the open list, so only what it inherits is ours to set. */
.cat-select optgroup { font-weight: 700; color: #8A4E10; }
.cat-select option   { font-weight: 500; color: var(--text-primary); }

/* ---- Product Card (Catalog) ---- */
.product-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}

.product-card__info {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--brand-secondary);
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s ease, transform .15s ease;
}
.product-card__info:hover {
    background: var(--brand-light);
    transform: scale(1.08);
}
.product-card__name--link {
    cursor: pointer;
}
.product-card__name--link:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
}

/* Product info modal */
.product-info-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.product-info-media {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    border-radius: 12px;
    overflow: hidden;
}
.product-info-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-info-name {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
    font-weight: 800;
}
.product-info-name-en {
    color: #777;
    font-size: 0.85rem;
    text-align: start;
}
.product-info-rows {
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
}
.product-info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.product-info-row span { color: #888; }
.product-info-row strong { color: var(--brand-secondary); }
.product-info-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
    white-space: pre-wrap;
    margin-top: 0.4rem;
}

.product-card:hover {
    border-color: rgba(234,148,54,0.5);
    box-shadow: 0 8px 20px rgba(234, 148, 54, 0.15);
    transform: translateY(-3px);
}

/* 🔴 WAS hover-only (opacity:0 + pointer-events:none until .product-card:hover). Tablets are the
   stated primary device and have no hover, so the app's only visible "add" affordance never
   appeared there — the card was tappable, but nothing said so. Keyboard focus could not reveal
   it either. It is now always present, and the hover rule below only enlarges it.
   28px rather than 24px: SC 2.5.8 asks 24 as a floor, and this sits in a dense two-column grid. */
.product-card__add {
    position: absolute;
    bottom: 8px;
    inset-inline-start: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.92;
    transform: scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 2px 8px rgba(234,148,54,0.4);
}

.product-card:hover .product-card__add,
.product-card__add:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.product-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #f8f9fb;
    padding: 4px;
}

.product-card__img--placeholder {
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 8px;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
}

.product-card__name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.product-card__sku {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-family: monospace;
}

.product-card__price {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--brand-primary);
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.line-items-table tbody td:nth-child(7) {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Catalog modal card extras */
.catalog-modal-card {
    cursor: default;
}

.catalog-modal-card:hover {
    transform: translateY(-2px);
}

.catalog-modal-card__name-en {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.catalog-modal-card__category {
    display: inline-block;
    font-size: 10px;
    color: var(--brand-primary);
    background: rgba(234,148,54,0.1);
    padding: 1px 7px;
    border-radius: 20px;
    margin-bottom: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Modal ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#confirm-modal {
    z-index: 2000;
}

#eo-legal-modal {
    z-index: 1100;
}

/* Above the catalog/product-overview modal so info opens on top */
#product-info-modal {
    z-index: 2100;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 20, 42, 0.52);
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.modal-container {
    position: relative;
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.85);
}

.modal-container--sm {
    max-width: 420px;
    width: min(95vw, 420px);
}

.modal-container--settings {
    max-width: 1120px;
    width: min(97vw, 1120px);
    max-height: 94vh;
    border-top: 4px solid var(--brand-primary);
    border-radius: 20px;
    overflow: hidden;
}

.modal-container--shp-preset {
    max-width: 680px;
    width: min(95vw, 680px);
    z-index: 1;
    overflow: hidden;
}

.modal-container--products {
    max-width: 1300px;
    width: min(98vw, 1300px);
    max-height: 96vh;
    border-radius: 18px;
    overflow: hidden;
}

.modal-container--products .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
}

.modal-container--products .modal-body {
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fcfcfb;
}

.modal-container--products .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #ffffff;
}

/* Catalog modal toolbar (search + categories) */
.catalog-modal-toolbar {
    padding: 10px 16px 6px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-modal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.catalog-modal-search-wrap .catalog-search-icon {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.catalog-modal-search-wrap input {
    width: 100%;
    padding: 8px 34px 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color 0.18s;
}

.catalog-modal-search-wrap input:focus {
    border-color: var(--brand-primary);
}

/* The modal's filter: families on one wrapped row, the open family's sub-categories on a
   recessed row beneath. It WRAPS rather than scrolling sideways — a chip parked off the edge
   is a chip nobody knows exists, which is the bug this whole control was rebuilt for. */
.catalog-modal-categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
}

.catalog-modal-categories .cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.catalog-modal-categories .cat-row--subs {
    padding: 7px 8px;
    background: #F6F4F1;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.catalog-modal-categories .cat-row--subs .cat-btn { font-weight: 500; }


/* Catalog modal body + grid */
.catalog-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 14px 16px !important;
    background: #fcfcfb !important;
}

.catalog-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .modal-container--products {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
    }
    .catalog-modal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .catalog-modal-toolbar {
        padding: 8px 12px 4px;
    }
    .catalog-modal-body {
        padding: 10px 12px !important;
    }
    .catalog-modal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Catalog modal title + badge */
.catalog-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-modal-badge {
    background: rgba(234, 148, 54, 0.12);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Catalog modal footer */
.catalog-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
}

.modal-header h3 {
    font-size: var(--font-size-md);
    color: var(--brand-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.modal-close:hover {
    background: rgba(234,148,54,0.12);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.modal-footer {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* ---- Settings Modal UX ---- */
.modal-container--settings .modal-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 28px;
}

.modal-container--settings .modal-header h3 {
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 800;
}

.modal-container--settings .modal-close {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.modal-container--settings .modal-close:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.modal-container--settings .modal-body {
    background: var(--bg-page);
    padding: 20px 28px;
    /* Flicking past the end of this list used to scroll the QUOTE PAGE underneath it. The
       products modal already contains its own overscroll; settings did not. `overflow-x` was
       also left at `visible`, which computes to `auto` next to `overflow-y: auto` — so a long
       unbroken username could raise a horizontal scrollbar inside the modal. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 🔴 THE TABLET IS THE REAL DEVICE — these three rules are not polish.
   1. iOS zooms the whole page when a focused input is under 16px, and the rep has to pinch
      back out every single time. Every settings field was 14px (13px under 768px).
   2. A 44px touch target is the floor. The per-user تعديل / حذف buttons computed to ~27px,
      side by side, and one of them deletes an account.
   3. In landscape the on-screen keyboard covers roughly half the viewport, and this footer was
      not sticky — so the save button sat underneath it, unreachable, with no indication. The
      products modal footer already solved this; settings never got it. */
.modal-container--settings input,
.modal-container--settings select,
.modal-container--settings textarea {
    font-size: 16px;
    min-height: 44px;
}

.modal-container--settings .btn,
.modal-container--settings .modal-close {
    min-height: 44px;
    min-width: 44px;
}

.modal-container--settings .modal-footer {
    background: #ffffff;
    padding: 14px 28px;
    position: sticky;
    bottom: 0;
    z-index: 3;
    border-top: 1px solid var(--border-color);
}

.settings-title-wrap h3 {
    margin: 0;
}

.settings-title-wrap p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.settings-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 28px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
}

.settings-overview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 13px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.settings-overview-card:hover {
    border-color: rgba(234, 148, 54, 0.35);
    box-shadow: 0 4px 14px rgba(234, 148, 54, 0.1);
}

.settings-overview-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(234,148,54,0.14) 0%, rgba(234,148,54,0.07) 100%);
    color: var(--brand-primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.settings-overview-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-overview-card__body span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.settings-overview-card__body strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-sections {
    display: grid;
    /* Was a hard `1fr 1fr`. Non-admin sections are HIDDEN rather than disabled — the right
       call — but the grid did not know that, so a rep was left with one card and an equally
       wide empty column beside it. That reads as a broken screen, and it is now the ONLY
       thing most reps see here since company details became admin-only. auto-fit collapses
       the empty track instead of reserving it. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.settings-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-section-card--auth {
    height: 100%;
}

.settings-section-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: box-shadow var(--transition);
}

.settings-section-card:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), 0 8px 22px rgba(15, 23, 42, 0.06);
}

.settings-section-card--auth {
    background: #fffcf8;
    border-color: rgba(234, 148, 54, 0.3);
}

.settings-section-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.settings-section-card__title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-section-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(234,148,54,0.15) 0%, rgba(234,148,54,0.07) 100%);
    color: var(--brand-primary);
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(234,148,54,0.15);
}

.settings-section-card--auth .settings-section-card__icon {
    background: linear-gradient(135deg, rgba(234,148,54,0.22) 0%, rgba(234,148,54,0.1) 100%);
    box-shadow: 0 2px 8px rgba(234,148,54,0.2);
}

.settings-section-card__head h4 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.settings-section-card__head span {
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.4;
    display: block;
}

.settings-auth-hint {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-auth-hint--admin {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.settings-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-field-help {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.settings-users-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.settings-users-head span {
    color: var(--text-muted);
    font-size: 11px;
}

.settings-users-list {
    display: grid;
    gap: 8px;
}

.settings-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #ffffff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.settings-user-card:hover {
    border-color: rgba(234,148,54,0.3);
    box-shadow: 0 2px 10px rgba(234,148,54,0.08);
}

.settings-user-card__avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(234,148,54,0.3);
}

.settings-user-card__info {
    flex: 1;
    min-width: 0;
}

.settings-user-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-user-card h4,
.settings-user-card p {
    margin: 0;
}

.settings-user-card h4 {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.settings-user-card p {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    margin-top: 3px;
}

.settings-current-badge,
.settings-role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.settings-current-badge {
    background: #e8f4fd;
    color: #1a6494;
}

.settings-role-badge {
    background: #f3f4f6;
    color: #4b5563;
}

.settings-role-badge--admin {
    background: rgba(234,148,54,0.14);
    color: var(--brand-primary);
}

.settings-user-card__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-modal-footer {
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.settings-modal-footer__main-actions {
    display: flex;
    gap: 8px;
}

.settings-modal-footer #btn-logout {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.settings-modal-footer #btn-logout:hover {
    background: #fef2f2;
    border-color: rgba(239,68,68,0.35);
    color: #dc2626;
}

@media (max-width: 860px) {
    .settings-sections {
        grid-template-columns: 1fr;
    }
    .settings-section-card--auth {
        height: auto;
    }
}

@media (max-width: 720px) {
    .settings-overview {
        grid-template-columns: 1fr 1fr;
        padding: 12px 16px;
    }

    .settings-overview-card:last-child {
        grid-column: 1 / -1;
    }

    .modal-container--settings .modal-header,
    .modal-container--settings .modal-body,
    .modal-container--settings .modal-footer {
        padding-inline: 16px;
    }

    .settings-users-head,
    .settings-user-card {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-user-card__actions,
    .settings-actions-row,
    .settings-modal-footer__main-actions {
        width: 100%;
    }

    .settings-user-card__actions .btn,
    .settings-actions-row .btn,
    .settings-modal-footer__main-actions .btn,
    .settings-modal-footer > .btn {
        flex: 1;
    }
}

/* ---- Implementation Phases (UI) ---- */
.phase-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}

.phase-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.phase-card__name {
    font-weight: 700;
    color: var(--brand-primary);
    font-size: var(--font-size-sm);
}

.phase-card__duration {
    font-size: var(--font-size-xs);
    background: rgba(234,148,54,0.12);
    color: #9a5a12;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
}

.phase-card__tasks {
    list-style: none;
    padding: 0;
}

.phase-card__tasks li {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 2px 0;
    padding-right: var(--space-md);
    position: relative;
}

.phase-card__tasks li::before {
    content: '▸';
    position: absolute;
    right: 0;
    color: var(--brand-accent);
    font-weight: 700;
}

.lighting-pricing-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fffaf3;
}

.lighting-pricing-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #6b4f2f;
    margin-bottom: 8px;
}

.lighting-sides-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.lighting-side-row {
    border: 1px solid #ead9c7;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lighting-side-row__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.lighting-side-amount {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #7c4a12;
}

.lighting-products-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lighting-products-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #eee3d5;
    border-radius: 8px;
    overflow: hidden;
}

.lighting-products-table th,
.lighting-products-table td {
    border-bottom: 1px solid #f2e8dd;
    padding: 6px;
    font-size: 12px;
    text-align: right;
}

.lighting-products-table th {
    background: #fff7ed;
    color: #7c4a12;
}

.lighting-products-table td input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
}

.lighting-product-total {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.lighting-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lighting-pricing-grand-total {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #d4a373;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.lighting-pricing-grand-total strong {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.shp-configure-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(234,148,54,0.28);
    border-radius: 14px;
    background: #fffaf3;
}

.shp-configure-card strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.shp-configure-card p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

@media (max-width: 640px) {
    .shp-configure-card {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---- Products Editor — Grid + Slide-over ---- */
.pe-page {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f0eeeb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pePageIn 0.2s cubic-bezier(.2,.8,.2,1);
}
@keyframes pePageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Top bar ─────────────────────────────────── */
.pe-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    height: 58px;
    background: #1a1a1a;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 3px 14px rgba(0,0,0,0.22);
}
.pe-topbar__back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-family: inherit;
    padding: 6px 14px 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.pe-topbar__back:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); }
.pe-topbar__center { flex: 1; display: flex; align-items: center; gap: 10px; }
.pe-topbar__title  { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.pe-topbar__badge  {
    background: rgba(234,148,54,0.18);
    color: #f0a84a;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid rgba(234,148,54,0.3);
}
.pe-topbar__actions { display: flex; align-items: center; gap: 8px; }
.pe-topbar__btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    font-family: inherit;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}
.pe-topbar__btn-outline:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.35); color: #fff; }
.pe-topbar__btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
}
.pe-topbar__btn-primary:hover { background: var(--brand-secondary); box-shadow: 0 4px 12px rgba(234,148,54,0.35); }

/* ── Toolbar: search + chips ─────────────────── */
.pe-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pe-search-wrap { position: relative; flex: 0 0 260px; }
.pe-search-icon  {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.pe-search-wrap input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 34px 8px 12px;
    font-size: 13px;
    font-family: inherit;
    background: #fafaf8;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}
.pe-search-wrap input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(234,148,54,0.6);
    box-shadow: 0 0 0 3px rgba(234,148,54,0.12);
}
.pe-category-tabs { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.pe-cat-chip {
    background: #f2f1ef;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.pe-cat-chip:hover  { background: #e8e4de; color: var(--text-primary); }
.pe-cat-chip.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-secondary); }

/* ── Product grid ────────────────────────────── */
.pe-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.pe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Product card */
.pe-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    text-align: right;
    position: relative;
}
.pe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15,23,42,0.12);
    border-color: rgba(234,148,54,0.4);
}
.pe-card.active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(234,148,54,0.18), 0 8px 24px rgba(15,23,42,0.10);
}
.pe-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f5f2ee;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}
.pe-card__img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #f5f2ee, #ede9e3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #d4c9ba;
}
.pe-card__body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pe-card__name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pe-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.pe-card__sku {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}
.pe-card__cat {
    font-size: 10px;
    color: #a09080;
    background: #fdf6ee;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #f0e6d6;
}
/* "Needs a look" — set on a product card whose record carries an adminNote. Deliberately the
   loudest thing on the card: an admin scanning the grid should be able to find the flagged
   products without opening any of them.
   #8A4E10 on #FBEFE0 measures 5.83:1 — computed, and it passes AA for normal text. An earlier
   version of this comment claimed 7.2:1, which was never measured and was wrong by a quarter.
   A contrast figure written from memory is worse than none: the next person darkens the ground
   trusting the headroom and ships a failure. */
.pe-card__flag {
    font-size: 10px;
    font-weight: 700;
    color: #8A4E10;
    background: #FBEFE0;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #E9C89B;
}

/* The same note, in full, at the top of the editor panel. */
.pe-so-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid #E9C89B;
    border-inline-start: 3px solid #8A4E10;
    border-radius: 8px;
    background: #FBEFE0;
    color: #6E3E0D;
    font-size: 12.5px;
    line-height: 1.6;
}

.pe-so-note__icon {
    flex: none;
    margin-top: 1px;
    color: #8A4E10;
}

.pe-card__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-secondary);
    margin-top: auto;
    padding-top: 6px;
}

/* Add-new card */
.pe-card--add {
    border: 2px dashed #d8d2c8;
    background: #fafaf8;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a09080;
    font-size: 13px;
    font-weight: 600;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pe-card--add:hover {
    border-color: var(--brand-primary);
    background: #fff9f3;
    color: var(--brand-secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(234,148,54,0.12);
}
.pe-card--add svg { transition: transform var(--transition); }
.pe-card--add:hover svg { transform: scale(1.15); }

/* Empty grid state */
.pe-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #b0a898;
}
.pe-grid-empty p { font-size: 15px; margin: 12px 0 4px; font-weight: 600; color: #6b7280; }
.pe-grid-empty small { font-size: 13px; }

/* ── Slide-over panel ────────────────────────── */
.pe-slideover {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.pe-slideover.open { pointer-events: all; }

.pe-slideover__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,15,15,0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.pe-slideover.open .pe-slideover__backdrop { opacity: 1; }

.pe-slideover__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 440px;
    max-width: 100%;
    background: #fff;
    box-shadow: -8px 0 40px rgba(15,23,42,0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}
.pe-slideover.open .pe-slideover__panel { transform: translateX(0); }

.pe-slideover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #fafaf8;
    flex-shrink: 0;
}
.pe-slideover__header-info { display: flex; align-items: center; gap: 10px; }
.pe-slideover__header-info h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.pe-so-sku-badge {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 5px;
}
.pe-slideover__close {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
    flex-shrink: 0;
}
.pe-slideover__close:hover { background: #f3f4f6; color: var(--text-primary); border-color: #c8c0b8; }

.pe-slideover__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Image zone inside slide-over */
.pe-so-image-wrap { margin-bottom: 18px; }
.pe-so-image-zone {
    width: 100%;
    height: 180px;
    border: 2px dashed #d9d2c8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafaf8;
    background-size: cover;
    background-position: center;
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}
.pe-so-image-zone:hover { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(234,148,54,0.10); }
.pe-so-image-zone.has-image { border-style: solid; border-color: #e0d8d0; }
.pe-so-image-zone.has-image .pe-so-image-zone__placeholder { display: none; }
.pe-so-image-zone__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: none;
    color: #b0a090;
}
.pe-so-image-zone__placeholder span { font-size: 13px; font-weight: 600; }
.pe-so-image-zone__placeholder small { font-size: 11px; color: #c4b8a8; }
.pe-so-remove-img {
    margin-top: 6px;
    background: none;
    border: none;
    color: #ef4444;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.pe-so-remove-img:hover { text-decoration: underline; }

/* Slide-over fields */
.pe-so-fields { display: flex; flex-direction: column; }
.pe-so-section {
    font-size: 10px;
    font-weight: 700;
    color: #a09080;
    margin: 14px 0 8px;
}
.pe-so-section:first-child { margin-top: 0; }
.pe-so-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}
.pe-so-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.pe-so-row .form-group { margin-bottom: 8px; }
.pe-so-fields .form-group { margin-bottom: 8px; }
.pe-so-fields textarea { resize: vertical; min-height: 64px; }
#pe-description, #pe-description-en { min-height: 80px; }
.pe-required { color: #ef4444; }
#pe-category { list-style: none; }

.pe-slideover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: #fafaf8;
    flex-shrink: 0;
    gap: 10px;
}
.pe-save-hint { font-size: 11px; color: #b0a898; }

/* Empty grid state */
.pe-empty-state {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: #b0a898;
    font-size: 13px;
}

@media (max-width: 640px) {
    .pe-topbar  { padding: 0 14px; gap: 8px; }
    .pe-topbar__title { font-size: 14px; }
    .pe-topbar__btn-outline { display: none; }
    .pe-toolbar { padding: 10px 14px; }
    .pe-search-wrap { flex: 1; }
    .pe-grid-wrap { padding: 14px; }
    .pe-grid  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .pe-slideover__panel { width: 100%; }
    .pe-so-row, .pe-so-row--3 { grid-template-columns: 1fr; }
    .pe-save-hint { display: none; }
}

/* ---- Customer contact combobox ---- */
#customer-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
}

.customer-dropdown__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.customer-dropdown__item:last-child { border-bottom: none; }
.customer-dropdown__item:hover,
.customer-dropdown__item:focus { background: var(--bg-secondary, #f8fafc); outline: none; }

.customer-dropdown__name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.customer-dropdown__meta {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

/* ==============================================
   PHASE 2 — LOCKED FIELDS, THE 5% CAP NOTICE,
   AND THE APPROVAL BADGES
   ==============================================
   Signage, not enforcement. The server substitutes catalogue values and clamps the discount
   whatever this stylesheet says; these rules exist so an honest rep can see which fields are
   not theirs BEFORE they type into one. Same visual language as the rest of the app: brand
   sand/amber, 10px radii, the existing badge shape. */

/* ---- A line-item field the catalogue owns ---- */
.line-items-table input.li-locked,
.line-items-table textarea.li-locked {
    background: var(--bg-muted, #F2F1EF);
    color: var(--text-secondary, #475467);
    border-color: var(--border-color, #E6E2DC);
    border-style: dashed;
    cursor: not-allowed;
}
.line-items-table input.li-locked:focus,
.line-items-table textarea.li-locked:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--border-strong, #D8D1C8);
}
/* The padlock is drawn, not typed into the value — a real 🔒 character inside the input would
   be saved as part of the product name on the very next keystroke elsewhere in the row. */
.line-items-table input.li-locked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 6px center;
    padding-left: 20px;
}

/* ---- The sentence under the line-items table ---- */
.lock-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 2px 0;
    padding: 9px 12px;
    border: 1px solid var(--border-color, #E6E2DC);
    border-radius: 10px;
    background: var(--brand-light, #FFF4E8);
    color: var(--text-secondary, #475467);
    font-size: var(--font-size-xs, 12px);
    line-height: 1.75;
}
.lock-note__icon { flex-shrink: 0; line-height: 1.6; }
.lock-note strong { color: var(--text-primary, #101828); font-weight: 700; }

/* ---- The money notices under the totals panel ---- */
.money-notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.money-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--border-color, #E6E2DC);
    border-radius: 10px;
    background: var(--bg-surface, #fff);
    font-size: var(--font-size-xs, 12px);
    line-height: 1.8;
    color: var(--text-secondary, #475467);
}
.money-notice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.money-notice__body strong { color: var(--text-primary, #101828); font-size: var(--font-size-sm, 14px); font-weight: 700; }
.money-notice__icon { flex-shrink: 0; font-size: 14px; line-height: 1.6; }
/* Amber, not red: the save succeeded and nothing was lost. Red here would say "error" about a
   rule working exactly as designed, and reps stop reading panels that cry wolf. */
.money-notice--warn      { background: #FFF8EE; border-color: #F0C892; }
.money-notice--warn .money-notice__icon { color: var(--brand-secondary, #C9781F); }
.money-notice--corrected { background: var(--bg-muted, #F2F1EF); border-color: var(--border-strong, #D8D1C8); }
.money-notice--pending   { background: #FFF8EE; border-color: #F0C892; }
.money-notice--granted   { background: #F1F8F3; border-color: #BFDDC8; }
.money-notice--rejected  { background: var(--bg-muted, #F2F1EF); border-color: var(--border-strong, #D8D1C8); }
.money-notice__badge {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.9;
    background: var(--brand-secondary, #C9781F);
    color: #fff;
}
.money-notice--granted  .money-notice__badge { background: #2F7A4B; }
.money-notice--rejected .money-notice__badge { background: var(--text-muted, #98A2B3); }

/* ---- The editable terms (warranty, payments) on the financials panel ---- */
.terms-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-xs, 12px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary, #475467);
}
.terms-hint[hidden] { display: none; }
.terms-hint--warn  { color: var(--brand-secondary, #C9781F); }
.terms-hint--error { color: #B42318; }
.payments-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.payments-inputs input { text-align: center; min-width: 0; }
.money-notice__reasons { color: var(--text-primary, #101828); }

/* ---- The approval badge on a history row ---- */
.history-approval-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.9;
    white-space: nowrap;
}
.history-approval-badge--pending  { background: #FFF0DA; color: #8A5313; border: 1px solid #F0C892; }
.history-approval-badge--granted  { background: #E8F4EC; color: #245C38; border: 1px solid #BFDDC8; }
.history-approval-badge--rejected { background: var(--bg-muted, #F2F1EF); color: var(--text-secondary, #475467); border: 1px solid var(--border-strong, #D8D1C8); }

/* ---- The rep's "ask for approval" button inside a money notice ---- */
.money-notice__actions { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }

/* ---- D9: the pending-request count on the admin's طلبات الخصم tab ---- */
.history-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-inline-start: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-secondary, #C9781F);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* The four legal fields hold LTR content (digits / Latin code) but sit on the RTL side of the
   form: dir="ltr" keeps the characters in order, text-align puts them at the right edge. */
#client-unified, #client-taxid, #client-addr-code, #client-addr-city,
#eo-legal-unified, #eo-legal-taxid, #eo-legal-address-code, #eo-legal-address-city,
#cf-unified, #cf-taxid, #cf-addr-code, #cf-addr-city { text-align: right; }