/* ============================================================
   Elegant Style System — Enhanced Design Tokens & Components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand Colors */
    --c1:              #0e6ae4;
    --c1-rgb:          14, 106, 228;
    --c1-dark:         #0a4db0;
    --c1-light:        #e8f1fd;
    --c1-mid:          #3d87e8;

    --c2:              #f0522a;
    --c2-rgb:          240, 82, 42;
    --c2-light:        #fef0ec;
    --c2-dark:         #b73010;

    /* Ink Scale (text & foreground) */
    --ink:             #1a2332;
    --ink-2:           #3d4f66;
    --ink-3:           #7a8fa8;
    --ink-4:           #b8c8d8;
    --ink-5:           #dce6f0;

    /* Surface Scale (backgrounds) */
    --surface:         #ffffff;
    --surface-2:       #f5f7fa;
    --surface-3:       #edf1f7;
    --surface-4:       #e2eaf4;

    /* Semantic Colors */
    --success:         #0d9b6b;
    --success-light:   #e3f7f0;
    --success-dark:    #065d42;

    --warning:         #d97706;
    --warning-light:   #fef3e2;
    --warning-dark:    #924d00;

    --danger:          #dc2626;
    --danger-light:    #fef2f2;
    --danger-dark:     #991b1b;

    --info:            #0ea5e9;
    --info-light:      #e0f4fd;
    --info-dark:       #075985;

    /* Typography (legacy alias kept) */
    --title-color:     var(--ink);
    --text-color:      var(--ink-2);
    --border-color:    rgba(26, 35, 50, 0.10);

    /* Fonts */
    --font:            'DM Sans', 'Inter', sans-serif;
    --font-display:    'DM Serif Display', Georgia, serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border Radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(26,35,50,0.06);
    --shadow-sm: 0 1px 4px rgba(26,35,50,0.08), 0 1px 2px rgba(26,35,50,0.04);
    --shadow-md: 0 4px 12px rgba(26,35,50,0.10), 0 2px 4px rgba(26,35,50,0.06);
    --shadow-lg: 0 12px 32px rgba(26,35,50,0.12), 0 4px 8px rgba(26,35,50,0.06);
    --shadow-xl: 0 24px 48px rgba(26,35,50,0.14), 0 8px 16px rgba(26,35,50,0.08);

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(14, 106, 228, 0.18);

    /* Transitions */
    --transition-fast:   all 120ms ease;
    --transition-base:   all 160ms ease;
    --transition-slow:   all 260ms ease;
}


/* ============================================================
   BASE & RESET
   ============================================================ */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font);
    color: var(--text-color);
    background-color: var(--surface-2);
    line-height: 1.6;
    font-size: 14px;
    letter-spacing: -0.01em;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--c1);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--c1-dark);
    text-decoration: underline;
}


/* ============================================================
   HEADINGS & TYPOGRAPHY
   ============================================================ */

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 24px; }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 13px; }

.display-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.section-subtitle {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

.text-muted      { color: var(--ink-3) !important; }
.text-secondary  { color: var(--ink-2) !important; }
.text-primary    { color: var(--c1) !important; }
.text-success    { color: var(--success) !important; }
.text-warning    { color: var(--warning) !important; }
.text-danger     { color: var(--danger) !important; }
.text-ink        { color: var(--ink) !important; }

.fz-10 { font-size: 10px !important; }
.fz-11 { font-size: 11px !important; }
.fz-12 { font-size: 12px !important; }
.fz-13 { font-size: 13px !important; }
.fz-14 { font-size: 14px !important; }
.fz-16 { font-size: 16px !important; }
.fz-18 { font-size: 18px !important; }
.fz-20 { font-size: 20px !important; }
.fz-22 { font-size: 22px !important; }
.fz-24 { font-size: 24px !important; }
.fz-28 { font-size: 28px !important; }
.fz-32 { font-size: 32px !important; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }

.label-caps {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.d--none        { display: none; }
.flex-start     { display: flex; justify-content: flex-start; }
.flex-between   { display: flex; justify-content: space-between; align-items: center; }
.flex-center    { display: flex; justify-content: center; align-items: center; }
.flex-end       { display: flex; justify-content: flex-end; align-items: center; }
.flex-col       { display: flex; flex-direction: column; }
.align-center   { align-items: center; }

.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }

.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }

