.admin-page .page-title {
    margin-bottom: 18px;
}

.admin-page .page-title h1 {
    font-size: clamp(25px, 3vw, 34px);
}

.admin-page .admin-filter {
    width: fit-content;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    padding: 8px;
}

.admin-page .admin-filter label {
    padding-inline: 7px 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.order-admin-list {
    gap: 18px;
}

.order-admin-list article {
    position: relative;
    overflow: hidden;
    border: 1px solid #263b56;
    border-radius: 14px;
    background:
        radial-gradient(circle at 0 0, rgb(52 136 255 / 8%), transparent 28%),
        var(--paper);
    padding: 0;
    box-shadow: 0 14px 35px rgb(0 0 0 / 12%);
}

.order-admin-list article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    content: "";
}

.order-admin-list article > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding: 20px 22px 17px;
}

.order-identity {
    display: grid;
    gap: 2px;
}

.order-label {
    color: #66a7ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
}

.order-identity strong {
    font-size: 17px;
}

.order-identity small {
    color: var(--muted);
    font-size: 10px;
}

.order-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.order-card-actions .status,
.receipt-link {
    border: 1px solid #2b5685;
    border-radius: 999px;
    background: #102c4d;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 900;
}

.receipt-link {
    border-color: #246b58;
    background: #10362f;
    color: #78e9c5;
}

.order-total {
    min-width: 112px;
    border-inline-start: 1px solid var(--line);
    padding-inline-start: 15px;
    text-align: left;
}

.order-total small,
.order-total b {
    display: block;
}

.order-total small {
    color: var(--muted);
    font-size: 9px;
}

.order-total b {
    color: #fff;
    font-size: 16px;
}

.order-customer-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 0;
    margin: 18px 22px 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgb(5 14 25 / 28%);
}

.section-heading,
.decision-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.section-heading > span,
.decision-heading > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid #31577e;
    border-radius: 8px;
    background: #102a47;
    color: #7fb7ff;
    font-size: 10px;
    font-weight: 900;
}

.section-heading h2,
.section-heading p,
.decision-heading strong,
.decision-heading small {
    display: block;
    margin: 0;
}

.section-heading h2,
.decision-heading strong {
    font-size: 13px;
}

.section-heading p,
.decision-heading small {
    color: var(--muted);
    font-size: 9px;
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 1px;
    background: var(--line);
}

.order-info-grid > span {
    min-height: 70px;
    background: var(--paper);
    padding: 12px 14px;
}

.order-info-grid small,
.order-info-grid b {
    display: block;
}

.order-info-grid small {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 9px;
}

.order-info-grid b {
    overflow-wrap: anywhere;
    font-size: 11px;
}

.order-info-grid .order-address {
    grid-column: span 2;
}

.order-items-review {
    border-inline-start: 1px solid var(--line);
    padding: 0 16px 10px;
}

.order-items-review .section-heading {
    margin-inline: -16px;
}

.order-items-review > div:not(.section-heading) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    border-bottom: 1px solid var(--line);
    padding: 12px 2px;
    font-size: 10px;
}

.order-items-review > div:not(.section-heading) > span:first-child {
    grid-row: span 2;
}

.order-items-review > div:not(.section-heading) strong {
    color: #8dbdff;
    text-align: left;
}

.order-items-review small {
    display: block;
    color: var(--muted);
}

