:root {
    color-scheme: light;
    font-family: Tahoma, Arial, sans-serif;
    color: #182b30;
    background: #f5f8f8;
    line-height: 1.65;
}

* { box-sizing: border-box; }
body { margin: 0; }
.container { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.site-header { background: #fff; border-bottom: 1px solid #e0e8e9; }
.header-content { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.company-name { font-size: 1.5rem; font-weight: 700; }
.language-link { color: #006b76; text-underline-offset: 0.3rem; padding: 0.5rem; }
.language-link:focus-visible { outline: 2px solid #0099a8; outline-offset: 3px; }
.main-content { padding-block: clamp(3rem, 10vh, 7rem); }
.welcome-panel { max-width: 48rem; border-inline-start: 4px solid #0099a8; padding-inline-start: clamp(1.25rem, 4vw, 2.5rem); }
.eyebrow { margin: 0 0 0.75rem; color: #006b76; }
h1 { margin: 0 0 1rem; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.45; overflow-wrap: anywhere; }
.description { margin: 0; color: #53656a; font-size: 1.1rem; }
.reference { color: #53656a; font-size: 0.85rem; overflow-wrap: anywhere; }

.auth-card { max-width: 30rem; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); background: #fff; border: 1px solid #dce7e8; border-radius: 1rem; box-shadow: 0 12px 40px #18303908; }
.auth-card h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: .5rem; }
.auth-intro { color: #53656a; margin-bottom: 2rem; }
.auth-form { display: grid; gap: 1.25rem; }
.auth-form label { display: block; font-weight: 700; margin-bottom: .4rem; }
.auth-form input:not([type=hidden]) { width: 100%; border: 1px solid #adc6c9; border-radius: .4rem; padding: .8rem; font: inherit; color: #182b30; background: #fff; }
.auth-form small { display: block; color: #53656a; margin-top: .35rem; font-size: .8rem; }
.primary-button { border: 0; border-radius: .4rem; background: #00899d; color: #fff; padding: .85rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer; }
.auth-error { padding: .8rem 1rem; background: #fff2ef; color: #842d21; border: 1px solid #efc6bf; border-radius: .4rem; margin-bottom: 1.5rem; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-actions form { margin: 0; }
.link-button,.text-link { color: #006b76; text-decoration: underline; text-underline-offset: .25rem; }
.link-button { border: 0; background: transparent; font: inherit; cursor: pointer; padding: .5rem; }
input:focus-visible,button:focus-visible,a:focus-visible { outline: 3px solid #0099a8; outline-offset: 3px; }
.customer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(16rem,1fr)); gap: 1rem; margin-block: 2rem; }
.customer-card { display: block; color: #182b30; background: white; padding: 1.5rem; border: 1px solid #dce7e8; border-radius: .75rem; text-decoration: none; }
.customer-card h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.customer-card:hover { border-color: #00899d; }
.account-detail { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; }
.account-detail dt { font-weight: 700; }.account-detail dd { margin: 0; }
@media (max-width: 480px) { .header-content { align-items: flex-start; padding-block: 1rem; }.header-actions { gap: .25rem; } }

/* Customer administration */
.main-content { padding-block: 2.5rem 4rem; }
.page-heading { display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem; }
.page-heading h1 { font-size:clamp(1.8rem,4vw,2.5rem);margin:.35rem 0; }
.page-heading p { margin:.3rem 0; }.muted { color:#53656a;font-size:.94rem; }
.panel { background:#fff;border:1px solid #dce7e8;border-radius:.75rem;padding:clamp(1rem,3vw,2rem); }
.panel h2 { font-size:1.2rem;margin-top:0; }
.button { display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #00899d;border-radius:.4rem;background:#00899d;color:#fff;padding:.65rem 1rem;font:inherit;font-weight:700;cursor:pointer;gap:.5rem; }
.button.secondary { background:#fff;color:#006b76;border-color:#bcd3d5; }.button:hover { filter:brightness(.96); }
.edit-form { max-width:52rem; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem; }.full { grid-column:1 / -1; }
.edit-form label:not(.check),.filter-bar label { display:block;font-weight:700;margin-bottom:.4rem; }
.edit-form input:not([type=hidden]):not([type=checkbox]),.edit-form select,.filter-bar input,.filter-bar select { width:100%;border:1px solid #adc6c9;border-radius:.4rem;padding:.7rem;font:inherit;background:#fff;color:#182b30;min-width:0; }
.check { display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;margin:.6rem 0; }.check input { width:1.15rem;height:1.15rem;margin-top:.3rem;accent-color:#00899d;flex-shrink:0; }
.activation-box { background:#f2f8f8;padding:1rem 1.25rem;border-radius:.5rem;margin-block:1.5rem; }
.activation-box p { margin-bottom:0; }.permissions { border:1px solid #dce7e8;border-radius:.5rem;padding:1rem 1.25rem;margin-top:1.5rem; }.permissions legend { font-weight:700;padding-inline:.4rem; }
.form-actions { display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1.5rem; }.page-heading .form-actions { margin:0; }
.filter-bar { display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap; }.grow { flex:1;min-width:12rem; }
.result-meta { margin-block:1.5rem 1rem;color:#53656a; }.table-wrap { overflow-x:auto; }table { width:100%;border-collapse:collapse;text-align:start; }th { color:#53656a;font-weight:700;background:#f6f9f9; }td,th { padding:.9rem .8rem;border-bottom:1px solid #e0e8e9;text-align:start; }td { overflow-wrap:anywhere; }td:last-child { white-space:nowrap; }
.record-link { color:#006b76;font-weight:700;text-decoration:none; }.record-link:hover { text-decoration:underline; }.block { display:block;color:#53656a; }.badge { display:inline-block;border-radius:2rem;padding:.15rem .7rem;background:#edf1f2;color:#53656a;font-size:.8rem;white-space:nowrap; }.badge.active { background:#e1f3ee;color:#17684e; }
.pagination { display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem; }.empty-state { text-align:center;padding:3rem 1rem;color:#53656a; }.details-grid { display:grid;grid-template-columns:minmax(7rem,1fr) 3fr;gap:1rem 2rem;margin-bottom:0; }.details-grid dt { color:#53656a; }.details-grid dd { margin:0;overflow-wrap:anywhere; }
.notice,.validation:not(.validation-summary-valid) { padding:1rem;border-radius:.5rem;background:#fff7e6;border:1px solid #eddfb8;margin-bottom:1.25rem; }.notice.success { background:#eaf7f1;border-color:#b9dfcc;color:#215d43; }.notice.error,.validation:not(.validation-summary-valid) { background:#fff2ef;border-color:#efc6bf;color:#842d21; }.validation-summary-valid { display:none; }.validation ul { margin:0;padding-inline-start:1.2rem; }.input-validation-error { border-color:#a33425!important; }
@media(max-width:640px) { .form-grid { grid-template-columns:1fr; }.details-grid { grid-template-columns:1fr;gap:.25rem; }.details-grid dd { margin-bottom:1rem; }.filter-bar>div { width:100%; }.page-heading { align-items:flex-start; }.main-content { padding-top:1.5rem; }td,th { padding:.75rem .6rem; } }

/* Product-family descriptions */
.family-form textarea { width:100%;min-height:8rem;resize:vertical;border:1px solid #adc6c9;border-radius:.4rem;padding:.7rem;font:inherit;line-height:1.65;background:#fff;color:#182b30; }
.family-form textarea:focus-visible { outline:3px solid #0099a8;outline-offset:3px; }

/* Attribute definition details */
.attribute-divider { border:0;border-top:1px solid #dce7e8;margin-block:1.75rem; }

/* Attribute option controls */
.option-link { margin-inline-start:.8rem; }
.edit-form input[readonly] { background:#f2f6f6!important;color:#53656a!important; }

/* Product specifications may contain long text or unbroken values. */
.specification-value { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 32rem; }

.edit-form textarea { width:100%; resize:vertical; border:1px solid #adc6c9; border-radius:.4rem; padding:.7rem; font:inherit; color:#182b30; }
.edit-form textarea:focus-visible,.edit-form select:focus-visible { outline:3px solid #0099a8; outline-offset:3px; }
.panel + .panel { margin-top:1.25rem; }

.product-actions { margin-block: 0 1.25rem; }

/* Step 8D: staff request review, with logical properties for RTL/LTR. */
.request-actions { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-block:1rem; }
.request-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.request-review-form { display:grid; gap:.8rem; }
.request-review-form textarea,.request-review-form select { width:100%; max-width:100%; box-sizing:border-box; font:inherit; padding:.7rem; border:1px solid #cbd5d9; border-radius:.4rem; background:#fff; color:#102f39; }
.request-review-form textarea { resize:vertical; }
.request-review-form .check { display:flex; gap:.6rem; align-items:flex-start; }
.request-review-form .check input { flex:none; margin-block-start:.3rem; }
.request-review-form .button { justify-self:start; }
.request-internal { border-inline-start:3px solid #008b9f; padding-inline-start:1rem; margin-block-start:1.2rem; }
.request-review-form textarea:focus-visible,.request-review-form select:focus-visible { outline:3px solid #0099a8; outline-offset:3px; }
.table-wrap td.request-note { white-space:pre-wrap; max-width:32rem; }