.react-loading {
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: #53657b;
    background: #f4f7fb;
    font-size: 15px;
    font-weight: 750;
}

.react-dashboard .dashboard-content { min-height: calc(100vh - 86px); }
.react-dashboard .view-intro { animation: react-view-in .2s ease both; }
.react-dashboard .orders,
.react-dashboard .customer-directory,
.react-dashboard .connections-panel,
.react-dashboard .activity-panel { animation: react-view-in .24s ease both; }
.react-dashboard .order-card-body { display: block; }
.react-dashboard .order-action-menu { position: relative; }
.react-dashboard .order-action-popover { z-index: 20; }
.react-dashboard .order-head[role="button"] { user-select: none; }
.react-dashboard .order-head-tools { flex-wrap: wrap; justify-content: flex-end; }
.react-dashboard .sidebar-backdrop.is-open { display: block; }
.react-dashboard .notice,
.react-dashboard .alert { margin-bottom: 16px; }
.react-dashboard .is-loading { position: relative; cursor: progress; }
.react-dashboard .is-loading::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-end: 7px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; vertical-align: -2px; animation: react-spin .7s linear infinite; }

.customer-profile-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.35fr); gap: 16px; margin: 16px 0; }
.customer-contact-panel,
.customer-address-book { padding: 16px; border: 1px solid #e2eaf3; border-radius: 14px; background: #fbfcfe; }
.customer-profile-layout h4 { margin: 0 0 10px; color: #172238; font-size: 15px; }
.customer-edit-form { display: grid; gap: 9px; }
.customer-edit-form label,
.address-form-grid label { display: grid; gap: 4px; color: #52647a; font-size: 11px; font-weight: 750; }
.customer-edit-form input,
.address-form-grid input,
.address-selector select { width: 100%; min-height: 40px; border: 1px solid #cbd8e7; border-radius: 9px; padding: 8px 10px; color: #172238; background: #fff; outline: 0; }
.customer-edit-form input:focus,
.address-form-grid input:focus,
.address-selector select:focus { border-color: #5d98d8; box-shadow: 0 0 0 3px rgba(23,104,197,.1); }
.address-book-title { display: flex; justify-content: space-between; gap: 12px; }
.address-book-title h4 { margin-bottom: 1px; }
.address-book-title small { color: #718097; }
.address-list { display: grid; gap: 9px; margin-top: 12px; }
.address-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 12px; border: 1px solid #dce6f1; border-radius: 11px; background: #fff; }
.address-card > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.address-card a { flex-basis: 100%; color: #29445f; text-decoration: none; }
.address-card a:hover { color: #1768c5; }
.address-label { color: #172238; font-size: 12px; font-weight: 850; }
.protected-address { padding: 2px 7px; border-radius: 999px; color: #087a45; background: #eaf8f1; font-size: 9px; font-weight: 800; }
.address-card details { min-width: 70px; }
.address-card summary,
.add-address summary { color: #1768c5; cursor: pointer; font-size: 11px; font-weight: 800; }
.address-card details[open] { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #edf2f7; }
.address-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 10px 0; }
.address-form-grid .wide { grid-column: 1 / -1; }
.delete-address-form { margin-top: 8px; }
.danger { color: #a32720 !important; border-color: #efc3bf !important; background: #fff4f2 !important; }
.add-address { margin-top: 11px; padding: 10px 12px; border: 1px dashed #b9cce1; border-radius: 11px; background: #f7faff; }

.form-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(7,25,45,.55); backdrop-filter: blur(4px); }
.form-dialog-card { width: min(620px,100%); padding: 24px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(7,25,45,.3); }
.form-dialog-heading { display: flex; justify-content: space-between; gap: 18px; }
.form-dialog-heading h2 { margin: 3px 0; font-size: 24px; }
.form-dialog-heading p { margin: 0; color: #718097; }
.dialog-close { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #d5e0ec; border-radius: 10px; color: #52647a; background: #fff; font-size: 23px; cursor: pointer; }
.address-selector { display: grid; gap: 6px; margin: 20px 0 10px; color: #40526b; font-size: 12px; font-weight: 800; }
.selected-address,
.missing-address,
.pickup-confirmation { display: grid; gap: 4px; margin: 10px 0 20px; padding: 14px; border: 1px solid #cfe0f2; border-radius: 12px; background: #f3f8fe; }
.selected-address span { color: #718097; font-size: 12px; }
.missing-address { border-color: #efd7a4; background: #fff9eb; }
.missing-address p { margin: 0; color: #725719; }
.pickup-confirmation { color: #087a45; border-color: #bce3d0; background: #f0faf5; }
.phone-completion-warning { display: grid; gap: 4px; margin: 10px 0; padding: 12px; border: 1px solid #f0c6bf; border-radius: 11px; color: #8f261e; background: #fff5f3; }
.phone-completion-warning strong { color: #8f261e; font-size: 13px; }
.phone-completion-warning span { font-size: 11px; }
.phone-completion-warning a { width: fit-content; margin-top: 4px; color: #087a45; font-size: 11px; font-weight: 850; }
.phone-rule-hint { color: #718097; font-size: 10px; font-weight: 600; }
.form-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf2f7; }
.form-dialog-actions button { min-height: 42px; border-radius: 10px; }

@keyframes react-view-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes react-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .react-dashboard .app-sidebar.is-open { transform: translateX(0); }
    .react-dashboard .order-head-tools { max-width: 48%; }
}

@media (max-width: 640px) {
    .react-dashboard .order-head-tools { max-width: none; }
    .react-dashboard .order-card-body { padding-inline: 14px; }
    .customer-profile-layout { grid-template-columns: 1fr; }
    .address-card { grid-template-columns: 1fr; }
    .address-form-grid { grid-template-columns: 1fr; }
    .address-form-grid .wide { grid-column: auto; }
    .form-dialog-card { padding: 18px; border-radius: 16px; }
    .form-dialog-actions { display: grid; }
    .form-dialog-actions > *, .form-dialog-actions form, .form-dialog-actions button { width: 100%; }
}