:root {
    --bg: #eef8fb;
    --surface: #ffffff;
    --surface-soft: #f3fbff;
    --text: #18221a;
    --muted: #667066;
    --line: #d7e9ee;
    --brand: #2f9e44;
    --brand-dark: #1f7a35;
    --sky: #19a7ce;
    --sky-dark: #087da0;
    --accent: #0ea5c6;
    --danger: #b42318;
    --success: #11824b;
    --shadow: 0 12px 30px rgba(25, 45, 31, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 248px;
    background: linear-gradient(180deg, #0793bd 0%, #1f7a35 100%);
    color: #fff;
    padding: 18px 14px;
    overflow-y: auto;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.brand {
    font-size: 20px;
    font-weight: 800;
    margin: 2px 8px 18px;
    letter-spacing: .2px;
}
.sidebar nav { display: grid; gap: 4px; flex: 1; align-content: start; }
.sidebar a {
    display: block;
    color: #f1fbff;
    padding: 12px 12px;
    border-radius: 7px;
    font-weight: 700;
}
.sidebar a:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.sidebar-user {
    margin-top: 18px;
    padding: 14px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    color: #fff;
}
.sidebar-user strong,
.sidebar-user span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sidebar-user strong { font-size: 14px; }
.sidebar-user span { margin-top: 3px; font-size: 12px; opacity: .82; }
.sidebar-user a {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    color: #fff;
    font-size: 13px;
}
.sidebar-user a:hover { background: transparent; text-decoration: underline; }

.main { margin-left: 248px; min-height: 100vh; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.user-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }

.content { padding: 24px; max-width: 1500px; }
.report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}
.report-hero > div,
.report-total {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
}
.report-hero h2 { margin: 0 0 6px; font-size: 28px; }
.report-total span,
.report-total small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}
.report-total strong {
    display: block;
    margin: 8px 0;
    font-size: 30px;
    line-height: 1;
}
.report-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
.report-filter label {
    display: grid;
    gap: 5px;
    color: var(--text);
    font-weight: 800;
}
.report-filter input,
.report-filter select {
    min-height: 42px;
}
.reports-overview { margin-top: 18px; }
.report-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.report-card {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow);
}
.report-card:hover { text-decoration: none; transform: translateY(-1px); }
.report-card strong { font-size: 17px; }
.report-card span { color: var(--muted); font-size: 13px; }
.report-card.purple { border-top: 4px solid #6d5dfc; }
.report-card.blue { border-top: 4px solid #2563eb; }
.report-card.orange { border-top: 4px solid #f97316; }
.report-card.green-card { border-top: 4px solid var(--brand); }
.report-card.sky-card { border-top: 4px solid var(--sky); }
.report-card.slate-card { border-top: 4px solid #64748b; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px; }
.employees-content { max-width: 1380px; }
.employee-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
.employee-hero > div:first-child,
.employee-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.employee-hero > div:first-child {
    padding: 20px;
    border-left: 5px solid var(--sky);
}
.employee-hero h1 { margin: 0 0 6px; font-size: 28px; }
.employee-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--line);
}
.employee-summary div {
    min-width: 0;
    padding: 16px 12px;
    background: #fff;
}
.employee-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.employee-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    line-height: 1;
}
.employee-layout { display: grid; grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.employee-form, .employee-team-panel { min-width: 0; }
.panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.panel-title h2 { margin: 0; }
.employee-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.employee-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.employee-team-panel .table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
}
.employee-team-panel table {
    min-width: 860px;
}
.employee-team-panel th,
.employee-team-panel td {
    padding: 14px;
}
.employee-form-actions,
.employee-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.employee-row-actions form {
    margin: 0;
}
.employee-row-actions .button,
.employee-row-actions .btn {
    min-height: 34px;
    padding: 8px 11px;
    font-size: 12px;
}
.mobile-employee-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e4f1f4;
}
.dashboard-report-page {
    display: grid;
    gap: 18px;
}
.dashboard-report-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    gap: 18px;
    align-items: stretch;
}
.dashboard-report-hero > div:first-child,
.dashboard-mini-stats {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.dashboard-report-hero > div:first-child {
    padding: 22px;
    border-left: 5px solid var(--sky);
}
.dashboard-report-hero h2 {
    margin: 0 0 8px;
    font-size: 30px;
}
.dashboard-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--line);
    gap: 1px;
}
.dashboard-mini-stats div {
    min-width: 0;
    padding: 18px 14px;
    background: #fff;
}
.dashboard-mini-stats span,
.compact-total span,
.compact-total small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dashboard-mini-stats strong,
.compact-total strong {
    display: block;
    margin-top: 7px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.1;
}
.dashboard-report-section {
    padding: 22px;
}
.compact-total {
    min-width: 190px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f3fbff;
    border: 1px solid #d6edf4;
}
.dashboard-report-filter,
.dashboard-work-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfd;
}
.dashboard-report-filter-small {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
}
.dashboard-employee-report-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}
.dashboard-work-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 16px 0;
}
.dashboard-work-form .btn {
    justify-self: start;
}
.employee-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.employee-filter .btn {
    grid-column: 1 / -1;
}
.report-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.fields { padding: 0; }

