@layer components {
    .orders-dashboard {
        @apply mt-2;
    }

    .orders-toolbar {
        @apply grid gap-3;
    }

    @media (min-width: 992px) {
        .orders-toolbar {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }
    }

    .orders-search {
        @apply relative;
    }

    .orders-search .fa-magnifying-glass {
        @apply pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400;
    }

    .orders-search input {
        @apply h-14 rounded-[0.9rem] border-primary pl-10 text-base;
    }

    .orders-select {
        @apply h-14 min-w-30 rounded-[1rem] border border-slate-300 px-4 font-semibold text-slate-900 shadow-none;
    }

    .orders-table-shell {
        @apply mt-5 overflow-hidden rounded-[1.1rem] border border-slate-200 bg-white shadow-md;
    }

    #ordersTable_wrapper {
        @apply w-full;
    }

    #ordersTable {
        margin: 0;
    }

    #ordersTable thead th {
        @apply border-b border-slate-200 bg-slate-50 px-3 py-3 text-sm font-semibold text-slate-600;
    }

    #ordersTable tbody td {
        @apply border-t-0 border-b border-slate-100 px-3 py-3 align-middle text-sm text-slate-700;
    }

    #ordersTable tbody tr:last-child td {
        @apply border-b-0;
    }

    #ordersTable_wrapper .dataTables_paginate {
        float: none;
        @apply flex items-center justify-end gap-[0.55rem];
    }

    #ordersTable_wrapper .dataTables_paginate .ellipsis {
        @apply text-slate-500;
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button {
        min-width: 2.35rem;
        height: 2.35rem;
        margin: 0;
        padding: 0.35rem 0.7rem;
        display: inline-flex;
        @apply items-center justify-center rounded-[0.8rem] border border-slate-300 bg-white font-semibold text-slate-600 shadow-none;
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button:hover,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.current,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.current:hover {
        @apply border-primary bg-primary text-white;
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button.previous,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 0;
        color: transparent;
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.next::before {
        font-family: "Font Awesome 6 Free";
        font-size: 0.95rem;
        font-weight: 900;
        color: #334155;
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: "\f053";
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button.next::before {
        content: "\f054";
    }

    #ordersTable_wrapper .dataTables_paginate .paginate_button.previous:hover::before,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.next:hover::before,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.previous.current::before,
    #ordersTable_wrapper .dataTables_paginate .paginate_button.next.current::before {
        color: #fff;
    }

    .orders-table-footer {
        @apply flex flex-col gap-[0.85rem] px-6 pt-[1.35rem] pb-4;
    }

    @media (min-width: 768px) {
        .orders-table-footer {
            @apply flex-row items-center justify-between;
        }
    }

    .orders-table-footer__summary {
        @apply text-[0.95rem] font-medium text-slate-600;
    }

    .orders-table-footer__pagination,
    #ordersTable_wrapper .dataTables_paginate > span {
        @apply flex items-center gap-[0.55rem];
    }

    .orders-badge {
        @apply inline-flex items-center gap-[0.35rem] rounded-full px-3 py-[0.35rem] text-[0.8rem] font-bold leading-none;
    }

    .orders-badge--delivered {
        @apply bg-green-100 text-green-600;
    }

    .orders-badge--shipped {
        @apply bg-blue-100 text-blue-600;
    }

    .orders-badge--processing {
        @apply bg-amber-100 text-amber-600;
    }

    .orders-badge--cancelled {
        @apply bg-red-100 text-red-600;
    }

    .orders-view {
        @apply inline-flex min-w-[4.75rem] items-center justify-center gap-[0.45rem] rounded-[0.8rem] bg-primary px-[0.9rem] py-[0.55rem] text-[0.9rem] font-bold text-white;
    }

    .orders-view:hover {
        @apply bg-primary-strong text-white;
    }

    .orders-date {
        line-height: 1.25;
    }

    .orders-date small {
        @apply mt-[0.35rem] block text-[0.85rem] text-slate-500;
    }

    .order-details-page {
        @apply mt-2;
    }

    .order-details-page__topbar {
        @apply mb-6;
    }

    .order-details-page__back {
        @apply inline-flex items-center gap-3 text-base font-medium text-primary transition-colors duration-200 hover:text-primary-strong;
    }

    .order-details-page__header {
        @apply flex flex-col gap-4 md:flex-row md:items-start md:justify-between;
    }

    .order-details-page__title {
        @apply text-4xl font-extrabold text-slate-900;
        line-height: 1.1;
    }

    .order-details-page__number {
        @apply mt-2 text-slate-500;
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .order-details-page__status {
        @apply inline-flex items-center gap-2 self-start rounded-full bg-emerald-100 px-4 py-2 text-sm font-semibold text-emerald-700;
    }

    .order-details-stats {
        @apply mt-8 grid gap-5 xl:grid-cols-3;
    }

    .order-details-stat {
        @apply flex items-center gap-4 rounded-2xl border border-slate-200 bg-white px-6 py-6 shadow-sm;
    }

    .order-details-stat__icon {
        @apply inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border-2 border-primary text-2xl text-primary;
    }

    .order-details-stat__label {
        @apply text-sm font-semibold uppercase text-slate-500;
        letter-spacing: 0.04em;
    }

    .order-details-stat__value {
        @apply mt-2 font-bold leading-none text-slate-900;
        font-size: 2.25rem;
    }

    .order-details-grid {
        @apply mt-8 grid gap-6 xl:grid-cols-2;
    }

    .order-details-card {
        @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm;
    }

    .order-details-card__title {
        @apply flex items-center gap-3 font-bold text-slate-900;
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .order-details-card__title i {
        @apply text-xl text-primary;
    }

    .order-details-items {
        @apply mt-6;
    }

    .order-details-item {
        @apply flex items-start justify-between gap-4 border-b border-slate-200 pb-5;
    }

    .order-details-item__name {
        @apply font-bold text-slate-900;
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    .order-details-item__meta {
        @apply mt-1 text-slate-600;
        font-size: 0.95rem;
        line-height: 1.6rem;
    }

    .order-details-item__points {
        @apply text-right;
    }

    .order-details-item__points-value {
        @apply font-bold text-slate-900;
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    .order-details-item__points-meta {
        @apply mt-1 text-slate-600;
        font-size: 0.95rem;
        line-height: 1.6rem;
    }

    .order-details-total {
        @apply mt-6 flex items-center justify-between gap-4 font-bold text-slate-900;
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    .order-details-info {
        @apply mt-6 space-y-6;
    }

    .order-details-info__row dt {
        @apply font-medium text-slate-500;
        font-size: 0.95rem;
        line-height: 1.6rem;
    }

    .order-details-info__row dd {
        @apply mt-2 font-semibold text-slate-900;
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    .order-details-address {
        @apply mt-6 not-italic text-slate-900;
        font-size: 0.95rem;
        line-height: 1.6rem;
    }

    .order-details-address p + p {
        margin-top: 0.15rem;
    }

    .order-details-actions {
        @apply mt-8 flex flex-wrap gap-4;
    }

    .order-details-actions__primary {
        @apply inline-flex items-center justify-center rounded-xl border-0 bg-primary px-6 py-3.5 text-base font-semibold text-white transition-colors duration-200 hover:bg-primary-strong;
    }

    .order-details-actions__secondary {
        @apply inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-6 py-3.5 text-base font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-400 hover:text-slate-900;
    }

    .order-details-card__empty {
        @apply text-slate-600;
        font-size: 0.95rem;
        line-height: 1.6rem;
    }
}