.cursor-pointer   { cursor: pointer; }
.ltr              { direction: ltr; }
.rtl              { direction: rtl; }
.text-ellipsis    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all        { word-break: break-all !important; }
.w-max-content    { width: max-content; }
.w-fit-content    { width: fit-content; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-hidden{ overflow-x: hidden; }

.radius-sm  { border-radius: var(--radius-sm) !important; }
.radius-md  { border-radius: var(--radius-md) !important; }
.radius-lg  { border-radius: var(--radius-lg) !important; }
.radius-xl  { border-radius: var(--radius-xl) !important; }
.radius-full{ border-radius: var(--radius-full) !important; }

/* Legacy aliases */
.radius-5  { border-radius: 5px !important; }
.radius-10 { border-radius: 10px !important; }
.radius-20 { border-radius: 20px !important; }
.radius-50 { border-radius: 50px !important; }

.light-bg   { background-color: var(--surface-2); }
.c1-light-bg{ background-color: var(--c1-light); }
.bg-surface { background-color: var(--surface); }


/* ============================================================
   SIDEBAR & NAVIGATION
   ============================================================ */

.navbar-brand img {
    height: 40px !important;
    width: 100%;
    object-fit: contain;
    object-position: left center;
}

.navbar-brand-wrapper {
    overflow: hidden;
}

.navbar-vertical-content {
    background: #0e1e35;
    padding: 0 12px 12px;
}

.sidebar--search-form {
    position: sticky;
    top: 0;
    z-index: 9;
    background: #0e1e35;
    padding: 12px 0 8px;
}

.navbar-vertical-content .nav-link {
    border-radius: var(--radius-sm) !important;
    color: rgba(255,255,255,0.65);
    font-size: 13.5px;
    font-weight: 400;
    padding: 9px 12px !important;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: var(--transition-fast);
    margin-bottom: 2px;
}

.navbar-vertical-content .nav-link:hover {
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.07);
}

.navbar .active > .nav-link,
.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .show > .nav-link {
    color: #7db8f7 !important;
    background-color: rgba(14,106,228,0.20);
    font-weight: 500;
}

.navbar-vertical .active .nav-indicator-icon,
.navbar-vertical .nav-link:hover .nav-indicator-icon,
.navbar-vertical .show > .nav-link > .nav-indicator-icon {
    color: #7db8f7;
}

.navbar-vertical .navbar-nav.nav-tabs .active .nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link {
    border-left: none;
}

aside .navbar-vertical-aside-has-menu .nav-sub .nav-link {
    font-size: 12.5px;
    padding-left: 40px !important;
}

aside .navbar-nav > .nav-item:not(:first-child) {
    margin-top: 2px !important;
}

.nav-subtitle {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.30);
    padding: 16px 12px 6px !important;
}

.navbar-vertical-content .scroll-bar {
    max-height: calc(100vh - 100px);
    overflow-y: auto !important;
}

.navbar-vertical-content::-webkit-scrollbar { width: 3px; height: 3px; }
.navbar-vertical-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.navbar-vertical-content::-webkit-scrollbar-track { background: transparent; }

.nav-indicator-icon { font-size: 6px; }

/* Top navbar */
.navbar-nav-wrap-content-right a.btn-ghost-secondary {
    padding: 0;
    width: auto;
    height: auto;
    color: var(--ink-2);
}
.navbar-nav-wrap-content-right a.btn-ghost-secondary:hover {
    color: var(--c1);
    background-color: transparent;
}


/* ============================================================
   CARDS
   ============================================================ */

.card {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.18);
    transform: translateY(-1px);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface-3);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-header__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0;
}

.card-body {
    padding: 20px;
}


/* ============================================================
   BUSINESS ANALYTICS CARDS
   ============================================================ */

.business-analytics {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: var(--transition-base);
    overflow: hidden;
}

.business-analytics:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.18);
}

.business-analytics__subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.business-analytics__title {
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}

.business-analytics__img {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0.85;
}


/* ============================================================
   ORDER STATS
   ============================================================ */

.order-stats {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 100%;
    transition: var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.order-stats:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.20);
    transform: translateY(-1px);
}

.order-stats__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-stats__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c1);
    line-height: 1;
    letter-spacing: -0.03em;
}

