/*
 * ASE Order Hub
 * Premium UI layer
 */

:root {
    --ase-primary: #640100;
    --ase-primary-dark: #470000;
    --ase-primary-soft: #f8eeee;
    --ase-accent: #9b1c1c;

    --ase-sidebar: #17181b;
    --ase-sidebar-light: #24262b;

    --ase-page-bg: #f5f4f2;

    --ase-surface: #ffffff;
    --ase-surface-soft: #faf9f7;

    --ase-border: #e7e2de;
    --ase-border-strong: #d9d2cc;

    --ase-text: #201f1e;
    --ase-muted: #77716c;

    --ase-success: #177245;
    --ase-warning: #a45c08;
    --ase-danger: #b42318;
    --ase-info: #315e8c;

    --ase-sidebar-width: 278px;

    --hub-radius-sm: 10px;
    --hub-radius: 15px;
    --hub-radius-lg: 20px;

    --hub-shadow-sm:
        0 2px 8px rgba(35, 28, 24, .04);

    --hub-shadow:
        0 10px 30px rgba(35, 28, 24, .07);

    --hub-shadow-lg:
        0 28px 70px rgba(31, 20, 17, .13);
}

html {
    background: var(--ase-page-bg);
}

body {
    background:
        radial-gradient(circle at 88% 0%,
            rgba(100, 1, 0, .045),
            transparent 27rem),
        var(--ase-page-bg);

    color: var(--ase-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(100, 1, 0, .16);
}

a {
    color: var(--ase-primary);
}

a:hover {
    color: var(--ase-primary-dark);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.app-sidebar {
    background:
        radial-gradient(circle at 15% 7%,
            rgba(155, 28, 28, .20),
            transparent 17rem),
        linear-gradient(180deg,
            #191a1e 0%,
            #121316 100%);

    border-right:
        1px solid rgba(255, 255, 255, .05);

    box-shadow:
        18px 0 50px rgba(17, 16, 15, .08);
}

.sidebar-brand {
    min-height: 84px;

    padding:
        18px 20px;

    border-bottom-color:
        rgba(255, 255, 255, .075);
}

.sidebar-brand-icon {
    width: 45px;
    height: 45px;

    margin-right: 13px;

    border-radius: 13px;

    background:
        linear-gradient(145deg,
            #7c0806,
            var(--ase-primary));

    box-shadow:
        0 12px 28px rgba(100, 1, 0, .38),
        inset 0 1px rgba(255, 255, 255, .13);
}

.sidebar-brand-title {
    font-size: 16px;
    letter-spacing: -.015em;
}

.sidebar-brand-subtitle {
    color: #a7a2a0;
}

.sidebar-content {
    padding:
        21px 13px 18px;
}

.sidebar-section-label {
    margin:
        0 11px 10px;

    color: #777a82;

    font-size: 9px;
    letter-spacing: .15em;
}

.sidebar-nav {
    gap: 6px;
}

.sidebar-nav-link {
    min-height: 48px;

    padding:
        11px 13px;

    border:
        1px solid transparent;

    border-radius: 12px;

    color: #b9b9bc;

    font-weight: 650;
}

.sidebar-nav-link:hover {
    background:
        rgba(255, 255, 255, .055);

    border-color:
        rgba(255, 255, 255, .055);

    transform:
        translateX(2px);
}

.sidebar-nav-link.active {
    background:
        linear-gradient(135deg,
            rgba(123, 8, 6, .98),
            rgba(88, 0, 0, .98));

    border-color:
        rgba(255, 255, 255, .09);

    box-shadow:
        0 13px 28px rgba(68, 0, 0, .28),
        inset 0 1px rgba(255, 255, 255, .08);
}

.sidebar-nav-icon {
    opacity: .95;
}

.sidebar-admin {
    padding: 12px;

    border-color:
        rgba(255, 255, 255, .075);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .035);
}

.sidebar-admin-avatar {
    background:
        rgba(255, 255, 255, .09);
}

.sidebar-admin-role {
    color: #8f9298;
}

.sidebar-logout-button {
    border-color:
        rgba(255, 255, 255, .08) !important;

    border-radius:
        11px !important;

    background:
        transparent !important;

    color:
        #b9b9bc !important;

    box-shadow:
        none !important;
}

.sidebar-logout-button:hover {
    border-color:
        rgba(255, 255, 255, .15) !important;

    background:
        rgba(255, 255, 255, .065) !important;

    color:
        #fff !important;

    transform:
        none !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.app-main {
    background: transparent;
}

.desktop-topbar {
    position: sticky;

    top: 0;

    z-index: 1020;

    min-height: 76px;

    padding:
        13px 32px;

    border-bottom-color:
        rgba(218, 211, 205, .78);

    background:
        rgba(250, 249, 247, .87);

    box-shadow:
        0 1px rgba(255, 255, 255, .75);

    backdrop-filter:
        blur(18px) saturate(130%);
}

.desktop-topbar-title {
    color: #2a2725;
    font-size: 14px;
}

.desktop-topbar-subtitle {
    color: #89827d;
}

.desktop-topbar-date {
    padding:
        9px 13px;

    border-color:
        var(--ase-border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .82);

    color:
        #655f5a;

    box-shadow:
        var(--hub-shadow-sm);
}

.app-content {
    max-width: 1540px;

    padding:
        31px 34px 54px;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #211f1e;
}

h1,
.dashboard-title,
.orders-page-title,
.order-detail-title {
    letter-spacing:
        -.035em !important;
}

.page-header {
    margin-bottom: 24px;
}

.dashboard-title,
.orders-page-title,
.order-detail-title {
    color:
        #211f1e !important;

    font-size:
        clamp(25px,
            2vw,
            31px) !important;

    font-weight:
        800 !important;
}

.dashboard-subtitle,
.orders-page-subtitle,
.order-detail-subtitle {
    color:
        #827b76 !important;
}

.muted,
.text-muted {
    color:
        var(--ase-muted) !important;
}


/* =========================================================
   CARD SURFACES
   ========================================================= */

.card,
.dashboard-panel,
.orders-filter-card,
.orders-table-card,
.order-detail-card {
    border:
        1px solid var(--ase-border) !important;

    background:
        rgba(255, 255, 255, .96) !important;

    box-shadow:
        var(--hub-shadow-sm) !important;
}

.card {
    border-radius:
        var(--hub-radius) !important;
}

.dashboard-panel,
.orders-filter-card,
.orders-table-card,
.order-detail-card {
    border-radius:
        var(--hub-radius-lg) !important;

    overflow:
        hidden;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-header {
    margin-bottom:
        25px !important;
}

.dashboard-date-badge {
    min-height:
        40px !important;

    border-color:
        var(--ase-border) !important;

    border-radius:
        999px !important;

    background:
        #fff !important;

    color:
        #6e6762 !important;

    box-shadow:
        var(--hub-shadow-sm);
}

.stat-card {
    position: relative;

    overflow: hidden;

    min-height:
        156px !important;

    border-color:
        var(--ase-border) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(145deg,
            #fff 0%,
            #fff 72%,
            #faf7f5 100%) !important;

    box-shadow:
        var(--hub-shadow-sm) !important;
}

.stat-card::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -46px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        rgba(100, 1, 0, .035);
}

.stat-card:hover {
    transform:
        translateY(-4px) !important;

    border-color:
        #d8ceca !important;

    box-shadow:
        var(--hub-shadow) !important;
}

.stat-card-body {
    padding:
        22px !important;
}

.stat-card-label {
    color:
        #77706b !important;

    font-size:
        11px !important;

    letter-spacing:
        .01em;
}

.stat-card-value {
    color:
        #211f1e !important;

    font-size:
        34px !important;
}

.stat-card-description {
    color:
        #9b948e !important;
}

.stat-card-icon {
    width:
        47px !important;

    height:
        47px !important;

    border-radius:
        14px !important;
}

.stat-card-icon.primary {
    background:
        #f7ebeb !important;

    color:
        var(--ase-primary) !important;
}

.stat-card-icon.success {
    background:
        #e8f4ed !important;

    color:
        #177245 !important;
}

.stat-card-icon.warning {
    background:
        #fff3df !important;

    color:
        #a45c08 !important;
}

.stat-card-icon.purple {
    background:
        #f1edf7 !important;

    color:
        #6f4a80 !important;
}

.dashboard-panel-header,
.orders-table-header,
.order-detail-card-header {
    border-bottom-color:
        #eee9e5 !important;

    background:
        linear-gradient(180deg,
            #fff,
            #fdfcfb) !important;
}

.dashboard-panel-title,
.orders-table-title,
.order-detail-card-title {
    color:
        #292624 !important;
}

.recent-orders-table thead th,
.orders-table thead th,
.order-items-table thead th {
    border-color:
        #ebe5e1 !important;

    background:
        #faf8f6 !important;

    color:
        #756e69 !important;
}

.recent-orders-table tbody td,
.orders-table tbody td,
.order-items-table tbody td {
    border-color:
        #f0ece9 !important;
}

.recent-orders-table tbody tr:hover,
.orders-table tbody tr:hover {
    background:
        #fcf9f8 !important;
}

.order-number-link {
    color:
        var(--ase-primary) !important;
}

.order-number-link:hover {
    color:
        var(--ase-primary-dark) !important;
}

.payment-progress {
    background:
        #eee8e4 !important;
}

.payment-progress-bar {
    background:
        linear-gradient(90deg,
            var(--ase-primary),
            #9f2925) !important;
}

.today-summary {
    border-color:
        #ead6d5 !important;

    background:
        #fbf2f2 !important;
}

.today-summary-icon {
    background:
        var(--ase-primary) !important;
}

.today-summary-value {
    color:
        var(--ase-primary-dark) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

label,
.form-label,
.orders-filter-label {
    color:
        #514c48 !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    min-height: 43px;

    border:
        1px solid #d9d2cc !important;

    border-radius:
        11px !important;

    background-color:
        #fff !important;

    color:
        #2b2927 !important;

    box-shadow:
        inset 0 1px 1px rgba(26, 20, 17, .015) !important;
}

input::placeholder,
textarea::placeholder {
    color:
        #aaa39d !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color:
        rgba(100, 1, 0, .52) !important;

    box-shadow:
        0 0 0 4px rgba(100, 1, 0, .085) !important;
}

.orders-filter-card {
    padding:
        19px 20px !important;
}

.orders-input-group .input-group-text,
.orders-input-icon {
    color:
        #8c847f !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button:not(.btn-close):not(.mobile-menu-button):not(.sidebar-logout-button),
.button,
.btn-primary,
.orders-filter-button,
.order-view-button {
    border-radius:
        10px !important;

    background:
        linear-gradient(135deg,
            #780704,
            var(--ase-primary)) !important;

    color:
        #fff !important;

    box-shadow:
        0 7px 16px rgba(100, 1, 0, .17) !important;
}

button:not(.btn-close):not(.mobile-menu-button):not(.sidebar-logout-button):hover,
.button:hover,
.btn-primary:hover,
.orders-filter-button:hover,
.order-view-button:hover {
    background:
        linear-gradient(135deg,
            #650301,
            #460000) !important;

    color:
        #fff !important;

    box-shadow:
        0 10px 21px rgba(100, 1, 0, .22) !important;

    transform:
        translateY(-1px);
}

.button.secondary,
button.secondary,
.btn-secondary,
.orders-clear-button {
    border:
        1px solid #ded7d1 !important;

    background:
        #f5f2ef !important;

    color:
        #514c48 !important;

    box-shadow:
        none !important;
}

.button.secondary:hover,
button.secondary:hover,
.btn-secondary:hover,
.orders-clear-button:hover {
    background:
        #ebe6e2 !important;

    color:
        #302d2a !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge,
.dashboard-status-badge,
.order-method-badge,
.order-detail-badge,
.orders-count-badge {
    border:
        1px solid transparent;

    font-weight:
        750 !important;
}

.badge.paid,
.badge.completed,
.dashboard-status-badge.paid,
.dashboard-status-badge.completed,
.order-detail-badge.paid,
.order-detail-badge.completed {
    border-color:
        #cce6d6 !important;

    background:
        #edf8f1 !important;

    color:
        #17683f !important;
}

.badge.pending,
.badge.net30_pending,
.dashboard-status-badge.pending,
.dashboard-status-badge.net30_pending,
.order-detail-badge.pending,
.order-detail-badge.net30_pending {
    border-color:
        #eed9ac !important;

    background:
        #fff7e7 !important;

    color:
        #905006 !important;
}

.badge.submitted,
.dashboard-status-badge.submitted,
.order-detail-badge.submitted {
    border-color:
        #dec8c7 !important;

    background:
        #f9eeee !important;

    color:
        var(--ase-primary) !important;
}

.badge.in_production,
.badge.shipped,
.dashboard-status-badge.in_production,
.dashboard-status-badge.shipped,
.order-detail-badge.in_production,
.order-detail-badge.shipped {
    border-color:
        #cfdfeb !important;

    background:
        #eef5fa !important;

    color:
        #315e8c !important;
}

.badge.failed,
.badge.cancelled,
.badge.expired,
.dashboard-status-badge.failed,
.dashboard-status-badge.cancelled,
.dashboard-status-badge.expired {
    border-color:
        #f0c9c4 !important;

    background:
        #fff0ee !important;

    color:
        #a52a20 !important;
}


/* =========================================================
   ORDER LIST
   ========================================================= */

.orders-result-text {
    color:
        #847d77 !important;
}

.orders-count-badge {
    background:
        var(--ase-primary-soft) !important;

    color:
        var(--ase-primary) !important;

    border-color:
        #ead5d4 !important;
}

.orders-table-card {
    box-shadow:
        var(--hub-shadow-sm) !important;
}

.order-customer-name {
    color:
        #2b2826 !important;
}

.order-secondary-text {
    color:
        #9a938d !important;
}

.order-mobile-card {
    border:
        1px solid var(--ase-border) !important;

    border-radius:
        16px !important;

    background:
        #fff !important;

    box-shadow:
        var(--hub-shadow-sm) !important;
}

.order-mobile-card:active {
    border-color:
        #d7c8c2 !important;
}

.orders-empty-icon {
    color:
        #b9aaa4 !important;
}


/* =========================================================
   ORDER DETAILS
   ========================================================= */

.order-detail-badges {
    gap:
        7px !important;
}

.order-detail-card-header {
    padding:
        17px 19px !important;
}

.order-detail-card-body {
    padding:
        19px !important;
}

.order-info-item,
.order-address-box {
    border-color:
        #ece6e2 !important;

    background:
        #fbfaf9 !important;
}

.order-info-label,
.order-address-title {
    color:
        #8b837e !important;
}

.order-info-value,
.order-address-line {
    color:
        #312e2b !important;
}

.order-summary-row {
    border-color:
        #eee9e5 !important;
}

.order-summary-row.grand-total {
    color:
        var(--ase-primary) !important;
}

.order-item-text {
    border-left-color:
        #c9aba9 !important;

    background:
        #faf7f6 !important;
}

.internal-note {
    border:
        1px solid #e9e1dc !important;

    border-left:
        3px solid var(--ase-primary) !important;

    background:
        #fcfaf9 !important;
}

.internal-note-meta {
    color:
        #8f8781 !important;
}

.net30-warning {
    border-color:
        #ebd9b7 !important;

    background:
        #fff8e9 !important;

    color:
        #765015 !important;
}

.payment-reference {
    border-color:
        #e4ded9 !important;

    background:
        #f8f6f4 !important;
}

.document-list {
    gap:
        9px !important;
}

.document-row {
    border:
        1px solid #e8e2de !important;

    border-radius:
        13px !important;

    background:
        #fff !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.document-row:not(.missing):hover {
    border-color:
        #d7c5c0 !important;

    box-shadow:
        0 8px 22px rgba(37, 28, 24, .07);

    transform:
        translateY(-1px);
}

.document-row.missing {
    background:
        #faf9f8 !important;

    opacity:
        .72;
}

.document-icon {
    border-radius:
        11px !important;

    background:
        #f6eded !important;

    color:
        var(--ase-primary) !important;
}

.document-icon.spreadsheet {
    background:
        #edf6f0 !important;

    color:
        #28734b !important;
}

.document-name {
    color:
        #34302e !important;
}

.document-meta {
    color:
        #948c86 !important;
}

.document-missing-badge {
    background:
        #efebe8 !important;

    color:
        #807873 !important;
}


/* =========================================================
   ALERT / PAGINATION / MODALS
   ========================================================= */

.alert {
    border:
        1px solid transparent;

    box-shadow:
        var(--hub-shadow-sm);
}

.alert-success {
    border-color:
        #cee5d7;

    background:
        #eef8f2;

    color:
        #1b6641;
}

.alert-danger {
    border-color:
        #eccdca;

    background:
        #fff1ef;

    color:
        #91372f;
}

.pagination .page-link {
    border-color:
        #e2dbd6;

    color:
        #5d5752;
}

.pagination .active>.page-link,
.pagination .page-link.active {
    border-color:
        var(--ase-primary);

    background:
        var(--ase-primary);

    color:
        #fff;
}

.modal-content {
    border-radius:
        18px !important;

    border:
        1px solid var(--ase-border) !important;
}

.modal-header,
.modal-footer {
    border-color:
        #eee8e4 !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

.auth-content {
    min-height: 100vh;

    background:
        radial-gradient(circle at 12% 10%,
            rgba(100, 1, 0, .13),
            transparent 27rem),
        radial-gradient(circle at 92% 88%,
            rgba(100, 1, 0, .075),
            transparent 25rem),
        linear-gradient(145deg,
            #f7f4f2 0%,
            #eee9e5 100%);
}

.hub-login-shell {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 100vh;

    padding:
        44px 18px 30px;
}

.hub-login-card {
    width:
        min(100%,
            465px);

    padding:
        34px;

    border:
        1px solid rgba(213, 202, 195, .92);

    border-radius:
        24px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        var(--hub-shadow-lg);

    backdrop-filter:
        blur(16px);
}

.hub-login-brand {
    display: flex;

    align-items: center;

    gap:
        13px;
}

.hub-login-mark {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background:
        linear-gradient(145deg,
            #7f0907,
            var(--ase-primary));

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 12px 25px rgba(100, 1, 0, .24);
}

.hub-login-eyebrow {
    color: #8c847f;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .105em;

    text-transform: uppercase;
}

.hub-login-brand-name {
    margin-top: 2px;

    color: #282421;

    font-size: 17px;
    font-weight: 800;
}

.hub-login-copy {
    margin:
        31px 0 24px;
}

.hub-login-copy h1 {
    margin:
        0 0 8px;

    font-size: 29px;
}

.hub-login-copy p {
    margin: 0;

    color: #817a74;

    font-size: 13px;

    line-height: 1.65;
}

.hub-login-form {
    display: grid;

    gap:
        17px;
}

.hub-login-input-wrap {
    position: relative;
}

.hub-login-input-wrap>i {
    position: absolute;

    top: 50%;
    left: 14px;

    z-index: 2;

    color: #9a918c;

    transform:
        translateY(-50%);
}

.hub-login-input-wrap input {
    height: 49px;

    padding-left: 42px;
}

.hub-login-submit {
    justify-content:
        space-between !important;

    width: 100%;

    min-height:
        49px !important;

    padding:
        11px 16px !important;

    border-radius:
        12px !important;
}

.hub-login-security {
    display: flex;

    align-items:
        flex-start;

    gap:
        9px;

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid #eee8e4;

    color:
        #918983;

    font-size:
        10px;

    line-height:
        1.55;
}

.hub-login-security i {
    margin-top:
        2px;

    color:
        #756b65;
}

.hub-login-footer {
    margin-top:
        18px;

    color:
        #8c837e;

    font-size:
        10px;

    font-weight:
        650;
}


/* =========================================================
   MOBILE SIDEBAR
   ========================================================= */

.order-hub-offcanvas {
    background:
        #17181b !important;

    color:
        #fff !important;
}

.order-hub-offcanvas .offcanvas-header {
    border-color:
        rgba(255, 255, 255, .08) !important;
}

.order-hub-offcanvas .text-secondary {
    color:
        #92959b !important;
}

.btn-close {
    background-color:
        transparent !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}

.order-hub-offcanvas .btn-close {
    filter:
        invert(1) grayscale(1);

    opacity:
        .75;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .app-content {
        padding-right: 22px;
        padding-left: 22px;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        min-height: 67px;

        border-bottom-color:
            var(--ase-border);

        background:
            rgba(255, 255, 255, .93);

        box-shadow:
            0 7px 24px rgba(34, 27, 23, .05);

        backdrop-filter:
            blur(16px);
    }

    .mobile-topbar .sidebar-brand-icon {
        width: 39px;
        height: 39px;

        margin-right: 0;

        border-radius: 11px;
    }

    .mobile-menu-button {
        border-color:
            var(--ase-border) !important;

        border-radius:
            11px !important;

        background:
            #fff !important;

        color:
            #3b3632 !important;

        box-shadow:
            var(--hub-shadow-sm) !important;

        transform:
            none !important;
    }

    .app-content {
        padding:
            23px 16px 40px;
    }
}

@media (max-width: 575.98px) {
    .hub-login-card {
        padding:
            27px 22px;

        border-radius:
            20px;
    }

    .hub-login-copy {
        margin-top:
            27px;
    }

    .hub-login-copy h1 {
        font-size:
            26px;
    }

    .dashboard-title,
    .orders-page-title,
    .order-detail-title {
        font-size:
            25px !important;
    }

    .stat-card {
        min-height:
            142px !important;
    }

    .stat-card-body {
        padding:
            18px !important;
    }

    .stat-card-value {
        font-size:
            30px !important;
    }

    .orders-filter-card,
    .order-detail-card {
        border-radius:
            16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}

.badge.on_hold,
.dashboard-status-badge.on_hold,
.order-status-badge.on_hold,
.order-detail-badge.on_hold {
    border-color: #efd7a1 !important;
    background: #fff5db !important;
    color: #8a5200 !important;
}