/* ============================================================
   RBW PARTNER PORTAL — BRAND THEME
   Based on rbw.com design system + dashboard mockup
   (Notes/20260323 - RBW Partner Portal - Dashboard Mockup.html)
   ============================================================ */

/* --- Font Face ---------------------------------------------
   Production target: Replica Std (300/400/700), self-hosted.
   Drop the three woff2 files into /assets/fonts/ and uncomment
   the @font-face block below. Until then we fall back to Inter
   from Google Fonts, which matches the mockup exactly.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');

/*
@font-face {
    font-family: 'Replica Std';
    src: url('/assets/fonts/ReplicaStd-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Replica Std';
    src: url('/assets/fonts/ReplicaStd.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Replica Std';
    src: url('/assets/fonts/ReplicaStd-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

:root {
    /* Brand colors — RBW warm monochrome */
    --rbw-black:       #2c2b28;
    --rbw-white:       #ffffff;
    --rbw-mono-100:    #f7f7f7;
    --rbw-mono-200:    #f2f1ef;
    --rbw-mono-300:    #e8e8e8;
    --rbw-mono-400:    #c2c2c2;
    --rbw-mono-500:    #79766f;
    --rbw-mono-600:    #2c2b28;

    /* System colors — reserved for states */
    --rbw-success:       #89c3a6;
    --rbw-success-bg:    #e8f5e9;
    --rbw-success-text:  #2e7d32;
    --rbw-warning-bg:    #fff3e0;
    --rbw-warning-text:  #e65100;
    --rbw-error:         #ff3366;
    --rbw-error-bg:      #fdf6f7;

    /* Brand accent — a warm brass tone applied only to interactive
       states (active nav, active tab underline, link hover). Evokes
       warm lighting (RBW's product) without becoming decorative. */
    --rbw-accent:        #9C7C52;

    /* Typography */
    --rbw-font: 'Inter', 'Helvetica Neue', sans-serif;
    /* Production: 'Replica Std', 'Helvetica Neue', sans-serif */

    /* Spacing */
    --rbw-nav-height: 80px;

    /* Motion */
    --rbw-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Bootstrap overrides */
    --bs-body-font-family: var(--rbw-font);
    --bs-body-color: var(--rbw-black);
    --bs-body-bg: var(--rbw-white);
    --bs-link-color: var(--rbw-black);
    --bs-link-hover-color: var(--rbw-mono-500);
    --bs-border-color: var(--rbw-mono-300);
}

/* --- Global ------------------------------------------------ */

*, *::before, *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--rbw-font);
    font-weight: 300;
    color: var(--rbw-black);
    background-color: var(--rbw-white);
    font-size: 0.9375rem;
    line-height: 1.65;
}

a {
    color: var(--rbw-black);
    text-decoration: underline;
    text-decoration-color: var(--rbw-mono-400);
    text-underline-offset: 3px;
    transition: color 0.3s var(--rbw-ease), text-decoration-color 0.3s var(--rbw-ease);
}

a:hover {
    color: var(--rbw-black);
    text-decoration-color: var(--rbw-black);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: var(--rbw-black);
}

/* --- Navigation -------------------------------------------- */

.rbw-nav {
    height: var(--rbw-nav-height);
    background: var(--rbw-white);
    border-bottom: 1px solid var(--rbw-mono-300);
    position: sticky;
    top: 0;
    z-index: 70;
}

.rbw-nav .container-fluid {
    height: 100%;
}

.rbw-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: var(--rbw-black);
}

.rbw-nav-brand:hover {
    color: var(--rbw-black);
}

.rbw-nav-logo {
    height: 40px;
    width: auto;
    color: var(--rbw-black);
    fill: var(--rbw-black);
}

.rbw-nav-title {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-accent);
    position: relative;
    top: 1px;
}

.rbw-nav-version {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--rbw-mono-300);
    border-radius: 2px;
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-transform: none;
    color: var(--rbw-mono-500);
    background: var(--rbw-mono-100);
}

/* The ArkosLight mark is a co-branded lockup (RBW logomark + divider +
   ARKOSLIGHT wordmark), so it's matched to the RBW logomark's 40px — that
   keeps the embedded RBW mark the same visual size as the standalone one. */
