:root {
    --oms-bg: #0b1020;
    --oms-bg-soft: #0f172a;
    --oms-sidebar: #0b1223;
    --oms-card: rgba(15, 23, 42, .88);
    --oms-card-2: rgba(17, 24, 39, .94);
    --oms-border: rgba(148, 163, 184, .16);
    --oms-border-strong: rgba(148, 163, 184, .24);
    --oms-text: #e5e7eb;
    --oms-heading: #ffffff;
    --oms-muted: #94a3b8;
    --oms-muted-2: #64748b;
    --oms-purple: #8b5cf6;
    --oms-blue: #2f8cff;
    --oms-sky: #38bdf8;
    --oms-green: #22c55e;
    --oms-orange: #f97316;
    --oms-yellow: #fbbf24;
    --oms-red: #ef4444;
    --oms-shadow: 0 24px 80px rgba(0, 0, 0, .34);
    --oms-sidebar-width: 280px;
    --oms-topbar-height: 78px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(109, 93, 252, .18), transparent 30%),
        radial-gradient(circle at top right, rgba(47, 140, 255, .14), transparent 26%),
        linear-gradient(180deg, #0a1020 0%, #0b1020 100%);
    color: var(--oms-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

a { text-decoration: none; }
button, input, select { font-family: inherit; }

/* ================= SIDEBAR ================= */
.oms-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--oms-sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, rgba(12, 19, 36, .98), rgba(8, 13, 26, .99));
    border-right: 1px solid var(--oms-border);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 18px 0 60px rgba(0, 0, 0, .24);
}

.oms-sidebar-brand {
    height: 88px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--oms-border);
}

.oms-logo { display: flex; align-items: center; gap: 13px; color: var(--oms-heading); }
.oms-logo-box {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 12px 28px rgba(109, 93, 252, .35);
    color: #fff; font-size: 21px; flex: 0 0 auto;
}
.oms-logo strong { display: block; font-size: 25px; letter-spacing: .3px; line-height: 1; }
.oms-logo small { display: block; margin-top: 5px; font-size: 11px; color: var(--oms-muted); }

.oms-sidebar-scroll { flex: 1; overflow-y: auto; padding: 16px 12px; }
.oms-sidebar-scroll::-webkit-scrollbar { width: 5px; }
.oms-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .18); border-radius: 99px; }
.oms-nav { display: flex; flex-direction: column; gap: 6px; }