.card, .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.card { min-height: 112px; border-top: 4px solid var(--sky); }
.card:nth-child(even) { border-top-color: var(--brand); }
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
    border-color: rgba(25,167,206,.45);
    box-shadow: 0 16px 34px rgba(25, 45, 31, .12);
}
.stat-link:focus-visible {
    outline: 3px solid rgba(25,167,206,.35);
    outline-offset: 3px;
}
.stat-link small {
    display: block;
    margin-top: 8px;
    color: var(--sky-dark);
    font-size: 12px;
    font-weight: 800;
}
.stat-link.green small { color: var(--brand-dark); }
.stat-card::after {
    content: '';
    position: absolute;
    right: -18px;
    top: -18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(25,167,206,.10);
}
.stat-card.green::after { background: rgba(47,158,68,.12); }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.stats-grid.compact .stat-card {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 74px;
}
.stats-grid.compact .stat-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.stats-grid.compact .stat-card strong {
    display: block;
    font-size: 24px;
    margin-top: 6px;
}
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.section-title h3 { margin: 0; }
.section-title a {
    font-size: 13px;
    font-weight: 800;
    color: var(--sky-dark);
}
.card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.card strong { display: block; font-size: 30px; margin-top: 8px; letter-spacing: .2px; }
.panel { margin-bottom: 18px; }
.panel h2, .panel h3, .form h2 { margin-top: 0; }

.table-scroll, .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table, .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 720px;
}
.table th, .table td, .table-wrap th, .table-wrap td {
    border-bottom: 1px solid var(--line);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}