.rbw-nav-logo-arkos {
    height: 40px;
}

/* In-nav line-of-business switcher (multi-line accounts). Doubles as the
   always-visible indicator of which view is active. */
.rbw-nav-line-switch .dropdown-toggle {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rbw-black);
    border: 1px solid var(--rbw-mono-300);
}

.rbw-nav-line-switch .dropdown-toggle:hover {
    border-color: var(--rbw-mono-500);
    color: var(--rbw-black);
}

.rbw-line-switch-menu {
    border: 1px solid var(--rbw-mono-300);
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 11rem;
}

.rbw-line-switch-menu .dropdown-item {
    font-size: 0.8125rem;
    letter-spacing: 0.03rem;
    padding: 0.5rem 1rem;
}

.rbw-line-switch-menu .dropdown-item.active,
.rbw-line-switch-menu .dropdown-item:active {
    background: var(--rbw-black);
    color: var(--rbw-white);
}

/* --- Line-of-business choice modal (multi-line accounts) --- */

.rbw-line-modal .modal-content {
    border: none;
    border-radius: 4px;
    background: var(--rbw-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.rbw-line-modal .modal-body {
    padding: 2.5rem;
}

.rbw-line-modal-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--rbw-black);
    margin-bottom: 1rem;
    letter-spacing: -0.01rem;
}

.rbw-line-modal-intro {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--rbw-mono-500);
    margin-bottom: 2rem;
}

.rbw-line-modal-options {
    display: grid;
    gap: 0.75rem;
}

.rbw-line-modal-option {
    display: block;
    background: var(--rbw-black);
    color: var(--rbw-white);
    text-decoration: none;
    text-align: center;
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    border: 1px solid var(--rbw-black);
    border-radius: 1px;
    transition: background 0.3s var(--rbw-ease),
                color 0.3s var(--rbw-ease),
                border-color 0.3s var(--rbw-ease);
}

.rbw-line-modal-option:hover {
    background: var(--rbw-mono-500);
    border-color: var(--rbw-mono-500);
    color: var(--rbw-white);
    text-decoration: none;
}

/* Combined "Choose your view" modal — line + partner radio groups.
   The Continue button reuses .rbw-line-modal-option for the black
   button treatment. */
.rbw-view-group {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.rbw-view-legend {
    float: none;
    width: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin-bottom: 0.5rem;
    padding: 0;
}

.rbw-view-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem;
    font-size: 0.875rem;
    color: var(--rbw-black);
    cursor: pointer;
    border-bottom: 1px solid var(--rbw-mono-200);
}

.rbw-view-option:last-child {
    border-bottom: none;
}

.rbw-view-option input {
    margin: 0;
    flex: none;
}

.rbw-view-submit {
    width: 100%;
    margin-top: 0.5rem;
    font-family: inherit;
    cursor: pointer;
}

/* Clickable partner list in the dashboard "Your Portal Account" panel
   (multi-partner accounts). */
.rbw-partner-link {
    color: var(--rbw-black);
    text-decoration: none;
}

.rbw-partner-link:hover {
    text-decoration: underline;
}

.rbw-partner-link.active {
    font-weight: 700;
}

/* --- Current line indicator + Switch link (sidebar) -------- */

.rbw-current-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.6875rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rbw-mono-300);
}

.rbw-current-line-label {
    color: var(--rbw-mono-500);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 400;
}

.rbw-current-line-value {
    color: var(--rbw-black);
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.rbw-current-line-switch {
    margin-left: auto;
    color: var(--rbw-mono-500);
    text-decoration: underline;
    text-decoration-color: var(--rbw-mono-400);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 400;
}

.rbw-current-line-switch:hover {
    color: var(--rbw-black);
    text-decoration-color: var(--rbw-black);
}

/* Line-of-business indicator chip (detail pages) */
.rbw-line-chip {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    border: 1px solid var(--rbw-mono-300);
    background: transparent;
    color: var(--rbw-mono-500);
    white-space: nowrap;
}

.rbw-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rbw-nav-link {
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0.019rem;
    color: var(--rbw-mono-400);
    text-decoration: none;
    transition: color 0.3s var(--rbw-ease);
    position: relative;
    padding-bottom: 2px;
}

.rbw-nav-link:hover {
    color: var(--rbw-black);
    text-decoration: none;
}

.rbw-nav-link.active {
    color: var(--rbw-black);
}

.rbw-nav-link.active::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--rbw-accent);
}