.order-stats__subtitle {
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 0;
    margin-top: 3px;
}

.order-stats_out-for-delivery .order-stats__title,
.order-stats_confirmed .order-stats__title {
    color: var(--success);
}

.order-stats_failed .order-stats__title,
.order-stats_canceled .order-stats__title,
.order-stats_packaging .order-stats__title {
    color: var(--danger);
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0 18px;
    height: 38px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
    line-height: 1;
    vertical-align: middle;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn--primary {
    background-color: var(--c1);
    color: #fff;
    border-color: var(--c1);
}
.btn--primary:hover {
    background-color: var(--c1-dark);
    border-color: var(--c1-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,106,228,0.30);
}

.btn--outline,
.btn-outline--primary {
    background-color: transparent;
    color: var(--c1);
    border-color: var(--c1);
}
.btn--outline:hover,
.btn-outline--primary:hover {
    background-color: var(--c1-light);
}

.btn--bordered {
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-md);
    color: var(--ink-2);
    background: transparent;
}
.btn--bordered:hover {
    background-color: var(--c1);
    border-color: var(--c1);
    color: #fff;
}

.btn--bordered-black {
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-md);
    color: var(--ink);
    background: transparent;
}
.btn--bordered-black:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn-secondary {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--ink-2);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--surface-4);
    border-color: var(--surface-4);
    color: var(--ink);
}

.btn-link {
    color: var(--c1);
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    font-weight: 500;
}
.btn-link:hover {
    color: var(--c1-dark);
    text-decoration: underline;
}

.btn-ghost-secondary {
    background: transparent;
    border: none;
    color: var(--ink-2);
}
.btn-ghost-secondary:hover {
    color: var(--c1);
}

/* Button sizes */
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { height: 46px; padding: 0 28px; font-size: 15px; border-radius: var(--radius-lg); }

.square-btn,
.btn.btn-sm.edit,
.btn.btn-sm.delete {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
}

.btn svg path { transition: var(--transition-fast); }
.btn:hover svg path { fill: #fff; }


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

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge--primary    { background: var(--c1-light); color: var(--c1-dark); }
.badge--success    { background: var(--success-light); color: var(--success-dark); }
.badge--warning    { background: var(--warning-light); color: var(--warning-dark); }
.badge--danger     { background: var(--danger-light); color: var(--danger-dark); }
.badge--info       { background: var(--info-light); color: var(--info-dark); }
.badge--neutral    { background: var(--surface-3); color: var(--ink-2); }
.badge--accent     { background: var(--c2-light); color: var(--c2-dark); }

/* Legacy soft badges */
.badge-soft-dark   { background: var(--surface-3); color: var(--ink-2); }
.badge-soft-danger { background: var(--danger-light); color: var(--danger-dark); }
.badge-soft-info   { background: var(--info-light); color: var(--info-dark); }

.__badge {
    padding: 5px 12px;
    border-radius: var(--radius-full);
}
.__badge[class*="soft-success"] { color: var(--success); background: var(--success-light); }
.__badge[class*="soft-primary"] { color: var(--c1); background: var(--c1-light); }
.__badge[class*="soft-danger"]  { color: var(--danger); background: var(--danger-light); }

.orders-count {
    background-color: var(--c1);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    white-space: nowrap;
}

.badge-soft-version {
    padding: 5px 12px !important;
    color: var(--success);
    background-color: var(--success-light);
    border-radius: var(--radius-full);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.form-control {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--ink);
    background-color: var(--surface);
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-md);
    outline: none;
    transition: var(--transition-fast);
    line-height: 1;
}

.form-control:hover {
    border-color: rgba(14,106,228,0.35);
}

.form-control:focus {
    border-color: var(--c1);
    box-shadow: var(--focus-ring);
    background-color: var(--surface);
}

.form-control::placeholder { color: var(--ink-4); }

textarea.form-control {
    height: auto;
    padding: 10px 14px;
    line-height: 1.6;
    resize: vertical;
}

select.form-control {
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8fa8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px !important;
}

.form--control {
    background: rgba(14,106,228,0.05);
    border: 1.5px solid rgba(14,106,228,0.15);
    border-radius: var(--radius-md);
    color: var(--ink-2) !important;
    height: 40px;
    padding: 0 14px;
    font-family: var(--font);
    font-size: 13.5px;
}