.table th, .table-wrap th {
    background: var(--surface-soft);
    color: #334033;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.order-table th, .order-table td { white-space: nowrap; }
.order-table td:nth-child(3) { white-space: normal; min-width: 190px; }
.order-table td:nth-child(7) { white-space: normal; min-width: 150px; }

.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.manual-order-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.full { grid-column: 1 / -1; }
label { display: block; font-weight: 800; margin-bottom: 6px; color: #2d382d; }
input, select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 11px;
    border: 1px solid #cbd6c7;
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(31,111,67,.16);
    border-color: var(--brand);
}

.btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}
.btn:hover, .button:hover { background: var(--brand-dark); text-decoration: none; }
.btn.secondary { background: #607068; }
.btn.success { background: var(--success); }
.btn.danger { background: var(--danger); }
.button.ghost, .ghost { background: #fff; color: var(--sky-dark); border: 1px solid #b8dde7; }

.filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; }
.whatsapp-paste-box {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #bfe3eb;
    border-radius: 8px;
    background: #f4fbfd;
}
.whatsapp-paste-box textarea {
    min-height: 150px;
}
.paste-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.product-preview-wrap h3 {
    margin: 0 0 10px;
}
.product-preview-table {
    min-width: 0;
}
.product-preview-table td,
.product-preview-table th {
    white-space: normal;
}
.badge, .pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.badge { background: #e7f8ee; color: var(--brand-dark); border: 1px solid #c6efce; }
.pill.good { background: #dcfce7; color: #166534; }
.muted-pill { background: #f1f5f9; color: #475569; }
.pill.access-all { background: #eaf9ff; color: var(--sky-dark); }
.pill.access-whatsapp { background: #e7f8ee; color: var(--brand-dark); }
.pill.access-website { background: #eef2ff; color: #3740a5; }

.message, .notice {
    padding: 12px 14px;
    border-radius: 7px;
    margin-bottom: 14px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.notice { margin: 18px 24px 0; }
.notice.error { background: #fff1f2; color: #be123c; border-color: #fecdd3; }

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
    background: radial-gradient(circle at 20% 20%, rgba(25,167,206,.18), transparent 34%), radial-gradient(circle at 80% 10%, rgba(47,158,68,.16), transparent 30%), var(--bg);
}
.login {
    width: min(420px, 100%);
    background: #fff;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 20px 42px rgba(25,45,31,.14);
}
.login h2 { margin: 0 0 18px; font-size: 26px; }
.login p { color: var(--muted); margin-bottom: 0; }

.log-item { border-top: 1px solid var(--line); padding: 12px 0; }
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 0;
}
.page-head h1 { margin: 0; font-size: 26px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.toolbar { display: flex; gap: 10px; align-items: center; padding: 24px; }
.toolbar form, form.toolbar { width: 100%; }
.toolbar input { max-width: 460px; }
.wide { margin: 24px; }
.small-cell { max-width: 340px; }
.muted { color: var(--muted); font-weight: 400; }
.empty { text-align: center; color: var(--muted); padding: 24px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 800; }
.check input { width: auto; min-height: auto; }
.order-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.bulk-delete-form { margin: 0; }
.bulk-action-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fdff;
}
.bulk-action-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-selected-count {
    color: var(--sky-dark);
    font-weight: 900;
    white-space: nowrap;
}
.bulk-delete-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-delete-form .btn { min-height: 42px; }
.bulk-courier-select {
    width: auto;
    min-width: 170px;
    min-height: 42px;
    border-radius: 7px;
}
.packing-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.packing-total-card,
.packing-courier-card {
    display: block;
    min-height: 78px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
}
.packing-total-card {
    border-left: 5px solid var(--brand);
}
.packing-courier-card {
    border-left: 5px solid var(--sky);
}
.packing-courier-card.active,
.packing-courier-card:hover {
    background: #eaf9ff;
    text-decoration: none;
    border-color: #b8dde7;
}
.packing-total-card span,
.packing-courier-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.packing-total-card strong,
.packing-courier-card strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    line-height: 1;
}
.packing-search-panel {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) 48px;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.packing-search-button {
    position: relative;
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 999px;
    background: var(--sky-dark);
    box-shadow: none;
}
.packing-search-button::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 13px;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 50%;
}
.packing-search-button::after {
    content: '';
    position: absolute;
    left: 28px;
    top: 29px;
    width: 10px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(45deg);
    transform-origin: left center;
}
.packing-search-button:hover {
    background: var(--sky);
}
.dispatched-filter-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(220px, 1.4fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.dispatched-filter-panel .btn {
    min-height: 44px;
}
.simple-search-panel {
    grid-template-columns: minmax(220px, 1fr) 48px;
}
.order-select-visible {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.order-select-visible input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--brand);
}
.order-select,
.order-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.order-select input,
.order-select-all input,
.order-table input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    accent-color: var(--brand);
}
.orders-filter-toggle-panel summary { display: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions a { font-weight: 800; }
.order-source-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.source-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 900;
    text-decoration: none;
}
.source-tab.active,
.source-tab:hover {
    color: #fff;
    text-decoration: none;
}
.source-tab.whatsapp.active,
.source-tab.whatsapp:hover { background: var(--brand); border-color: var(--brand); }
.source-tab.website.active,
.source-tab.website:hover { background: var(--sky-dark); border-color: var(--sky-dark); }
.source-whatsapp { border-left-color: var(--brand) !important; }
.source-website { border-left-color: var(--sky) !important; }
.order-employee-mini {
    margin-left: auto;
    color: rgba(24, 34, 26, .42);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: right;
}
.order-employee-mini.table-mini {
    display: block;
    margin-top: 4px;
}
.special-note-inline {
    display: inline-block;
    margin-top: 4px;
    color: var(--brand-dark);
    font-weight: 800;
}
.mobile-order-note {
    border-top: 1px solid #edf5f7;
    padding: 8px 0;
    color: var(--brand-dark);
}
.mobile-order-note small {
    display: block;
    color: #60757b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.compact-dispatch-table td {
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
}
.compact-dispatch-table .quick-status-form select {
    min-width: 140px;
}
.order-row-tools {
    align-items: center;
}
.tick-action-form {
    margin: 0;
}
.tick-action {
    width: 42px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    background: var(--brand);
    font-size: 18px;
    line-height: 1;
}
.tick-action:hover { background: var(--brand-dark); }
.row-menu {
    position: relative;
    display: inline-block;
}
.row-menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 38px;
    border-radius: 999px;
    background: #eaf9ff;
    color: var(--sky-dark);
    font-weight: 900;
    cursor: pointer;
    letter-spacing: 1px;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 190px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(25, 45, 31, .16);
}
.row-menu a,
.row-menu button {
    width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    border-radius: 7px;
    padding: 8px 10px;
    background: #fff;
    color: var(--text);
    box-shadow: none;
    text-align: left;
}
.row-menu a:hover,
.row-menu button:hover {
    background: var(--surface-soft);
    text-decoration: none;
}
.row-menu form { margin: 0; }
.row-menu .menu-delete { color: var(--danger); }
.order-table td[data-label="Product"] {
    white-space: normal;
    min-width: 240px;
    max-width: 420px;
}
.quick-status-form {
    min-width: 150px;
}
.quick-status-form select {
    min-height: 34px;
    padding: 6px 9px;
    border-color: #bfe3cb;
    border-radius: 999px;
    background: #e7f8ee;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
}
.quick-courier-form select {
    background: #eaf9ff;
    color: var(--sky-dark);
    border-color: #b8dde7;
}
.courier-verify-select {
    width: 100%;
    min-width: 150px;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid #b8dde7;
    background: #eaf9ff;
    color: var(--sky-dark);
    font-weight: 900;
    padding: 8px 14px;
}
.mobile-quick-status {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid #edf5f7;
}
.mobile-quick-status label {
    margin: 0;
    color: #60757b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.pagination a { min-width: 36px; text-align: center; padding: 8px 10px; border: 1px solid #cbd6c7; border-radius: 7px; background: #fff; font-weight: 800; }
.pagination a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.mobile-order-list { display: none; }
.mobile-customer-list { display: none; }
.dashboard-mobile-list,
.dashboard-order-list { display: none; }
.mobile-employee-list { display: none; }
.sync-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }
.sync-card-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.sync-card-form strong { font-size: 16px; }
.sync-primary-card {
    border-color: rgba(47,158,68,.45);
    background: linear-gradient(180deg, #f2fff6 0%, #f4fbfd 100%);
}
.diagnostic-list { display: grid; gap: 7px; margin: 8px 0 16px; }
.diagnostic-list code { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f7fcfd; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.website-order-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); gap: 18px; }
.website-order-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.website-order-summary h2 { margin: 0 0 8px; }
.website-product-list { display: grid; gap: 12px; }
.website-product-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 120px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.website-product-image { width: 96px; min-height: 76px; display: grid; place-items: center; border-radius: 8px; background: #f4fbfd; color: var(--muted); font-size: 12px; }
.website-product-image img { max-width: 86px; max-height: 70px; object-fit: contain; }
.website-product-row strong, .website-product-row span { display: block; }
.website-product-row span { margin-top: 4px; color: var(--muted); }
.website-product-row b { text-align: right; }
.order-product-preview { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; }
.order-product-preview.compact { min-width: 220px; }
.order-product-thumb { width: 54px; height: 50px; display: grid; place-items: center; border-radius: 8px; background: #f4fbfd; color: var(--muted); font-size: 10px; text-align: center; overflow: hidden; }
.order-product-thumb img { max-width: 48px; max-height: 44px; object-fit: contain; }
.order-product-preview b, .order-product-preview span { display: block; min-width: 0; overflow-wrap: anywhere; }
.order-product-preview b { font-size: 14px; line-height: 1.25; color: var(--text); }
.order-product-preview span { margin-top: 3px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.website-total-row { display: flex; justify-content: flex-end; gap: 40px; padding-top: 16px; font-size: 16px; }
.website-customer-info p { margin: 0 0 10px; }
.sales-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.sales-card {
    display: block;
    min-height: 150px;
    color: inherit;
    text-decoration: none;
    border-top: 4px solid var(--brand);
    transition: transform .16s ease, box-shadow .16s ease;
}
.sales-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(25, 45, 31, .12);
}
.sales-card span,
.sales-card small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}
.sales-card strong {
    display: block;
    margin: 12px 0 8px;
    color: var(--text);
    font-size: 30px;
    line-height: 1.1;
}
.sales-card-today,
.sales-card-month { border-top-color: var(--sky); }
.sales-card-week,
.sales-card-total { border-top-color: var(--brand); }
.dashboard-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .78fr) minmax(300px, .78fr);
    gap: 16px;
    margin-top: 18px;
}
.chart-panel {
    min-width: 0;
    overflow: hidden;
}
.chart-panel .panel-title {
    margin-bottom: 12px;
}
.chart-panel .panel-title strong {
    color: var(--brand-dark);
    font-size: 18px;
    white-space: nowrap;
}
.sales-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 232px;
    padding: 14px 4px 0;
    perspective: 900px;
}
.sales-bar-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    text-align: center;
}
.sales-bar-track {
    position: relative;
    height: 150px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5fbfd 0%, #e3f3f7 100%);
    box-shadow: inset 0 0 0 1px rgba(8,125,160,.08);
    overflow: hidden;
}
.sales-bar-track span {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--sky) 0%, var(--brand) 100%);
    box-shadow: 8px 6px 14px rgba(25, 167, 206, .22);
    transform: skewY(-3deg);
}
.sales-bar-item small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.sales-bar-item b {
    color: var(--text);
    font-size: 11px;
    overflow-wrap: anywhere;
}
.donut-wrap {
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 4px 0 2px;
}
.donut-chart {
    --whatsapp: 50%;
    width: min(190px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--brand) 0 var(--whatsapp), var(--sky) var(--whatsapp) 100%);
    box-shadow: 0 18px 32px rgba(25,45,31,.14), inset -12px -14px 24px rgba(0,0,0,.08);
    position: relative;
}
.donut-center {
    position: relative;
    z-index: 1;
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 8px 18px rgba(25,45,31,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    line-height: 1.05;
}
.donut-center span {
    font-size: clamp(18px, 2.6vw, 28px);
    font-weight: 900;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.donut-center small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.chart-legend {
    display: grid;
    gap: 9px;
    width: 100%;
}
.chart-legend div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f4fbfd;
    font-weight: 800;
}
.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: auto;
}
.legend-green { background: var(--brand); }
.legend-sky { background: var(--sky); }
.status-chart-list {
    display: grid;
    gap: 12px;
}
.status-chart-row {
    display: grid;
    grid-template-columns: minmax(112px, .9fr) minmax(0, 1.35fr) 38px;
    gap: 10px;
    align-items: center;
}
.status-chart-row span {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.status-chart-row div {
    height: 12px;
    border-radius: 999px;
    background: #eaf5f8;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(8,125,160,.06);
}
.status-chart-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sky), var(--brand));
}
.status-chart-row b {
    text-align: right;
    color: var(--brand-dark);
}