.order-decision-panel {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(320px, auto);
    align-items: end;
    gap: 14px;
    margin: 16px 22px 0;
    border: 1px solid #2b6555;
    border-radius: 12px;
    background: linear-gradient(135deg, #0e3029, #102822);
    padding: 16px;
}

.decision-heading {
    grid-column: auto;
    align-self: center;
    border: 0;
    padding: 0;
}

.decision-heading > span {
    border-color: #2a735f;
    background: #14483d;
    color: #8effdc;
}

.order-decision-panel form {
    margin: 0;
}

.order-decision-panel button {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    padding: 10px 17px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}

.order-decision-panel button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.order-decision-panel button:disabled {
    cursor: wait;
    filter: saturate(.45);
    transform: none;
}

.order-approve {
    background: #26d6a2;
    color: #052d23;
}

.order-reject {
    background: #e45b54;
    color: #fff;
}

.order-reject-form {
    display: flex;
    align-items: end;
    gap: 8px;
}

.order-reject-form label {
    color: #b9d4cb;
    font-size: 9px;
    font-weight: 800;
}

.order-reject-form select {
    display: block;
    min-width: 190px;
    margin-top: 4px;
    border: 1px solid #467267;
    border-radius: 8px;
    background: #081f1b;
    color: #fff;
    padding: 9px;
}

.decision-feedback {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 8px;
    background: rgb(255 255 255 / 7%);
    padding: 9px 11px;
    color: #dce9e5;
    font-size: 10px;
}

.decision-feedback.success {
    background: #15483c;
    color: #91f0d2;
}

.decision-feedback.error {
    background: #4a2527;
    color: #ffb8b3;
}

.decision-feedback a,
.whatsapp-fallback a {
    color: inherit;
    font-weight: 900;
    text-decoration: underline;
}

.order-details-editor {
    margin: 16px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgb(5 14 25 / 22%);
}

.order-details-editor summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.order-details-editor summary small {
    color: #69d9b6;
    font-size: 9px;
}

.order-details-editor > form {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    border-top: 1px solid var(--line);
    margin: 0;
    padding: 14px;
}

.order-details-editor .wide-field {
    grid-column: span 2;
}

html[data-theme="light"] .order-admin-list article {
    border-color: #d6e2dc;
    background: #fff;
    box-shadow: 0 14px 35px rgb(32 67 53 / 8%);
}

html[data-theme="light"] .order-customer-details,
html[data-theme="light"] .order-details-editor {
    background: #f6f9f7;
}

html[data-theme="light"] .order-info-grid > span {
    background: #fff;
}

html[data-theme="light"] .order-total b {
    color: #17201d;
}

html[data-theme="light"] .order-decision-panel {
    border-color: #a9dacb;
    background: linear-gradient(135deg, #effaf6, #e7f6f0);
}

html[data-theme="light"] .decision-heading small,
html[data-theme="light"] .order-reject-form label {
    color: #557168;
}

html[data-theme="light"] .order-reject-form select {
    border-color: #b9d0c8;
    background: #fff;
    color: #17201d;
}

@media (max-width: 980px) {
    .order-customer-details {
        grid-template-columns: 1fr;
    }

    .order-items-review {
        border-inline-start: 0;
        border-top: 1px solid var(--line);
    }

    .order-decision-panel {
        grid-template-columns: 1fr 1fr;
    }

    .decision-heading {
        grid-column: 1 / -1;
    }

    .order-details-editor > form {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .admin-page .admin-filter {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .admin-page .admin-filter label {
        grid-column: 1 / -1;
    }

    .order-admin-list article > header {
        align-items: flex-start;
        padding: 18px 15px 14px;
    }

    .order-card-actions {
        justify-content: flex-start;
    }

    .order-total {
        width: 100%;
        border-inline-start: 0;
        padding-inline-start: 0;
        text-align: right;
    }

    .order-customer-details,
    .order-decision-panel,
    .order-details-editor {
        margin-inline: 12px;
    }

    .order-info-grid {
        grid-template-columns: 1fr;
    }

    .order-info-grid .order-address {
        grid-column: auto;
    }

    .order-decision-panel {
        grid-template-columns: 1fr;
    }

    .decision-heading {
        grid-column: auto;
    }

    .order-reject-form {
        display: grid;
    }

    .order-decision-panel button,
    .order-reject-form select {
        width: 100%;
    }

    .order-details-editor > form {
        grid-template-columns: 1fr;
    }

    .order-details-editor .wide-field {
        grid-column: auto;
    }
}