.form--control:focus {
    border-color: var(--c1);
    background: rgba(14,106,228,0.06);
    color: var(--ink) !important;
    box-shadow: var(--focus-ring);
}

/* Input group */
.input-group-custom {
    display: flex;
    border: 1.5px solid var(--c1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.input-group-custom .form-control {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.input-group-custom .btn {
    border-radius: 0;
    border: none;
}

/* Search */
.search-input-group {
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}
.search-input-group:focus-within {
    border-color: var(--c1);
    box-shadow: var(--focus-ring);
}
.search-input-group .search-icon,
.search-input-group i,
.search-input-group span,
.search-input-group svg {
    padding: 0 0 0 12px;
    color: var(--ink-3);
    font-size: 16px;
}
.search-input-group input {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0 14px;
    flex-grow: 1;
    height: 40px;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--ink);
}
.search-input-group input::placeholder { color: var(--ink-4); }

/* Sidebar search */
.sidebar--search-form .search--form-group {
    position: relative;
    transition: var(--transition-base);
}
.sidebar--search-form .search--form-group .btn {
    position: absolute;
    left: 5px;
    top: 0;
    color: rgba(255,255,255,0.4) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.sidebar--search-form .form--control {
    padding-left: 40px;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85) !important;
}
.sidebar--search-form .form--control::placeholder { color: rgba(255,255,255,0.35); }
.sidebar--search-form .form--control:focus { border-color: rgba(14,106,228,0.50); }

/* Floating label */
.form-floating { position: relative; }
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
    display: flex;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink-3);
    margin-bottom: 0;
    background-color: transparent;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 1;
    transform: scale(0.82) translateY(-1.2rem) translateX(0.1rem);
    color: var(--c1);
    background-color: var(--surface);
    padding: 0 4px;
    height: auto;
}
.form-floating > .form-control::placeholder { color: transparent; }


/* ============================================================
   SWITCHER
   ============================================================ */

.switch,
.switcher {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
    inline-size: 42px;
    block-size: 22px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.switch .slider,
.switch_control,
.switcher .slider,
.switcher_control {
    position: absolute;
    inset: 0;
    background-color: var(--ink-5);
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-full);
    transition: all 180ms ease;
    cursor: pointer;
}

.switch .slider::after,
.switch_control::after,
.switcher .slider::after,
.switcher_control::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    background-color: var(--ink-4);
    border-radius: 50%;
    transition: all 180ms ease;
    box-shadow: var(--shadow-xs);
}

.switch .status,
.switch_input,
.switcher .status,
.switcher_input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.switch .status:checked ~ .slider,
.switch_input:checked ~ .switcher_control,
.switcher .status:checked ~ .slider,
.switcher_input:checked ~ .switcher_control {
    background-color: var(--c1);
    border-color: var(--c1);
}

.switch .status:checked ~ .slider::after,
.switch_input:checked ~ .switcher_control::after,
.switcher .status:checked ~ .slider::after,
.switcher_input:checked ~ .switcher_control::after {
    left: 23px;
    background-color: #fff;
}

.switcher_content {
    user-select: none;
    color: var(--ink-2);
    margin-bottom: 0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
}

.show-status-text .switcher_control::before {
    content: "OFF";
    margin-inline-start: -44px;
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.show-status-text .switcher_input:checked + .switcher_control::before {
    content: "ON";
    color: var(--c1);
}


/* ============================================================
   TABLES
   ============================================================ */

.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink-2);
    font-size: 13.5px;
}

.table .thead-light th {
    color: var(--ink-3);
    background-color: var(--surface-2);
    border-color: var(--surface-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.table .thead-50 { block-size: 50px; }
.table .thead-50 th { vertical-align: middle; }

thead.text-capitalize th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

.__table tbody td,
.__table thead th {
    padding: 14px 18px;
    border-bottom: 1px solid var(--surface-3);
}

.__table .badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.table-hover tbody tr:hover {
    background-color: var(--surface-2);
    color: var(--ink);
}

.table-hover tbody tr:hover td { color: var(--ink); }


/* ============================================================
   PAGINATION
   ============================================================ */

.page-item.active .page-link {
    background-color: var(--c1);
    border-color: var(--c1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,106,228,0.30);
}

.page-link {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    background-color: var(--surface);
    border-color: var(--surface-4);
    color: var(--ink-2);
    transition: var(--transition-fast);
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
}

.page-link:hover {
    background-color: var(--c1-light);
    color: var(--c1);
    border-color: rgba(14,106,228,0.30);
}

.page-item.disabled .page-link {
    background-color: var(--surface-2);
    border-color: var(--surface-3);
    color: var(--ink-4);
    opacity: 0.8;
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 13rem;
}

.dropdown-item {
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--ink-2);
    transition: var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--surface-2);
    color: var(--ink);
}