@media (max-width: 1200px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sales-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-chart-grid { grid-template-columns: 1fr 1fr; }
    .chart-panel-wide { grid-column: 1 / -1; }
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filters .btn { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .sidebar {
        position: sticky;
        top: 0;
        width: auto;
        bottom: auto;
        padding: 12px;
    }
    .brand { margin: 0 0 10px; }
    .sidebar nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        padding: 10px 12px;
    }
    .main { margin-left: 0; }
    .topbar { position: static; padding: 14px 16px; }
    .content { padding: 16px; }
    .grid, .grid.two, .form-grid, .filters { grid-template-columns: 1fr; }
    .sales-dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
    .dashboard-chart-grid { grid-template-columns: 1fr; gap: 12px; }
    .chart-panel-wide { grid-column: auto; }
    .grid.two { padding: 16px; }
    .page-head, .toolbar { display: block; padding: 16px 16px 0; }
    form.toolbar { display: grid; gap: 8px; padding-bottom: 12px; }
    .toolbar input { max-width: none; }
    .toolbar > * { margin-top: 8px; }
    .wide { margin: 16px; }
    .card, .panel { padding: 15px; }
    .mobile-card-table, .table-wrap table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 12px;
        background: transparent;
    }
    .mobile-card-table thead, .table-wrap thead { display: none; }
    .mobile-card-table > tbody > tr:first-child,
    .mobile-card-table > tr:first-child { display: none; }
    .mobile-card-table tr, .table-wrap tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 8px 20px rgba(25, 45, 31, .07);
    }
    .mobile-card-table td, .table-wrap tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #edf4f6;
        padding: 10px 0;
        font-size: 13px;
        white-space: normal;
        text-align: right;
    }
    .mobile-card-table td:last-child, .table-wrap tbody td:last-child { border-bottom: 0; }
    .mobile-card-table td::before, .table-wrap tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: var(--muted);
        font-weight: 800;
        text-align: left;
    }
    .mobile-card-table .empty, .table-wrap .empty {
        display: block;
        text-align: center;
    }
    .mobile-card-table .empty::before, .table-wrap .empty::before { content: ''; display: none; }
    .table th, .table td, .table-wrap th, .table-wrap td { padding: 10px; font-size: 13px; }
    .order-actions { align-items: stretch; }
    .order-actions .btn, .order-actions .button { flex: 1 1 auto; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    .topbar { display: block; }
    .topbar h1 { font-size: 19px; margin-bottom: 6px; }
    .user-meta { white-space: normal; }
    .sales-bars {
        gap: 6px;
        min-height: 180px;
    }
    .sales-bar-track {
        height: 104px;
        border-radius: 7px;
    }
    .sales-bar-item b {
        display: none;
    }
    .donut-chart {
        width: 150px;
    }
    .donut-center {
        width: 56%;
    }
    .status-chart-row {
        grid-template-columns: minmax(86px, .9fr) minmax(0, 1.2fr) 28px;
        gap: 8px;
    }
    .content { padding: 12px; }
    .grid { gap: 10px; }
    .card { min-height: auto; padding: 14px; }
    .card strong { font-size: 25px; }
    .panel { border-radius: 7px; margin-bottom: 12px; }
    .btn, .button { width: 100%; margin-bottom: 6px; }
    .toolbar .button, .toolbar button { width: 100%; }
    .actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .login { padding: 22px; }
    .login h2 { font-size: 22px; }
    input, select, textarea { font-size: 16px; }
    .page-head h1 { font-size: 22px; }
    .pagination a { flex: 1 0 42px; }
}