/* --- Page Layout ------------------------------------------- */

.rbw-page {
    padding: 2.5rem 0 4rem;
}

.rbw-greeting,
.rbw-page-title {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    letter-spacing: -0.01rem;
}

.rbw-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.rbw-page-title-row .rbw-page-title {
    margin-bottom: 0;
}

.rbw-back-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    text-decoration: none;
}

.rbw-back-link:hover {
    color: var(--rbw-black);
    text-decoration: none;
}

/* --- Section Headers --------------------------------------- */

.rbw-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin-bottom: 1.25rem;
    display: block;
}

.rbw-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.rbw-section-link {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    text-decoration: none;
    transition: color 0.3s var(--rbw-ease);
}

.rbw-section-link:hover {
    color: var(--rbw-accent);
    text-decoration: none;
}

.rbw-section-link .arrow {
    font-size: 0.625rem;
    margin-left: 0.25rem;
}

.rbw-section-meta {
    font-size: 0.75rem;
    color: var(--rbw-mono-500);
    margin-bottom: 1.25rem;
}

/* --- Tables ------------------------------------------------ */

.rbw-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.rbw-table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    background: var(--rbw-mono-100);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rbw-mono-300);
    border-top: none;
    white-space: nowrap;
}

.rbw-table tbody td {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--rbw-black);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rbw-mono-200);
    vertical-align: middle;
}

.rbw-table tbody tr {
    transition: background-color 0.3s var(--rbw-ease);
}

.rbw-table tbody tr:hover {
    background-color: var(--rbw-mono-100);
}

.rbw-table tbody tr:last-child td {
    border-bottom: 1px solid var(--rbw-mono-300);
}

.rbw-table .col-amount,
.rbw-table .text-right {
    text-align: right;
    font-feature-settings: 'tnum';
}

.rbw-table .text-center {
    text-align: center;
}

.rbw-table .col-date {
    white-space: nowrap;
}

.rbw-table-wrap {
    margin-bottom: 2rem;
}

/* Light-form variant — header summary rows on detail pages */
.rbw-table-summary {
    margin-bottom: 1.5rem;
}

.rbw-table-summary thead th {
    background: var(--rbw-white);
    border-bottom: 1px solid var(--rbw-mono-300);
    border-top: 1px solid var(--rbw-mono-300);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.rbw-table-summary tbody tr:hover {
    background-color: transparent;
}

/* --- Links inside table cells ------------------------------ */

.rbw-order-link,
.rbw-table tbody a {
    color: var(--rbw-black);
    text-decoration: none;
    border-bottom: 1px solid var(--rbw-mono-400);
    transition: border-color 0.3s var(--rbw-ease);
}

.rbw-order-link:hover,
.rbw-table tbody a:hover {
    color: var(--rbw-black);
    border-color: var(--rbw-accent);
    text-decoration: none;
}

/* --- Status Badges ----------------------------------------- */

.rbw-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
}

.rbw-badge-approval {
    background: var(--rbw-warning-bg);
    color: var(--rbw-warning-text);
}

.rbw-badge-fulfillment {
    background: var(--rbw-success-bg);
    color: var(--rbw-success-text);
}

.rbw-badge-default {
    background: var(--rbw-mono-100);
    color: var(--rbw-mono-500);
}

/* --- Sidebar Panels ---------------------------------------- */

.rbw-panel {
    background: var(--rbw-mono-100);
    border-radius: 2px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.rbw-panel-title {
    /* Button reset (panel titles are <button> for accessible collapse) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rbw-mono-300);
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--rbw-font);
    /* Typography */
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin: 0 0 1rem;
    padding: 0 0 0.75rem;
    transition: color 0.3s var(--rbw-ease);
}

.rbw-panel-title:hover {
    color: var(--rbw-black);
}

.rbw-panel-title:focus,
.rbw-panel-title:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Chevron — points down when expanded, right when collapsed. Drawn
   with two borders rotated 45°, no SVG or icon font needed. */
.rbw-panel-title::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--rbw-ease);
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.rbw-panel.collapsed .rbw-panel-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rbw-panel.collapsed .rbw-panel-title::after {
    transform: rotate(-45deg) translate(0, 0);
}

