/* ==========================================================================
   Order Panel theme — colours, type and sizes matched to the DokanAI panel
   (an admin-template look: teal primary, DM Sans 15px, white sidebar).
   ========================================================================== */

@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/dm-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/dm-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/dm-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(../vendor/fonts/dm-sans-latin-700-normal.woff2) format("woff2"); }
/* Bangla glyphs come from Hind Siliguri (DM Sans has none). */
@font-face { font-family: "Hind Siliguri"; font-weight: 400; font-display: swap; unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; src: url(../vendor/fonts/hind-siliguri-bengali-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hind Siliguri"; font-weight: 500; font-display: swap; unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; src: url(../vendor/fonts/hind-siliguri-bengali-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hind Siliguri"; font-weight: 600; font-display: swap; unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; src: url(../vendor/fonts/hind-siliguri-bengali-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Hind Siliguri"; font-weight: 700; font-display: swap; unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; src: url(../vendor/fonts/hind-siliguri-bengali-700-normal.woff2) format("woff2"); }

:root {
    --sidebar-w: 220px;
    --topbar-h: 70px;

    --bs-font-sans-serif: "DM Sans", "Hind Siliguri", "Nirmala UI", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.938rem;
    --bs-body-color: #0f0f12;
    --bs-body-color-rgb: 15, 15, 18;
    --bs-body-bg: #f5f5f5;
    --bs-secondary-color: rgba(15, 15, 18, .75);
    --bs-border-color: #e9ebec;
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
    --bs-box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    --bs-link-color: #438a7a;
    --bs-link-color-rgb: 67, 138, 122;
    --bs-link-hover-color: #366e62;
    --bs-link-hover-color-rgb: 54, 110, 98;

    --bs-primary: #438a7a;   --bs-primary-rgb: 67, 138, 122;
    --bs-secondary: #477bf9; --bs-secondary-rgb: 71, 123, 249;
    --bs-success: #934fb0;   --bs-success-rgb: 147, 79, 176;
    --bs-info: #50b0f3;      --bs-info-rgb: 80, 176, 243;
    --bs-warning: #febd49;   --bs-warning-rgb: 254, 189, 73;
    --bs-danger: #ed4343;    --bs-danger-rgb: 237, 67, 67;
    --bs-dark: #0f0f12;      --bs-dark-rgb: 15, 15, 18;
    --bs-light: #f5f5f5;     --bs-light-rgb: 245, 245, 245;

    --bs-primary-bg-subtle: #d9e8e4;   --bs-primary-text-emphasis: #1b3731;
    --bs-secondary-bg-subtle: #dae5fe; --bs-secondary-text-emphasis: #1c3164;
    --bs-success-bg-subtle: #e9dcef;   --bs-success-text-emphasis: #3b2046;
    --bs-info-bg-subtle: #dceffd;      --bs-info-text-emphasis: #204661;
    --bs-warning-bg-subtle: #fff2db;   --bs-warning-text-emphasis: #664c1d;
    --bs-danger-bg-subtle: #fbd9d9;    --bs-danger-text-emphasis: #5f1b1b;

    --menu-item: #5d6064;
    --menu-sub-item: #6c6f73;
    --menu-title: #919da9;
}

body { background: var(--bs-body-bg); font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); color: var(--bs-body-color); }
a { color: var(--bs-link-color); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
::selection { background: rgba(67, 138, 122, .2); }

/* ---- Buttons (same palette as the theme) ---- */
.btn { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: .938rem; --bs-btn-border-radius: .25rem; box-shadow: none; }
.btn-sm { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .82rem; --bs-btn-border-radius: .2rem; }
.btn-primary   { --bs-btn-color: #fff; --bs-btn-bg: #438a7a; --bs-btn-border-color: #438a7a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #397668; --bs-btn-hover-border-color: #366e62; --bs-btn-active-bg: #366e62; --bs-btn-active-border-color: #32685c; --bs-btn-disabled-bg: #438a7a; --bs-btn-disabled-border-color: #438a7a; }
.btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #477bf9; --bs-btn-border-color: #477bf9; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3c69d4; --bs-btn-hover-border-color: #3962c7; --bs-btn-active-bg: #3962c7; --bs-btn-active-border-color: #355cbb; --bs-btn-disabled-bg: #477bf9; --bs-btn-disabled-border-color: #477bf9; }
.btn-success   { --bs-btn-color: #fff; --bs-btn-bg: #934fb0; --bs-btn-border-color: #934fb0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7d4396; --bs-btn-hover-border-color: #763f8d; --bs-btn-active-bg: #763f8d; --bs-btn-active-border-color: #6e3b84; --bs-btn-disabled-bg: #934fb0; --bs-btn-disabled-border-color: #934fb0; }
.btn-info      { --bs-btn-color: #fff; --bs-btn-bg: #50b0f3; --bs-btn-border-color: #50b0f3; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4496cf; --bs-btn-hover-border-color: #408dc2; --bs-btn-active-bg: #408dc2; --bs-btn-active-border-color: #3c84b6; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #50b0f3; --bs-btn-disabled-border-color: #50b0f3; }
.btn-warning   { --bs-btn-color: #fff; --bs-btn-bg: #febd49; --bs-btn-border-color: #febd49; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d8a13e; --bs-btn-hover-border-color: #cb973a; --bs-btn-active-bg: #cb973a; --bs-btn-active-border-color: #bf8e37; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #febd49; --bs-btn-disabled-border-color: #febd49; }
.btn-danger    { --bs-btn-color: #fff; --bs-btn-bg: #ed4343; --bs-btn-border-color: #ed4343; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c93939; --bs-btn-hover-border-color: #be3636; --bs-btn-active-bg: #be3636; --bs-btn-active-border-color: #b23232; --bs-btn-disabled-bg: #ed4343; --bs-btn-disabled-border-color: #ed4343; }
.btn-dark      { --bs-btn-color: #fff; --bs-btn-bg: #0f0f12; --bs-btn-border-color: #0f0f12; --bs-btn-hover-bg: #333336; --bs-btn-hover-border-color: #272729; --bs-btn-active-bg: #3f3f41; }
.btn-light     { --bs-btn-color: #0f0f12; --bs-btn-bg: #f5f5f5; --bs-btn-border-color: #f5f5f5; --bs-btn-hover-bg: #e9ebec; --bs-btn-hover-border-color: #e9ebec; --bs-btn-active-bg: #e9ebec; }
.btn-outline-primary   { --bs-btn-color: #438a7a; --bs-btn-border-color: #438a7a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #438a7a; --bs-btn-hover-border-color: #438a7a; --bs-btn-active-bg: #438a7a; --bs-btn-active-border-color: #438a7a; }
.btn-outline-secondary { --bs-btn-color: #5d6064; --bs-btn-border-color: #ced4da; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #438a7a; --bs-btn-hover-border-color: #438a7a; --bs-btn-active-bg: #438a7a; --bs-btn-active-border-color: #438a7a; }
.btn-outline-danger    { --bs-btn-color: #ed4343; --bs-btn-border-color: #ed4343; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ed4343; --bs-btn-hover-border-color: #ed4343; --bs-btn-active-bg: #ed4343; }
.btn-outline-success   { --bs-btn-color: #934fb0; --bs-btn-border-color: #934fb0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #934fb0; --bs-btn-hover-border-color: #934fb0; --bs-btn-active-bg: #934fb0; }
/* Older class names used in views */
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: #438a7a; --bs-btn-border-color: #438a7a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #397668; --bs-btn-hover-border-color: #366e62; --bs-btn-active-bg: #366e62; --bs-btn-active-color: #fff; }
.btn-purple { --bs-btn-color: #fff; --bs-btn-bg: #934fb0; --bs-btn-border-color: #934fb0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7d4396; --bs-btn-hover-border-color: #763f8d; --bs-btn-active-bg: #763f8d; --bs-btn-active-color: #fff; }
.btn-soft-primary { color: #438a7a; background: rgba(67, 138, 122, .1); border-color: transparent; }
.btn-soft-primary:hover { color: #fff; background: #438a7a; }
.btn-icon-edit { color: #438a7a; font-size: 1.15rem; padding: 0 .25rem; background: none; border: 0; }
.btn-icon-edit:hover { color: #366e62; }

/* ---- Badges ---- */
.badge { --bs-badge-padding-x: .65em; --bs-badge-padding-y: .35em; --bs-badge-font-size: .75em; --bs-badge-font-weight: 600; --bs-badge-border-radius: .25rem; }
.badge-soft-primary { color: #438a7a; background: rgba(67, 138, 122, .1); }
.badge-soft-danger { color: #ed4343; background: rgba(237, 67, 67, .1); }
.badge-soft-success { color: #934fb0; background: rgba(147, 79, 176, .1); }
.badge-soft-info { color: #50b0f3; background: rgba(80, 176, 243, .1); }
.badge-soft-warning { color: #c58a1f; background: rgba(254, 189, 73, .15); }
.badge-new { background: #2f6b5c; color: #fff; }   /* "New order" */
.badge-old { background: #ed4343; color: #fff; }   /* "Old order" (red, opens the old-orders popup) */
button.badge-old { border: 0; cursor: pointer; } button.badge-old:hover { background: #c92f2f; }

/* ---- Forms ---- */
.form-control, .form-select { font-size: .938rem; border-color: #e9ebec; }
.form-control-sm, .form-select-sm { font-size: .82rem; }
.form-control:focus, .form-select:focus { border-color: #a1c5bd; box-shadow: none; }
.form-check-input:checked { background-color: #438a7a; border-color: #438a7a; }
.form-check-input:focus { border-color: #a1c5bd; box-shadow: 0 0 0 .2rem rgba(67, 138, 122, .15); }
.form-label { font-weight: 500; margin-bottom: .4rem; }
.ts-wrapper.focus .ts-control { border-color: #a1c5bd; box-shadow: none; }
.ts-control { border-color: #e9ebec; }

/* ---- Cards & tables ---- */
.card { --bs-card-border-width: 0; --bs-card-border-radius: .25rem; --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; --bs-card-cap-padding-y: 1rem; --bs-card-cap-padding-x: 1rem; --bs-card-cap-bg: #fff; box-shadow: 0 1px 2px rgba(56, 65, 74, .15); margin-bottom: 1.5rem; }
.card-header { border-bottom: 1px solid #e9ebec; font-weight: 600; font-size: 1rem; }
.card-footer { border-top: 1px solid #e9ebec; background: #fff; }
.card-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.table { --bs-table-color: #0f0f12; --bs-table-border-color: #e9ebec; --bs-table-hover-bg: rgba(67, 138, 122, .04); }
.table > :not(caption) > * > * { padding: .75rem .6rem; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .6rem .5rem; }
.table thead th, .table-light { --bs-table-bg: #f3f6f9; font-weight: 600; color: #0f0f12; }
.thumb { width: 42px; height: 42px; object-fit: cover; border-radius: .25rem; background: #f3f6f9; }
.color-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.dropdown-menu { --bs-dropdown-font-size: .938rem; --bs-dropdown-border-color: transparent; --bs-dropdown-link-active-bg: #438a7a; box-shadow: 0 5px 10px rgba(30, 32, 37, .12); }
.alert { border: 0; }
.alert-success { --bs-alert-color: #1b3731; --bs-alert-bg: #d9e8e4; }
.pagination { --bs-pagination-active-bg: #438a7a; --bs-pagination-active-border-color: #438a7a; --bs-pagination-color: #438a7a; margin: 0; }
.nav-pills { --bs-nav-pills-link-active-bg: #438a7a; }

/* ---- Sidebar (white, 220px, teal active bar) ---- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: #fff; box-shadow: 0 2px 4px rgba(15, 34, 58, .12); overflow-y: auto; z-index: 1003; transition: transform .2s ease-out; display: flex; flex-direction: column; }
.sidebar .brand { display: flex; align-items: center; gap: .5rem; height: var(--topbar-h); padding: 0 1.3rem; font-weight: 700; font-size: 1.35rem; color: #438a7a; text-decoration: none; letter-spacing: -.01em; flex-shrink: 0; }
.sidebar .brand i { font-size: 1.6rem; }
.sidebar .menu-title { letter-spacing: .05em; font-size: 11px; text-transform: uppercase; color: var(--menu-title); font-weight: 600; padding: 12px 20px; }
.sidebar .nav-link { position: relative; display: flex; align-items: center; padding: .531rem 1.5rem; color: var(--menu-item); font-size: .969rem; border-radius: 0; }
.sidebar .nav-link > i:first-child { display: inline-block; min-width: 1.85rem; font-size: 1.15rem; }
.sidebar .nav-link:hover { color: #438a7a; }
.sidebar .nav-link.active, .sidebar .nav-link[aria-expanded="true"] { color: #438a7a; }
.sidebar .nav-link.active { background: linear-gradient(to right, rgba(66, 138, 121, .1) 30%, transparent 100%); }
.sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 30px; background: #438a7a; border-radius: 0 3px 3px 0; }
.sidebar .nav-link .caret { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.sidebar .nav-link[aria-expanded="true"] .caret { transform: rotate(90deg); }
.sidebar .nav-sub { padding-left: 1.85rem; }
.sidebar .nav-sub .nav-link { color: var(--menu-sub-item); font-size: .938rem; padding: .45rem 1.5rem; }
.sidebar .nav-sub .nav-link::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border: 1px solid var(--menu-sub-item); border-radius: 50%; }
.sidebar .nav-sub .nav-link.active { background: none; color: #438a7a; }
.sidebar .nav-sub .nav-link.active::before, .sidebar .nav-sub .nav-link:hover::before { background: #438a7a; border-color: #438a7a; width: 7px; height: 7px; border-radius: 50%; left: 2px; }
.sidebar .nav-link.disabled { color: #b4b7bb; }
.sidebar .nav-link .menu-count { margin-left: auto; font-size: .7rem; font-weight: 600; padding: .3em .55em; border-radius: .25rem; color: #fff; }
.sidebar .sidebar-foot { margin: auto 1rem 1rem; padding: .75rem; border-radius: .3rem; background: #f3f6f9; font-size: .8rem; color: #5d6064; text-align: center; }

/* ---- Top bar ---- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1002; height: var(--topbar-h); display: flex; align-items: center; gap: .6rem; background: #fff; box-shadow: 0 1px 2px rgba(56, 65, 74, .15); padding: 0 1.5rem 0 .75rem; }
.topbar .hamburger { border: 0; background: none; font-size: 1.5rem; color: #5d6064; width: 42px; height: 42px; border-radius: 50%; }
.topbar .hamburger:hover { background: #f3f3f9; }
.topbar .user-btn { display: flex; align-items: center; gap: .55rem; background: #f3f3f9; border: 0; height: var(--topbar-h); padding: 0 1rem; color: #0f0f12; }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: #438a7a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; }
.topbar .user-role { display: block; font-size: .75rem; color: #76797e; line-height: 1; }
.content { padding: 1.5rem .75rem 1rem; flex: 1; }
@media (min-width: 992px) { .content { padding: 1.5rem 1.5rem 1rem; } }
.footer { height: 60px; padding: 20px 1.5rem; color: #98a6ad; background: #fff; font-size: .875rem; display: flex; justify-content: space-between; }

/* Collapsed sidebar on phones */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: none; box-shadow: 0 0 20px rgba(0, 0, 0, .15); }
    .main { margin-left: 0; }
}

/* ---- Dashboard stat tiles (solid colour, white text) ---- */
.stat { border-radius: .25rem; padding: 1.25rem 1.25rem; color: #fff; height: 100%; box-shadow: 0 1px 2px rgba(56, 65, 74, .15); }
.stat .num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.stat .num small { font-size: .85rem; font-weight: 500; opacity: .9; }
.stat .lbl { font-size: 1rem; font-weight: 500; margin-top: .25rem; }

/* ---- Order status cards (tinted by status) ---- */
.status-cards { --gap: .75rem; }
.status-card { display: block; height: 100%; border-radius: .25rem; padding: 1rem 1.1rem; text-decoration: none; color: #0f0f12; background: #fff; box-shadow: 0 1px 2px rgba(56, 65, 74, .15); border: 2px solid transparent; transition: transform .15s; }
.status-card:hover { transform: translateY(-2px); color: #0f0f12; }
.status-card .num { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.status-card .lbl { font-size: .95rem; margin-top: .15rem; }
.status-card.active { border-color: #0f0f12; }
.status-card.tone-primary { background: #d9e8e4; }
.status-card.tone-warning { background: #fff2db; }
.status-card.tone-danger-soft { background: #fbd9d9; }
.status-card.tone-info { background: #dceffd; }
.status-card.tone-secondary { background: #dae5fe; }
.status-card.tone-purple { background: #e9dcef; }
.status-card.solid-danger { background: #ed4343; color: #fff; }
.status-card.solid-primary { background: #438a7a; color: #fff; }
.status-card.solid-dark { background: #3d3f43; color: #fff; }
.status-card.solid-success { background: #934fb0; color: #fff; }

/* ---- Orders table ---- */
.orders-table { font-size: .875rem; }
.orders-table .inv { font-weight: 600; color: #0f0f12; text-decoration: none; }
.orders-table .inv:hover { color: #438a7a; }
.orders-table .phone { color: #ed4343; font-weight: 600; text-decoration: none; }
.orders-table .badge { font-size: .7rem; }
.orders-table .note-text { color: #0f0f12; }
.orders-table .note-time { font-size: .75rem; color: #76797e; }
.btn-note { background: #0f0f12; color: #fff; font-size: .72rem; padding: .15rem .45rem; border-radius: .2rem; border: 0; }
.btn-note:hover { background: #333336; color: #fff; }
.link-courier { font-size: .7rem; background: #477bf9; color: #fff; padding: .15rem .4rem; border-radius: .2rem; text-decoration: none; display: inline-block; margin-top: .2rem; }
.link-courier:hover { background: #3c69d4; color: #fff; }
.totals td, .totals th { vertical-align: middle; }
.ts-wrapper { width: 100%; }

/* ---- Login / setup ---- */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; background: #f5f5f5; }
.auth-card { width: 100%; max-width: 460px; }
.auth-card .card-body { padding: 2rem 1.75rem; }
.auth-brand { font-size: 1.9rem; font-weight: 700; color: #438a7a; letter-spacing: -.02em; }
.auth-foot { color: #76797e; font-size: .875rem; margin-top: 1.5rem; }

/* "secondary" is blue in this theme (buttons/badges), but secondary *text* stays muted grey like the original. */
.text-secondary, .text-muted, .form-text { color: #76797e !important; }
.status-card.active { border-color: #438a7a; box-shadow: 0 0 0 1px #438a7a; }
.status-card.solid-primary.active, .status-card.solid-danger.active, .status-card.solid-dark.active { border-color: #0f0f12; box-shadow: 0 0 0 1px #0f0f12; }

/* ---- DataTables-style order table (column filters in the header, bordered cells) ---- */
.dt-like { font-size: .938rem; }
.dt-like > thead > tr > th { background: #fff; font-weight: 600; vertical-align: middle; padding: .75rem .6rem; white-space: nowrap; }
.dt-like .col-filter { font-size: .938rem; padding: .55rem .9rem; border-color: #e9ebec; font-weight: 400; color: #0f0f12; }
.dt-like select.col-filter { color: #8a8d92; font-weight: 600; padding-right: 2rem; }
.dt-like > tbody > tr > td { padding: .9rem .6rem; }
.dt-like .badge { font-size: .72rem; }
.dt-like .btn.dropdown-toggle { padding: .45rem .9rem; }
.dt-pagination .page-link { color: #438a7a; border-color: #e9ebec; padding: .45rem .8rem; }
.dt-pagination .page-item.active .page-link { background: #438a7a; border-color: #438a7a; color: #fff; }
.dt-pagination .page-item.disabled .page-link { color: #adb5bd; }
.btn-note { font-size: .78rem; padding: .25rem .5rem; }

/* ---- Brand + collapsible (icon-only) sidebar ---- */
.sidebar .brand { justify-content: flex-start; }
.sidebar .brand-mini { display: none; }
.sidebar-backdrop { display: none; }
@media (min-width: 992px) {
    .main, .sidebar { transition: all .2s ease-out; }
    body.sidebar-mini { --sidebar-w: 70px; }
    body.sidebar-mini .sidebar { overflow: visible; }
    body.sidebar-mini .sidebar .brand { justify-content: center; padding: 0; }
    body.sidebar-mini .sidebar .brand-full,
    body.sidebar-mini .sidebar .menu-title,
    body.sidebar-mini .sidebar .label,
    body.sidebar-mini .sidebar .caret,
    body.sidebar-mini .sidebar .nav-sub,
    body.sidebar-mini .sidebar .sidebar-foot,
    body.sidebar-mini .sidebar .nav-link .bi-clock-history { display: none !important; }
    body.sidebar-mini .sidebar .brand-mini { display: block; }
    body.sidebar-mini .sidebar .nav-link { justify-content: center; padding: .75rem 0; }
    body.sidebar-mini .sidebar .nav-link > i:first-child { min-width: 0; font-size: 1.3rem; }
    body.sidebar-mini .sidebar .nav-link .menu-count { position: absolute; top: 4px; right: 8px; font-size: .6rem; padding: .2em .4em; }
}
@media (max-width: 991.98px) {
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 1002; }
}

/* ---- Order table fits the screen: no sideways scrolling on desktop ---- */
@media (min-width: 992px) {
    .orders-wrap { overflow-x: visible; }
}
.orders-table.dt-like { width: 100%; table-layout: auto; font-size: .875rem; }
.orders-table.dt-like > thead > tr > th, .orders-table.dt-like > tbody > tr > td { padding: .55rem .45rem; }
.orders-table.dt-like > tbody > tr > td { overflow-wrap: break-word; }
.orders-table .phone, .orders-table .inv { white-space: nowrap; }
.orders-table.dt-like .col-filter { font-size: .82rem; padding: .35rem .5rem; min-width: 0; }
.orders-table.dt-like select.col-filter { padding-right: 1.6rem; background-position: right .4rem center; }
.orders-table.dt-like .btn.dropdown-toggle { padding: .35rem .6rem; font-size: .8rem; white-space: normal; text-align: left; }
.orders-table .o-time { font-size: .8rem; line-height: 1.2; margin-top: .25rem; }
.orders-table .o-date { font-size: .72rem; color: #76797e; }
.orders-table .date-filter { position: relative; display: inline-flex; }
.orders-table .date-filter .btn { padding: .3rem .45rem; line-height: 1; }
.orders-table .date-filter input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.orders-table .date-filter.on .btn { background: #438a7a; color: #fff; border-color: #438a7a; }
.orders-table.dt-like select.col-filter { padding: .35rem 1.15rem .35rem .4rem; background-position: right .3rem center; background-size: 10px 8px; min-width: 68px; }
.orders-table.dt-like .btn.dropdown-toggle { font-size: .78rem; padding: .35rem .5rem; }

/* ---- Clearer input borders (Shaon: boxes were hard to see) ---- */
.form-control, .form-select, .ts-control, .ts-wrapper.single .ts-control { border-color: #c5ccd3; background-color: #fff; }
.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control { border-color: #438a7a; box-shadow: 0 0 0 .15rem rgba(67, 138, 122, .15); }
.form-control::placeholder { color: #9aa0a6; }

/* ---- Product picture in the product picker and item rows ---- */
.pick-img { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; border: 1px solid #e2e5e8; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; background: #f3f6f9; color: #b0b6bc; }
.ts-dropdown .option { padding: .35rem .6rem; }
.ts-control .item .pick-img { width: 24px; height: 24px; flex-basis: 24px; }

/* ---- Invoiced / Shipped toolbar ---- */
.toolbar .btn { font-size: .875rem; padding: .45rem .8rem; }
.btn-soft { background: #dfeae7; color: #212529; border-color: #dfeae7; }
.btn-soft:hover, .btn-soft.show { background: #cfe0db; color: #212529; border-color: #cfe0db; }
.api-curl { background: #1f2a30; color: #e6edf3; padding: .9rem 1rem; border-radius: 4px; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
.courier-table .form-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }

/* ---- Reports ---- */
.report-table { font-size: .875rem; }
.report-table th { white-space: nowrap; }
.report-table .pct { color: #76797e; font-size: .78rem; }
.report-table tfoot td { background: #f3f6f9; }
@media print { .sidebar, .topbar, .report-filters, .card-header .btn, .footer { display: none !important; } .main { margin-left: 0 !important; } }
.badge-track { background: #934fb0; color: #fff; text-decoration: none; font-weight: 500; white-space: normal; word-break: break-all; text-align: left; }
a.badge-track:hover { background: #7d3f97; color: #fff; }

/* ---- Order edit: notes + old orders ---- */
.notes-table, .old-orders-table { font-size: .875rem; }
.notes-table td, .old-orders-table td { vertical-align: middle; }
.notes-table .note-log td { color: #5f6368; }
.orders-table.old-orders-table { font-size: .8rem; }
.orders-table.old-orders-table > thead > tr > th, .orders-table.old-orders-table > tbody > tr > td { padding: .45rem .4rem; }
.notes-table > thead > tr > th, .notes-table > tbody > tr > td { padding: .45rem .5rem; }

/* ---- Courier logo + customer success-rate ring ---- */
.courier-logo { height: 30px; max-width: 64px; object-fit: contain; flex: 0 0 auto; }
.courier-line { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: nowrap; font-size: .82rem; line-height: 1.15; }
.orders-table .courier-line + .score-ring, .orders-table .score-ring { margin-left: auto; margin-right: auto; }
.courier-name { background: #eef1f4; color: #212529; font-weight: 600; }
.score-ring { --c: #c4c9ce; position: relative; width: 52px; height: 52px; border: 0; background: none; padding: 0; margin: .45rem auto 0; display: block; cursor: pointer; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 3.6; }
.score-ring .bg { stroke: #e9ecef; }
.score-ring .fg { stroke: var(--c); stroke-linecap: round; transition: stroke-dasharray .4s; }
.score-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; color: #1d2b25; }
.score-ring.tone-good { --c: #16a34a; } .score-ring.tone-mid { --c: #f59e0b; } .score-ring.tone-bad { --c: #ef4444; }
.score-ring.big { width: 72px; height: 72px; cursor: default; } .score-ring.big span { font-size: 1rem; }
.score-modal .modal-header { background: linear-gradient(90deg, #6d5dfc, #8b5cf6); color: #fff; }
.sm-top { display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb; border-radius: 10px; padding: .9rem 1rem; background: #f8fafc; margin-bottom: 1rem; }
.sm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; text-align: center; }
.sm-tiles > div { padding: .7rem; color: #6b7280; font-size: .85rem; } .sm-tiles b { display: block; color: #111827; font-size: 1.25rem; }
.sm-tiles .t-total { background: #f3f1ff; } .sm-tiles .t-ok { background: #ecfdf3; } .sm-tiles .t-bad { background: #fef2f2; }
.sm-h { color: #5b4ce0; font-weight: 600; }
.sm-table th { color: #6b7280; font-weight: 600; font-size: .85rem; }
.rate-good, .text-success-real { color: #16a34a !important; } .rate-mid, .text-warning-real { color: #d97706 !important; } .rate-bad { color: #ef4444; } .rate-none { color: #9ca3af; }
.old-summary { display: flex; flex-wrap: wrap; gap: .35rem; } .old-summary .badge { font-size: .8rem; font-weight: 500; }
.bg-grey { background: #76797e !important; color: #fff; }
.courier-said { font-size: .72rem; color: #5b4ce0; margin-top: .3rem; line-height: 1.2; } .courier-said span { color: #9aa0a6; }

/* ---- Barcode page ---- */
.bc-last { border-radius: 8px; padding: .8rem 1rem; border: 2px solid; }
.bc-last.ok { border-color: #16a34a; background: #ecfdf3; } .bc-last.bad { border-color: #ef4444; background: #fef2f2; }
.bc-camera video { width: 100%; max-width: 420px; border-radius: 8px; background: #000; }
.copy-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #1f2a30; color: #fff; padding: .6rem 1rem; border-radius: 6px; font-size: .875rem; opacity: 0; pointer-events: none; transition: all .2s; z-index: 2000; }
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn-icon-delete { display: block; margin: .35rem auto 0; color: #ed4343; font-size: 1.1rem; padding: 0 .25rem; background: none; border: 0; cursor: pointer; }
.btn-icon-delete:hover { color: #c92f2f; }
.copy-phone { background: none; border: 0; padding: 0 .2rem; margin-left: .15rem; color: #9aa0a6; font-size: .8rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.copy-phone:hover { color: #438a7a; }
.phone-wrap { display: inline; }
/* Narrow laptops: let the status button and courier line wrap so the order table still fits (no sideways scroll). */
@media (max-width: 1340px) {
    .orders-table .dropdown > .btn.dropdown-toggle { white-space: normal !important; max-width: 110px; }
    .orders-table .courier-line { flex-wrap: wrap; }
}
/* Courier line badges */
.q-badge { font-weight: 500; font-size: .7rem; } .q-wait { background: #eef1f4; color: #495057; } .q-check { background: #febd49; color: #212529; } .q-fail { background: #ed4343; }

/* Zebra rows like DokanAI (white / light grey), ticked row tinted; whole first cell is the tick area. */
.dt-like > tbody > tr:nth-of-type(odd) > * { --bs-table-bg: #fff; }
.dt-like > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: #eef0f3; }
.dt-like > tbody > tr.row-picked > * { --bs-table-bg-type: #e3f0ed; }
.dt-like > tbody > tr > td.pick-cell { cursor: pointer; vertical-align: middle; text-align: center; }

/* Order form: success rate under Customer Phone */
.phone-score { margin-top: .4rem; padding: .45rem .6rem; border: 1px solid #e3e6e9; border-radius: 6px; background: #f8faf9; font-size: .85rem; }
.phone-score .ps-main { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.phone-score .ps-rate { font-weight: 700; padding: .05rem .5rem; border-radius: 999px; color: #fff; background: #9aa0a6; }
.phone-score .ps-rate.tone-good { background: #1f9d55; } .phone-score .ps-rate.tone-mid { background: #f0932b; } .phone-score .ps-rate.tone-bad { background: #e3342f; }
.phone-score .ps-sub { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .25rem; font-size: .78rem; }
.phone-score .ps-courier { color: #444; }
.phone-score .ps-ok { color: #1f9d55; } .phone-score .ps-bad { color: #e3342f; }