/* Mobile CRM refinement: card-first records, stronger touch targets, compact menu */
button {
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}
button:hover { background: var(--brand-dark); }

.actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    background: var(--sky-dark);
    text-decoration: none;
}
.actions a:nth-child(2) { background: var(--brand); }
.actions a:nth-child(3) { background: var(--accent); }

@media (max-width: 760px) {
    body { background: #f1f8fb; }
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 30;
        width: 100%;
        padding: 10px 10px 12px;
        background: linear-gradient(135deg, #0ea5c6 0%, #2f9e44 100%);
        box-shadow: 0 8px 20px rgba(8, 125, 160, .16);
    }
    .brand {
        margin: 0 0 8px;
        font-size: 17px;
        line-height: 1.2;
    }
    .sidebar nav {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .sidebar nav::-webkit-scrollbar { display: none; }
    .sidebar a {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.15);
        color: #fff;
        font-size: 12px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    }
    .sidebar-user {
        width: fit-content;
        max-width: calc(100% - 8px);
        margin: 8px 0 0 auto;
        padding: 7px 9px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 7px;
        background: rgba(255,255,255,.16);
    }
    .sidebar-user strong {
        font-size: 11px;
        line-height: 1;
    }
    .sidebar-user span {
        display: none;
    }
    .sidebar-user a {
        min-height: 0;
        margin: 0;
        padding: 5px 7px;
        font-size: 10px;
        background: rgba(255,255,255,.18);
    }
    .main { margin-left: 0; }
    .topbar {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        background: #fff;
        border-bottom: 1px solid #d7e9ee;
    }
    .topbar h1 {
        font-size: 18px;
        margin: 0;
    }
    .user-meta {
        margin-left: auto;
        font-size: 12px;
        text-align: right;
        display: none;
    }
    .content, .page-head, .toolbar { padding-left: 10px; padding-right: 10px; }
    .content { padding-top: 12px; }
    .page-head {
        background: #fff;
        border-bottom: 1px solid #e0eef2;
        padding-top: 14px;
        padding-bottom: 12px;
    }
    .page-head h1 { font-size: 20px; }
    .eyebrow { font-size: 11px; }
    .panel {
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 8px 22px rgba(8, 125, 160, .08);
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .card {
        min-height: 78px;
        padding: 12px;
        border-radius: 8px;
    }
    .card span { font-size: 11px; }
    .card strong { font-size: 24px; margin-top: 4px; }
    .dashboard-panel {
        padding: 12px;
    }
    .section-title {
        margin-bottom: 6px;
    }
    .section-title h3 {
        font-size: 16px;
    }
    .section-title a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eaf9ff;
    }
    .filters, .form-grid, .grid.two {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 0;
    }
    .employee-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .employee-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }
    .employee-hero > div:first-child { padding: 14px; }
    .employee-hero h1 { font-size: 22px; }
    .employee-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-summary div { padding: 12px; }
    .employee-summary strong { font-size: 22px; }
    .employee-form-grid { grid-template-columns: 1fr; gap: 10px; }
    .employee-form-footer { display: grid; grid-template-columns: 1fr; }
    .panel-title { margin-bottom: 12px; }
    .manual-order-grid {
        grid-template-columns: 1fr;
    }
    .whatsapp-paste-box {
        padding: 12px;
        margin-bottom: 14px;
    }
    .whatsapp-paste-box textarea {
        min-height: 130px;
    }
    .paste-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    label { font-size: 12px; margin-bottom: 5px; }
    input, select, textarea {
        min-height: 42px;
        border-radius: 7px;
        font-size: 14px;
        background: #fff;
    }
    textarea { min-height: 86px; }
    .btn, .button, button {
        width: 100%;
        min-height: 42px;
        border-radius: 7px;
        font-size: 13px;
        box-shadow: 0 6px 14px rgba(47, 158, 68, .16);
    }
    .button.ghost, .ghost {
        color: var(--sky-dark);
        background: #eefaff;
    }
    .order-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin: 10px 0 12px;
    }
    .bulk-action-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }
    .bulk-action-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .bulk-selected-count {
        display: block;
        text-align: center;
        padding: 7px 10px;
        border-radius: 7px;
        background: #eaf9ff;
    }
    .bulk-delete-form {
        display: grid;
        grid-template-columns: 1fr;
    }
    .bulk-courier-select {
        width: 100%;
    }
    .order-actions .muted {
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 4px 0;
    }
    .order-source-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .source-tab {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }
    .packing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .packing-total-card,
    .packing-courier-card {
        min-height: 68px;
        padding: 11px;
    }
    .packing-total-card strong,
    .packing-courier-card strong {
        font-size: 23px;
    }
    .packing-search-panel {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        padding: 10px;
    }
    .simple-search-panel {
        grid-template-columns: minmax(0, 1fr) 44px;
    }
    .packing-search-panel select {
        grid-column: 1 / -1;
        order: 3;
    }
    .packing-search-button {
        width: 44px;
        min-height: 44px;
    }
    .dispatched-filter-panel {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 10px;
    }
    .table-scroll, .table-wrap {
        overflow: visible;
    }
    .table, .table-wrap table, .mobile-card-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }
    .table thead, .table-wrap thead { display: none; }
    .table tbody, .table-wrap tbody { display: grid; gap: 12px; }
    .table tr, .table-wrap tbody tr {
        display: block;
        padding: 10px 11px;
        border: 1px solid #d9edf1;
        border-left: 4px solid var(--sky);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(8, 125, 160, .08);
    }
    .table tr:nth-child(even), .table-wrap tbody tr:nth-child(even) {
        border-left-color: var(--brand);
    }
    .table td, .table-wrap tbody td {
        display: grid;
        grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        width: 100%;
        padding: 6px 0;
        border: 0;
        border-bottom: 1px solid #edf5f7;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        line-height: 1.28;
    }
    .table td:last-child, .table-wrap tbody td:last-child { border-bottom: 0; }
    .table td::before, .table-wrap tbody td::before {
        content: attr(data-label);
        color: #60757b;
        font-weight: 800;
        text-align: left;
        font-size: 12px;
        line-height: 1.2;
    }
    .table td[data-label="Order"] {
        display: block;
        padding-bottom: 8px;
    }
    .table td[data-label="Order"]::before {
        display: block;
        margin-bottom: 2px;
    }
    .table td[data-label="Order"] strong {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 4px 9px;
        border-radius: 999px;
        background: #eaf9ff;
        color: var(--sky-dark);
        font-size: 15px;
    }
    .table td[data-label="Status"] .badge {
        min-height: 24px;
        padding: 4px 9px;
        font-size: 12px;
        width: auto;
        max-width: max-content;
    }
    .table .empty, .table-wrap .empty {
        display: block;
        text-align: center;
        padding: 18px 0;
    }
    .table .empty::before, .table-wrap .empty::before { display: none; content: ''; }
    .table td.actions {
        display: block;
        padding-top: 10px;
    }
    .table td.actions::before {
        display: block;
        margin-bottom: 7px;
    }
    .actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .actions a {
        width: 100%;
        min-height: 34px;
        border-radius: 7px;
        font-size: 12px;
        padding: 7px 6px;
    }
    .pagination {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }
    .pagination a {
        min-height: 38px;
        border-radius: 7px;
    }
    .toolbar {
        display: grid;
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .toolbar input { max-width: none; }
    .notice { margin: 12px 10px 0; }
    .small-cell { max-width: none; }
    .sync-actions { grid-template-columns: 1fr; }
    .sync-card-form { padding: 12px; }
    .website-order-grid { grid-template-columns: 1fr; gap: 12px; }
    .website-order-summary { display: block; }
    .website-product-row { grid-template-columns: 72px minmax(0, 1fr); }
    .website-product-image { width: 72px; min-height: 62px; }
    .website-product-image img { max-width: 64px; max-height: 56px; }
    .website-product-row b { grid-column: 2; text-align: left; color: var(--brand-dark); }
    .website-total-row { justify-content: space-between; gap: 12px; }
    .desktop-order-table { display: none; }
    .mobile-order-list {
        display: grid;
        gap: 12px;
    }
    .mobile-order-card {
        width: 100%;
        border: 1px solid #d8edf2;
        border-left: 5px solid var(--brand);
        border-radius: 10px;
        background: #fff;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(8,125,160,.08);
    }
    .mobile-order-card:nth-child(even) {
        border-left-color: var(--sky);
    }
    .mobile-order-card.source-whatsapp,
    .table tr.source-whatsapp {
        border-left-color: var(--brand) !important;
    }
    .mobile-order-card.source-website,
    .table tr.source-website {
        border-left-color: var(--sky) !important;
    }
    .mobile-order-head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid #edf5f7;
    }
    .mobile-order-head .order-select {
        min-width: 0;
    }
    .mobile-order-head .order-select strong {
        max-width: 130px;
    }
    .mobile-order-head strong {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #eaf9ff;
        color: var(--sky-dark);
        font-size: 15px;
    }
    .mobile-order-head .order-employee-mini {
        position: absolute;
        right: 0;
        top: -2px;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .compact-dispatch-list .mobile-order-card {
        padding: 10px;
    }
    .compact-dispatch-list .mobile-order-head {
        padding-bottom: 7px;
    }
    .compact-dispatch-list .mobile-order-customer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 8px 0;
    }
    .compact-dispatch-list .mobile-order-customer a {
        margin-top: 0;
        font-size: 12px;
    }
    .compact-dispatch-list .mobile-order-products {
        padding: 7px 0;
    }
    .compact-dispatch-list .mobile-quick-status {
        grid-template-columns: 62px minmax(0, 1fr);
        padding: 6px 0;
    }
    .compact-dispatch-list .mobile-order-actions {
        padding-top: 7px;
    }
    .mobile-order-customer {
        padding: 10px 0;
        border-bottom: 1px solid #edf5f7;
    }
    .mobile-order-customer span {
        display: block;
        font-weight: 800;
        font-size: 15px;
        color: var(--text);
    }
    .mobile-order-customer a {
        display: inline-block;
        margin-top: 2px;
        color: var(--sky-dark);
        font-weight: 800;
    }
    .mobile-order-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 0;
    }
    .mobile-order-meta div {
        border-radius: 8px;
        background: #f4fbfd;
        padding: 8px;
        min-width: 0;
    }
    .mobile-order-meta small {
        display: block;
        color: #60757b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mobile-order-meta b {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        color: var(--text);
        overflow-wrap: anywhere;
    }
    .mobile-order-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 10px;
    }
    .mobile-order-actions.order-row-tools {
        display: flex;
        grid-template-columns: none;
    }
    .mobile-order-actions .tick-action-form {
        flex: 0 0 auto;
    }
    .mobile-order-actions .tick-action,
    .mobile-order-actions .row-menu summary {
        width: 42px;
        min-height: 38px;
        margin: 0;
        box-shadow: none;
    }
    .mobile-order-actions .row-menu > div {
        right: 0;
        min-width: 215px;
    }
    .mobile-order-actions .row-menu a,
    .mobile-order-actions .row-menu button {
        color: var(--text);
        background: #fff;
        font-size: 13px;
        min-height: 36px;
        justify-content: flex-start;
        box-shadow: none;
    }
    .mobile-order-actions .row-menu .menu-delete {
        color: var(--danger);
    }
    .mobile-order-actions.legacy-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .mobile-order-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        border-radius: 8px;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
    }
    .mobile-order-actions .open { background: var(--sky-dark); }
    .mobile-order-actions .edit { background: var(--brand); }
    .mobile-order-actions .bill { background: var(--accent); }
    .mobile-order-actions .bill { grid-column: 1 / -1; }
    .mobile-order-actions a:only-child { grid-column: 1 / -1; }
    .mobile-order-actions .row-menu a,
    .mobile-order-actions .row-menu button {
        display: flex;
        width: 100%;
        color: var(--text);
        background: #fff;
        border-radius: 7px;
        font-size: 13px;
        justify-content: flex-start;
        box-shadow: none;
    }
    .mobile-order-actions .row-menu .menu-delete {
        color: var(--danger);
    }
    .mobile-order-products {
        border-top: 1px solid #edf5f7;
        padding: 9px 0;
    }
    .mobile-order-products small {
        display: block;
        color: #60757b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 4px;
    }
    .mobile-order-products span {
        display: block;
        color: var(--text);
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .desktop-customer-table { display: none; }
    .mobile-customer-list {
        display: grid;
        gap: 12px;
    }
    .mobile-customer-card {
        width: 100%;
        border: 1px solid #d8edf2;
        border-left: 5px solid var(--sky);
        border-radius: 10px;
        background: #fff;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(8,125,160,.08);
    }
    .mobile-customer-card:nth-child(even) {
        border-left-color: var(--brand);
    }
    .mobile-customer-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid #edf5f7;
    }
    .mobile-customer-head strong {
        display: block;
        font-size: 15px;
        color: var(--text);
    }
    .mobile-customer-head span {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .mobile-customer-head b {
        flex: 0 0 auto;
        border-radius: 999px;
        padding: 5px 9px;
        background: #eaf9ff;
        color: var(--sky-dark);
        font-size: 11px;
        white-space: nowrap;
    }
    .mobile-customer-contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 0;
        border-bottom: 1px solid #edf5f7;
    }
    .mobile-customer-contact a,
    .mobile-customer-contact span {
        display: block;
        border-radius: 8px;
        background: #f4fbfd;
        padding: 8px;
        color: var(--text);
        font-size: 13px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }
    .mobile-customer-contact a {
        color: var(--sky-dark);
    }
    .mobile-customer-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 0;
    }
    .mobile-customer-meta div {
        border-radius: 8px;
        background: #f4fbfd;
        padding: 8px;
    }
    .mobile-customer-meta small {
        display: block;
        color: #60757b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mobile-customer-meta b {
        display: block;
        margin-top: 3px;
        color: var(--text);
        font-size: 13px;
    }
    .mobile-customer-address {
        margin: 0;
        padding-top: 9px;
        border-top: 1px solid #edf5f7;
        color: #2d382d;
        font-size: 13px;
        line-height: 1.35;
    }
    .dashboard-panel > .table-scroll {
        display: none;
    }
    .dashboard-mobile-list,
    .dashboard-order-list {
        display: grid;
        gap: 10px;
    }
    .dashboard-mini-card,
    .dashboard-order-card {
        border: 1px solid #d8edf2;
        border-left: 5px solid var(--sky);
        border-radius: 10px;
        background: #fff;
        padding: 11px;
        box-shadow: 0 8px 20px rgba(8,125,160,.07);
    }
    .dashboard-order-card:nth-child(even),
    .dashboard-mini-card:nth-child(even) {
        border-left-color: var(--brand);
    }
    .dashboard-mini-head,
    .dashboard-order-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #edf5f7;
    }
    .dashboard-mini-head strong,
    .dashboard-order-head strong {
        color: var(--sky-dark);
        font-size: 15px;
    }
    .dashboard-mini-head span {
        border-radius: 999px;
        background: #eaf9ff;
        color: var(--sky-dark);
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 800;
    }
    .dashboard-mini-card p {
        margin: 8px 0;
        font-size: 13px;
        font-weight: 800;
    }
    .dashboard-mini-card p a {
        display: block;
        margin-top: 2px;
        color: var(--sky-dark);
    }
    .dashboard-mini-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
    }
    .dashboard-mini-foot a,
    .dashboard-order-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        border-radius: 8px;
        padding: 7px 11px;
        background: var(--sky-dark);
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
    }
    .dashboard-order-body {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        padding: 10px 0;
    }
    .dashboard-order-body div {
        min-width: 0;
        border-radius: 8px;
        background: #f4fbfd;
        padding: 8px;
    }
    .dashboard-order-body small {
        display: block;
        color: #60757b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .dashboard-order-body b {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: var(--text);
        overflow-wrap: anywhere;
    }
    .dashboard-order-open {
        width: 100%;
        background: var(--brand);
    }
    .desktop-employee-table { display: none; }
    .mobile-employee-list {
        display: grid;
        gap: 12px;
    }
    .mobile-employee-card {
        width: 100%;
        border: 1px solid #d8edf2;
        border-left: 5px solid var(--brand);
        border-radius: 10px;
        background: #fff;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(8,125,160,.08);
    }
    .mobile-employee-card:nth-child(even) {
        border-left-color: var(--sky);
    }
    .mobile-employee-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid #edf5f7;
    }
    .mobile-employee-head strong {
        display: block;
        color: var(--text);
        font-size: 15px;
    }
    .mobile-employee-head span {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .mobile-employee-head .pill {
        flex: 0 0 auto;
        font-size: 11px;
        min-height: 24px;
    }
    .mobile-employee-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding-top: 10px;
    }
    .mobile-employee-meta div {
        min-width: 0;
        border-radius: 8px;
        background: #f4fbfd;
        padding: 8px;
    }
    .mobile-employee-meta small {
        display: block;
        color: #60757b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mobile-employee-meta b {
        display: block;
        margin-top: 3px;
        color: var(--text);
        font-size: 13px;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .grid:not(.dashboard-stats) { grid-template-columns: 1fr; }
    .table td, .table-wrap tbody td {
        grid-template-columns: minmax(78px, 33%) minmax(0, 1fr);
        gap: 7px;
    }
    .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile model v2: full-width record cards with no right-side blank space */
@media (max-width: 760px) {
    .table-scroll,
    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
    .table,
    .table tbody,
    .table-wrap table,
    .table-wrap tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .table tr,
    .table-wrap tbody tr {
        width: 100%;
        margin: 0 0 12px;
    }
    .order-table td,
    .mobile-card-table td,
    .table-wrap tbody td {
        display: block;
        width: 100%;
        padding: 7px 0;
        text-align: left;
    }
    .order-table td::before,
    .mobile-card-table td::before,
    .table-wrap tbody td::before {
        display: block;
        width: 100%;
        margin-bottom: 3px;
        color: #5f747b;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .order-table td[data-label="Customer"],
    .order-table td[data-label="Date"],
    .order-table td[data-label="Total"],
    .order-table td[data-label="Source"],
    .order-table td[data-label="Courier"],
    .order-table td[data-label="Assigned"] {
        font-size: 14px;
    }
    .order-table td[data-label="Order"] strong {
        font-size: 15px;
    }
    .table td.actions,
    .order-table td.actions {
        display: block;
        width: 100%;
    }
    .actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .actions a {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .report-hero,
    .report-filter,
    .report-card-grid {
        grid-template-columns: 1fr;
    }
    .report-hero h2 {
        font-size: 22px;
    }
    .report-total strong {
        font-size: 24px;
    }
    .orders-filter-toggle-panel {
        display: block !important;
    }
    .orders-filter-panel {
        padding: 0;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .orders-filter-toggle-panel summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 46px;
        padding: 12px 14px;
        cursor: pointer;
        list-style: none;
        font-weight: 900;
        color: var(--text);
    }
    .orders-filter-toggle-panel summary::-webkit-details-marker {
        display: none;
    }
    .orders-filter-toggle-panel summary::after {
        content: '+';
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #eaf9ff;
        color: var(--sky-dark);
        font-size: 18px;
        line-height: 1;
    }
    .orders-filter-toggle-panel[open] summary::after {
        content: '-';
    }
    .orders-filter-toggle-panel summary b {
        margin-left: auto;
        color: var(--brand-dark);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .orders-filter-panel .filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        align-items: end;
        padding: 0 12px 12px;
    }
    .orders-filter-panel .filters > div:first-child,
    .orders-filter-panel .filters .btn {
        grid-column: 1 / -1;
    }
    .orders-filter-panel label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
    }
    .orders-filter-panel input,
    .orders-filter-panel select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 7px;
    }
    .orders-filter-panel input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        line-height: 1.2;
    }
    .orders-filter-panel .btn {
        min-height: 40px;
        margin-top: 2px;
    }
    .order-actions {
        gap: 8px;
    }
}