/* Hide every child except the title button when collapsed. */
.rbw-panel.collapsed > *:not(.rbw-panel-title) {
    display: none;
}

.rbw-panel-text {
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--rbw-mono-500);
    margin-bottom: 0.75rem;
}

.rbw-panel-text:last-child {
    margin-bottom: 0;
}

.rbw-partner-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rbw-partner-list li {
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--rbw-black);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--rbw-mono-200);
}

.rbw-partner-list li:last-child {
    border-bottom: none;
}

/* --- Options Menu ------------------------------------------ */

.rbw-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rbw-options-list li {
    border-bottom: 1px solid var(--rbw-mono-200);
}

.rbw-options-list li:last-child {
    border-bottom: none;
}

.rbw-options-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--rbw-black);
    text-decoration: none;
    padding: 0.6rem 0;
    transition: color 0.3s var(--rbw-ease);
}

.rbw-options-link:hover {
    color: var(--rbw-mono-500);
    text-decoration: none;
}

.rbw-options-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    background: var(--rbw-mono-200);
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
}

/* --- Tabs (Bootstrap nav-tabs restyled) -------------------- */

.rbw-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--rbw-mono-300);
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.rbw-tabs .nav-item {
    margin-bottom: -1px;
}

.rbw-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 0 0.875rem;
    font-family: var(--rbw-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-400);
    transition: color 0.3s var(--rbw-ease), border-color 0.3s var(--rbw-ease);
    cursor: pointer;
}

.rbw-tabs .nav-link:hover {
    color: var(--rbw-mono-500);
    border-bottom-color: transparent;
}

.rbw-tabs .nav-link.active,
.rbw-tabs .nav-link.active:focus,
.rbw-tabs .nav-link.active:hover {
    color: var(--rbw-black);
    border-bottom-color: var(--rbw-accent);
    background: transparent;
}

.rbw-tabs .nav-link:focus,
.rbw-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- Stat tiles (commission statements summary) ------------ */

.rbw-stat {
    background: var(--rbw-mono-100);
    border-radius: 2px;
    padding: 1.5rem;
    height: 100%;
}

.rbw-stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rbw-mono-300);
}

.rbw-stat-value {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--rbw-black);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01rem;
    margin-bottom: 0.5rem;
}

.rbw-stat-meta {
    font-size: 0.75rem;
    color: var(--rbw-mono-500);
}

/* --- Period selector (commission statements) --------------- */

.rbw-period-select {
    width: auto;
    min-width: 14rem;
}

/* --- Year-at-a-glance selected-row highlight --------------- */

.rbw-table tbody tr.rbw-row-selected {
    background-color: var(--rbw-mono-200);
}
.rbw-table tbody tr.rbw-row-selected:hover {
    background-color: var(--rbw-mono-200);
}

/* --- Detail Sections (order-details, commission-payment-details) --- */

.rbw-detail-section {
    margin-bottom: 2rem;
}

.rbw-detail-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin-bottom: 1.25rem;
}

.rbw-summary {
    border-top: 1px solid var(--rbw-mono-300);
}

.rbw-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rbw-mono-200);
    font-size: 0.875rem;
    font-weight: 300;
}

.rbw-summary-row:last-child {
    border-bottom: 1px solid var(--rbw-mono-300);
}

.rbw-summary-row .label {
    color: var(--rbw-mono-500);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.rbw-summary-row .value {
    color: var(--rbw-black);
    font-feature-settings: 'tnum';
}

.rbw-summary-row.total {
    font-weight: 400;
}

/* --- Forms ------------------------------------------------- */

.rbw-form-label {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    margin-bottom: 0.4rem;
    display: block;
}

.rbw-input,
.form-control {
    width: 100%;
    background: var(--rbw-white);
    border: 1px solid var(--rbw-mono-300);
    border-radius: 1px;
    padding: 0.625rem 0.75rem;
    font-family: var(--rbw-font);
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--rbw-black);
    line-height: 1.5;
    transition: border-color 0.3s var(--rbw-ease);
}