.oms-nav-link {
    width: 100%; min-height: 48px; border: 0; background: transparent; color: #cbd5e1;
    display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 12px;
    font-size: 15px; font-weight: 650; cursor: pointer; transition: .2s ease; text-align: left;
}
.oms-nav-link i:first-child { width: 22px; font-size: 18px; color: #a5b4fc; }
.oms-nav-link:hover { background: rgba(99, 102, 241, .12); color: #fff; }
.oms-nav-link.active,
.oms-nav-group.active > .oms-nav-link {
    background: linear-gradient(135deg, rgba(109, 93, 252, .92), rgba(79, 70, 229, .70));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 28px rgba(79, 70, 229, .22);
}
.oms-nav-link.active i, .oms-nav-group.active > .oms-nav-link i { color: #fff; }
.oms-caret { margin-left: auto; font-size: 12px !important; color: #94a3b8 !important; transition: .2s ease; }
.oms-nav-group.open .oms-caret { transform: rotate(180deg); }
.oms-submenu { display: none; padding: 6px 0 8px 51px; }
.oms-nav-group.open .oms-submenu { display: block; }
.oms-sub-link { display: block; padding: 9px 12px; margin: 3px 0; border-radius: 10px; color: var(--oms-muted); font-size: 13px; font-weight: 600; transition: .2s ease; }
.oms-sub-link:hover { color: #fff; background: rgba(148, 163, 184, .09); }

.oms-sidebar-user {
    margin: 14px; padding: 13px; border: 1px solid var(--oms-border); border-radius: 14px;
    background: rgba(15, 23, 42, .84); display: flex; align-items: center; gap: 11px;
}
.oms-user-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #2563eb); display: grid; place-items: center; color: #fff; font-weight: 800; flex: 0 0 auto; }
.oms-user-info { min-width: 0; flex: 1; }
.oms-user-info strong, .oms-user-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oms-user-info strong { font-size: 13px; color: #fff; }
.oms-user-info small { margin-top: 3px; color: var(--oms-muted); font-size: 11px; }
.oms-user-more { color: var(--oms-muted); }

/* ================= TOPBAR ================= */
.app-main {
    margin-left: var(--oms-sidebar-width);
    min-height: 100vh;
    transition: margin-left .22s ease;
    width: calc(100% - var(--oms-sidebar-width));
}
}

.app-topbar {
    position: sticky;
    top: 0;
    height: var(--oms-topbar-height);
    z-index: 900;
    background: rgba(11, 16, 32, .84);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--oms-border);
}

.oms-topbar-inner {
    height: 100%;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background:black;
}

.oms-top-left,
.oms-top-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oms-top-left {
    flex: 1;
    min-width: 0;
}

.oms-top-right {
    flex: 0 0 auto;
}

/* Buttons */
.oms-hamburger,
.oms-icon-btn,
.oms-date-btn,
.oms-site-btn {
    height: 45px;
    border: 1px solid var(--oms-border);
    background: rgba(15, 23, 42, .76);
    color: #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s ease;
}

.oms-hamburger {
    width: 45px;
    font-size: 18px;
    flex: 0 0 auto;
}

.oms-hamburger:hover,
.oms-icon-btn:hover,
.oms-date-btn:hover,
.oms-site-btn:hover {
    border-color: rgba(139, 92, 246, .42);
    background: rgba(30, 41, 59, .92);
    color: #fff;
}

/* Search */
.oms-global-search {
    height: 48px;
    max-width: 760px;
    flex: 1;
    border: 1px solid var(--oms-border);
    background: rgba(15, 23, 42, .72);
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    min-width: 260px;
}

.oms-global-search > i {
    color: var(--oms-muted);
    font-size: 17px;
    flex: 0 0 auto;
}

.oms-global-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
}

.oms-global-search input::placeholder {
    color: #64748b;
}

.oms-global-search span {
    border: 1px solid var(--oms-border);
    background: rgba(109, 93, 252, .12);
    color: #c4b5fd;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.oms-search-submit {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(109, 93, 252, .16);
    color: #c4b5fd;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.oms-search-submit:hover {
    background: rgba(109, 93, 252, .32);
    color: #fff;
}

/* Notification */
.oms-icon-btn {
    position: relative;
    width: 45px;
    font-size: 18px;
    flex: 0 0 auto;
}

.oms-icon-btn span {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid #0b1020;
}

/* Date / Site */
.oms-date-btn,
.oms-site-btn {
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Dynamic Action Button */
.oms-new-order-btn {
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, .42);
    background: linear-gradient(135deg, #6d5dfc, #7c3aed);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 34px rgba(109, 93, 252, .28);
    white-space: nowrap;
    flex: 0 0 auto;
}

.oms-new-order-btn:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* Profile */
.oms-profile-wrap {
    position: relative;
    flex: 0 0 auto;
}

.oms-profile-btn {
    height: 46px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .76);
    color: #e5e7eb;
    border-radius: 13px;
    padding: 0 10px 0 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .2s ease;
}

.oms-profile-btn:hover {
    border-color: rgba(139, 92, 246, .42);
    background: rgba(30, 41, 59, .92);
}

.oms-profile-meta {
    text-align: right;
    line-height: 1.1;
}

.oms-profile-meta strong {
    display: block;
    font-size: 13px;
    color: #fff;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oms-profile-meta small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oms-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

.oms-profile-avatar.large {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.oms-profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 260px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    padding: 10px;
    display: none;
    z-index: 9999;
}

.oms-profile-dropdown.show {
    display: block;
}

.oms-profile-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    margin-bottom: 7px;
}

.oms-profile-head strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.oms-profile-head small {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    margin-top: 3px;
}

.oms-profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.oms-profile-dropdown a:hover {
    background: rgba(109, 93, 252, .15);
    color: #fff;
}

.oms-profile-dropdown a.danger {
    color: #fca5a5;
}

.oms-profile-dropdown hr {
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, .12);
    margin: 7px 0;
}

.app-content {
    padding: 24px;
}

/* Responsive */
@media (max-width: 1350px) {
    .oms-profile-meta {
        display: none;
    }
}

@media (max-width: 1200px) {
    .oms-date-btn,
    .oms-site-btn {
        display: none;
    }
}

@media (max-width: 900px) {
    .oms-new-order-btn span,
    .oms-global-search span {
        display: none;
    }

    .oms-global-search {
        min-width: 180px;
    }
}

@media (max-width: 768px) {
    .app-main {
        margin-left: 0;
    }

    .oms-topbar-inner {
        padding: 0 14px;
        gap: 10px;
    }

    .oms-top-left,
    .oms-top-right {
        gap: 8px;
    }

    .oms-profile-btn > i {
        display: none;
    }

    .oms-profile-dropdown {
        right: -10px;
        width: 240px;
    }
}
/* ================= DASHBOARD ================= */
.oms-dashboard-page { padding: 26px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.dash-head h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; color: #fff; letter-spacing: -.03em; }
.dash-head p { margin: 0; color: #a8b3c7; }
.dash-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dash-btn { height: 44px; padding: 0 16px; border: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .74); color: #e5e7eb; border-radius: 10px; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; cursor: pointer; }
.dash-btn:hover { border-color: rgba(139, 92, 246, .45); color: #fff; }

/* ================= KPI CARDS - FIXED ================= */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card {
    --tone: #8b5cf6; --tone-rgb: 139, 92, 246;
    position: relative; min-height: 180px; padding: 20px;
    border: 1px solid rgba(var(--tone-rgb), .42);
    background: radial-gradient(circle at 78% 8%, rgba(var(--tone-rgb), .20), transparent 34%), linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(12, 19, 36, .92));
    border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.kpi-card:before { content: ""; position: absolute; inset: auto -28px -62px -28px; height: 112px; opacity: .26; background: radial-gradient(circle, rgba(var(--tone-rgb), .85), transparent 66%); pointer-events: none; }
.kpi-card.purple { --tone: #8b5cf6; --tone-rgb: 139, 92, 246; }
.kpi-card.blue { --tone: #2f8cff; --tone-rgb: 47, 140, 255; }
.kpi-card.orange { --tone: #f97316; --tone-rgb: 249, 115, 22; }
.kpi-card.green { --tone: #22c55e; --tone-rgb: 34, 197, 94; }
.kpi-card.red { --tone: #ef4444; --tone-rgb: 239, 68, 68; }
.kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(var(--tone-rgb), .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 24px rgba(var(--tone-rgb), .14); font-size: 22px; margin-bottom: 13px; position: relative; z-index: 2; }
.kpi-title { position: relative; z-index: 2; font-size: 13px; font-weight: 750; color: #d7deea; }
.kpi-value { position: relative; z-index: 2; font-size: 26px; line-height: 1.05; font-weight: 850; color: #fff; margin-top: 8px; letter-spacing: -.03em; white-space: nowrap; }
.kpi-change { position: relative; z-index: 2; margin-top: 11px; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.kpi-change span { color: #a8b3c7; font-weight: 600; }
.kpi-change.up { color: #22c55e; }
.kpi-change.down { color: #f97316; }
.sparkline,
.sparkline span {
    display: none !important;
}

.sparkline-line {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 15px;
    height: 42px;
    color: var(--tone);
    z-index: 2;
    pointer-events: none;
}

.sparkline-line svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.spark-line-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px currentColor);
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: sparkLineDraw 1.1s ease forwards;
}

.spark-area {
    opacity: .75;
}

@keyframes sparkLineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ================= PANELS ================= */
.dashboard-grid-main, .dashboard-grid-lower, .dashboard-grid-bottom { display: grid; gap: 18px; margin-bottom: 18px; }
.dashboard-grid-main, .dashboard-grid-lower { grid-template-columns: 2fr 1.1fr; }
.dashboard-grid-bottom { grid-template-columns: 1fr 1fr; }
.panel { background: linear-gradient(180deg, rgba(17, 24, 39, .88), rgba(12, 19, 36, .84)); border: 1px solid rgba(148, 163, 184, .16); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .17); padding: 18px; overflow: hidden; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font-size: 18px; color: #fff; margin: 0; }
.panel-head strong { color: #fff; font-size: 14px; }
.mini-select { height: 38px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 9px; background: rgba(15, 23, 42, .75); color: #e5e7eb; padding: 0 12px; outline: none; }
.panel-link { height: 36px; padding: 0 12px; border-radius: 9px; background: rgba(109, 93, 252, .23); color: #c4b5fd; font-weight: 700; display: inline-flex; align-items: center; }
.order-chart-panel {
    height: 320px;
}
#orderOverviewChart {
    width: 100% !important;
    height: 250px !important;
}
.order-chart-panel canvas { height: 230px !important; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: #a8b3c7; font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; background: #8b5cf6; }
.dot.purple { background: #8b5cf6; } .dot.blue { background: #2f8cff; } .dot.sky { background: #69a7ff; } .dot.orange { background: #ff8a1f; } .dot.green { background: #22c55e; } .dot.red { background: #ff4d5f; } .dot.yellow { background: #fbbf24; }

/* ================= FULFILLMENT ================= */
.fulfillment-wrap { display: grid; grid-template-columns: 185px 1fr; align-items: center; gap: 22px; }
.donut { --p: 75; width: 178px; height: 178px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#1062ff calc(var(--p) * 1%), #7bb2ff calc(var(--p) * 1%) calc((var(--p) + 8) * 1%), rgba(148, 163, 184, .16) 0); position: relative; }
.donut > div { width: 118px; height: 118px; border-radius: 50%; background: #0e172b; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12); }
.donut strong { display: block; font-size: 32px; line-height: 1; color: #fff; }
.donut span { display: block; color: #a8b3c7; font-size: 13px; margin-top: 6px; }
.fulfillment-list p { display: flex; justify-content: space-between; gap: 12px; color: #dce3ef; margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(148, 163, 184, .10); }
.fulfillment-list p:last-child { border-bottom: 0; }
.fulfillment-list b { color: #fff; }

/* ================= TABLES ================= */
.table-responsive { width: 100%; overflow: auto; }
.dash-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.dash-table th { font-size: 12px; text-transform: uppercase; color: #94a3b8; text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(148, 163, 184, .14); }
.dash-table td { padding: 12px 10px; border-bottom: 1px solid rgba(148, 163, 184, .09); color: #e5e7eb; font-size: 14px; }
.dash-table tr:hover td { background: rgba(148, 163, 184, .04); }
.order-id { color: #a78bfa; font-weight: 800; }
.customer-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.customer-cell span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f97316, #8b5cf6); font-size: 12px; color: #fff; }
.source-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; }
.source-pill:before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: #64748b; display: inline-block; }
.source-pill.shopify:before { background: #22c55e; } .source-pill.woocommerce:before { background: #a855f7; } .source-pill.daraz:before { background: #f97316; }
.status-pill { display: inline-flex; padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 800; background: rgba(47, 140, 255, .16); color: #60a5fa; }
.status-pill.delivered, .status-pill.shipped, .status-pill.booked { background: rgba(34, 197, 94, .14); color: #4ade80; }
.status-pill.processing, .status-pill.confirmed { background: rgba(47, 140, 255, .16); color: #60a5fa; }
.status-pill.pending, .status-pill.hold { background: rgba(255, 138, 31, .16); color: #fb923c; }
.status-pill.cancelled, .status-pill.failed { background: rgba(255, 77, 95, .16); color: #fb7185; }
.row-actions { display: flex; gap: 8px; }
.row-actions a { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, .14); display: grid; place-items: center; color: #cbd5e1; background: rgba(15, 23, 42, .55); }
.row-actions a:hover { background: rgba(109, 93, 252, .18); color: #fff; }
.empty { text-align: center; color: #94a3b8 !important; padding: 30px !important; }

/* ================= QUICK + METRICS ================= */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-btn { height: 44px; border-radius: 9px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 800; color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.quick-btn.purple { background: linear-gradient(135deg, rgba(109, 93, 252, .80), rgba(76, 29, 149, .45)); }
.quick-btn.green { background: linear-gradient(135deg, rgba(34, 197, 94, .65), rgba(20, 83, 45, .42)); }
.quick-btn.blue { background: linear-gradient(135deg, rgba(47, 140, 255, .72), rgba(30, 64, 175, .38)); }
.quick-btn.sky { background: linear-gradient(135deg, rgba(14, 165, 233, .62), rgba(12, 74, 110, .42)); }
.quick-btn.orange { background: linear-gradient(135deg, rgba(249, 115, 22, .65), rgba(124, 45, 18, .42)); }
.metric-list { display: flex; flex-direction: column; }
.metric-row { display: grid; grid-template-columns: 1.3fr .55fr .65fr 1.5fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(148, 163, 184, .09); color: #e5e7eb; }
.metric-head { font-size: 12px; text-transform: uppercase; color: #94a3b8; font-weight: 800; }
.metric-row.total { font-size: 16px; font-weight: 800; color: #fff; border-bottom: 0; }
.platform-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-block; margin-right: 9px; vertical-align: middle; background: #64748b; }
.platform-icon.shopify { background: #22c55e; } .platform-icon.woocommerce { background: #a855f7; } .platform-icon.daraz { background: #f97316; } .platform-icon.manual-orders { background: #94a3b8; }
.progress { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .14); overflow: hidden; }
.progress b { height: 100%; display: block; border-radius: 99px; background: #22c55e; }
.progress.red b { background: #ff4d5f; } .progress.orange b { background: #ff8a1f; } .progress.yellow b { background: #fbbf24; } .progress.blue b { background: #2f8cff; } .progress.purple b { background: #8b5cf6; }

/* ================= COLLAPSED ================= */
.sidebar-collapsed .oms-sidebar { width: 86px; }
.sidebar-collapsed .app-main { margin-left: 86px; }
.sidebar-collapsed .oms-logo span:not(.oms-logo-box),
.sidebar-collapsed .oms-nav-link span,
.sidebar-collapsed .oms-caret,
.sidebar-collapsed .oms-submenu,
.sidebar-collapsed .oms-user-info,
.sidebar-collapsed .oms-user-more { display: none; }
.sidebar-collapsed .oms-sidebar-brand { justify-content: center; padding-inline: 12px; }
.sidebar-collapsed .oms-nav-link { justify-content: center; padding: 0; }
.sidebar-collapsed .oms-nav-link i:first-child { width: auto; }
.sidebar-collapsed .oms-sidebar-user { justify-content: center; padding: 10px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1500px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) {
    .oms-date-btn, .oms-site-btn { display: none; }
    .dashboard-grid-main, .dashboard-grid-lower, .dashboard-grid-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fulfillment-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .oms-sidebar { transform: translateX(-100%); transition: .25s ease; }
    .oms-sidebar.mobile-open { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .oms-topbar-inner { padding: 0 14px; }
    .oms-global-search span { display: none; }
    .oms-new-order-btn span { display: none; }
    .oms-dashboard-page { padding: 16px; }
    .dash-head { flex-direction: column; }
    .kpi-grid { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr; }
    .metric-row { grid-template-columns: 1fr .5fr .6fr; }
    .metric-row .progress { grid-column: 1 / -1; }
}




.order-create-page{padding:24px 26px 120px;background:radial-gradient(circle at 25% 0,rgba(109,93,252,.12),transparent 28%),radial-gradient(circle at 80% 12%,rgba(47,140,255,.10),transparent 26%)}
.oc-alert{margin-bottom:16px;padding:13px 16px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.78);color:#e5e7eb;font-weight:800}.oc-alert.success{border-color:rgba(34,197,94,.35);color:#86efac}.oc-alert.error{border-color:rgba(239,68,68,.35);color:#fecaca}
.oc-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.oc-title-wrap{display:flex;align-items:center;gap:15px}.oc-title-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(109,93,252,.20));color:#2dd4bf;font-size:25px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.oc-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 7px;color:#94a3b8;font-size:13px;font-weight:700}.oc-page-head h1{margin:0;color:#fff;font-size:30px;letter-spacing:-.04em}.oc-page-head span{display:block;margin-top:5px;color:#94a3b8}.oc-clear-btn{height:44px;padding:0 17px;border-radius:12px;border:1px solid rgba(148,163,184,.17);background:rgba(15,23,42,.76);color:#dbe4f0;font-weight:800;display:inline-flex;align-items:center;gap:9px;cursor:pointer}.oc-clear-btn:hover{border-color:rgba(139,92,246,.45);color:#fff}
.oc-top-card,.oc-products-card,.oc-summary-card{background:linear-gradient(180deg,rgba(17,24,39,.88),rgba(12,19,36,.84));border:1px solid rgba(148,163,184,.16);box-shadow:0 22px 70px rgba(0,0,0,.20);border-radius:18px}.oc-top-card{display:grid;grid-template-columns:1.05fr 1.1fr .95fr;gap:24px;padding:22px;margin-bottom:18px}.oc-section-title{display:flex;align-items:center;gap:11px;margin-bottom:15px}.oc-section-title i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(109,93,252,.14);color:#a78bfa}.oc-section-title h2{margin:0;color:#f8fafc;font-size:16px}.oc-section-title.mt{margin-top:26px}.mt-small{margin-top:14px}
.oc-inline-control{display:grid;grid-template-columns:1fr 48px;gap:10px;margin-bottom:12px}.oc-inline-control select,.oc-big-select,.oc-info-card input,.oc-form-grid input,.oc-product-search-row select,.oc-product-search-row input,.oc-items-table select,.oc-items-table input,.oc-summary-input input,.oc-summary-card textarea{height:48px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,23,42,.66);color:#e5e7eb;padding:0 14px;outline:0;width:100%;transition:.18s ease}.oc-info-card input:focus,.oc-form-grid input:focus,.oc-product-search-row select:focus,.oc-items-table input:focus,.oc-items-table select:focus,.oc-inline-control select:focus,.oc-big-select:focus,.oc-summary-input input:focus,.oc-summary-card textarea:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.10)}.oc-square-btn{width:48px;height:48px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(109,93,252,.18);color:#c4b5fd;cursor:pointer}.oc-square-btn:hover{background:rgba(109,93,252,.32);color:#fff}.oc-new-customer{display:none;grid-template-columns:1fr;gap:8px;margin-bottom:12px}.oc-new-customer.show{display:grid}.oc-new-customer input{height:42px;border-radius:11px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.66);color:#fff;padding:0 12px;outline:0}.oc-info-card{border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.42);border-radius:14px;padding:16px}.selected-customer-card strong{font-size:15px;color:#fff;margin-right:8px}.oc-badge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900}.oc-badge.green{background:rgba(34,197,94,.13);color:#86efac}.oc-info-card p{display:flex;align-items:center;gap:10px;margin:11px 0 0;color:#cbd5e1;font-size:13px}.oc-info-card p i{color:#a78bfa}.oc-form-grid{display:grid;gap:10px}.oc-form-grid.two{grid-template-columns:1fr 1fr}.oc-form-grid.three{grid-template-columns:1fr 1fr 1fr}.oc-form-grid.compact{margin-bottom:10px}.side-options .oc-big-select{margin-bottom:0}
.oc-main-grid{display:grid;grid-template-columns:minmax(0,2.2fr) 380px;gap:18px;align-items:start}.oc-products-card{padding:18px}.products-title{margin-bottom:16px}.oc-product-search-row{display:grid;grid-template-columns:1fr 48px 150px;gap:10px;margin-bottom:16px}.oc-barcode-btn{height:48px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.68);color:#cbd5e1;cursor:pointer}.oc-add-product{height:48px;border-radius:12px;border:1px solid rgba(139,92,246,.48);background:rgba(109,93,252,.16);color:#c4b5fd;font-weight:900;cursor:pointer}.oc-add-product:hover{background:rgba(109,93,252,.30);color:#fff}.oc-items-responsive{overflow:auto;border:1px solid rgba(148,163,184,.12);border-radius:14px}.oc-items-table{width:100%;border-collapse:collapse;min-width:930px}.oc-items-table th{background:rgba(8,13,26,.55);color:#94a3b8;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:13px 12px}.oc-items-table td{border-top:1px solid rgba(148,163,184,.10);padding:12px;color:#e5e7eb}.product-cell{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;min-width:260px}.product-thumb{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(109,93,252,.20));display:grid;place-items:center;color:#c4b5fd}.product-cell select{height:38px;padding:0 10px}.product-cell small{display:block;margin-top:6px;color:#94a3b8}.inline-sku{width:130px!important;height:24px!important;border:0!important;background:transparent!important;padding:0!important;color:#94a3b8!important}.variation-input{height:38px!important}.oc-items-table input{height:38px;padding:0 10px}.qty-stepper{display:flex;align-items:center}.qty-stepper button{width:34px;height:38px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.66);color:#cbd5e1;cursor:pointer}.qty-stepper button:first-child{border-radius:10px 0 0 10px}.qty-stepper button:last-child{border-radius:0 10px 10px 0}.qty-stepper input{width:44px!important;border-radius:0!important;text-align:center}.item-total{white-space:nowrap;color:#fff}.remove-item{width:38px;height:38px;border-radius:10px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#fb7185;cursor:pointer}.remove-item:hover{background:rgba(239,68,68,.20);color:#fff}.oc-products-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 6px 2px;color:#e5e7eb}.oc-products-footer strong:last-child span{margin-left:18px;color:#fff}
.oc-summary-card{padding:18px;position:sticky;top:calc(var(--oms-topbar-height) + 18px)}.oc-summary-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;color:#cbd5e1}.oc-summary-row strong{color:#fff}.oc-summary-row.muted strong{color:#fb7185}.oc-summary-input{display:grid;grid-template-columns:1fr 160px;gap:12px;align-items:center;margin:12px 0}.oc-summary-input label{color:#cbd5e1}.oc-summary-input div{display:grid;grid-template-columns:1fr 54px}.oc-summary-input input{border-radius:10px 0 0 10px;text-align:right}.oc-summary-input b{height:48px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.18);border-left:0;border-radius:0 10px 10px 0;color:#94a3b8;background:rgba(15,23,42,.70);font-size:12px}.oc-grand-total{border-top:1px dashed rgba(148,163,184,.26);margin-top:14px;padding-top:20px;display:flex;justify-content:space-between;align-items:center}.oc-grand-total span{color:#a78bfa;font-weight:900}.oc-grand-total strong{font-size:28px;color:#8b5cf6;letter-spacing:-.04em}.oc-summary-card textarea{height:auto;min-height:104px;padding:13px;margin-top:18px;resize:vertical}
.oc-submit-bar{position:fixed;left:calc(var(--oms-sidebar-width) + 26px);right:26px;bottom:22px;height:96px;border-radius:18px;background:linear-gradient(135deg,#6d5dfc,#5b7cfa);box-shadow:0 22px 60px rgba(91,124,250,.32);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 26px;z-index:800}.oc-submit-left{display:flex;align-items:center;gap:16px;color:#fff}.oc-submit-left>div:first-child{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.20);display:grid;place-items:center;font-size:25px}.oc-submit-left h3{margin:0;font-size:22px}.oc-submit-left p{margin:5px 0 0;color:rgba(255,255,255,.78)}.oc-submit-total{margin-left:auto;color:#fff}.oc-submit-total span{display:block;color:rgba(255,255,255,.78);font-weight:800}.oc-submit-total strong{font-size:28px}.oc-submit-btn{width:62px;height:62px;border:0;border-radius:14px;background:#fff;color:#6d5dfc;font-size:24px;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.18)}
@media(max-width:1450px){.oc-top-card{grid-template-columns:1fr 1fr}.side-options{grid-column:1/-1}.oc-main-grid{grid-template-columns:1fr}.oc-summary-card{position:relative;top:auto}}@media(max-width:900px){.oc-page-head,.oc-products-footer{flex-direction:column;align-items:flex-start}.oc-top-card{grid-template-columns:1fr}.oc-form-grid.two,.oc-form-grid.three,.oc-product-search-row{grid-template-columns:1fr}.oc-main-grid{grid-template-columns:1fr}.oc-submit-bar{left:16px;right:16px;bottom:14px;height:auto;align-items:flex-start;flex-direction:column}.oc-submit-total{margin-left:0}.order-create-page{padding:16px 16px 170px}}




/*customers css*/
/* customers-dark-content.css - sirf customers content/page css, sidebar/topbar css nahi */
:root{
    --oms-bg:#07101f;
    --oms-panel:#0b1526;
    --oms-panel-2:#0d182b;
    --oms-border:rgba(148,163,184,.14);
    --oms-border-soft:rgba(148,163,184,.08);
    --oms-text:#e5e7eb;
    --oms-muted:#94a3b8;
    --oms-purple:#7c3aed;
    --oms-purple-2:#5b21b6;
    --oms-green:#22c55e;
    --oms-blue:#3b82f6;
    --oms-orange:#f97316;
    --oms-red:#ef4444;
}

.oms-customers-page{
    /*padding: 28px 28px 34px;*/
    /*min-height: calc(100vh - 72px);*/
    /*background:*/
    /*    radial-gradient(circle at 18% 0%, rgba(124,58,237,.14), transparent 30%),*/
    /*    radial-gradient(circle at 82% 8%, rgba(37,99,235,.12), transparent 30%),*/
    /*    linear-gradient(180deg, #07101f 0%, #081221 45%, #06101d 100%);*/
    /*color: var(--oms-text);*/
}

/*.oms-customers-page *{ box-sizing:border-box; }*/
.text-right{ text-align:right; }

.customers-head-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}
.customers-head-row h1{
    margin:0 0 6px;
    color:#f8fafc;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.04em;
}
.customers-head-row p{
    margin:0;
    color:#a6b2c4;
    font-size:15px;
}
.customers-head-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.oms-dark-btn{
    height:48px;
    padding:0 18px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
    white-space:nowrap;
}
.oms-dark-btn.ghost{
    color:#dbe4f0;
    background:rgba(9,17,31,.72);
    border:1px solid var(--oms-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.oms-dark-btn.ghost:hover{ border-color:rgba(124,58,237,.45); transform:translateY(-1px); }
.oms-dark-btn.primary{
    color:#fff;
    border:1px solid rgba(124,58,237,.55);
    background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);
    box-shadow:0 14px 28px rgba(91,33,182,.28);
}
.oms-dark-btn.primary:hover{ transform:translateY(-1px); filter:brightness(1.06); }

.oms-alert{
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    border:1px solid var(--oms-border);
}
.oms-alert.success{ background:rgba(34,197,94,.12); color:#86efac; }
.oms-alert.error{ background:rgba(239,68,68,.12); color:#fecaca; }

.oms-customer-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}
.oms-stat-card{
    position:relative;
    overflow:hidden;
    min-height:138px;
    padding:20px 22px;
    border-radius:12px;
    border:1px solid var(--oms-border);
    background:linear-gradient(145deg, rgba(16,28,49,.92), rgba(7,14,26,.96));
    box-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.oms-stat-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.42;
    pointer-events:none;
}
.oms-stat-card.purple{ border-color:rgba(124,58,237,.26); }
.oms-stat-card.green{ border-color:rgba(34,197,94,.23); }
.oms-stat-card.blue{ border-color:rgba(59,130,246,.23); }
.oms-stat-card.orange{ border-color:rgba(249,115,22,.23); }
.oms-stat-card.purple::before{ background:radial-gradient(circle at 20% 20%, rgba(124,58,237,.36), transparent 42%); }
.oms-stat-card.green::before{ background:radial-gradient(circle at 20% 20%, rgba(34,197,94,.24), transparent 42%); }
.oms-stat-card.blue::before{ background:radial-gradient(circle at 20% 20%, rgba(59,130,246,.24), transparent 42%); }
.oms-stat-card.orange::before{ background:radial-gradient(circle at 20% 20%, rgba(249,115,22,.24), transparent 42%); }
.stat-icon{
    position:relative;
    z-index:1;
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:23px;
    float:left;
    margin-right:18px;
}
.oms-stat-card.purple .stat-icon{ background:rgba(124,58,237,.18); color:#9b6cff; }
.oms-stat-card.green .stat-icon{ background:rgba(34,197,94,.15); color:#33d17a; }
.oms-stat-card.blue .stat-icon{ background:rgba(59,130,246,.16); color:#5ea0ff; }
.oms-stat-card.orange .stat-icon{ background:rgba(249,115,22,.16); color:#ff8a33; }
.stat-info{ position:relative; z-index:1; padding-top:2px; }
.stat-info span{ display:block; color:#a7b3c6; font-size:13px; font-weight:600; margin-bottom:4px; }
.stat-info strong{ display:block; color:#f8fafc; font-size:26px; line-height:1.1; letter-spacing:-.03em; }
.stat-info small{ display:block; margin-top:7px; color:#9ba8ba; font-size:13px; }
.stat-info small b{ color:#22c55e; font-weight:800; }
.oms-stat-card svg{
    position:absolute;
    left:20px;
    right:20px;
    bottom:17px;
    width:calc(100% - 40px);
    height:32px;
    opacity:.9;
}
.oms-stat-card svg polyline{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.oms-stat-card.purple svg polyline{ stroke:#7c3aed; }
.oms-stat-card.green svg polyline{ stroke:#22c55e; }
.oms-stat-card.blue svg polyline{ stroke:#3b82f6; }
.oms-stat-card.orange svg polyline{ stroke:#f97316; }

.oms-customer-table-card{
    border:1px solid var(--oms-border);
    border-radius:12px;
    overflow:hidden;
    background:rgba(8,16,29,.80);
    box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
}
.table-toolbar-dark{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    border-bottom:1px solid var(--oms-border-soft);
}
.table-search-dark{
    width:300px;
    max-width:100%;
    height:44px;
    position:relative;
    flex:0 0 300px;
}
.table-search-dark i{
    position:absolute;
    left:17px;
    top:50%;
    transform:translateY(-50%);
    color:#7d8ca5;
    font-size:15px;
}
.table-search-dark input{
    width:100%;
    height:100%;
    border-radius:9px;
    color:#dbeafe;
    font-size:14px;
    background:rgba(6,13,24,.82);
    border:1px solid var(--oms-border);
    outline:none;
    padding:0 14px 0 44px;
}
.table-search-dark input::placeholder{ color:#76849b; }
.table-search-dark input:focus{ border-color:rgba(124,58,237,.6); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.toolbar-filter-group{ display:flex; align-items:center; gap:12px; }
.filter-pill{
    height:44px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#d7ccff;
    border:1px solid rgba(124,58,237,.62);
    background:rgba(124,58,237,.10);
    border-radius:9px;
    text-decoration:none;
    font-weight:700;
}
.filter-pill span{
    width:24px;
    height:24px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#7c3aed;
    color:#fff;
    font-size:12px;
}
.clear-filter{ color:#8b5cf6; text-decoration:none; font-size:14px; font-weight:700; }
.columns-btn{
    margin-left:auto;
    height:44px;
    padding:0 16px;
    border-radius:9px;
    color:#dbe4f0;
    background:rgba(9,17,31,.72);
    border:1px solid var(--oms-border);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.customer-tabs-dark{
    display:flex;
    gap:10px;
    padding:0 20px 14px;
    border-bottom:1px solid var(--oms-border-soft);
    overflow-x:auto;
}
.customer-tab{
    color:#94a3b8;
    padding:8px 11px;
    text-decoration:none;
    border-radius:8px;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}
.customer-tab span{ color:#64748b; margin-left:4px; }
.customer-tab.active{
    color:#fff;
    background:rgba(124,58,237,.18);
    box-shadow: inset 0 -2px 0 #7c3aed;
}
.customer-tab.active span{ color:#c4b5fd; }

.oms-table-wrap{ width:100%; overflow-x:auto; }
.oms-dark-table{
    width:100%;
    min-width:1030px;
    border-collapse:collapse;
}
.oms-dark-table th{
    color:#a7b3c6;
    font-size:13px;
    font-weight:800;
    text-align:left;
    padding:14px 20px;
    border-bottom:1px solid var(--oms-border-soft);
    background:rgba(8,16,29,.46);
    white-space:nowrap;
}
.oms-dark-table th i{ color:#526278; font-size:11px; margin-left:4px; }
.oms-dark-table td{
    color:#cbd5e1;
    font-size:14px;
    padding:13px 20px;
    border-bottom:1px solid var(--oms-border-soft);
    vertical-align:middle;
    white-space:nowrap;
}
.oms-dark-table tbody tr{
    transition:.14s ease;
    background:rgba(10,19,34,.30);
}
.oms-dark-table tbody tr:nth-child(even){ background:rgba(13,24,43,.42); }
.oms-dark-table tbody tr:hover{ background:rgba(124,58,237,.065); }
.check-col{ width:52px; }
.oms-dark-table input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:17px;
    height:17px;
    border-radius:4px;
    background:rgba(2,6,23,.35);
    border:1px solid rgba(148,163,184,.38);
    vertical-align:middle;
    cursor:pointer;
}
.oms-dark-table input[type="checkbox"]:checked{ background:#7c3aed; border-color:#7c3aed; box-shadow:inset 0 0 0 3px #111827; }
.dark-customer-cell{ display:flex; align-items:center; gap:12px; }
.dark-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
    font-size:13px;
    background:linear-gradient(135deg,#334155,#7c3aed);
    border:2px solid rgba(255,255,255,.08);
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.dark-customer-cell strong{ display:block; color:#f8fafc; font-size:14px; font-weight:800; margin-bottom:2px; }
.dark-customer-cell span{ display:block; color:#7d8ca5; font-size:12px; font-weight:700; }
.dark-status{
    min-width:74px;
    height:28px;
    padding:0 10px;
    border-radius:7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    font-weight:800;
}
.dark-status i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dark-status.active{ color:#35e287; background:rgba(34,197,94,.14); }
.dark-status.active i{ background:#22c55e; }
.dark-status.vip{ color:#c4b5fd; background:rgba(124,58,237,.22); }
.dark-status.vip i{ background:#8b5cf6; }
.dark-status.inactive{ color:#ff6b6b; background:rgba(239,68,68,.14); }
.dark-status.inactive i{ background:#ef4444; }
.dark-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    position:relative;
}
.dark-actions button{
    width:36px;
    height:36px;
    border-radius:8px;
    color:#9bacbf;
    background:rgba(15,23,42,.72);
    border:1px solid rgba(148,163,184,.13);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.14s ease;
}
.dark-actions button:hover{ color:#fff; border-color:rgba(124,58,237,.55); background:rgba(124,58,237,.16); }
.cust-more-wrap{ position:relative; }
.cust-more-menu{
    display:none;
    position:absolute;
    right:0;
    top:42px;
    min-width:170px;
    border-radius:12px;
    border:1px solid var(--oms-border);
    background:#0b1526;
    box-shadow:0 18px 36px rgba(0,0,0,.35);
    padding:8px;
    z-index:20;
}
.cust-more-wrap.open .cust-more-menu{ display:block; }
.cust-more-menu form{ margin:0; }
.cust-more-item{
    width:100% !important;
    height:auto !important;
    border:0 !important;
    justify-content:flex-start !important;
    gap:9px !important;
    padding:9px 10px !important;
    background:transparent !important;
    color:#cbd5e1 !important;
    border-radius:8px !important;
    font-size:13px !important;
    font-weight:700 !important;
}
.cust-more-item:hover{ background:rgba(124,58,237,.15) !important; }
.cust-more-item.danger{ color:#ff8b8b !important; }
.dark-empty{ text-align:center; padding:34px !important; color:#94a3b8 !important; }

.dark-table-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    color:#9ba8ba;
    font-size:14px;
}
.dark-table-footer strong{ color:#cbd5e1; }
.dark-pagination{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.dark-pagination a,
.dark-pagination span,
.dark-pagination button{
    min-width:36px;
    height:36px;
    padding:0 11px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#9ba8ba;
    background:rgba(9,17,31,.72);
    border:1px solid rgba(148,163,184,.12);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}
.dark-pagination .active{
    color:#fff;
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
    border-color:rgba(124,58,237,.75);
    box-shadow:0 8px 18px rgba(91,33,182,.28);
}
.dark-pagination button{ gap:8px; cursor:pointer; }

/* modal content styling only */
.modal-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(8px);
    z-index:9999;
    padding:20px;
}
.modal-overlay.open{ display:flex; }
.dark-modal,
.modal{
    width:min(760px, 100%);
    max-height:90vh;
    overflow:auto;
    border-radius:16px;
    border:1px solid var(--oms-border);
    background:linear-gradient(180deg,#0f1a2d,#08111f);
    color:#e5e7eb;
    box-shadow:0 30px 90px rgba(0,0,0,.52);
}
.customer-view-modal{ width:min(820px,100%); }
.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid var(--oms-border-soft);
}
.modal-title{ margin:0; font-size:18px; color:#fff; display:flex; align-items:center; gap:10px; }
.modal-close{ width:36px; height:36px; border-radius:9px; border:1px solid var(--oms-border); background:rgba(15,23,42,.7); color:#cbd5e1; cursor:pointer; }
.modal-body{ padding:20px; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--oms-border-soft); }
.form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.form-group.full{ grid-column:1 / -1; }
.form-label{ display:block; color:#a7b3c6; font-size:13px; font-weight:800; margin-bottom:8px; }
.form-input,
.form-group select{
    width:100%;
    height:44px;
    border-radius:10px;
    color:#e5e7eb;
    background:#07101f;
    border:1px solid var(--oms-border);
    outline:none;
    padding:0 13px;
}
.form-input:focus{ border-color:rgba(124,58,237,.6); box-shadow:0 0 0 3px rgba(124,58,237,.13); }
.btn{ height:42px; padding:0 16px; border-radius:10px; border:1px solid var(--oms-border); display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:800; }
.btn-ghost{ background:rgba(15,23,42,.7); color:#cbd5e1; }
.btn-primary{ color:#fff; background:linear-gradient(135deg,#7c3aed,#5b21b6); border-color:rgba(124,58,237,.75); }
.customer-view-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.customer-view-avatar{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:linear-gradient(135deg,#334155,#7c3aed); }
.customer-view-name{ margin:0; color:#fff; }
.customer-view-segment{ margin:4px 0 0; color:#a78bfa; font-weight:800; }
.customer-view-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.customer-view-item{ padding:13px; border-radius:12px; background:rgba(7,16,31,.7); border:1px solid var(--oms-border-soft); }
.customer-view-item.full{ grid-column:1 / -1; }
.customer-view-item label{ color:#7d8ca5; font-size:12px; font-weight:800; display:block; margin-bottom:5px; }
.customer-view-item p{ margin:0; color:#e5e7eb; }
.cust-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.cust-tag{ padding:5px 9px; border-radius:99px; font-size:12px; font-weight:800; }
.cust-tag.blue{ background:rgba(59,130,246,.16); color:#93c5fd; }
.cust-tag.orange{ background:rgba(249,115,22,.16); color:#fdba74; }

@media (max-width:1200px){
    .oms-customer-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .customers-head-row{ flex-direction:column; }
    .customers-head-actions{ justify-content:flex-start; }
}
@media (max-width:760px){
    .oms-customers-page{ padding:18px 14px; }
    .oms-customer-stats{ grid-template-columns:1fr; }
    .table-toolbar-dark{ flex-direction:column; align-items:stretch; }
    .table-search-dark{ flex:unset; width:100%; }
    .columns-btn{ margin-left:0; justify-content:center; }
    .dark-table-footer{ flex-direction:column; align-items:flex-start; }
    .form-row,.customer-view-grid{ grid-template-columns:1fr; }
}
/* =========================================================
   OMS ORDER LIST RESPONSIVE CSS
   File: assets/css/orders-responsive-full.css
   Use after: oms-layout.css, orders.css, orders-exact-two-screen.css
   Scope: Order list/dashboard page only
   ========================================================= */

:root{
  --oms-root: var(--root-color, var(--primary-color, var(--primary, #7c3aed)));
  --oms-root-2:#5b21b6;
  --oms-bg:#08101f;
  --oms-bg-2:#0b1426;
  --oms-card:#101a2b;
  --oms-card-2:#0c1628;
  --oms-border:rgba(148,163,184,.16);
  --oms-border-strong:rgba(148,163,184,.26);
  --oms-text:#e5e7eb;
  --oms-white:#ffffff;
  --oms-muted:#9aa7bb;
  --oms-muted-2:#64748b;
  --oms-green:#22c55e;
  --oms-blue:#2f8cff;
  --oms-sky:#38bdf8;
  --oms-orange:#f97316;
  --oms-red:#ef4444;
  --oms-pink:#ec4899;
  --oms-shadow:0 22px 70px rgba(0,0,0,.28);
  --oms-radius:16px;
  --oms-topbar-height:78px;
  --oms-sidebar-width:280px;
}

/* ---------- Base page ---------- */
.oms-orders-page,
.oms-orders-page *{box-sizing:border-box;}

.oms-orders-page{
  width:100%;
  min-width:0;
  padding:22px 24px 32px;
  color:var(--oms-text);
  overflow-x:hidden;
}

.oms-orders-page a{text-decoration:none;color:inherit;}
.oms-orders-page button,
.oms-orders-page input,
.oms-orders-page select{font-family:inherit;}

.oms-orders-page h1,
.oms-orders-page h2,
.oms-orders-page h3,
.oms-orders-page strong{color:var(--oms-white);}

.integration-alert,
.oms-orders-page .integration-alert{
  margin:0 0 16px;
  padding:13px 16px;
  border-radius:13px;
  border:1px solid var(--oms-border);
  background:rgba(15,23,42,.86);
  color:#e5e7eb;
  font-weight:800;
}
.oms-orders-page .integration-alert.success{border-color:rgba(34,197,94,.36);color:#86efac;background:rgba(34,197,94,.10);}
.oms-orders-page .integration-alert.error{border-color:rgba(239,68,68,.38);color:#fecaca;background:rgba(239,68,68,.10);}

/* ---------- Dashboard shell ---------- */
.oms-ops-dashboard{
  width:100%;
  max-width:100%;
  min-width:0;
}

.ops-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  margin-bottom:18px;
  border-radius:13px;
  border:1px solid rgba(239,68,68,.28);
  background:linear-gradient(90deg,rgba(239,68,68,.12),rgba(124,58,237,.05));
  color:#f6d5d5;
  overflow:hidden;
}
.ops-alert-left{display:flex;align-items:center;gap:12px;min-width:0;}
.ops-alert-left span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1c9c9;}
.ops-alert-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(239,68,68,.14);color:#fb7185;flex:0 0 auto;}
.ops-alert-btn,
.ops-btn{
  min-height:42px;
  padding:0 15px;
  border-radius:10px;
  border:1px solid var(--oms-border);
  background:rgba(15,23,42,.74);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s ease;
}
.ops-alert-btn{border-color:rgba(239,68,68,.35);color:#fecaca;background:rgba(239,68,68,.08);}
.ops-alert-btn:hover,
.ops-btn:hover{border-color:var(--oms-root);box-shadow:0 0 0 1px color-mix(in srgb,var(--oms-root) 44%,transparent);color:#fff;transform:translateY(-1px);}

.ops-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.ops-head-row h1{margin:0 0 5px;font-size:27px;line-height:1.15;font-weight:850;letter-spacing:-.045em;}
.ops-head-row p{margin:0;color:#a6b2c4;font-size:14px;}
.ops-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}

/* ---------- Top stat cards ---------- */
.ops-stat-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.ops-stat-card{
  --tone:#8b5cf6;
  --tone-rgb:139,92,246;
  position:relative;
  min-width:0;
  min-height:142px;
  padding:18px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid rgba(var(--tone-rgb),.38);
  background:radial-gradient(circle at 78% 0%,rgba(var(--tone-rgb),.20),transparent 36%),linear-gradient(180deg,rgba(17,24,39,.94),rgba(11,19,35,.92));
  box-shadow:0 16px 44px rgba(0,0,0,.18);
  display:block;
  transition:.18s ease;
}
.ops-stat-card.purple{--tone:#8b5cf6;--tone-rgb:139,92,246;}
.ops-stat-card.blue{--tone:#2f8cff;--tone-rgb:47,140,255;}
.ops-stat-card.orange{--tone:#f97316;--tone-rgb:249,115,22;}
.ops-stat-card.green{--tone:#22c55e;--tone-rgb:34,197,94;}
.ops-stat-card.red{--tone:#ef4444;--tone-rgb:239,68,68;}
.ops-stat-card:hover{border-color:var(--oms-root);box-shadow:0 0 0 1px color-mix(in srgb,var(--oms-root) 45%,transparent),0 20px 54px rgba(0,0,0,.28);transform:translateY(-2px);}
.ops-stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--tone-rgb),.24);color:#fff;font-size:20px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.ops-stat-title{font-size:13px;font-weight:800;color:#d7deea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ops-stat-value{margin-top:5px;font-size:28px;line-height:1;font-weight:900;color:#fff;letter-spacing:-.045em;}
.ops-stat-growth{margin-top:10px;font-size:12px;font-weight:900;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.ops-stat-growth span{color:#a8b3c7;font-weight:650;}
.ops-stat-growth.up{color:#22c55e;}
.ops-stat-growth.down{color:#ef4444;}
.ops-stat-growth.neutral{color:#cbd5e1;}

/* clean fixed sparklines */
.mini-spark{position:absolute!important;left:18px!important;right:18px!important;bottom:15px!important;height:28px!important;border-radius:0!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center!important;opacity:1!important;pointer-events:none!important;}
.purple-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 45' preserveAspectRatio='none'%3E%3Cpolyline points='0,34 24,32 48,31 72,28 96,20 120,25 144,28 168,23 192,18 216,26 238,19 260,12' fill='none' stroke='%238b5cf6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 7px rgba(139,92,246,.35));}
.blue-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 45' preserveAspectRatio='none'%3E%3Cpolyline points='0,32 24,27 48,23 72,30 96,22 120,25 144,18 168,24 192,20 216,30 238,32 260,20' fill='none' stroke='%232f8cff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 7px rgba(47,140,255,.35));}
.orange-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 45' preserveAspectRatio='none'%3E%3Cpolyline points='0,25 22,30 44,23 70,26 94,19 118,28 142,24 166,20 190,31 214,26 238,18 260,24' fill='none' stroke='%23f97316' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 7px rgba(249,115,22,.35));}
.green-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 45' preserveAspectRatio='none'%3E%3Cpolyline points='0,26 30,26 60,26 90,26 120,26 150,26 180,26 210,26 260,26' fill='none' stroke='%2322c55e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 7px rgba(34,197,94,.35));}
.red-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 45' preserveAspectRatio='none'%3E%3Cpolyline points='0,32 22,30 44,28 66,22 88,29 110,19 132,30 154,24 176,20 198,27 220,19 240,26 260,17' fill='none' stroke='%23ef4444' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 7px rgba(239,68,68,.35));}

/* ---------- Main dashboard panels ---------- */
.ops-middle-grid{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(520px,1.18fr);
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.ops-panel{
  min-width:0;
  border-radius:15px;
  border:1px solid var(--oms-border);
  background:linear-gradient(180deg,rgba(17,24,39,.88),rgba(12,19,36,.82));
  box-shadow:0 18px 54px rgba(0,0,0,.17);
  padding:18px;
  overflow:hidden;
}
.ops-panel h2{margin:0 0 16px;font-size:18px;font-weight:850;letter-spacing:-.025em;}

/* status breakdown */
.status-table-head,
.status-row{
  display:grid;
  grid-template-columns:minmax(135px,1.2fr) 82px minmax(150px,1fr) 82px;
  gap:12px;
  align-items:center;
}
.status-table-head{padding:0 0 10px;color:#a8b3c7;font-size:12px;font-weight:900;}
.status-row{
  min-height:36px;
  padding:6px 0;
  border-radius:10px;
  color:#e5e7eb;
  transition:.16s ease;
}
.status-row:hover{background:color-mix(in srgb,var(--oms-root) 10%,transparent);padding-left:8px;padding-right:8px;}
.status-name{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;font-weight:750;color:#dbe4f0;}
.status-name .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:#8b5cf6;}
.dot.purple{background:#8b5cf6}.dot.blue{background:#2f8cff}.dot.teal{background:#14b8a6}.dot.cyan{background:#38bdf8}.dot.orange{background:#f97316}.dot.gray{background:#94a3b8}.dot.indigo{background:#818cf8}.dot.blue2{background:#0ea5e9}.dot.green{background:#22c55e}.dot.red{background:#ef4444}.dot.pink{background:#ec4899}.dot.aqua{background:#67e8f9}
.status-count{color:#fff;font-weight:800;font-size:13px;}
.status-percent{display:grid;grid-template-columns:1fr 54px;align-items:center;gap:10px;min-width:0;}
.status-percent:before{content:"";height:7px;border-radius:99px;background:rgba(148,163,184,.12);grid-column:1;grid-row:1;}
.status-percent b{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--oms-root),#7c3aed);grid-column:1;grid-row:1;display:block;min-width:2px;}
.status-percent em{font-style:normal;color:#dbe4f0;font-size:12px;font-weight:850;text-align:right;}
.trend{font-size:12px;font-weight:900;white-space:nowrap;}
.trend.up{color:#22c55e}.trend.down{color:#ef4444}.trend.neutral{color:#cbd5e1}

/* aging */
.aging-panel{overflow:hidden;}
.aging-tabs{display:flex;gap:0;margin-bottom:14px;border:1px solid rgba(148,163,184,.10);border-radius:10px;overflow-x:auto;}
.aging-tabs button{height:38px;padding:0 14px;border:0;border-right:1px solid rgba(148,163,184,.10);background:rgba(15,23,42,.34);color:#aeb9ca;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;}
.aging-tabs button:last-child{border-right:0;}
.aging-tabs button.active{background:rgba(124,58,237,.24);color:#fff;box-shadow:inset 0 -2px 0 var(--oms-root);}
.aging-scroll{width:100%;overflow:auto;}
.aging-table{width:100%;min-width:660px;border-collapse:collapse;}
.aging-table th,.aging-table td{padding:12px 10px;border:1px solid rgba(148,163,184,.09);text-align:center;color:#e5e7eb;font-size:13px;}
.aging-table th{color:#fff;background:rgba(8,13,26,.38);font-weight:850;}
.aging-table td:first-child,.aging-table th:first-child{text-align:left;font-weight:850;}
.aging-table .hot{background:rgba(239,68,68,.12);color:#fff;}
.aging-table tfoot td{font-weight:900;color:#fff;background:rgba(15,23,42,.42);}

/* bottom summary */
.ops-bottom-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.bottom-card{
  --tone:#8b5cf6;
  --tone-rgb:139,92,246;
  position:relative;
  min-height:136px;
  padding:18px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid rgba(var(--tone-rgb),.28);
  background:radial-gradient(circle at 85% 0%,rgba(var(--tone-rgb),.16),transparent 38%),linear-gradient(180deg,rgba(17,24,39,.88),rgba(12,19,36,.82));
  transition:.16s ease;
}
.bottom-card.purple{--tone:#8b5cf6;--tone-rgb:139,92,246}.bottom-card.blue{--tone:#2f8cff;--tone-rgb:47,140,255}.bottom-card.red{--tone:#ef4444;--tone-rgb:239,68,68}.bottom-card.orange{--tone:#f97316;--tone-rgb:249,115,22}
.bottom-card:hover{border-color:var(--oms-root);box-shadow:0 0 0 1px color-mix(in srgb,var(--oms-root) 45%,transparent),0 20px 54px rgba(0,0,0,.26);}
.bottom-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--tone-rgb),.18);color:var(--tone);font-size:20px;float:left;margin-right:14px;}
.bottom-card h3{margin:0;color:#dbe4f0;font-size:13px;font-weight:850;}
.bottom-card strong{display:block;margin-top:5px;color:#fff;font-size:26px;letter-spacing:-.04em;}
.bottom-card p,.bottom-card span{color:#a8b3c7;font-size:13px;}
.bottom-card .mini-spark{height:26px;bottom:13px;}

/* ---------- Orders modal ---------- */
.orders-status-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,6,23,.66);
  backdrop-filter:blur(8px);
  overflow:auto;
}
.orders-status-modal-card{
  width:min(1120px,calc(100vw - 56px));
  max-height:min(88vh,860px);
  display:flex;
  flex-direction:column;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.15);
  background:linear-gradient(180deg,#111c30,#0a1425 72%,#0a1322);
  color:#e5e7eb;
  box-shadow:0 32px 110px rgba(0,0,0,.56);
  overflow:hidden;
}
.orders-status-modal-card .modal-titlebar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:22px 24px 12px;
  flex:0 0 auto;
}
.orders-status-modal-card .modal-titlebar h2{margin:0;color:#fff;font-size:20px;font-weight:900;letter-spacing:-.03em;}
.orders-status-modal-card .modal-titlebar p{margin:4px 0 0;color:#a8b3c7;font-size:13px;}
.orders-status-modal-card .modal-close{width:38px;height:38px;border:0;background:transparent;color:#cbd5e1;font-size:28px;line-height:1;cursor:pointer;border-radius:9px;}
.orders-status-modal-card .modal-close:hover{background:rgba(124,58,237,.14);color:#fff;}

.orders-status-modal-card .modal-tabs{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  padding:0 24px 12px;
  overflow-x:auto;
  scrollbar-width:thin;
  border-bottom:1px solid rgba(148,163,184,.10);
}
.orders-status-modal-card .modal-tabs::-webkit-scrollbar{height:5px;}
.orders-status-modal-card .modal-tabs::-webkit-scrollbar-thumb{background:rgba(148,163,184,.18);border-radius:999px;}
.orders-status-modal-card .tab-chip{
  height:38px;
  padding:0 14px;
  border-radius:9px;
  border:1px solid transparent;
  background:rgba(15,23,42,.46);
  color:#cbd5e1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
  transition:.16s ease;
}
.orders-status-modal-card .tab-chip span{
  min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(148,163,184,.14);color:#dbe4f0;font-size:11px;font-weight:900;
}
.orders-status-modal-card .tab-chip.active{
  background:linear-gradient(135deg,rgba(124,58,237,.38),rgba(91,33,182,.22));
  border-color:rgba(124,58,237,.55);
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--oms-root);
}
.orders-status-modal-card .tab-chip:hover{border-color:var(--oms-root);color:#fff;background:rgba(124,58,237,.18);}

.orders-status-modal-card .toolbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 24px 10px;
}
.orders-status-modal-card .showing-text{color:#dbe4f0;font-size:13px;font-weight:750;white-space:nowrap;}
.orders-status-modal-card .filter-form{display:flex;align-items:center;gap:10px;margin:0;min-width:0;}
.orders-status-modal-card .modal-search{height:40px;min-width:210px;border:1px solid rgba(148,163,184,.16);border-radius:9px;background:#0d1627;color:#fff;padding:0 12px;outline:none;}
.orders-status-modal-card .modal-search:focus{border-color:var(--oms-root);box-shadow:0 0 0 3px color-mix(in srgb,var(--oms-root) 18%,transparent);}
.orders-status-modal-card .btn,
.orders-status-modal-card .icon-btn{
  min-height:38px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.16);
  background:#0d1627;
  color:#dbe4f0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap;
}
.orders-status-modal-card .btn-primary{background:linear-gradient(135deg,var(--oms-root),#4f46e5);border-color:var(--oms-root);color:#fff;}
.orders-status-modal-card .btn:hover,
.orders-status-modal-card .icon-btn:hover{border-color:var(--oms-root);color:#fff;background:rgba(124,58,237,.18);}
.orders-status-modal-card .icon-btn{width:30px;min-width:30px;height:30px;min-height:30px;padding:0;}

.orders-status-modal-card .table-wrap{
  flex:1 1 auto;
  min-height:370px;
  overflow:auto;
  padding:0 24px;
}
.orders-status-modal-card .orders-table{
  width:100%;
  min-width:900px;
  border-collapse:separate;
  border-spacing:0;
  color:#e5e7eb;
}
.orders-status-modal-card .orders-table th,
.orders-status-modal-card .orders-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(148,163,184,.10);
  border-right:1px solid rgba(148,163,184,.07);
  font-size:13px;
  white-space:nowrap;
  color:#dbe4f0;
}
.orders-status-modal-card .orders-table th:first-child,
.orders-status-modal-card .orders-table td:first-child{border-left:1px solid rgba(148,163,184,.07);}
.orders-status-modal-card .orders-table th{position:sticky;top:0;z-index:2;background:#111b2d;color:#cbd5e1;font-weight:900;text-align:left;}
.orders-status-modal-card .orders-table tbody tr:hover td{background:rgba(124,58,237,.08);}
.orders-status-modal-card .checkbox-cell{width:44px;text-align:center;}
.orders-status-modal-card input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:4px;border:1px solid rgba(148,163,184,.42);background:rgba(2,6,23,.35);vertical-align:middle;cursor:pointer;}
.orders-status-modal-card input[type="checkbox"]:checked{background:var(--oms-root);border-color:var(--oms-root);box-shadow:inset 0 0 0 3px #111827;}
.orders-status-modal-card .order-id{color:#a78bfa!important;text-decoration:underline;font-weight:900;}
.orders-status-modal-card .order-sub,
.orders-status-modal-card .cust-email,
.orders-status-modal-card .cust-avatar{display:none!important;}
.orders-status-modal-card .customer-cell{gap:0!important;}
.orders-status-modal-card .cust-name{color:#e5e7eb;font-weight:750;}
.orders-status-modal-card .platform-badge,
.orders-status-modal-card .status-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:6px;font-size:11px;font-weight:900;background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.18);}
.orders-status-modal-card .price{font-weight:850;color:#fff;}
.orders-status-modal-card .action-group{display:flex;align-items:center;gap:6px;justify-content:flex-start;}
.empty-state{padding:42px 16px!important;text-align:center!important;color:#a8b3c7!important;}

/* Modal pagination exactly like screenshot + responsive */
.orders-status-modal-card .footer-bar,
.orders-status-modal-card .footer-bar.modal-pagination-footer{
  flex:0 0 auto;
  padding:16px 24px 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
}
.orders-status-modal-card .footer-bar > .showing-text{display:none!important;}
.orders-status-modal-card .pagination,
.orders-status-modal-card .modal-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:auto!important;
  flex-wrap:wrap;
}
.orders-status-modal-card .page-link,
.orders-status-modal-card .page-dots{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  padding:0!important;
  border-radius:8px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(148,163,184,.18)!important;
  background:#0d1627!important;
  color:#dbe4f0!important;
  font-size:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
}
.orders-status-modal-card .page-link.active{
  background:linear-gradient(135deg,var(--oms-root),#4f46e5)!important;
  border-color:var(--oms-root)!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(124,58,237,.28)!important;
}
.orders-status-modal-card .page-link.disabled{opacity:.38!important;pointer-events:none!important;}
.orders-status-modal-card .page-dots{color:#8c98aa!important;}
.orders-status-modal-card .modal-per-page-form{margin-left:8px!important;}
.orders-status-modal-card .per-page-select{
  height:38px!important;
  min-width:128px!important;
  border-radius:8px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  background:#0d1627!important;
  color:#dbe4f0!important;
  padding:0 12px!important;
  font-size:13px!important;
  font-weight:850!important;
  outline:none!important;
}

/* ---------- Other modals/forms safe responsiveness ---------- */
.modal-overlay{padding:18px;}
.dark-modal,.modal{max-width:100%;}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.form-group.full{grid-column:1/-1;}

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

@media (max-width: 1600px){
  .ops-stat-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ops-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ops-middle-grid{grid-template-columns:1fr;}
  .aging-table{min-width:720px;}
}

@media (max-width: 1280px){
  .oms-orders-page{padding:18px;}
  .orders-status-modal-card{width:calc(100vw - 36px);max-height:90vh;}
  .orders-status-modal-card .table-wrap{min-height:340px;}
  .status-table-head,.status-row{grid-template-columns:minmax(150px,1.1fr) 72px minmax(130px,1fr) 76px;}
}

@media (max-width: 1024px){
  .ops-head-row{flex-direction:column;align-items:stretch;}
  .ops-head-actions{justify-content:flex-start;}
  .orders-status-modal-card .toolbar{flex-direction:column;align-items:stretch;}
  .orders-status-modal-card .filter-form{width:100%;display:grid;grid-template-columns:1fr auto auto auto;}
  .orders-status-modal-card .modal-search{min-width:0;width:100%;}
  .orders-status-modal-card .table-wrap{min-height:330px;max-height:52vh;}
}

@media (max-width: 900px){
  .oms-orders-page{padding:14px!important;}
  .ops-alert{align-items:flex-start;flex-direction:column;}
  .ops-alert-left{align-items:flex-start;}
  .ops-alert-left span:last-child{white-space:normal;overflow:visible;}
  .ops-stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .ops-stat-card{min-height:134px;padding:16px;}
  .ops-bottom-grid{grid-template-columns:1fr;}
  .ops-panel{padding:15px;}
  .status-table-head{display:none;}
  .status-row{grid-template-columns:1fr auto;gap:8px;padding:10px 8px;border-bottom:1px solid rgba(148,163,184,.08);}
  .status-percent{grid-column:1/-1;grid-template-columns:1fr 56px;}
  .trend{justify-self:end;}
  .aging-tabs{border-radius:9px;}
  .orders-status-overlay{padding:10px;align-items:flex-start;}
  .orders-status-modal-card{width:100%;max-height:94vh;border-radius:14px;margin-top:4px;}
  .orders-status-modal-card .modal-titlebar{padding:16px 16px 10px;}
  .orders-status-modal-card .modal-tabs{padding:0 16px 10px;}
  .orders-status-modal-card .toolbar{padding:12px 16px 8px;}
  .orders-status-modal-card .table-wrap{padding:0 16px;min-height:300px;max-height:50vh;}
  .orders-status-modal-card .orders-table{min-width:820px;}
  .orders-status-modal-card .footer-bar{padding:14px 16px 16px!important;}
  .orders-status-modal-card .filter-form{grid-template-columns:1fr 42px 42px;}
  .orders-status-modal-card .filter-form .btn:not(.btn-primary){padding:0;width:42px;font-size:0;}
  .orders-status-modal-card .filter-form .btn:not(.btn-primary)::first-letter{font-size:0;}
  .orders-status-modal-card .filter-form .btn-primary{grid-column:1/-1;width:100%;}
}

@media (max-width: 768px){
  .app-main{width:100%!important;margin-left:0!important;}
  .oms-orders-page{padding:12px 12px 24px!important;}
  .ops-head-row h1{font-size:24px;}
  .ops-head-actions{gap:8px;}
  .ops-btn{flex:1;justify-content:center;min-width:140px;}
  .ops-stat-row{grid-template-columns:1fr;}
  .ops-stat-card{min-height:128px;}
  .ops-stat-title{font-size:12px;}
  .ops-stat-value{font-size:26px;}
  .ops-middle-grid{gap:12px;}
  .ops-panel h2{font-size:16px;}
  .aging-scroll{margin:0 -4px;padding-bottom:2px;}
  .aging-table{min-width:640px;}
  .bottom-card{min-height:126px;padding:16px;}
  .orders-status-modal-card .modal-titlebar h2{font-size:18px;}
  .orders-status-modal-card .tab-chip{height:36px;padding:0 12px;font-size:12px;}
  .orders-status-modal-card .orders-table th,
  .orders-status-modal-card .orders-table td{padding:10px 10px;font-size:12px;}
  .orders-status-modal-card .page-link,
  .orders-status-modal-card .page-dots{width:34px!important;min-width:34px!important;height:34px!important;font-size:12px!important;}
  .orders-status-modal-card .pagination{gap:7px!important;}
  .orders-status-modal-card .per-page-select{height:34px!important;min-width:116px!important;font-size:12px!important;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width: 560px){
  .ops-alert{padding:13px;}
  .ops-alert-btn{width:100%;justify-content:center;}
  .ops-head-actions{width:100%;}
  .ops-btn{width:100%;flex:unset;}
  .ops-stat-card{border-radius:13px;}
  .status-row{font-size:12px;}
  .status-name{font-size:12px;}
  .orders-status-overlay{padding:0;background:rgba(2,6,23,.80);}
  .orders-status-modal-card{height:100vh;max-height:100vh;border-radius:0;border-left:0;border-right:0;}
  .orders-status-modal-card .modal-titlebar{padding:14px 14px 8px;}
  .orders-status-modal-card .modal-tabs{padding-left:14px;padding-right:14px;}
  .orders-status-modal-card .toolbar{padding:10px 14px 8px;}
  .orders-status-modal-card .showing-text{white-space:normal;}
  .orders-status-modal-card .filter-form{grid-template-columns:1fr 40px 40px;gap:8px;}
  .orders-status-modal-card .table-wrap{padding:0 14px;min-height:0;max-height:none;flex:1 1 auto;}
  .orders-status-modal-card .orders-table{min-width:760px;}
  .orders-status-modal-card .footer-bar{padding:12px 10px 14px!important;}
  .orders-status-modal-card .pagination{gap:6px!important;max-width:100%;}
  .orders-status-modal-card .page-link:nth-of-type(n+6):not(:last-child),
  .orders-status-modal-card .page-dots:nth-of-type(n+6){display:none!important;}
  .orders-status-modal-card .modal-per-page-form{width:100%;margin-left:0!important;display:flex;justify-content:center;}
  .orders-status-modal-card .per-page-select{width:132px;}
}

@media (max-width: 420px){
  .oms-orders-page{padding:10px!important;}
  .ops-head-row h1{font-size:22px;}
  .ops-stat-card{padding:14px;min-height:122px;}
  .ops-stat-icon{width:38px;height:38px;font-size:18px;margin-bottom:10px;}
  .mini-spark{left:14px!important;right:14px!important;bottom:12px!important;height:24px!important;}
  .status-row{grid-template-columns:1fr;}
  .status-count,.trend{justify-self:start;}
  .status-percent{grid-template-columns:1fr 48px;}
  .orders-status-modal-card .modal-titlebar h2{font-size:16px;}
  .orders-status-modal-card .modal-titlebar p{font-size:12px;}
  .orders-status-modal-card .modal-close{width:34px;height:34px;font-size:24px;}
  .orders-status-modal-card .tab-chip{height:34px;font-size:11px;padding:0 10px;}
  .orders-status-modal-card .tab-chip span{min-width:22px;height:22px;font-size:10px;}
  .orders-status-modal-card .filter-form{grid-template-columns:1fr;}
  .orders-status-modal-card .filter-form .btn:not(.btn-primary),
  .orders-status-modal-card .filter-form .btn-primary{width:100%;font-size:12px;}
}

/* Print / very small overflow safety */
@media print{
  .orders-status-overlay{position:static;background:#fff;backdrop-filter:none;padding:0;}
  .orders-status-modal-card{box-shadow:none;border:0;color:#000;background:#fff;max-height:none;width:100%;}
}


/*product css*/



/* =========================================================
   RESPONSIVE FINAL PATCH - OMS CSS
   Add this at the END of your CSS file.
   It keeps existing UI same on desktop and fixes tablet/mobile.
========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img,svg,video,canvas{
    max-width:100%;
}

.app-main{
    min-width:0;
    max-width:100%;
}

.app-content,
.oms-dashboard-page,
.oms-customers-page,
.order-create-page{
    max-width:100%;
    overflow-x:hidden;
}

.table-responsive,
.oms-table-wrap,
.oc-items-responsive{
    -webkit-overflow-scrolling:touch;
}

/* Large desktop */
@media (max-width:1600px){
    .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .oc-main-grid{grid-template-columns:minmax(0,1fr) 360px;}
}

@media (max-width:1400px){
    :root{--oms-sidebar-width:250px;}

    .app-main{
        margin-left:var(--oms-sidebar-width);
        width:calc(100% - var(--oms-sidebar-width));
    }

    .oms-sidebar{width:var(--oms-sidebar-width);}

    .oms-global-search{max-width:520px;}
    .kpi-card{min-height:165px;padding:18px;}
    .kpi-value{font-size:24px;}

    .oc-top-card{grid-template-columns:1fr 1fr;}
    .side-options{grid-column:1/-1;}
    .oc-main-grid{grid-template-columns:1fr;}
    .oc-summary-card{position:relative;top:auto;}
}

/* Tablet */
@media (max-width:1200px){
    .dashboard-grid-main,
    .dashboard-grid-lower,
    .dashboard-grid-bottom{
        grid-template-columns:1fr;
    }

    .oms-date-btn,
    .oms-site-btn,
    .oms-profile-meta{
        display:none!important;
    }

    .oms-customer-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .customers-head-row{flex-direction:column;align-items:stretch;}
    .customers-head-actions{justify-content:flex-start;}

    .order-chart-panel{height:auto;min-height:300px;}
    #orderOverviewChart{height:240px!important;}
}

@media (max-width:992px){
    :root{--oms-sidebar-width:0px;--oms-topbar-height:70px;}

    .oms-sidebar{
        transform:translateX(-100%);
        transition:.25s ease;
        width:280px;
        z-index:3000;
    }
    .oms-sidebar.mobile-open,
    body.sidebar-open .oms-sidebar{
        transform:translateX(0);
    }

    .app-main{
        margin-left:0!important;
        width:100%!important;
    }

    .sidebar-collapsed .app-main{
        margin-left:0!important;
    }

    .oms-topbar-inner{
        padding:12px 14px;
        gap:10px;
    }

    .oms-global-search{
        min-width:0;
        max-width:none;
        height:44px;
    }

    .oms-global-search span,
    .oms-new-order-btn span{
        display:none!important;
    }

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

    .oc-page-head,
    .oc-products-footer{
        flex-direction:column;
        align-items:flex-start;
    }
    .oc-top-card,
    .oc-form-grid.two,
    .oc-form-grid.three,
    .oc-product-search-row{
        grid-template-columns:1fr;
    }

    .oc-submit-bar{
        left:16px!important;
        right:16px!important;
        bottom:14px;
        height:auto;
        min-height:86px;
        align-items:flex-start;
        flex-direction:column;
        padding:16px;
    }
    .oc-submit-total{margin-left:0;}
    .order-create-page{padding:16px 16px 190px;}
}

/* Mobile */
@media (max-width:768px){
    body{font-size:14px;}

    .app-content,
    .oms-dashboard-page,
    .oms-customers-page,
    .order-create-page{
        padding:14px!important;
    }

    .oms-topbar-inner{
        height:auto;
        min-height:70px;
        flex-wrap:nowrap;
    }

    .oms-top-left{gap:8px;min-width:0;}
    .oms-top-right{gap:8px;}

    .oms-hamburger,
    .oms-icon-btn,
    .oms-profile-btn,
    .oms-new-order-btn{
        width:42px;
        height:42px;
        padding:0;
        min-width:42px;
        justify-content:center;
    }

    .oms-profile-btn .oms-profile-avatar,
    .oms-profile-btn > i{
        display:none!important;
    }

    .oms-new-order-btn i{margin:0;}
    .oms-global-search{height:42px;padding:0 10px;}
    .oms-global-search input{font-size:13px;}

    .dash-head,
    .customers-head-row,
    .oc-page-head{
        flex-direction:column;
        gap:14px;
    }

    .dash-head h1,
    .customers-head-row h1,
    .oc-page-head h1{
        font-size:24px;
    }

    .dash-actions,
    .customers-head-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .dash-btn,
    .oms-dark-btn{
        width:100%;
        height:42px;
        padding:0 12px;
        font-size:13px;
    }

    .kpi-grid,
    .oms-customer-stats,
    .quick-grid{
        grid-template-columns:1fr;
    }

    .kpi-card,
    .oms-stat-card{
        min-height:145px;
        padding:16px;
        border-radius:14px;
    }

    .kpi-icon,
    .stat-icon{
        width:42px;
        height:42px;
        font-size:19px;
    }

    .kpi-value,
    .stat-info strong{
        font-size:23px;
    }

    .panel{
        padding:14px;
        border-radius:14px;
    }

    .panel-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .order-chart-panel{min-height:270px;}
    #orderOverviewChart{height:220px!important;}

    .metric-row{
        grid-template-columns:1fr .7fr;
        gap:8px;
    }
    .metric-row .progress{grid-column:1/-1;}

    .table-toolbar-dark{
        flex-direction:column;
        align-items:stretch;
        padding:14px;
    }
    .table-search-dark{
        flex:unset;
        width:100%;
    }
    .toolbar-filter-group,
    .customer-tabs-dark{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:10px;
    }
    .columns-btn{margin-left:0;justify-content:center;}

    .oms-dark-table,
    .dash-table,
    .oc-items-table{
        min-width:820px;
    }

    .dark-table-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:14px;
    }
    .dark-pagination{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:4px;
    }

    .modal-overlay{
        padding:10px!important;
        align-items:flex-start;
        overflow-y:auto;
    }
    .dark-modal,
    .modal,
    .customer-view-modal{
        width:100%!important;
        max-height:calc(100vh - 20px);
        border-radius:14px;
    }
    .modal-header,
    .modal-body,
    .modal-footer{
        padding:14px;
    }
    .form-row,
    .customer-view-grid{
        grid-template-columns:1fr;
    }

    .oc-title-wrap{align-items:flex-start;}
    .oc-title-icon{width:48px;height:48px;border-radius:14px;}
    .oc-inline-control,
    .oc-summary-input,
    .oc-summary-input div{
        grid-template-columns:1fr;
    }
    .oc-summary-input input,
    .oc-summary-input b{
        border-radius:10px;
        border:1px solid rgba(148,163,184,.18);
    }
    .oc-summary-input b{border-left:1px solid rgba(148,163,184,.18);}
    .oc-grand-total strong{font-size:24px;}
    .oc-submit-left{align-items:flex-start;}
    .oc-submit-left h3{font-size:18px;}
    .oc-submit-total strong{font-size:23px;}
}

/* Small phones */
@media (max-width:480px){
    .app-content,
    .oms-dashboard-page,
    .oms-customers-page,
    .order-create-page{
        padding:12px!important;
    }

    .oms-topbar-inner{padding:10px;}
    .oms-global-search{
        max-width:calc(100vw - 156px);
    }
    .oms-global-search input::placeholder{
        color:transparent;
    }

    .dash-actions,
    .customers-head-actions{
        grid-template-columns:1fr;
    }

    .dash-head h1,
    .customers-head-row h1,
    .oc-page-head h1{
        font-size:22px;
    }

    .kpi-card,
    .oms-stat-card{
        min-height:136px;
    }

    .dark-pagination a,
    .dark-pagination span,
    .dark-pagination button{
        min-width:34px;
        height:34px;
        font-size:13px;
        padding:0 9px;
    }

    .modal-title{font-size:16px;}
    .oc-submit-bar{left:10px!important;right:10px!important;}
}