:root {
    --casa-bg: #f7f7fb;
    --casa-surface: #ffffff;
    --casa-surface-soft: #faf9ff;
    --casa-text: #18181b;
    --casa-muted: #71717a;
    --casa-border: #e5e7eb;
    --casa-border-strong: #d4d4d8;
    --casa-primary: #7557e8;
    --casa-primary-dark: #6141d6;
    --casa-primary-soft: #f0edff;
    --casa-danger: #dc2626;
    --casa-danger-soft: #fff1f2;
    --casa-success: #15803d;
    --casa-success-soft: #ecfdf3;
    --casa-warning: #a16207;
    --casa-warning-soft: #fffbeb;
    --casa-info: #2563eb;
    --casa-info-soft: #eff6ff;
    --casa-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 8px 32px rgba(24, 24, 27, .05);
    --casa-radius: 20px;
}

html.dark {
    --casa-bg: #111114;
    --casa-surface: #1b1b20;
    --casa-surface-soft: #202027;
    --casa-text: #f4f4f5;
    --casa-muted: #a1a1aa;
    --casa-border: #303038;
    --casa-border-strong: #45454f;
    --casa-primary: #a78bfa;
    --casa-primary-dark: #8b6ff0;
    --casa-primary-soft: rgba(124, 58, 237, .18);
    --casa-danger: #fb7185;
    --casa-danger-soft: rgba(225, 29, 72, .13);
    --casa-success: #4ade80;
    --casa-success-soft: rgba(22, 163, 74, .14);
    --casa-warning: #facc15;
    --casa-warning-soft: rgba(202, 138, 4, .13);
    --casa-info: #60a5fa;
    --casa-info-soft: rgba(37, 99, 235, .16);
    --casa-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 12px 36px rgba(0, 0, 0, .18);
}

.casa-admin-page #content {
    padding-bottom: 0;
}

.casa-admin-page #content-main {
    max-width: none;
}

.casa-page {
    color: var(--casa-text);
    margin: 0 auto;
    padding: 8px 0 48px;
    width: 100%;
}

.casa-form-page {
    max-width: 1120px;
}

.casa-form-page .casa-page-header {
    margin-bottom: 16px;
}

.casa-form-layout {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.casa-form-layout .casa-card {
    margin-bottom: 0;
}

.casa-form-layout > *,
.casa-products-list,
.casa-product-card,
.casa-product-fields,
.casa-field {
    max-width: 100%;
    min-width: 0;
}

.casa-layout-full {
    grid-column: 1 / -1;
}

.casa-page *,
.casa-page *::before,
.casa-page *::after {
    box-sizing: border-box;
}

.casa-page-header {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.casa-page-header h1 {
    color: var(--casa-text);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.12;
    margin: 0;
}

.casa-page-header p {
    color: var(--casa-muted);
    font-size: .92rem;
    margin: 7px 0 0;
}

.casa-page-header p strong {
    color: var(--casa-danger);
}

.casa-eyebrow {
    color: var(--casa-primary) !important;
    font-size: .75rem !important;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px !important;
    text-transform: uppercase;
}

.casa-title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.casa-back {
    color: var(--casa-muted);
    display: inline-flex;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
}

.casa-back:hover {
    color: var(--casa-primary);
}

.casa-alert-pill {
    align-items: center;
    background: var(--casa-danger-soft);
    border: 1px solid color-mix(in srgb, var(--casa-danger) 28%, transparent);
    border-radius: 999px;
    color: var(--casa-danger);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: 6px;
    padding: 6px 10px;
}

.casa-alert-pill::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

.casa-button {
    align-items: center;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 750;
    gap: 7px;
    justify-content: center;
    min-height: 44px;
    padding: 0 17px;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.casa-button:active {
    transform: translateY(1px);
}

.casa-button-primary {
    background: var(--casa-primary);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--casa-primary) 25%, transparent);
    color: #fff;
}

.casa-button-primary:hover {
    background: var(--casa-primary-dark);
    color: #fff;
}

.casa-button-secondary {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    color: var(--casa-text);
}

.casa-button-secondary:hover {
    border-color: var(--casa-border-strong);
    color: var(--casa-text);
}

.casa-card,
.casa-filter-card,
.casa-dashboard-section {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: var(--casa-radius);
    box-shadow: var(--casa-shadow);
}

.casa-card {
    margin-bottom: 12px;
    padding: 18px;
}

.casa-section-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.casa-section-heading h2 {
    color: var(--casa-text);
    font-size: 1.05rem;
    font-weight: 760;
    letter-spacing: -.015em;
    margin: 0;
}

.casa-section-heading p {
    color: var(--casa-muted);
    font-size: .79rem;
    margin: 3px 0 0;
}

.casa-section-icon {
    align-items: center;
    background: var(--casa-primary-soft);
    border-radius: 11px;
    color: var(--casa-primary);
    display: flex;
    flex: 0 0 32px;
    font-size: .82rem;
    font-weight: 850;
    height: 32px;
    justify-content: center;
}

.casa-fields {
    display: grid;
    gap: 12px;
}

.casa-fields-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.casa-fields-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.casa-fields-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.casa-order-summary-fields {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.casa-delivery-fields {
    grid-template-columns: minmax(160px, .72fr) minmax(190px, .88fr) minmax(260px, 1.6fr);
}

.casa-span-2 {
    grid-column: 1 / -1;
}

.casa-field > label,
.casa-filter-form > label > span:not(.casa-search-icon):not(.casa-visually-hidden) {
    color: var(--casa-text);
    display: block;
    font-size: .78rem;
    font-weight: 720;
    margin: 0 0 5px;
}

.casa-required {
    color: var(--casa-danger);
}

.casa-field input:not([type="radio"]):not([type="checkbox"]),
.casa-field select,
.casa-field textarea,
.casa-filter-form input,
.casa-filter-form select {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border-strong);
    border-radius: 12px;
    color: var(--casa-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    min-height: 42px;
    outline: none;
    padding: 8px 11px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    width: 100%;
}

.casa-field textarea {
    min-height: 64px;
    resize: vertical;
}

.casa-field input::placeholder,
.casa-field textarea::placeholder,
.casa-filter-form input::placeholder {
    color: color-mix(in srgb, var(--casa-muted) 72%, transparent);
}

.casa-field input:not([type="radio"]):not([type="checkbox"]):focus,
.casa-field select:focus,
.casa-field textarea:focus,
.casa-filter-form input:focus,
.casa-filter-form select:focus {
    border-color: var(--casa-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--casa-primary) 16%, transparent);
}

.casa-field.has-error input,
.casa-field.has-error select,
.casa-field.has-error textarea {
    border-color: var(--casa-danger);
}

.casa-help,
.casa-error {
    font-size: .73rem;
    margin: 4px 2px 0;
}

.casa-help {
    color: var(--casa-muted);
}

.casa-error {
    color: var(--casa-danger);
    font-weight: 650;
}

.casa-form-alert {
    background: var(--casa-danger-soft);
    border: 1px solid color-mix(in srgb, var(--casa-danger) 28%, transparent);
    border-radius: 14px;
    color: var(--casa-danger);
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 13px 16px;
}

.casa-form-alert ul.errorlist {
    margin: 0;
    padding-left: 18px;
}

.casa-product-card {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 16px;
    padding: 13px;
}

.casa-product-card + .casa-product-card {
    margin-top: 12px;
}

.casa-product-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.casa-product-title > span:first-child {
    color: var(--casa-text);
    font-size: .85rem;
    font-weight: 800;
}

.casa-product-required {
    color: var(--casa-muted);
    font-size: .68rem;
    font-weight: 650;
}

.casa-product-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 2fr) minmax(110px, .7fr) minmax(130px, .9fr);
}

.casa-product-fields.is-order-create {
    grid-template-columns: minmax(180px, 2fr) minmax(100px, .65fr) minmax(120px, .8fr) minmax(120px, .7fr);
}

.casa-text-button {
    background: transparent;
    border: 0;
    color: var(--casa-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: .77rem;
    font-weight: 760;
    padding: 5px;
}

.casa-product-card.is-collapsed {
    border-style: dashed;
    padding-bottom: 8px;
    padding-top: 8px;
}

.casa-product-card.is-collapsed .casa-product-title {
    margin: 0;
}

.casa-product-card.is-collapsed .casa-product-title > span:first-child,
.casa-product-card.is-collapsed .casa-product-fields {
    display: none;
}

#custom-delivery-field.is-hidden {
    display: none;
}

.casa-timeline {
    border-left: 2px solid var(--casa-border);
    display: grid;
    gap: 9px;
    margin: 3px 0 14px 8px;
    padding-left: 18px;
}

.casa-update {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 14px;
    padding: 11px 13px;
    position: relative;
}

.casa-update::before {
    background: var(--casa-primary);
    border: 3px solid var(--casa-surface);
    border-radius: 50%;
    content: "";
    height: 12px;
    left: -26px;
    position: absolute;
    top: 17px;
    width: 12px;
}

.casa-update-attention {
    background: var(--casa-danger-soft);
    border-color: color-mix(in srgb, var(--casa-danger) 25%, transparent);
}

.casa-update-attention::before {
    background: var(--casa-danger);
}

.casa-update-resolved {
    background: var(--casa-success-soft);
    border-color: color-mix(in srgb, var(--casa-success) 25%, transparent);
}

.casa-update-resolved::before {
    background: var(--casa-success);
}

.casa-update-top {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.casa-update-kind {
    color: var(--casa-primary);
    font-size: .71rem;
    font-weight: 800;
    text-transform: uppercase;
}

.casa-update-attention .casa-update-kind {
    color: var(--casa-danger);
}

.casa-update-resolved .casa-update-kind {
    color: var(--casa-success);
}

.casa-update time,
.casa-update small {
    color: var(--casa-muted);
    font-size: .69rem;
}

.casa-update p {
    color: var(--casa-text);
    font-size: .85rem;
    line-height: 1.48;
    margin: 8px 0;
}

.casa-empty-updates {
    background: var(--casa-surface-soft);
    border: 1px dashed var(--casa-border-strong);
    border-radius: 14px;
    color: var(--casa-muted);
    font-size: .82rem;
    margin-bottom: 12px;
    padding: 12px;
}

.casa-new-update {
    background: var(--casa-surface-soft);
    border-radius: 16px;
    padding: 13px;
}

.casa-new-update h3 {
    color: var(--casa-text);
    font-size: .9rem;
    font-weight: 780;
    margin: 0 0 10px;
}

.casa-update-types {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
}

.casa-update-option {
    align-items: flex-start;
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 13px;
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 60px;
    padding: 9px;
}

.casa-update-option:has(input:checked) {
    border-color: var(--casa-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa-primary) 13%, transparent);
}

.casa-update-option-attention:has(input:checked) {
    background: var(--casa-danger-soft);
    border-color: var(--casa-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa-danger) 12%, transparent);
}