.rbw-input:focus,
.form-control:focus {
    outline: none;
    border-color: var(--rbw-mono-500);
    box-shadow: none;
}

.rbw-input::placeholder,
.form-control::placeholder {
    color: var(--rbw-mono-400);
    font-weight: 300;
}

.form-check-input {
    border-radius: 1px;
    border-color: var(--rbw-mono-300);
}

.form-check-input:checked {
    background-color: var(--rbw-black);
    border-color: var(--rbw-black);
}

.form-check-input:focus {
    border-color: var(--rbw-mono-500);
    box-shadow: none;
}

.form-check-label {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--rbw-black);
}

.form-text {
    font-size: 0.75rem;
    color: var(--rbw-mono-500);
    margin-top: 0.4rem;
}

/* --- Buttons ----------------------------------------------- */

.rbw-btn,
.btn {
    display: inline-block;
    font-family: var(--rbw-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: 1px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.3s var(--rbw-ease),
                color 0.3s var(--rbw-ease),
                border-color 0.3s var(--rbw-ease);
    text-decoration: none;
}

.rbw-btn-primary,
.btn-primary {
    background: var(--rbw-black);
    color: var(--rbw-white);
    border-color: var(--rbw-black);
}

.rbw-btn-primary:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--rbw-mono-500);
    color: var(--rbw-white);
    border-color: var(--rbw-mono-500);
}

.rbw-btn-outline,
.btn-outline-secondary {
    background: transparent;
    color: var(--rbw-black);
    border-color: var(--rbw-mono-300);
}

.rbw-btn-outline:hover,
.btn-outline-secondary:hover {
    background: transparent;
    color: var(--rbw-black);
    border-color: var(--rbw-black);
}

.rbw-btn-block {
    width: 100%;
}

/* --- Alerts ------------------------------------------------ */

.rbw-alert,
.alert {
    border-radius: 1px;
    border: 1px solid;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.rbw-alert-error,
.alert-danger,
.alert-error {
    background: var(--rbw-error-bg);
    border-color: var(--rbw-error);
    color: var(--rbw-error);
}

.rbw-alert-warning,
.alert-warning {
    background: var(--rbw-warning-bg);
    border-color: var(--rbw-warning-text);
    color: var(--rbw-warning-text);
}

.rbw-alert-success,
.alert-success {
    background: var(--rbw-success-bg);
    border-color: var(--rbw-success-text);
    color: var(--rbw-success-text);
}

/* --- Auth (login, password-reset) -------------------------- */

.rbw-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--rbw-white);
}

.rbw-auth-card {
    width: 100%;
    max-width: 400px;
}

.rbw-auth-brand {
    text-align: center;
    margin-bottom: 2.5rem;
}

.rbw-auth-brand .rbw-nav-logo {
    height: 56px;
}

.rbw-auth-title {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-accent);
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.rbw-auth-heading {
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 1.75rem;
    letter-spacing: -0.01rem;
}

.rbw-auth-help {
    font-size: 0.8125rem;
    color: var(--rbw-mono-500);
    text-align: center;
    margin-bottom: 1.5rem;
}

.rbw-auth-footer {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--rbw-mono-500);
    text-align: center;
}

.rbw-auth-footer a {
    color: var(--rbw-black);
    text-decoration: underline;
    text-decoration-color: var(--rbw-mono-400);
}

.rbw-auth-footer a:hover {
    text-decoration-color: var(--rbw-black);
}

/* --- Product Configurator result panel ---------------------- */

.rbw-config-result {
    background: var(--rbw-mono-100);
    border-radius: 2px;
    padding: 1.75rem 2rem;
}

.rbw-config-header {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rbw-mono-300);
}

.rbw-config-header .rbw-section-label {
    margin-bottom: 0.5rem;
    display: block;
}

.rbw-config-product-id {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--rbw-black);
    letter-spacing: -0.01rem;
    margin: 0;
    font-feature-settings: 'tnum';
}

.rbw-config-row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1.25rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rbw-mono-200);
    font-size: 0.875rem;
}

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