/* Mobile navigation drawer: replaces horizontal menu scrolling on phones. */
.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-menu-button,
.mobile-nav-close {
    display: none;
}
.sidebar-head {
    display: block;
}

@media (max-width: 760px) {
    body {
        overflow-x: hidden;
    }
    .mobile-nav-toggle {
        position: fixed;
        opacity: 0;
        pointer-events: none;
    }
    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 38;
        display: block;
        background: rgba(7, 24, 31, .46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .mobile-nav-toggle:checked ~ .mobile-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: min(84vw, 310px);
        height: 100dvh;
        padding: 16px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: 18px 0 42px rgba(8, 35, 45, .22);
    }
    .mobile-nav-toggle:checked ~ .sidebar {
        transform: translateX(0);
    }
    .sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
    }
    .sidebar .brand {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
    }
    .mobile-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-height: 38px;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
        color: #fff;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
    }
    .sidebar nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        overflow: visible;
        padding: 0;
    }
    .sidebar a {
        width: 100%;
        min-height: 44px;
        padding: 12px 12px;
        border-radius: 8px;
        white-space: normal;
        font-size: 14px;
    }
    .sidebar-user {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        padding: 12px;
        border-radius: 8px;
    }
    .sidebar-user strong {
        font-size: 13px;
    }
    .sidebar-user span {
        display: block;
        font-size: 11px;
    }
    .sidebar-user a {
        width: fit-content;
        min-height: 0;
        margin-top: 8px;
        padding: 0;
        font-size: 12px;
    }
    .main {
        margin-left: 0;
    }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 25;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }
    .mobile-menu-button {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 42px;
        min-height: 42px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--sky), var(--brand));
        box-shadow: 0 8px 18px rgba(8, 125, 160, .18);
        cursor: pointer;
    }
    .mobile-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #fff;
    }
    .topbar h1 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 17px;
    }
    .user-meta {
        display: block;
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        font-size: 11px;
        opacity: .7;
    }
    .dashboard-report-page {
        gap: 14px;
    }
    .dashboard-report-hero,
    .dashboard-employee-report-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dashboard-report-hero > div:first-child,
    .dashboard-report-section {
        padding: 14px;
    }
    .dashboard-report-hero h2 {
        font-size: 22px;
    }
    .dashboard-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-mini-stats div {
        padding: 13px 11px;
    }
    .dashboard-mini-stats strong,
    .compact-total strong {
        font-size: 17px;
    }
    .dashboard-report-section .panel-title {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .compact-total {
        min-width: 0;
        width: 100%;
    }
    .dashboard-report-filter,
    .dashboard-report-filter-small,
    .dashboard-work-form,
    .employee-filter {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 12px 0;
        padding: 12px;
    }
    .dashboard-work-form .btn,
    .employee-filter .btn {
        width: 100%;
    }
    .report-table {
        border: 0;
        background: transparent;
    }
}

@media (max-width: 380px) {
    .orders-filter-panel .filters {
        gap: 8px;
    }
    .orders-filter-panel input,
    .orders-filter-panel select {
        font-size: 12px;
        padding-inline: 8px;
    }
}