.casa-update-option-resolved:has(input:checked) {
    background: var(--casa-success-soft);
    border-color: var(--casa-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa-success) 12%, transparent);
}

.casa-update-option input {
    accent-color: var(--casa-primary);
    flex: 0 0 auto;
    height: 17px;
    margin-top: 2px;
    width: 17px;
}

.casa-update-option strong,
.casa-update-option small {
    display: block;
}

.casa-update-option strong {
    color: var(--casa-text);
    font-size: .75rem;
    line-height: 1.25;
}

.casa-update-option small {
    color: var(--casa-muted);
    font-size: .67rem;
    line-height: 1.3;
    margin-top: 4px;
}

.casa-save-bar {
    bottom: 0;
    margin: 14px 0 0;
    padding: 0 12px max(12px, env(safe-area-inset-bottom));
    position: sticky;
    z-index: 20;
}

.casa-save-bar::before {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--casa-bg) 85%, transparent);
    content: "";
    inset: -10px 0 0;
    position: absolute;
    z-index: -1;
}

.casa-save-bar-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1180px;
}

.casa-save-buttons {
    display: flex;
    gap: 9px;
    margin-left: auto;
}

.casa-delete-link {
    color: var(--casa-danger);
    font-size: .8rem;
    font-weight: 700;
    padding: 10px;
    text-decoration: none;
}

/* Lista de comenzi */
.casa-filter-card {
    margin-bottom: 18px;
    padding: 15px;
}

.casa-filter-form {
    align-items: flex-end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(240px, 2fr) repeat(4, minmax(140px, .8fr)) auto;
}

.casa-search-field {
    position: relative;
}

.casa-search-field input {
    padding-left: 42px;
}

.casa-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);

    align-items: center;
    color: var(--casa-muted);
    display: flex;
    height: 18px;
    justify-content: center;
    pointer-events: none;
    width: 18px;
    z-index: 2;
}

.casa-search-icon svg {
    display: block;
    height: 18px;
    width: 18px;
}

.casa-filter-button {
    background: var(--casa-text);
    color: var(--casa-surface);
}

.casa-filter-button:hover {
    opacity: .88;
}

.casa-reset-filter {
    align-items: center;
    color: var(--casa-muted);
    display: flex;
    font-size: .75rem;
    font-weight: 650;
    height: 44px;
    padding: 0 7px;
    text-decoration: none;
}

.casa-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.casa-orders-table-wrap {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 18px;
    box-shadow: var(--casa-shadow);
    overflow-x: auto;
    width: 100%;
}

.casa-orders-table {
    border-collapse: collapse;
    min-width: 1080px;
    width: 100%;
}