.rbw-config-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    padding-top: 2px;
}

.rbw-config-value {
    color: var(--rbw-black);
    line-height: 1.55;
}

.rbw-config-na {
    color: var(--rbw-mono-500);
    font-style: italic;
}

.rbw-config-selected-list,
.rbw-config-insights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rbw-config-selected-list li,
.rbw-config-insights-list li {
    padding: 0.2rem 0;
}

.rbw-config-opt-name {
    color: var(--rbw-mono-500);
    font-weight: 400;
    margin-right: 0.25rem;
}

.rbw-config-welcome {
    background: transparent;
    padding: 0;
}

.rbw-config-welcome-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--rbw-black);
    letter-spacing: -0.01rem;
    margin-bottom: 0.75rem;
}

.rbw-config-welcome p {
    font-size: 0.9375rem;
    color: var(--rbw-mono-500);
    line-height: 1.65;
}

@media (max-width: 575.98px) {
    .rbw-config-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* --- Empty / Info states ----------------------------------- */

.rbw-empty {
    font-size: 0.875rem;
    color: var(--rbw-mono-500);
    padding: 1.5rem 0;
}

/* Lazy-load loading indicator — subtle, brand-aligned. */
.rbw-loading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
    padding: 1.5rem 0;
    position: relative;
}

.rbw-loading::after {
    content: '';
    display: inline-block;
    width: 0.625rem;
    margin-left: 0.125rem;
    animation: rbw-loading-dots 1.4s steps(4) infinite;
    text-align: left;
    vertical-align: bottom;
}

@keyframes rbw-loading-dots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%  { content: '...'; }
    100% { content: '';    }
}

@media (prefers-reduced-motion: reduce) {
    .rbw-loading::after {
        animation: none;
        content: '…';
    }
}

/* --- Footer ------------------------------------------------ */

.rbw-footer {
    border-top: 1px solid var(--rbw-mono-300);
    padding: 2rem 0;
    margin-top: 2rem;
}

.rbw-footer-text {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--rbw-mono-400);
    margin: 0;
}

/* --- DataTables overrides ---------------------------------- */
/* Loaded on orders, recently-shipped, commission-payments. */

.dataTables_wrapper {
    font-family: var(--rbw-font);
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--rbw-mono-500);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: var(--rbw-mono-500);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--rbw-white);
    border: 1px solid var(--rbw-mono-300);
    border-radius: 1px;
    padding: 0.375rem 0.625rem;
    font-family: var(--rbw-font);
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--rbw-black);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--rbw-mono-500);
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 1px !important;
    border: 1px solid var(--rbw-mono-300) !important;
    color: var(--rbw-mono-500) !important;
    background: var(--rbw-white) !important;
    padding: 0.3rem 0.625rem !important;
    margin: 0 2px !important;
    font-size: 0.75rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: var(--rbw-black) !important;
    color: var(--rbw-black) !important;
    background: var(--rbw-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--rbw-black) !important;
    background: var(--rbw-black) !important;
    color: var(--rbw-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    border-color: var(--rbw-mono-200) !important;
    color: var(--rbw-mono-400) !important;
    background: var(--rbw-white) !important;
}

/* DataTables-enhanced rbw-tables: keep our look */
table.dataTable.rbw-table {
    border-collapse: collapse;
}

table.dataTable.rbw-table tbody tr {
    background: transparent;
}

table.dataTable.rbw-table tbody tr:hover {
    background-color: var(--rbw-mono-100);
}

/* --- Responsive -------------------------------------------- */

@media (max-width: 991.98px) {
    .rbw-greeting,
    .rbw-page-title {
        font-size: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .rbw-table thead th,
    .rbw-table tbody td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 767.98px) {
    .rbw-nav-title {
        display: none;
    }

    .rbw-nav-links {
        gap: 1.25rem;
    }

    .rbw-nav-link {
        font-size: 0.8125rem;
    }

    .rbw-page {
        padding: 1.5rem 0 3rem;
    }
}

/* --- Reduced Motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --- Utilities --------------------------------------------- */

.rbw-mono { font-feature-settings: 'tnum'; }
.text-right { text-align: right; }
.text-center { text-align: center; }