.dropdown-divider {
    border-color: var(--surface-3);
    margin: 4px 0;
}


/* ============================================================
   TABS
   ============================================================ */

.nav-tabs {
    border-bottom: 1.5px solid var(--surface-3);
    gap: 4px;
}

.nav-tabs .nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-3);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    border-radius: 0;
    transition: var(--transition-fast);
    margin-bottom: -1.5px;
}

.nav-tabs .nav-link:hover { color: var(--ink-2); }

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--c1);
    border-bottom-color: var(--c1);
    background: transparent;
    font-weight: 600;
}

.inline-page-menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 10px;
    border-bottom: 1.5px solid var(--surface-3);
    padding-bottom: 0;
}

.inline-page-menu ul li a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-3);
    border-bottom: 2px solid transparent;
    padding-bottom: 12px;
    display: block;
    transition: var(--transition-fast);
    margin-bottom: -1.5px;
}

.inline-page-menu ul li.active a {
    color: var(--c1);
    border-color: var(--c1);
    font-weight: 600;
}

.inline-page-menu ul li:not(.active) a { font-weight: 400; }


/* ============================================================
   ALERTS / MODALS (swal2)
   ============================================================ */

.swal2-popup {
    border-radius: var(--radius-xl) !important;
    padding: 32px !important;
    width: 100% !important;
    max-width: 480px !important;
    font-size: 1em !important;
    font-family: var(--font) !important;
    box-shadow: var(--shadow-xl) !important;
}

.swal2-popup .swal2-icon {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.swal2-popup .swal2-title {
    font-size: 1.4em !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em !important;
}

.swal2-popup .swal2-styled {
    min-width: 140px;
    text-align: center;
    border-radius: var(--radius-md) !important;
    font-family: var(--font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--c1) !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
    color: #fff !important;
    background: var(--danger) !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-styled:focus {
    box-shadow: var(--focus-ring) !important;
}

.swal2-popup .swal2-actions {
    margin-top: 24px !important;
    gap: 10px;
}

.swal2-popup .swal2-close {
    color: var(--ink-3) !important;
    right: 16px !important;
    top: 16px !important;
    font-size: 18px !important;
}


/* ============================================================
   OPTION SELECT
   ============================================================ */

.option-select-btn {
    display: flex;
    background: var(--surface);
    border: 1.5px solid var(--surface-4);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.option-select-btn label { margin: 0; }

.option-select-btn label span {
    color: var(--ink-3);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    transition: var(--transition-fast);
}

.option-select-btn label input:checked ~ span {
    color: #fff;
    background-color: var(--c1);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(14,106,228,0.25);
}


/* ============================================================
   FILE UPLOAD
   ============================================================ */

.upload-file {
    position: relative;
    cursor: pointer;
}

.upload-file__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-file__img {
    height: 140px;
    width: 140px;
    min-width: 140px;
}

.upload-file__img img {
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    max-width: 100%;
    object-fit: cover;
}

.upload-img-view {
    block-size: 160px;
    inline-size: 160px;
    max-inline-size: 160px;
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--surface-4);
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: var(--transition-fast);
}

.upload-img-view:hover { border-color: var(--c1); }

.inputDnD .form-control-file {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 9rem;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.inputDnD .form-control-file:before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 100%;
    opacity: 1;
    visibility: visible;
    text-align: center;
    border: 1.5px dashed var(--surface-4);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ink-3);
    font-size: 13.5px;
}

.inputDnD .form-control-file:hover:before {
    border-color: var(--c1);
    background: var(--c1-light);
    color: var(--c1);
}

.upload--icon {
    width: 36px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    inset-inline-end: 10px;
    inset-block-start: 10px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
}


/* ============================================================
   POS / GRID
   ============================================================ */

.pos-item-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    max-height: 61vh;
    overflow-y: auto;
}