.casa-orders-table th {
    background: var(--casa-surface-soft);
    color: var(--casa-muted);
    font-size: .64rem;
    font-weight: 820;
    letter-spacing: .045em;
    padding: 10px 11px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.casa-orders-table td {
    border-top: 1px solid var(--casa-border);
    color: var(--casa-text);
    font-size: .75rem;
    line-height: 1.35;
    padding: 11px;
    vertical-align: top;
}

.casa-orders-table tbody tr {
    transition: background-color .15s ease;
}

.casa-orders-table tbody tr:hover {
    background: var(--casa-surface-soft);
}

.casa-orders-table tbody tr.is-attention {
    background: var(--casa-danger-soft);
    box-shadow: inset 4px 0 var(--casa-danger);
}

.casa-orders-table tbody tr.is-attention:hover {
    background: color-mix(in srgb, var(--casa-danger-soft) 76%, var(--casa-surface));
}

.casa-table-order a,
.casa-table-client > a:first-child {
    color: var(--casa-text);
    display: block;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.casa-table-order time,
.casa-table-client > a:not(:first-child),
.casa-table-client > span {
    color: var(--casa-muted);
    display: block;
    font-size: .67rem;
    margin-top: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.casa-table-products {
    min-width: 190px;
}

.casa-table-products > div + div {
    border-top: 1px dashed var(--casa-border);
    margin-top: 6px;
    padding-top: 6px;
}

.casa-table-products strong,
.casa-table-products span {
    display: block;
}

.casa-table-products strong {
    font-size: .73rem;
}

.casa-table-products span {
    color: var(--casa-muted);
    font-size: .65rem;
    margin-top: 2px;
}

.casa-table-nowrap,
.casa-table-money {
    white-space: nowrap;
}

.casa-table-money {
    font-weight: 780;
}

.casa-table-internal {
    color: var(--casa-primary) !important;
}

.casa-table-update {
    min-width: 190px;
    max-width: 300px;
}

.casa-table-update > span {
    color: var(--casa-primary);
    font-size: .61rem;
    font-weight: 850;
    text-transform: uppercase;
}

.casa-table-update > span[data-kind="attention"] {
    color: var(--casa-danger);
}

.casa-table-update > span[data-kind="resolved"] {
    color: var(--casa-success);
}

.casa-table-update > span.is-empty {
    color: var(--casa-muted);
}

.casa-table-update p {
    color: var(--casa-muted);
    font-size: .68rem;
    line-height: 1.35;
    margin: 3px 0 0;
}

.casa-table-open {
    align-items: center;
    background: var(--casa-primary-soft);
    border-radius: 9px;
    color: var(--casa-primary);
    display: inline-flex;
    font-size: 1rem;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    text-decoration: none;
    width: 30px;
}

.casa-orders-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.casa-mobile-orders {
    display: none;
}

.casa-order-card {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 18px;
    box-shadow: var(--casa-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.casa-order-card:hover {
    border-color: var(--casa-border-strong);
    box-shadow: 0 12px 36px rgba(24, 24, 27, .09);
    transform: translateY(-1px);
}

.casa-order-card.is-attention {
    background: linear-gradient(180deg, var(--casa-danger-soft), var(--casa-surface) 32%);
    border-color: color-mix(in srgb, var(--casa-danger) 55%, transparent);
    box-shadow: 0 7px 26px color-mix(in srgb, var(--casa-danger) 12%, transparent);
}

.casa-order-card.is-attention::before {
    background: var(--casa-danger);
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

.casa-order-topline {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 17px 18px 0;
}

.casa-order-number {
    color: var(--casa-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
}

.casa-order-statuses {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
}

.casa-order-statuses .casa-secondary-status {
    margin-top: 0;
}

.casa-status {
    background: var(--casa-primary-soft);
    border-radius: 999px;
    color: var(--casa-primary);
    display: flex;
    align-items: center;
    width: max-content;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.25;
    max-width: 170px;
    padding: 5px 8px;
    text-align: center;
}

.casa-secondary-status {
    align-items: center;
    background: color-mix(in srgb, #991b1b 13%, var(--casa-surface));
    border: 1px solid color-mix(in srgb, #991b1b 24%, var(--casa-border));
    border-radius: 999px;
    color: #991b1b;
    display: flex;
    font-size: .66rem;
    font-weight: 850;
    line-height: 1.25;
    margin-top: 5px;
    padding: 5px 8px;
    width: max-content;
}

.casa-secondary-status[data-secondary-status="urgent"]::before,
.casa-secondary-status[data-secondary-status="alert"]::before {
    content: "!";
    margin-right: 4px;
}

.casa-status[data-status="delivered"] {
    background: var(--casa-success-soft);
    color: var(--casa-success);
}

.casa-status[data-status="cancelled"] {
    background: var(--casa-danger-soft);
    color: var(--casa-danger);
}

.casa-status[data-status="ready"],
.casa-status[data-status="shipped"] {
    background: var(--casa-warning-soft);
    color: var(--casa-warning);
}

.casa-order-main {
    color: inherit;
    display: block;
    flex: 1;
    padding: 14px 18px 10px;
    text-decoration: none;
}

.casa-order-main h2 {
    color: var(--casa-text);
    font-size: 1.05rem;
    font-weight: 780;
    letter-spacing: -.015em;
    margin: 0;
}

.casa-order-phone {
    color: var(--casa-muted);
    font-size: .78rem;
    margin-top: 3px;
}

.casa-order-products {
    border-top: 1px solid var(--casa-border);
    display: grid;
    gap: 9px;
    margin-top: 13px;
    padding-top: 12px;
}

.casa-order-products > div {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}

.casa-order-products strong {
    color: var(--casa-text);
    font-size: .78rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-order-products span {
    color: var(--casa-muted);
    flex: 0 0 auto;
    font-size: .7rem;
}

.casa-latest-update {
    background: var(--casa-surface-soft);
    border-radius: 11px;
    margin-top: 13px;
    padding: 9px 10px;
}

.casa-latest-update > span {
    color: var(--casa-primary);
    font-size: .61rem;
    font-weight: 850;
    text-transform: uppercase;
}

.casa-latest-update p {
    color: var(--casa-muted);
    font-size: .72rem;
    line-height: 1.4;
    margin: 3px 0 0;
}

.casa-latest-attention {
    background: var(--casa-danger-soft);
}

.casa-latest-attention > span {
    color: var(--casa-danger);
}

.casa-latest-resolved {
    background: var(--casa-success-soft);
}

.casa-latest-resolved > span {
    color: var(--casa-success);
}

.casa-order-footer,
.casa-order-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left: 18px;
    padding-right: 18px;
}

.casa-order-footer {
    border-top: 1px solid var(--casa-border);
    color: var(--casa-muted);
    font-size: .67rem;
    padding-bottom: 10px;
    padding-top: 11px;
}

.casa-order-footer strong {
    color: var(--casa-text);
}

.casa-card-prices {
    display: grid;
    justify-items: end;
    line-height: 1.25;
    text-align: right;
}

.casa-card-prices small {
    color: var(--casa-muted);
    font-size: .61rem;
}

.casa-order-actions {
    background: var(--casa-surface-soft);
    padding-bottom: 10px;
    padding-top: 10px;
}

.casa-order-actions a {
    font-size: .72rem;
    font-weight: 760;
    text-decoration: none;
}

.casa-phone-action {
    color: var(--casa-success);
}

.casa-open-action {
    color: var(--casa-primary);
}

.casa-empty-state {
    align-items: center;
    background: var(--casa-surface);
    border: 1px dashed var(--casa-border-strong);
    border-radius: var(--casa-radius);
    display: flex;
    flex-direction: column;
    padding: 64px 20px;
    text-align: center;
}

.casa-empty-icon {
    align-items: center;
    background: var(--casa-primary-soft);
    border-radius: 50%;
    color: var(--casa-primary);
    display: flex;
    font-size: 1.3rem;
    height: 52px;
    justify-content: center;
    margin-bottom: 14px;
    width: 52px;
}

.casa-empty-state h2 {
    color: var(--casa-text);
    font-size: 1.05rem;
    margin: 0;
}

.casa-empty-state p {
    color: var(--casa-muted);
    font-size: .82rem;
    margin: 6px 0 18px;
}

.casa-pagination {
    margin-top: 22px;
}

/* Dashboard */
.casa-stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
}

.casa-stat-card {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 18px;
    box-shadow: var(--casa-shadow);
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease;
}

.casa-stat-card:hover {
    border-color: var(--casa-primary);
    transform: translateY(-1px);
}

.casa-stat-card > span {
    color: var(--casa-muted);
    font-size: .76rem;
    font-weight: 690;
}

.casa-stat-card strong {
    color: var(--casa-text);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-top: 8px;
}

.casa-stat-card small {
    color: var(--casa-muted);
    font-size: .68rem;
    margin-top: 4px;
}

.casa-stat-alert.has-alerts {
    background: var(--casa-danger-soft);
    border-color: color-mix(in srgb, var(--casa-danger) 35%, transparent);
}

.casa-stat-alert.has-alerts strong {
    color: var(--casa-danger);
}

.casa-dashboard-section {
    padding: 22px;
}

.casa-dashboard-section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.casa-dashboard-section-head h2 {
    color: var(--casa-text);
    font-size: 1.03rem;
    margin: 0;
}

.casa-dashboard-section-head p {
    color: var(--casa-muted);
    font-size: .74rem;
    margin: 3px 0 0;
}

.casa-dashboard-section-head > a {
    color: var(--casa-primary);
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none;
}

.casa-recent-list {
    display: grid;
}

.casa-recent-order {
    align-items: center;
    border-top: 1px solid var(--casa-border);
    color: inherit;
    display: grid;
    gap: 13px;
    grid-template-columns: 54px minmax(0, 1fr) auto 72px;
    padding: 13px 5px;
    text-decoration: none;
}

.casa-recent-order.is-attention {
    background: var(--casa-danger-soft);
    box-shadow: inset 3px 0 var(--casa-danger);
    padding-left: 12px;
}

.casa-recent-number {
    color: var(--casa-muted);
    font-size: .7rem;
    font-weight: 800;
}

.casa-recent-main {
    min-width: 0;
}

.casa-recent-main strong,
.casa-recent-main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-recent-main strong {
    color: var(--casa-text);
    font-size: .82rem;
}

.casa-recent-main span,
.casa-recent-order time {
    color: var(--casa-muted);
    font-size: .68rem;
}

.casa-recent-order time {
    text-align: right;
}

.casa-period-filter {
    align-items: end;
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 18px;
    box-shadow: var(--casa-shadow);
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
}

.casa-header-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.casa-status-kpi-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 16px;
}

.casa-status-kpi {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 15px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px;
    text-decoration: none;
}

.casa-status-kpi span {
    color: var(--casa-muted);
    font-size: .68rem;
    font-weight: 720;
}

.casa-status-kpi strong {
    color: var(--casa-text);
    font-size: 1.55rem;
    line-height: 1;
}

.casa-status-kpi small {
    color: var(--casa-muted);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}

.casa-status-kpi.is-danger strong {
    color: var(--casa-danger);
}

.casa-status-kpi.is-success strong {
    color: var(--casa-success);
}

.casa-status-kpi.is-warning strong {
    color: var(--casa-warning);
}

.casa-status-kpi.is-new strong {
    color: #2563eb;
}

.casa-status-kpi.is-working strong {
    color: #b45309;
}

.casa-status-kpi.is-neutral strong {
    color: #20252d;
}

.casa-status-kpi.is-refused strong {
    color: #be185d;
}

.casa-status-kpi.is-delivered strong {
    color: #166534;
}

.casa-status-kpi.is-return strong {
    color: #991b1b;
}

html.dark .casa-status-kpi.is-neutral strong {
    color: #d0d5dd;
}

.casa-period-filter label,
.casa-period-field {
    display: grid;
    gap: 6px;
}

.casa-period-filter label > span,
.casa-period-field > span {
    color: var(--casa-muted);
    font-size: .7rem;
    font-weight: 750;
}

.casa-period-filter input,
.casa-period-filter select {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 11px;
    color: var(--casa-text);
    font-family: inherit;
    font-size: 16px;
    min-height: 44px;
    padding: 0 12px;
    width: 100%;
}

.casa-period-field {
    min-width: 210px;
}

.casa-period-field-combined {
    min-width: min(360px, 100%);
}

.casa-order-list .casa-period-field-combined {
    min-width: 0;
}

.casa-order-list .casa-day-picker-trigger [data-period-picker-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-day-picker {
    min-width: 0;
    position: relative;
}

.casa-day-picker-trigger {
    align-items: center;
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 11px;
    color: var(--casa-text);
    cursor: pointer;
    display: flex;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    gap: 12px;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 12px;
    width: 100%;
}

.casa-day-picker-trigger [data-period-picker-label] {
    flex: 1 1 auto;
    min-width: 0;
}

.casa-day-picker-trigger[aria-expanded="true"] {
    border-color: var(--casa-primary);
    box-shadow: 0 0 0 3px var(--casa-primary-soft);
}

.casa-day-picker-trigger .material-symbols-outlined {
    color: var(--casa-muted);
    font-size: 20px;
}

.casa-calendar {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(24, 24, 27, .16);
    box-sizing: border-box;
    padding: 13px;
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + 7px);
    max-width: calc(100vw - 52px);
    width: 560px;
    z-index: 50;
}

.casa-calendar-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 330px;
}

.casa-calendar-periods {
    align-content: start;
    border-right: 1px solid var(--casa-border);
    display: grid;
    gap: 14px;
    max-height: 360px;
    overflow-y: auto;
    padding: 2px 12px 2px 0;
}

.casa-calendar-year {
    align-content: start;
    display: grid;
    gap: 2px;
}

.casa-calendar-year strong {
    color: var(--casa-muted);
    font-size: .68rem;
    padding: 5px 8px;
}

.casa-calendar-year button {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--casa-text);
    cursor: pointer;
    font-family: inherit;
    font-size: .76rem;
    line-height: 1.2;
    min-height: 30px;
    padding: 6px 8px;
    text-align: left;
}

.casa-calendar-year button:hover {
    background: var(--casa-primary-soft);
}

.casa-calendar-year button.is-active {
    background: var(--casa-primary-soft);
    color: var(--casa-primary);
    font-weight: 800;
}

.casa-calendar-all {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--casa-text);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .76rem;
    min-height: 30px;
    padding: 6px 8px;
    text-align: left;
}

.casa-calendar-all:hover,
.casa-calendar-all.is-active {
    background: var(--casa-primary-soft);
    color: var(--casa-primary);
    font-weight: 800;
}

.casa-calendar-main {
    min-width: 0;
    padding-left: 14px;
}

.casa-calendar-main.is-without-month .casa-calendar-weekdays,
.casa-calendar-main.is-without-month .casa-calendar-days,
.casa-calendar-main.is-without-month [data-calendar-clear] {
    display: none;
}

.casa-calendar[hidden] {
    display: none;
}

.casa-calendar-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.casa-calendar-head strong {
    color: var(--casa-text);
    font-size: .88rem;
}

.casa-calendar-head button {
    background: transparent;
    border: 0;
    color: var(--casa-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 750;
    padding: 5px;
}

.casa-calendar-weekdays,
.casa-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.casa-calendar-weekdays {
    color: var(--casa-muted);
    font-size: .62rem;
    font-weight: 750;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.casa-calendar-weekdays span {
    padding: 5px 0;
}

.casa-calendar-days {
    gap: 3px;
}

.casa-calendar-days button,
.casa-calendar-spacer {
    aspect-ratio: 1;
}

.casa-calendar-days button {
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--casa-text);
    cursor: pointer;
    font-family: inherit;
    font-size: .76rem;
}

.casa-calendar-days button:hover,
.casa-calendar-days button:focus-visible {
    background: var(--casa-primary-soft);
    color: var(--casa-primary);
    outline: none;
}

.casa-calendar-days button.is-selected {
    background: var(--casa-primary);
    color: #fff;
    font-weight: 800;
}

.casa-calendar-days button.is-in-range {
    background: var(--casa-primary-soft);
    color: var(--casa-primary);
}

.casa-calendar-days button.is-range-start,
.casa-calendar-days button.is-range-end {
    background: var(--casa-primary);
    color: #fff;
    font-weight: 800;
}

.casa-multiselect-field {
    min-width: 0;
    position: relative;
}

.casa-multiselect-field > span {
    color: var(--casa-text);
    display: block;
    font-size: .78rem;
    font-weight: 720;
    margin: 0 0 5px;
}

.casa-multiselect summary {
    align-items: center;
    background: var(--casa-surface);
    border: 1px solid var(--casa-border-strong);
    border-radius: 12px;
    color: var(--casa-text);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    list-style: none;
    min-height: 42px;
    padding: 8px 12px;
}

.casa-multiselect summary::-webkit-details-marker {
    display: none;
}

.casa-multiselect[open] summary {
    border-color: var(--casa-primary);
    box-shadow: 0 0 0 3px var(--casa-primary-soft);
}

.casa-multiselect-menu {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 12px;
    box-shadow: var(--casa-shadow);
    display: grid;
    left: 0;
    max-height: 320px;
    min-width: 260px;
    overflow: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 30;
}

.casa-multiselect-actions {
    background: var(--casa-surface);
    border-bottom: 1px solid var(--casa-border);
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -1px -1px 4px;
    padding: 3px 1px 7px;
    position: sticky;
    top: -6px;
    z-index: 1;
}

.casa-multiselect-actions button {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 8px;
    color: var(--casa-text);
    cursor: pointer;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    min-height: 34px;
    padding: 5px 7px;
}

.casa-multiselect-actions button:hover {
    background: var(--casa-primary-soft);
    border-color: var(--casa-primary);
    color: var(--casa-primary);
}

.casa-multiselect-menu label {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    font-size: .82rem;
    gap: 9px;
    padding: 8px;
}

.casa-multiselect-menu label:hover {
    background: var(--casa-primary-soft);
}

.casa-multiselect-menu input {
    accent-color: var(--casa-primary);
    flex: 0 0 auto;
    min-height: auto;
    width: 16px;
}

.casa-stats-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.casa-stats-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.casa-secondary-stats {
    margin-top: -8px;
}

.casa-stat-salary {
    background: var(--casa-primary-soft);
    border-color: color-mix(in srgb, var(--casa-primary) 30%, var(--casa-border));
}

.casa-stat-salary strong {
    color: var(--casa-primary);
    font-size: 1.55rem;
}

.casa-finance-summary {
    margin-bottom: 16px;
}

.casa-income-card,
.casa-real-turnover-card {
    background: var(--casa-success-soft);
    border-color: color-mix(in srgb, var(--casa-success) 18%, var(--casa-border));
}

/* Financial cards keep a distinct semantic colour even on compact laptop screens. */
.casa-potential-turnover-card {
    background: var(--casa-info-soft);
    border-color: color-mix(in srgb, var(--casa-info) 18%, var(--casa-border));
}

.casa-presumed-turnover-card {
    background: var(--casa-primary-soft);
    border-color: color-mix(in srgb, var(--casa-primary) 18%, var(--casa-border));
}

.casa-income-card strong,
.casa-real-turnover-card strong,
.casa-final-income strong {
    color: var(--casa-success);
    font-size: 1.55rem;
}

.casa-potential-turnover-card strong {
    color: var(--casa-info);
    font-size: 1.55rem;
}

.casa-presumed-turnover-card strong {
    color: var(--casa-primary);
    font-size: 1.55rem;
}

.casa-expense-card {
    background: var(--casa-danger-soft);
    border-color: color-mix(in srgb, var(--casa-danger) 18%, var(--casa-border));
}

.casa-expense-card strong,
.casa-final-income.is-negative strong {
    color: var(--casa-danger);
    font-size: 1.55rem;
}

.casa-final-income {
    background: var(--casa-success-soft);
    border-color: color-mix(in srgb, var(--casa-success) 18%, var(--casa-border));
}

.casa-final-income.is-negative {
    background: var(--casa-danger-soft);
    border-color: color-mix(in srgb, var(--casa-danger) 18%, var(--casa-border));
}

.casa-expense-breakdown {
    margin-bottom: 16px;
}

.casa-expense-breakdown-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.casa-expense-breakdown-grid > div {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.casa-expense-breakdown-grid span {
    color: var(--casa-muted);
    font-size: .67rem;
}

.casa-expense-breakdown-grid strong {
    color: var(--casa-text);
    font-size: .82rem;
}

.casa-dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
}

.casa-chart-card {
    min-width: 0;
}

.casa-bar-chart {
    align-items: end;
    display: flex;
    gap: 8px;
    height: 200px;
    overflow-x: auto;
    padding: 20px 2px 0;
}

.casa-bar-item {
    align-items: center;
    display: grid;
    flex: 1 0 27px;
    gap: 5px;
    grid-template-rows: 18px 1fr 18px;
    height: 100%;
    min-width: 27px;
    text-align: center;
}

.casa-bar-item strong,
.casa-bar-item span {
    color: var(--casa-muted);
    font-size: .62rem;
}

.casa-bar-track {
    align-items: end;
    background: var(--casa-surface-soft);
    border-radius: 8px 8px 3px 3px;
    display: flex;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.casa-bar-track i {
    background: color-mix(in srgb, var(--casa-primary) 58%, var(--casa-surface));
    border-radius: inherit;
    display: block;
    height: max(3px, var(--bar-size));
    width: 100%;
}

.casa-bar-item.is-active .casa-bar-track {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa-primary) 35%, transparent);
}

.casa-bar-item.is-active .casa-bar-track i {
    background: var(--casa-primary);
}

.casa-bar-item.is-active strong,
.casa-bar-item.is-active span {
    color: var(--casa-primary);
    font-weight: 850;
}

.casa-month-chart .casa-bar-item {
    min-width: 32px;
}

.casa-day-chart .casa-bar-item {
    flex-basis: 18px;
    min-width: 18px;
}

.casa-chart-legend {
    display: flex;
    gap: 12px;
}

.casa-chart-legend span {
    align-items: center;
    color: var(--casa-muted);
    display: flex;
    font-size: .62rem;
    gap: 5px;
}

.casa-chart-legend span::before {
    background: var(--casa-success);
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

.casa-chart-legend .is-expense::before {
    background: var(--casa-danger);
}

.casa-finance-bar-chart {
    gap: 12px;
}

.casa-finance-bar-item {
    display: grid;
    flex: 1 0 42px;
    gap: 5px;
    grid-template-rows: 20px 1fr 18px;
    height: 100%;
    min-width: 42px;
    text-align: center;
}

.casa-finance-values {
    display: flex;
    justify-content: space-around;
}

.casa-finance-values small,
.casa-finance-bar-item > span {
    color: var(--casa-muted);
    font-size: .58rem;
}

.casa-finance-tracks {
    align-items: end;
    display: flex;
    gap: 4px;
    height: 100%;
    justify-content: center;
}

.casa-finance-tracks i {
    background: var(--casa-success);
    border-radius: 6px 6px 2px 2px;
    display: block;
    height: max(3px, var(--bar-size));
    width: min(17px, 42%);
}

.casa-finance-tracks i.is-expense {
    background: var(--casa-danger);
}

.casa-finance-bar-item.is-active .casa-finance-tracks {
    background: var(--casa-primary-soft);
    border-radius: 8px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa-primary) 30%, transparent);
}

.casa-finance-bar-item.is-active > span {
    color: var(--casa-primary);
    font-weight: 850;
}

/* Grafice orizontale doar pentru dashboard-ul superuser. */
.casa-superuser-dashboard .casa-bar-chart {
    align-items: stretch;
    display: grid;
    gap: 7px;
    height: auto;
    max-height: 430px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 5px 2px 2px;
}

.casa-superuser-dashboard .casa-bar-item {
    align-items: center;
    display: grid;
    flex: none;
    gap: 10px;
    grid-template-areas: "label track value";
    grid-template-columns: 34px minmax(120px, 1fr) 36px;
    grid-template-rows: 24px;
    height: auto;
    min-width: 0;
    text-align: left;
}

.casa-superuser-dashboard .casa-bar-item > span {
    grid-area: label;
    text-align: right;
}

.casa-superuser-dashboard .casa-bar-item > strong {
    grid-area: value;
    text-align: left;
}

.casa-superuser-dashboard .casa-bar-track {
    align-items: stretch;
    grid-area: track;
    height: 12px;
    width: 100%;
}

.casa-superuser-dashboard .casa-bar-track i {
    height: 100%;
    min-width: 3px;
    width: max(3px, var(--bar-size));
}

.casa-superuser-dashboard .casa-finance-bar-item {
    align-items: center;
    display: grid;
    flex: none;
    gap: 10px;
    grid-template-areas: "label tracks values";
    grid-template-columns: 42px minmax(140px, 1fr) 66px;
    grid-template-rows: 30px;
    height: auto;
    min-width: 0;
    text-align: left;
}

.casa-superuser-dashboard .casa-finance-bar-item > span {
    grid-area: label;
    text-align: right;
}

.casa-superuser-dashboard .casa-finance-values {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    grid-area: values;
    justify-content: center;
}

.casa-superuser-dashboard .casa-finance-values small:first-child {
    color: var(--casa-success);
}

.casa-superuser-dashboard .casa-finance-values small:last-child {
    color: var(--casa-danger);
}

.casa-superuser-dashboard .casa-finance-tracks {
    align-items: stretch;
    display: grid;
    gap: 4px;
    grid-area: tracks;
    grid-template-rows: repeat(2, 10px);
    height: auto;
    justify-content: stretch;
}

.casa-superuser-dashboard .casa-finance-tracks i {
    height: 10px;
    min-width: 3px;
    width: max(3px, var(--bar-size));
}

.casa-superuser-dashboard .casa-finance-bar-item.is-active .casa-finance-tracks {
    padding: 3px;
}

.casa-staff-statistics,
.casa-status-summary {
    margin-bottom: 16px;
}

.casa-table-scroll {
    overflow-x: auto;
}

.casa-staff-table {
    border-collapse: collapse;
    color: var(--casa-text);
    min-width: 760px;
    width: 100%;
}

.casa-staff-table th,
.casa-staff-table td {
    border-top: 1px solid var(--casa-border);
    font-size: .75rem;
    padding: 13px 10px;
    text-align: right;
}

.casa-staff-table th {
    color: var(--casa-muted);
    font-size: .66rem;
    text-transform: uppercase;
}

.casa-staff-table th:first-child,
.casa-staff-table td:first-child {
    text-align: left;
}

.casa-staff-table td small {
    color: var(--casa-muted);
    display: block;
    margin-top: 2px;
}

.casa-status-summary-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.casa-status-summary-grid > div {
    align-items: center;
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px;
}

.casa-status-summary-grid span {
    color: var(--casa-muted);
    font-size: .7rem;
}

.casa-status-summary-grid strong {
    color: var(--casa-text);
}

/* MacBook 13" / compact desktop: keep the large-screen dashboard structure.
   We compact spacing instead of collapsing KPI/finance cards too early. */
@media (min-width: 900px) and (max-width: 1500px) {
    .casa-superuser-dashboard {
        --casa-laptop-gap: 8px;
    }

    .casa-superuser-dashboard .casa-page-header {
        gap: 14px;
        margin-bottom: 16px;
    }

    .casa-superuser-dashboard .casa-page-header h1 {
        font-size: clamp(1.55rem, 2.1vw, 2rem);
    }

    .casa-superuser-dashboard .casa-page-header p {
        font-size: .82rem;
    }

    .casa-superuser-dashboard .casa-header-actions {
        gap: 7px;
    }

    .casa-superuser-dashboard .casa-button {
        font-size: .78rem;
        min-height: 40px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .casa-superuser-dashboard .casa-period-filter {
        gap: 8px;
        margin-bottom: 12px;
        padding: 10px;
    }

    .casa-superuser-dashboard .casa-period-filter input {
        min-height: 40px;
    }

    .casa-superuser-dashboard .casa-status-kpi-grid {
        gap: var(--casa-laptop-gap);
        grid-template-columns: repeat(7, minmax(0, 1fr));
        margin-bottom: 12px;
    }

    .casa-superuser-dashboard .casa-status-kpi {
        gap: 5px;
        min-width: 0;
        padding: 11px 10px;
    }

    .casa-superuser-dashboard .casa-status-kpi span {
        font-size: .62rem;
        line-height: 1.2;
    }

    .casa-superuser-dashboard .casa-status-kpi strong {
        font-size: 1.32rem;
    }

    .casa-superuser-dashboard .casa-status-kpi small {
        font-size: .58rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .casa-superuser-dashboard .casa-finance-summary.casa-stats-grid-5 {
        gap: var(--casa-laptop-gap);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-bottom: 12px;
    }

    .casa-superuser-dashboard .casa-finance-summary .casa-stat-card {
        border-radius: 15px;
        min-width: 0;
        padding: 13px 12px;
    }

    .casa-superuser-dashboard .casa-finance-summary .casa-stat-card > span {
        font-size: .66rem;
    }

    .casa-superuser-dashboard .casa-finance-summary .casa-stat-card strong {
        font-size: clamp(1.15rem, 1.7vw, 1.45rem);
        margin-top: 6px;
        white-space: nowrap;
    }

    .casa-superuser-dashboard .casa-finance-summary .casa-stat-card small {
        display: -webkit-box;
        font-size: .58rem;
        line-height: 1.25;
        margin-top: 4px;
        min-height: 2.5em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .casa-superuser-dashboard .casa-expense-breakdown {
        margin-bottom: 12px;
    }

    .casa-superuser-dashboard .casa-expense-breakdown-grid {
        gap: 7px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .casa-superuser-dashboard .casa-expense-breakdown-grid > div {
        min-width: 0;
        padding: 10px;
    }

    .casa-superuser-dashboard .casa-dashboard-grid {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 12px;
    }

    .casa-superuser-dashboard .casa-dashboard-section {
        padding: 16px;
    }

    .casa-superuser-dashboard .casa-dashboard-section-head {
        margin-bottom: 11px;
    }

    .casa-superuser-dashboard .casa-dashboard-section-head h2 {
        font-size: .92rem;
    }

    .casa-superuser-dashboard .casa-dashboard-section-head p {
        font-size: .66rem;
    }
}

@media (max-width: 1100px) {
    .casa-orders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-filter-form {
        grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(135px, .7fr)) auto;
    }

    .casa-stats-grid-4,
    .casa-stats-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-status-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .casa-expense-breakdown-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .casa-status-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-reset-filter {
        grid-column: 1 / -1;
        height: auto;
        justify-content: center;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .casa-superuser-dashboard .casa-finance-summary.casa-stats-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .casa-superuser-dashboard .casa-status-kpi-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .casa-superuser-dashboard .casa-expense-breakdown-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .casa-superuser-dashboard .casa-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    body.casa-order-list .casa-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.casa-order-list .casa-filter-form > * {
        min-width: 0;
    }

    .casa-order-list .casa-filter-button {
        min-height: 44px;
        width: 100%;
    }

    .casa-order-list .casa-calendar {
        left: auto;
        right: 0;
    }

    .casa-order-list .casa-orders-table-wrap {
        display: none;
    }

    .casa-order-list .casa-mobile-orders {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 330px), 1fr)
        );
    }
}

@media (max-width: 767px) {
    .casa-admin-page #content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .casa-page {
        padding-top: 2px;
    }

    .casa-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 17px;
    }

    .casa-page-header h1 {
        font-size: 1.68rem;
    }

    .casa-form-layout {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-layout-full {
        grid-column: auto;
    }

    .casa-list-header .casa-add-button,
    .casa-dashboard-header .casa-add-button {
        width: 100%;
    }

    .casa-header-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-header-actions .casa-add-button {
        width: auto;
    }

    .casa-card {
        border-radius: 16px;
        margin-bottom: 9px;
        padding: 14px 12px;
    }

    .casa-form-layout .casa-card {
        margin-bottom: 9px;
    }

    .casa-section-heading {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .casa-section-heading p {
        line-height: 1.35;
    }

    .casa-fields-2,
    .casa-fields-3,
    .casa-fields-4,
    .casa-order-summary-fields,
    .casa-delivery-fields,
    .casa-product-fields,
    .casa-update-types,
    .casa-orders-grid,
    .casa-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-period-filter {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-period-field-combined {
        grid-column: 1 / -1;
    }

    .casa-calendar-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-calendar-periods {
        border-bottom: 1px solid var(--casa-border);
        border-right: 0;
        display: flex;
        gap: 10px;
        max-height: 142px;
        overflow: auto;
        padding: 0 0 10px;
    }

    .casa-calendar-year {
        flex: 0 0 126px;
    }

    .casa-calendar-main {
        padding: 12px 0 0;
    }

    .casa-period-filter .casa-button {
        grid-column: 1 / -1;
    }

    .casa-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-status-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-status-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-expense-breakdown-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-fields {
        gap: 10px;
    }

    .casa-product-card {
        padding: 11px;
    }

    .casa-product-fields {
        gap: 9px;
    }

    .casa-new-update {
        margin: 0 -2px;
        padding: 11px;
    }

    .casa-update-option {
        min-height: 56px;
    }

    .casa-save-bar {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .casa-save-bar-inner {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 4px;
    }

    .casa-save-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        margin: 0;
        width: 100%;
    }

    .casa-save-buttons .casa-button {
        font-size: .76rem;
        min-height: 46px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .casa-delete-link {
        align-self: center;
        padding: 5px 10px;
    }

    .casa-filter-card {
        border-radius: 16px;
        padding: 12px;
    }

    .casa-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-search-field {
        grid-column: 1 / -1;
    }

    .casa-filter-button {
        grid-column: 1 / -1;
    }

    .casa-reset-filter {
        grid-column: 1 / -1;
    }

    .casa-orders-grid {
        gap: 11px;
    }

    .casa-orders-table-wrap {
        display: none;
    }

    .casa-mobile-orders {
        display: grid;
    }

    .casa-order-card:hover {
        transform: none;
    }

    .casa-order-topline {
        padding: 15px 15px 0;
    }

    .casa-order-main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .casa-order-footer,
    .casa-order-actions {
        padding-left: 15px;
        padding-right: 15px;
    }

    .casa-stat-card {
        display: grid;
        gap: 2px 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px;
    }

    .casa-stat-card strong {
        grid-row: 1 / 3;
        margin: 0;
    }

    .casa-dashboard-section {
        border-radius: 16px;
        padding: 17px 13px;
    }

    .casa-recent-order {
        gap: 9px;
        grid-template-columns: 43px minmax(0, 1fr) auto;
        padding: 12px 3px;
    }

    .casa-recent-order time {
        display: none;
    }
}

/* Delivery deadlines, per-product pricing and dashboard alert modal. */
.casa-product-fields {
    grid-template-columns: minmax(180px, 1.7fr) minmax(90px, .55fr) minmax(110px, .7fr) minmax(115px, .65fr) minmax(190px, 1.1fr);
}

.casa-product-fields.is-order-create {
    grid-template-columns: minmax(180px, 2fr) minmax(90px, .6fr) minmax(110px, .75fr) minmax(115px, .65fr);
}

.casa-delivery-fields {
    grid-template-columns: minmax(145px, .7fr) minmax(170px, .85fr) minmax(170px, .8fr) minmax(240px, 1.4fr);
}

.casa-field input:disabled {
    cursor: not-allowed;
    opacity: .82;
}

.casa-deadline-mark {
    align-items: center;
    background: #fff3cd;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    color: #92400e;
    display: inline-flex;
    flex: 0 0 19px;
    font-size: .66rem;
    font-weight: 900;
    height: 19px;
    justify-content: center;
}

.is-overdue .casa-deadline-mark {
    background: var(--casa-danger-soft);
    border-color: var(--casa-danger);
    color: var(--casa-danger);
}

.casa-order-list .casa-orders-table tbody tr.is-delivery-alert {
    background: #fffaf0;
    box-shadow: inset 4px 0 #f59e0b;
}

.casa-order-list .casa-orders-table tbody tr.is-delivery-alert:hover {
    background: #fff7e6;
}

.casa-order-list .casa-orders-table tbody tr.is-delivery-alert.is-overdue {
    background: color-mix(in srgb, var(--casa-danger) 8%, var(--casa-surface));
    box-shadow: inset 4px 0 var(--casa-danger);
}

.casa-order-card.is-delivery-alert {
    border-color: #f59e0b;
    box-shadow: 0 7px 26px rgba(245, 158, 11, .14);
}

.casa-order-card.is-delivery-alert::before {
    background: #f59e0b;
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

.casa-order-card.is-delivery-alert.is-overdue {
    border-color: var(--casa-danger);
}

.casa-order-card.is-delivery-alert.is-overdue::before {
    background: var(--casa-danger);
}

.casa-deadline-label,
.casa-delivery-date {
    display: block;
    font-size: .64rem;
    margin-top: 3px;
    white-space: normal;
}

.casa-deadline-label {
    color: #b45309;
    font-weight: 800;
}

.is-overdue .casa-deadline-label {
    color: var(--casa-danger);
}

.casa-delivery-date {
    color: var(--casa-muted);
}

body.casa-modal-open {
    overflow: hidden;
}

.casa-deadline-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 1000;
}

.casa-deadline-modal[hidden] {
    display: none;
}

.casa-deadline-backdrop {
    background: rgba(15, 23, 42, .62);
    inset: 0;
    position: absolute;
}

.casa-deadline-dialog {
    background: var(--casa-surface);
    border: 1px solid var(--casa-border);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    max-height: min(720px, calc(100vh - 40px));
    max-width: 720px;
    outline: none;
    overflow: auto;
    padding: 20px;
    position: relative;
    width: 100%;
}

.casa-deadline-dialog-head,
.casa-deadline-dialog-head > div,
.casa-deadline-dialog-actions {
    align-items: center;
    display: flex;
}

.casa-deadline-dialog-head {
    gap: 16px;
    justify-content: space-between;
}

.casa-deadline-dialog-head > div {
    align-items: flex-start;
    gap: 12px;
}

.casa-deadline-dialog-head h2 {
    color: var(--casa-text);
    font-size: 1.2rem;
    margin: 0;
}

.casa-deadline-dialog-head p {
    color: var(--casa-muted);
    font-size: .8rem;
    line-height: 1.4;
    margin: 4px 0 0;
}

.casa-deadline-dialog-icon {
    align-items: center;
    background: #fff3cd;
    border-radius: 12px;
    color: #92400e;
    display: flex;
    flex: 0 0 40px;
    font-size: 1.1rem;
    font-weight: 900;
    height: 40px;
    justify-content: center;
}

.casa-modal-close {
    background: transparent;
    border: 0;
    color: var(--casa-muted);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    padding: 4px;
}

.casa-deadline-orders {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.casa-deadline-order {
    align-items: center;
    background: #fffaf0;
    border: 1px solid #f6d28b;
    border-radius: 13px;
    color: var(--casa-text);
    display: grid;
    gap: 10px;
    grid-template-columns: 55px minmax(0, 1fr) auto 18px;
    padding: 11px 12px;
    text-decoration: none;
}

.casa-deadline-order.is-overdue {
    background: var(--casa-danger-soft);
    border-color: var(--casa-danger);
}

.casa-deadline-order-number,
.casa-deadline-order strong,
.casa-deadline-order small {
    display: block;
}

.casa-deadline-order-number,
.casa-deadline-order strong {
    font-size: .78rem;
    font-weight: 800;
}

.casa-deadline-order small {
    color: var(--casa-muted);
    font-size: .67rem;
    margin-top: 2px;
}

.casa-deadline-dialog-actions {
    gap: 9px;
    justify-content: flex-end;
}

@media (max-width: 1100px) and (min-width: 768px) {
    .casa-product-fields,
    .casa-product-fields.is-order-create,
    .casa-delivery-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .casa-product-fields,
    .casa-product-fields.is-order-create,
    .casa-delivery-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-deadline-modal {
        align-items: flex-end;
        padding: 0;
    }

    .casa-deadline-dialog {
        border-radius: 20px 20px 0 0;
        max-height: 88vh;
        padding: 16px 13px max(16px, env(safe-area-inset-bottom));
    }

    .casa-deadline-order {
        grid-template-columns: 48px minmax(0, 1fr) 18px;
    }

    .casa-deadline-order > span:nth-child(3) {
        grid-column: 2;
    }

    .casa-deadline-order > span:last-child {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .casa-deadline-dialog-actions .casa-button {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .casa-filter-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-filter-form > * {
        grid-column: 1 !important;
    }

    .casa-save-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-save-buttons .casa-button-secondary {
        display: none;
    }
}

/* =========================================================
   Dynamic order products
   ========================================================= */

.casa-products-list {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.casa-products-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.casa-products-toolbar .material-symbols-outlined {
    font-size: 18px;
}

.casa-inline-delete-control {
    display: none;
}

.casa-product-remove {
    color: var(--casa-danger);
}

.casa-product-remove:hover {
    color: var(--casa-danger);
}

.casa-product-remove:disabled,
.casa-product-remove[aria-disabled="true"] {
    cursor: default;
    opacity: .25;
}

.casa-order-item[hidden],
.casa-status-extra[hidden],
#custom-delivery-field[hidden] {
    display: none !important;
}


/* =========================================================
   Checkbox rows
   ========================================================= */

.casa-checkbox-row {
    align-items: center;
    display: flex;
    gap: 9px;
    margin-top: 14px;
}

.casa-checkbox-row input[type="checkbox"] {
    accent-color: var(--casa-primary);
    height: 18px;
    margin: 0;
    width: 18px;
}

.casa-checkbox-row label {
    color: var(--casa-text);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    margin: 0;
}


/* =========================================================
   Search icon fix
   ========================================================= */

.casa-search-field {
    position: relative;
}

.casa-search-field input {
    padding-left: 42px;
}

.casa-search-icon {
    align-items: center;
    color: var(--casa-muted);
    display: flex;
    height: 18px;
    justify-content: center;
    left: 13px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    z-index: 2;
}

.casa-search-icon svg {
    display: block;
    height: 18px;
    width: 18px;
}


/* =========================================================
   New order statuses
   Requested visual priority:
   new = blue, urgent/alert/return = dark red,
   supplier/warehouse/courier = neutral black,
   refused/cancelled = dark pink, delivered = dark green.
   ========================================================= */

.casa-status[data-status="new"],
.casa-status[data-status="reservation"] {
    background: color-mix(in srgb, #2563eb 12%, var(--casa-surface));
    color: #2563eb;
}

.casa-status[data-status="urgent"],
.casa-status[data-status="alert"],
.casa-status[data-status="return_from_client"],
.casa-status[data-status="return_from_courier"],
.casa-status[data-status="returned"] {
    background: color-mix(in srgb, #991b1b 12%, var(--casa-surface));
    color: #991b1b;
}

.casa-status[data-status="supplier_ordered"],
.casa-status[data-status="warehouse"],
.casa-status[data-status="courier"] {
    background: color-mix(in srgb, #20252d 10%, var(--casa-surface));
    color: #20252d;
}

.casa-status[data-status="refused_before_shipping"],
.casa-status[data-status="refused_at_courier"],
.casa-status[data-status="cancelled_by_us"] {
    background: color-mix(in srgb, #be185d 12%, var(--casa-surface));
    color: #be185d;
}

.casa-status[data-status="delivered"],
.casa-status[data-status="refused_before_shipping_resolved"],
.casa-status[data-status="refused_at_courier_resolved"] {
    background: color-mix(in srgb, #166534 12%, var(--casa-surface));
    color: #166534;
}

html.dark .casa-status[data-status="supplier_ordered"],
html.dark .casa-status[data-status="warehouse"],
html.dark .casa-status[data-status="courier"] {
    background: color-mix(in srgb, #d0d5dd 12%, var(--casa-surface));
    color: #d0d5dd;
}

/* =========================================================
   Status extra sections
   ========================================================= */

.casa-status-extra {
    border-color: color-mix(
            in srgb,
            var(--casa-primary) 22%,
            var(--casa-border)
    );
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
    .casa-products-toolbar .casa-button {
        width: 100%;
    }

    .casa-status-extra {
        grid-column: auto;
    }
}

/* =========================================================
   Contacts, product photos and chart focus
   ========================================================= */

.casa-client-contact-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}

.casa-product-photo-field {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: 88px minmax(0, 1fr);
}

.casa-product-photo-preview {
    align-items: center;
    aspect-ratio: 1;
    background: var(--casa-surface);
    border: 1px dashed var(--casa-border);
    border-radius: 14px;
    color: var(--casa-muted);
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 88px;
}

.casa-product-photo-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.casa-product-photo-preview .material-symbols-outlined {
    font-size: 28px;
}

.casa-product-photo-field input[type="file"] {
    max-width: 100%;
}

.casa-product-list-item {
    align-items: center;
    display: flex !important;
    gap: 8px;
}

.casa-product-list-item > span {
    min-width: 0;
}

.casa-product-thumb {
    border-radius: 8px;
    flex: 0 0 38px;
    height: 38px;
    object-fit: cover;
    width: 38px;
}

.casa-bar-item.is-focus .casa-bar-track,
.casa-finance-bar-item.is-focus .casa-finance-tracks {
    outline: 2px solid color-mix(in srgb, var(--casa-primary) 45%, transparent);
    outline-offset: 2px;
}

.casa-expense-breakdown-grid small {
    color: var(--casa-muted);
    display: block;
    font-size: .58rem;
    margin-top: 3px;
}

@media (min-width: 1101px) {
    .casa-order-list .casa-filter-form {
        grid-template-columns: minmax(220px, 2fr) minmax(145px, .8fr) minmax(145px, .8fr) minmax(145px, .8fr) auto auto;
    }
}

@media (max-width: 767px) {
    .casa-client-contact-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-product-photo-field {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .casa-product-photo-preview {
        width: 72px;
    }
}

/* =========================================================
   Order status color system + legend
   ========================================================= */

.casa-order-list {
    --casa-status-new: #2563eb;
    --casa-status-urgent: #ff0000;
    --casa-status-neutral: #20252d;
    --casa-status-refused: #be185d;
    --casa-status-cancelled: #be185d;
    --casa-status-delivered: #166534;
    --casa-status-return: #ff0000;
}

html.dark .casa-order-list {
    --casa-status-new: #2563eb;
    --casa-status-urgent: #ff0000;
    --casa-status-neutral: #20252d;
    --casa-status-refused: #be185d;
    --casa-status-cancelled: #be185d;
    --casa-status-delivered: #166534;
    --casa-status-return: #ff0000;
}

.casa-order-list [data-status="new"],
.casa-order-list [data-status="reservation"] {
    --casa-status-color: var(--casa-status-new);
}

.casa-order-list [data-status="urgent"],
.casa-order-list [data-status="alert"],
.casa-order-list [data-status="wants_exchange"] {
    --casa-status-color: var(--casa-status-urgent);
}

.casa-order-list [data-status="supplier_ordered"],
.casa-order-list [data-status="warehouse"],
.casa-order-list [data-status="courier"] {
    --casa-status-color: var(--casa-status-neutral);
}

.casa-order-list [data-status="refused_before_shipping"],
.casa-order-list [data-status="refused_at_courier"] {
    --casa-status-color: var(--casa-status-refused);
}

.casa-order-list [data-status="cancelled_by_us"] {
    --casa-status-color: var(--casa-status-cancelled);
}

.casa-order-list [data-status="delivered"],
.casa-order-list [data-status="refused_before_shipping_resolved"],
.casa-order-list [data-status="refused_at_courier_resolved"] {
    --casa-status-color: var(--casa-status-delivered);
}

.casa-order-list [data-status="return_from_client"],
.casa-order-list [data-status="return_from_courier"],
.casa-order-list [data-status="returned"] {
    --casa-status-color: var(--casa-status-return);
}

.casa-order-list .casa-status {
    background: color-mix(
            in srgb,
            var(--casa-status-color, var(--casa-primary)) 13%,
            var(--casa-surface)
    );
    border: 1px solid color-mix(
            in srgb,
            var(--casa-status-color, var(--casa-primary)) 30%,
            transparent
    );
    color: var(--casa-status-color, var(--casa-primary));
    gap: 6px;
    max-width: 190px;
    padding: 5px 9px;
}

.casa-order-list .casa-status::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    flex: 0 0 6px;
    height: 6px;
    width: 6px;
}

/* The status is visible even when scanning the table without reading the badge. */
.casa-orders-table tbody tr[data-status] > td:first-child {
    box-shadow: inset 4px 0 0 var(--casa-status-color, var(--casa-border-strong));
    padding-left: 15px;
}

/* Attention stays red, but does not replace the status family color. */
.casa-orders-table tbody tr.is-attention {
    background: color-mix(in srgb, var(--casa-danger) 4%, var(--casa-surface));
    box-shadow: none;
}

.casa-orders-table tbody tr.is-attention:hover {
    background: color-mix(in srgb, var(--casa-danger) 7%, var(--casa-surface));
}

.casa-order-card[data-status] {
    border-left: 4px solid var(--casa-status-color, var(--casa-border-strong));
}

.casa-order-card.is-attention {
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--casa-danger) 7%, var(--casa-surface)),
            var(--casa-surface) 34%
    );
}

.casa-status-legend {
    align-items: center;
    border-top: 1px solid var(--casa-border);
    display: flex;
    gap: 14px;
    margin-top: 13px;
    padding-top: 12px;
}

.casa-status-legend-title {
    color: var(--casa-muted);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 820;
    letter-spacing: .035em;
    line-height: 22px;
    text-transform: uppercase;
}

.casa-status-legend-items {
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 7px 14px;
    min-width: 0;
}

.casa-status-legend-item {
    align-items: center;
    color: var(--casa-muted);
    display: inline-flex;
    font-size: .69rem;
    font-weight: 650;
    gap: 6px;
    white-space: nowrap;
}

.casa-status-legend-item i {
    background: var(--casa-status-color, var(--casa-border-strong));
    border-radius: 999px;
    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--casa-status-color, var(--casa-border-strong)) 13%,
            transparent
    );
    display: block;
    flex: 0 0 8px;
    height: 8px;
    width: 8px;
}

@media (max-width: 767px) {
    .casa-status-legend {
        display: block;
    }

    .casa-status-legend-title {
        display: block;
        margin-bottom: 8px;
    }

    .casa-status-legend-items {
        display: grid;
        gap: 7px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casa-status-legend-item {
        white-space: normal;
    }
}

/* =========================================================
   Product photo picker — 1 to 4 photos per product
   ========================================================= */

.casa-product-photos {
    grid-column: 1 / -1;
    margin-top: 2px;
    min-width: 0;
}

.casa-product-photos-heading {
    align-items: baseline;
    display: flex;
    gap: 7px;
    margin-bottom: 8px;
}

.casa-product-photos-heading > span {
    color: var(--casa-text);
    font-size: .75rem;
    font-weight: 760;
}

.casa-product-photos-heading > small {
    color: var(--casa-muted);
    font-size: .65rem;
    font-weight: 650;
}

.casa-product-photo-grid {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.casa-product-photo-slot {
    flex: 0 0 88px;
    position: relative;
    width: 88px;
}

.casa-product-photo-slot[hidden],
.casa-add-photo-button[hidden] {
    display: none !important;
}

.casa-product-photo-tile,
.casa-add-photo-button {
    align-items: center;
    aspect-ratio: 1;
    background: var(--casa-surface);
    border: 1px dashed var(--casa-border-strong);
    border-radius: 14px;
    box-sizing: border-box;
    color: var(--casa-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 88px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
    width: 88px;
}

.casa-product-photo-tile:hover,
.casa-add-photo-button:hover {
    background: var(--casa-primary-soft);
    border-color: color-mix(in srgb, var(--casa-primary) 55%, var(--casa-border));
    color: var(--casa-primary);
    transform: translateY(-1px);
}

.casa-product-photo-slot.is-active .casa-product-photo-tile {
    border-style: solid;
}

.casa-product-photo-tile input[type="file"] {
    cursor: pointer;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.casa-product-photo-tile .casa-product-photo-preview {
    border: 0;
    border-radius: 13px;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.casa-product-photo-tile .casa-product-photo-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.casa-product-photo-number {
    align-items: center;
    background: color-mix(in srgb, var(--casa-surface) 88%, transparent);
    border-radius: 999px;
    bottom: 5px;
    color: var(--casa-text);
    display: flex;
    font-size: .58rem;
    font-weight: 850;
    height: 19px;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 5px;
    width: 19px;
    z-index: 2;
}

.casa-product-photo-view {
    align-items: center;
    background: color-mix(in srgb, var(--casa-surface) 92%, transparent);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
    color: var(--casa-text);
    cursor: zoom-in;
    display: flex;
    height: 30px;
    justify-content: center;
    left: 5px;
    padding: 0;
    position: absolute;
    top: 5px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    width: 30px;
    z-index: 5;
}

.casa-product-photo-view[hidden] {
    display: none;
}

.casa-product-photo-view:hover,
.casa-product-photo-view:focus-visible {
    background: var(--casa-primary);
    color: #fff;
    outline: none;
    transform: scale(1.06);
}

.casa-product-photo-view .material-symbols-outlined {
    font-size: 19px;
}

.casa-photo-gallery {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1100;
}

.casa-photo-gallery[hidden],
.casa-photo-gallery-nav[hidden] {
    display: none;
}

.casa-photo-gallery-backdrop {
    background: rgba(2, 6, 23, .9);
    inset: 0;
    position: absolute;
}

.casa-photo-gallery-dialog {
    align-items: center;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    height: min(880px, calc(100vh - 48px));
    max-width: 1280px;
    outline: none;
    position: relative;
    width: 100%;
}

.casa-photo-gallery-figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: 0;
    min-height: 0;
    min-width: 0;
}

.casa-photo-gallery-figure img {
    border-radius: 12px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
    display: block;
    max-height: calc(100% - 42px);
    max-width: 100%;
    object-fit: contain;
}

.casa-photo-gallery-figure figcaption {
    color: #fff;
    font-size: .78rem;
    font-weight: 750;
    margin-top: 14px;
}

.casa-photo-gallery-close,
.casa-photo-gallery-nav {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: background .16s ease, transform .16s ease;
}

.casa-photo-gallery-close:hover,
.casa-photo-gallery-nav:hover,
.casa-photo-gallery-close:focus-visible,
.casa-photo-gallery-nav:focus-visible {
    background: rgba(255, 255, 255, .28);
    outline: none;
    transform: scale(1.06);
}

.casa-photo-gallery-close {
    height: 42px;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    z-index: 2;
}

.casa-photo-gallery-nav {
    height: 46px;
    width: 46px;
}

.casa-photo-gallery-nav .material-symbols-outlined {
    font-size: 32px;
}

@media (max-width: 767px) {
    .casa-photo-gallery {
        padding: 12px;
    }

    .casa-photo-gallery-dialog {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        height: calc(100vh - 24px);
    }

    .casa-photo-gallery-close {
        height: 38px;
        width: 38px;
    }

    .casa-photo-gallery-nav {
        height: 38px;
        width: 38px;
    }
}

.casa-add-photo-button {
    font-family: inherit;
    gap: 2px;
}

.casa-add-photo-button .material-symbols-outlined {
    font-size: 25px;
}

.casa-add-photo-button > span:not(.material-symbols-outlined) {
    font-size: .66rem;
    font-weight: 780;
}

.casa-add-photo-button small {
    font-size: .55rem;
    font-weight: 700;
    opacity: .72;
}

.casa-product-photo-slot > .casa-error {
    font-size: .58rem;
    line-height: 1.25;
    margin: 5px 0 0;
}

.casa-product-list-photos {
    display: flex;
    flex: 0 0 auto;
    margin-right: 1px;
}

.casa-product-list-photos .casa-product-thumb + .casa-product-thumb {
    margin-left: -10px;
}

.casa-product-list-photos .casa-product-thumb {
    border: 2px solid var(--casa-surface);
}

@media (max-width: 767px) {
    .casa-product-photo-grid {
        gap: 8px;
    }

    .casa-product-photo-slot,
    .casa-product-photo-tile,
    .casa-add-photo-button {
        height: 72px;
        width: 72px;
    }

    .casa-product-photo-slot {
        flex-basis: 72px;
    }
}

/* =========================================================
   Compact product preview in order list
   Keep order rows readable even when a product has 2–4 photos.
   ========================================================= */

.casa-table-products {
    min-width: 220px;
    width: 25%;
}

.casa-table-products .casa-product-list-item {
    align-items: center;
    display: flex !important;
    gap: 10px;
    min-height: 46px;
}

.casa-table-products > .casa-product-list-item + .casa-product-list-item {
    border-top: 1px dashed var(--casa-border);
    margin-top: 7px;
    padding-top: 7px;
}

.casa-product-list-media {
    border-radius: 10px;
    display: block !important;
    flex: 0 0 44px;
    height: 44px;
    margin: 0 !important;
    overflow: visible;
    position: relative;
    width: 44px;
}

.casa-product-list-media .casa-product-thumb {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 10px;
    display: block;
    height: 44px;
    margin: 0;
    object-fit: cover;
    width: 44px;
}

.casa-product-photo-count {
    align-items: center;
    background: color-mix(in srgb, var(--casa-text) 84%, transparent);
    border: 2px solid var(--casa-surface);
    border-radius: 999px;
    bottom: -5px;
    color: var(--casa-surface) !important;
    display: flex !important;
    font-size: .58rem !important;
    font-weight: 850;
    height: 21px;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
    min-width: 21px;
    padding: 0 5px;
    position: absolute;
    right: -6px;
    white-space: nowrap;
    z-index: 2;
}

.casa-product-list-copy {
    display: block !important;
    min-width: 0;
}

.casa-product-list-copy strong {
    color: var(--casa-text);
    display: block;
    font-size: .73rem;
    font-weight: 800;
    line-height: 1.25;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-product-list-copy > span {
    color: var(--casa-muted) !important;
    display: block !important;
    font-size: .65rem !important;
    line-height: 1.25;
    margin-top: 4px !important;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-product-list-empty {
    color: var(--casa-muted) !important;
    font-size: .68rem !important;
}

/* Old stacked-photo treatment is intentionally disabled in the order list. */
.casa-product-list-photos {
    display: none !important;
}

.casa-order-products .casa-order-product-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.casa-order-products .casa-order-product-row + .casa-order-product-row {
    border-top: 1px dashed var(--casa-border);
    margin-top: 8px;
    padding-top: 8px;
}

.casa-order-products .casa-product-list-copy {
    flex: 1;
}

.casa-order-products .casa-product-list-copy strong,
.casa-order-products .casa-product-list-copy > span {
    max-width: none;
}

@media (max-width: 767px) {
    .casa-product-list-media,
    .casa-product-list-media .casa-product-thumb {
        height: 48px;
        width: 48px;
    }

    .casa-product-list-media {
        flex-basis: 48px;
    }
}

/* =========================================================
   Compact order register
   One stable-height row per order, optimized for fast scanning.
   ========================================================= */

.casa-order-list {
    --casa-status-new: #2563eb;
    --casa-status-urgent: #dc2626;
    --casa-status-supplier: #64748b;
    --casa-status-warehouse: #475569;
    --casa-status-courier: #0284c7;
    --casa-status-refused: #db2777;
    --casa-status-cancelled: #e05252;
    --casa-status-delivered: #059669;
    --casa-status-return: #7c3aed;
}

.casa-order-list [data-status="supplier_ordered"] {
    --casa-status-color: var(--casa-status-supplier);
}

.casa-order-list [data-status="warehouse"] {
    --casa-status-color: var(--casa-status-warehouse);
}

.casa-order-list [data-status="courier"] {
    --casa-status-color: var(--casa-status-courier);
}

.casa-order-list .casa-page-header {
    margin-bottom: 17px;
}

.casa-order-list .casa-filter-card {
    border-radius: 15px;
    margin-bottom: 13px;
    padding: 13px;
}

.casa-order-list .casa-orders-table-wrap {
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .035), 0 5px 18px rgba(24, 24, 27, .035);
}

.casa-order-list .casa-orders-table {
    min-width: 1080px;
    table-layout: fixed;
}

.casa-orders-table .casa-col-order {
    width: 112px;
}

.casa-orders-table .casa-col-client {
    width: 145px;
}

.casa-orders-table .casa-col-product {
    width: 25%;
}

.casa-orders-table .casa-col-status {
    width: 28%;
}

.casa-orders-table .casa-col-delivery {
    width: 88px;
}

.casa-orders-table .casa-col-total {
    width: 122px;
}

.casa-orders-table .casa-col-open {
    width: 48px;
}

.casa-order-list .casa-orders-table th {
    font-size: .61rem;
    padding: 9px 12px;
}

.casa-order-list .casa-orders-table td {
    padding: 9px 12px;
    vertical-align: middle;
}

.casa-order-list .casa-orders-table tbody tr.is-attention,
.casa-order-list .casa-orders-table tbody tr.is-attention:hover {
    box-shadow: none;
}

/* Only rows that require attention get a persistent tint. */
.casa-order-list .casa-orders-table tbody tr.is-attention {
    background: color-mix(in srgb, var(--casa-danger) 6%, var(--casa-surface));
}

/* Refused orders also get a subtle reddish/pink persistent tint. */
.casa-order-list .casa-orders-table tbody tr[data-status="refused_before_shipping"],
.casa-order-list .casa-orders-table tbody tr[data-status="refused_at_courier"] {
    background: color-mix(in srgb, var(--casa-status-refused) 7%, var(--casa-surface));
}

/* Normal rows stay neutral; hover is only an interaction state. */
.casa-order-list .casa-orders-table tbody tr:hover {
    background: var(--casa-surface-soft);
}

.casa-order-list .casa-orders-table tbody tr.is-attention:hover {
    background: color-mix(in srgb, var(--casa-danger) 10%, var(--casa-surface));
}

.casa-order-list .casa-orders-table tbody tr[data-status="refused_before_shipping"]:hover,
.casa-order-list .casa-orders-table tbody tr[data-status="refused_at_courier"]:hover {
    background: color-mix(in srgb, var(--casa-status-refused) 12%, var(--casa-surface));
}

.casa-order-id-line {
    align-items: center;
    display: flex;
    gap: 6px;
}

.casa-attention-mark {
    align-items: center;
    background: var(--casa-danger-soft);
    border-radius: 999px;
    color: var(--casa-danger);
    display: inline-flex;
    flex: 0 0 17px;
    font-size: .62rem;
    font-weight: 900;
    height: 17px;
    justify-content: center;
}

.casa-order-list .casa-table-order time {
    font-size: .64rem;
}

.casa-order-list .casa-table-products {
    min-width: 0;
    width: auto;
}

.casa-order-list .casa-table-products .casa-product-list-item {
    gap: 9px;
    min-height: 38px;
}

.casa-order-list .casa-table-products .casa-product-list-media,
.casa-order-list .casa-table-products .casa-product-list-media .casa-product-thumb {
    border-radius: 8px;
    height: 36px;
    width: 36px;
}

.casa-order-list .casa-table-products .casa-product-list-media {
    flex-basis: 36px;
}

.casa-order-list .casa-product-list-copy {
    overflow: hidden;
}

.casa-order-list .casa-product-list-copy strong {
    max-width: none;
}

.casa-order-list .casa-product-meta {
    align-items: center;
    display: flex !important;
    gap: 5px;
    margin-top: 3px !important;
    max-width: none !important;
}

.casa-order-list .casa-product-meta > span {
    color: var(--casa-muted);
    display: inline !important;
    font-size: .63rem !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-order-list .casa-product-meta > .casa-product-more {
    color: var(--casa-primary);
    flex: 0 0 auto;
    font-weight: 760;
}

.casa-table-status-update {
    min-width: 0;
}

.casa-order-list .casa-table-status-update .casa-status {
    max-width: 100%;
    overflow: hidden;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-update-inline {
    color: var(--casa-muted);
    display: block;
    font-size: .64rem;
    line-height: 1.3;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-update-inline strong {
    color: var(--casa-primary);
    font-weight: 800;
}

.casa-update-inline[data-kind="attention"] strong {
    color: var(--casa-danger);
}

.casa-update-inline[data-kind="resolved"] strong {
    color: var(--casa-success);
}

.casa-order-list .casa-table-money strong {
    display: block;
}

.casa-order-list .casa-table-internal {
    color: var(--casa-muted) !important;
    display: block;
    font-size: .6rem;
    font-weight: 600;
    margin-top: 3px;
    white-space: normal;
}

.casa-order-list .casa-table-open {
    border-radius: 8px;
    height: 28px;
    transition: background-color .15s ease, transform .15s ease;
    width: 28px;
}

.casa-order-list .casa-table-open:hover {
    background: color-mix(in srgb, var(--casa-primary) 18%, var(--casa-surface));
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .casa-order-list .casa-order-products {
        gap: 0;
    }

    .casa-order-list .casa-order-products .casa-product-list-media,
    .casa-order-list .casa-order-products .casa-product-list-media .casa-product-thumb {
        height: 42px;
        width: 42px;
    }

    .casa-order-list .casa-order-products .casa-product-list-media {
        flex-basis: 42px;
    }

    .casa-order-list .casa-latest-update {
        margin-top: 10px;
        padding: 8px 9px;
    }
}

/* =========================================================
   Manager daily reports
   ========================================================= */

.casa-manager-daily-report {
    margin-top: 16px;
}

.casa-manager-report-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 130px 130px minmax(220px, 1fr) minmax(220px, 1fr);
}

.casa-manager-report-metric,
.casa-manager-report-text {
    background: var(--casa-surface-soft);
    border: 1px solid var(--casa-border);
    border-radius: 14px;
    min-width: 0;
    padding: 14px 16px;
}

.casa-manager-report-metric > span,
.casa-manager-report-text > span {
    color: var(--casa-muted);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.casa-manager-report-metric > strong {
    color: var(--casa-primary);
    display: block;
    font-size: 1.7rem;
    line-height: 1;
}

.casa-manager-report-metric > small {
    color: var(--casa-muted);
    display: block;
    font-size: .66rem;
    margin-top: 6px;
}

.casa-manager-report-text > strong {
    color: var(--casa-text);
    display: block;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.casa-manager-report-empty {
    align-items: flex-start;
    background: var(--casa-surface-soft);
    border: 1px dashed var(--casa-border-strong);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.casa-manager-report-empty strong {
    color: var(--casa-text);
    font-size: .86rem;
}

.casa-manager-report-empty span {
    color: var(--casa-muted);
    font-size: .76rem;
}

.casa-manager-report-table td:nth-child(4),
.casa-manager-report-table td:nth-child(5) {
    max-width: 320px;
    min-width: 180px;
    white-space: normal;
}

.casa-manager-report-table tr.is-missing-report td {
    background: color-mix(in srgb, var(--casa-danger) 4%, transparent);
}

.casa-report-missing {
    color: var(--casa-danger);
    font-size: .72rem;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .casa-manager-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .casa-manager-report-grid {
        grid-template-columns: 1fr 1fr;
    }

    .casa-manager-report-text {
        grid-column: 1 / -1;
    }

    .casa-manager-report-metric,
    .casa-manager-report-text {
        padding: 12px;
    }
}

/* Order data verification badge */
.casa-verification {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: .72;
}

.casa-verification.is-verified {
    color: #166534;
    border-color: color-mix(in srgb, #166534 28%, transparent);
    background: color-mix(in srgb, #16a34a 10%, transparent);
    opacity: 1;
}

html.dark .casa-verification.is-verified {
    color: #86efac;
}

/* =========================================================
   Order verification column + async photo save progress
   ========================================================= */
.casa-orders-table .casa-col-verification {
    width: 104px;
}

.casa-order-list .casa-table-verification {
    white-space: nowrap;
}

.casa-order-list .casa-table-verification .casa-verification {
    min-height: 24px;
    padding: 3px 8px;
    font-size: .66rem;
}

.casa-async-save-progress {
    flex: 1 1 360px;
    margin-right: 18px;
    max-width: 520px;
    min-width: 240px;
}

.casa-async-save-progress-copy {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.casa-async-save-progress-copy span,
.casa-async-save-progress-copy strong {
    color: var(--casa-text);
    font-size: .72rem;
    font-weight: 800;
}

.casa-async-save-progress-copy strong {
    color: var(--casa-primary);
    flex: 0 0 auto;
}

.casa-async-save-progress-track {
    background: var(--casa-border);
    border-radius: 999px;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
}

.casa-async-save-progress-track > span {
    background: var(--casa-primary);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .15s ease;
    width: 0;
}

.casa-async-save-progress > small {
    color: var(--casa-muted);
    display: block;
    font-size: .63rem;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casa-async-save-progress.is-complete .casa-async-save-progress-copy strong,
.casa-async-save-progress.is-complete .casa-async-save-progress-copy span {
    color: var(--casa-success);
}

.casa-async-save-progress.is-complete .casa-async-save-progress-track > span {
    background: var(--casa-success);
}

.casa-async-save-progress.is-error .casa-async-save-progress-copy span,
.casa-async-save-progress.is-error .casa-async-save-progress-copy strong,
.casa-async-save-progress.is-error > small {
    color: var(--casa-danger);
}

.casa-async-save-progress.is-error .casa-async-save-progress-track > span {
    background: var(--casa-danger);
}

@media (max-width: 767px) {
    .casa-async-save-progress {
        margin: 0 0 8px;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

/* =========================================================
   Orders responsive hardening
   ========================================================= */

.casa-order-edit,
.casa-order-list {
    margin: 0;
    overflow-x: clip;
}

.casa-order-edit .casa-help,
.casa-order-edit .casa-error,
.casa-order-edit .casa-form-alert,
.casa-order-edit .casa-field,
.casa-order-list .casa-order-card,
.casa-order-list .casa-latest-update {
    overflow-wrap: anywhere;
}

.casa-order-edit input,
.casa-order-edit select,
.casa-order-edit textarea,
.casa-order-edit button,
.casa-order-list input,
.casa-order-list select,
.casa-order-list button,
.casa-order-list a {
    touch-action: manipulation;
}

@media (min-width: 768px) and (max-width: 1400px) {
    .casa-order-list .casa-filter-form {
        grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, .8fr));
    }

    .casa-order-list .casa-filter-button,
    .casa-order-list .casa-reset-filter {
        justify-content: center;
    }

    .casa-order-list .casa-orders-table {
        min-width: 940px;
    }

    .casa-orders-table .casa-col-order {
        width: 88px;
    }

    .casa-orders-table .casa-col-verification {
        width: 86px;
    }

    .casa-orders-table .casa-col-client {
        width: 130px;
    }

    .casa-orders-table .casa-col-product {
        width: 20%;
    }

    .casa-orders-table .casa-col-status {
        width: 24%;
    }

    .casa-orders-table .casa-col-delivery {
        width: 80px;
    }

    .casa-orders-table .casa-col-total {
        width: 100px;
    }

    .casa-orders-table .casa-col-open {
        width: 40px;
    }
}

@media (max-width: 767px) {
    .casa-admin-page #content {
        max-width: 100%;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .casa-order-edit,
    .casa-order-list,
    .casa-order-edit #content-main,
    .casa-order-list #content-main,
    .casa-order-edit .casa-page,
    .casa-order-list .casa-page,
    .casa-order-edit form,
    .casa-order-edit .casa-form-layout,
    .casa-order-edit .casa-products-list,
    .casa-order-edit .casa-product-card {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .casa-order-edit {
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .casa-order-edit .casa-field input:not([type="radio"]):not([type="checkbox"]),
    .casa-order-edit .casa-field select,
    .casa-order-edit .casa-field textarea,
    .casa-order-list .casa-filter-form input,
    .casa-order-list .casa-filter-form select {
        font-size: 16px;
        min-height: 44px;
    }

    .casa-order-edit .casa-field input,
    .casa-order-edit .casa-field select,
    .casa-order-edit .casa-field textarea {
        scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .casa-order-edit .casa-product-fields,
    .casa-order-edit .casa-product-fields.is-order-create,
    .casa-order-edit .casa-delivery-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .casa-order-edit .casa-product-photo-grid {
        max-width: 100%;
    }

    .casa-order-edit .casa-save-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .casa-order-edit .casa-save-buttons .casa-button,
    .casa-order-list .casa-button,
    .casa-order-list .casa-phone-action,
    .casa-order-list .casa-open-action {
        min-height: 44px;
    }

    .casa-order-list .casa-mobile-orders,
    .casa-order-list .casa-order-card {
        min-width: 0;
        width: 100%;
    }

    .casa-photo-gallery-dialog {
        height: calc(100dvh - 24px);
    }
}

@supports not (overflow: clip) {
    .casa-order-edit,
    .casa-order-list {
        overflow-x: hidden;
    }
}