.pos-product-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-md) !important;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.pos-product-item:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.20);
}

.pos-product-item_thumb { height: 152px; overflow: hidden; }
.pos-product-item_content {
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pos-product-item_title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.pos-product-item_price {
    font-size: 14px;
    font-weight: 700;
    color: var(--c1);
    letter-spacing: -0.02em;
}

.pos-product-item_hover-content {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    background-color: rgba(14,30,53,0.65);
    color: #fff;
    transition: var(--transition-base);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(2px);
}

.pos-product-item:hover .pos-product-item_hover-content {
    opacity: 1;
    visibility: visible;
}

.grid-card-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.grid-card {
    box-shadow: var(--shadow-sm);
    background-color: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: var(--transition-fast);
}

.grid-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.20);
    transform: translateY(-1px);
}

.grid-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: var(--surface-2);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.grid-item .shop-name,
.grid-item .shop-sell { margin-bottom: 0; font-weight: 400; }
.grid-item .shop-sell { color: var(--c1); font-weight: 700; }


/* ============================================================
   MESSAGES / CHAT
   ============================================================ */

.message-box {
    background-color: var(--c1);
    color: #fff;
    max-width: 515px;
    padding: 14px 18px;
    border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
    font-size: 13.5px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(14,106,228,0.20);
}

.message-box_incoming {
    background-color: var(--surface-2);
    color: var(--ink);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm);
    box-shadow: none;
    border: 1px solid var(--border-color);
}

.outgoing_msg,
.incoming_msg { width: 70%; margin-bottom: 16px; }
.outgoing_msg  { margin-left: auto; }

.chat_list { transition: var(--transition-fast); cursor: pointer; }
.chat_list:hover,
.bg-chat { background-color: var(--surface-2); }

.msg_history { max-height: 45vh; overflow-y: auto; }

.card-chat { min-height: calc(100vh - 150px); }

@media (max-width: 991px) {
    .card-chat { height: auto; }
    .outgoing_msg,
    .incoming_msg { width: 90%; }
}


/* ============================================================
   RATING
   ============================================================ */

.rating-color { color: #f59e0b; }
.rating { color: #4153b3; }


/* ============================================================
   RIPPLE / ANIMATION
   ============================================================ */

.ripple-animation {
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: 250ms color;
    animation: wave 1.3s linear infinite;
}

@keyframes wave {
    0%   { box-shadow: 0 0 0 0   rgba(14, 106, 228, 0.30); }
    100% { box-shadow: 0 0 0 10px rgba(14, 106, 228, 0.00); }
}


/* ============================================================
   SELECT2 OVERRIDES
   ============================================================ */

.select2-container { max-width: 100%; width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: 40px !important;
    border: 1.5px solid var(--surface-4) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--surface) !important;
    display: flex !important;
    align-items: center !important;
    transition: var(--transition-fast) !important;
}

.select2-container--default .select2-selection--single:hover {
    border-color: rgba(14,106,228,0.35) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--c1) !important;
    box-shadow: var(--focus-ring) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    top: 0 !important;
    right: 8px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px !important;
    border: 1.5px solid var(--surface-4) !important;
    border-radius: var(--radius-md) !important;
}

.select2-dropdown {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--c1-light) !important;
    color: var(--c1-dark) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
}


/* ============================================================
   AVATAR
   ============================================================ */

.avatar-60 { width: 60px !important; min-width: 60px !important; height: 60px !important; }
.avatar-70 { width: 70px !important; min-width: 70px !important; height: 70px !important; }
.avatar-lg { min-width: 3.4rem; }
.avatar-bordered { border: 1.5px solid rgba(14, 106, 228, 0.25); }

.avatar-circle > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.btn-sm-status {
    top: -0.3125rem;
    right: -0.3125rem;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 8px;
}


/* ============================================================
   COUPON / MISC
   ============================================================ */

.coupon__discount {
    gap: 5px;
    color: var(--ink-3);
    display: flex;
    align-items: baseline;
}

.coupon__discount strong {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

@media (width < 1450px) { .coupon__discount strong { font-size: 14px; } }


/* ============================================================
   STORE REPORT / CHARTS
   ============================================================ */

.store-report-content {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.store-report-content .left-content,
.store-report-content .right-content {
    width: 265px;
    flex-grow: 1;
}

.store-report-content .center-chart-area {
    flex-grow: 1;
    width: 520px;
    padding: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.store-report-content .center-chart-area .center-chart-header {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.store-report-content .center-chart-area .center-chart-header .title {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.store-report-content .left-content { gap: 14px; display: flex; flex-wrap: wrap; }

.store-report-content .left-content-card {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    transition: var(--transition-base);
}

.store-report-content .left-content-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(14,106,228,0.18);
}

.store-report-content .left-content-card img { width: 36px; }

.store-report-content .left-content-card .info {
    width: 0;
    flex-grow: 1;
    padding-left: 18px;
}

.store-report-content .left-content-card .info .subtitle {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.04em;
}

.store-report-content .left-content-card .info .subtext {
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
}

.store-report-content .left-content-card .info .info-txt {
    font-weight: 500;
    font-size: 11.5px;
    color: var(--success);
    text-align: right;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .store-report-content { flex-wrap: wrap; }
    .store-report-content .left-content,
    .store-report-content .center-chart-area { width: 100%; }
}

.store-center-chart { height: 340px !important; }
@media (max-width: 1650px) { .store-center-chart { height: 300px !important; } }
@media (max-width: 575px)  { .store-center-chart { height: 250px !important; } }

.pie-chart .apexcharts-canvas { margin: 0 auto; }

.total--orders {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 12px;
}

.total--orders h3 {
    margin: 0;
    font-weight: 700 !important;
    font-size: 20px;
    line-height: 24px;
    color: var(--ink) !important;
    letter-spacing: -0.03em;
}

.earning-statistics-content { text-align: center; }

.earning-statistics-content .subtitle {
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 16px;
}

.earning-statistics-content .title {
    font-weight: 700;
    font-size: 30px;
    color: var(--ink);
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: -0.04em;
}

.earning-statistics-content .subtxt {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 28px;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.progress-close-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    background-color: var(--surface);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--ink-4);
    transition: 200ms ease;
    cursor: pointer;
}

.progress-close-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}


/* ============================================================
   MISC UTILITIES
   ============================================================ */

.img-fit          { max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600 !important; }
.rating-color     { color: #f59e0b; }
.min-h-40         { min-height: 40px !important; }
.h-400            { height: 400px; }
.z-index-1        { z-index: 1; }
.z-9999           { z-index: 9999; }
.border-color-c1  { border-color: var(--c1) !important; }
.border-color-primary-light { border-color: rgba(var(--c1-rgb), 0.12) !important; }
.deco-none        { color: inherit; text-decoration: inherit; }
.list-unstyled    { margin: 0; padding: 0; list-style: none; }

.c1               { color: var(--c1) !important; }
.bg-c1            { background-color: var(--c1); }
.text-color       { color: var(--text-color) !important; }
.title-color      { color: var(--title-color) !important; }
.text--primary    { color: var(--c1) !important; }
.text-black       { color: #000; }
.text-info        { color: var(--info) !important; }

.bg-soft--primary { background-color: var(--c1-light); }
.badge--primary   { color: #fff; background-color: var(--c1); }
.badge-soft--primary { color: var(--c1); background-color: var(--c1-light); }

/* Scrollbar */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }


/* ============================================================
   RTL SUPPORT
   ============================================================ */

[dir="rtl"] .nav-indicator-icon { text-align: start; }
[dir="rtl"] .nav { padding-right: 0; }
[dir="rtl"] .search-input-group .search-icon,
[dir="rtl"] .search-input-group i,
[dir="rtl"] .search-input-group span,
[dir="rtl"] .search-input-group svg { padding: 0 12px 0 0; }
[dir="rtl"] .select2-container { text-align: right; }
[dir="rtl"] .close { float: left; margin-right: auto; margin-left: 0; }


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

@media (max-width: 768px) {
    .map-warper { height: 250px; padding-bottom: 10px; }
    .outgoing_msg, .incoming_msg { width: 95%; }
}

@media (max-width: 767px) {
    .amount-of-user { display: none; }
    .user-overview-wrap { grid-template-columns: 1fr; }
    .rest-part { display: block; width: 100%; overflow-x: auto; }
    .grid-card-wrap { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media only screen and (min-width: 768px) {
    .view-web-site-info { display: none; }
}