:root {
    --blue: #1463ff;
    --ink: #111827;
    --muted: #667085;
    --page: #fafbfc;
    --border: #e6eaf0;
    --soft-border: #edf0f4;
    --green: #16a34a;
    --amber: #f59e0b;
    --red: #ef4444;
    --purple: #8b5cf6;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--page);
    color: var(--ink);
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.top-nav {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e8ecf2;
    display: flex;
    height: 64px;
    left: 0;
    position: sticky;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100;
}

.brand-zone {
    align-items: center;
    display: flex;
    gap: 16px;
    height: 64px;
    padding: 0 18px;
    width: 240px;
}

.brand-mark,
.user-avatar {
    align-items: center;
    background: var(--blue);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}

.brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.main-nav {
    align-items: stretch;
    display: flex;
    gap: 34px;
    height: 64px;
    min-width: 0;
}

.nav-entry {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #0f1b3d;
    display: inline-flex;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 2px;
}

.nav-entry.active {
    border-bottom-color: var(--blue);
    color: var(--blue);
}

.nav-icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    display: inline-flex;
    font-size: 11px;
    height: 19px;
    justify-content: center;
    width: 19px;
}

.nav-account {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-left: auto;
    padding-right: 18px;
}

.bell-button,
.chevron-button {
    background: transparent;
    border: 0;
    color: #111827;
    position: relative;
}

.bell-shape {
    border: 2px solid #0f1b3d;
    border-radius: 9px 9px 5px 5px;
    display: block;
    height: 17px;
    width: 14px;
}

.notification-count {
    align-items: center;
    background: var(--red);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    position: absolute;
    right: -5px;
    top: -7px;
    width: 18px;
}

.user-copy {
    display: grid;
    gap: 2px;
}

.user-copy strong {
    font-size: 13px;
}

.user-copy span {
    color: var(--muted);
    font-size: 11px;
}

.orders-page-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: calc(100vh - 64px);
}

.orders-sidebar {
    background: #fff;
    border-right: 1px solid #e8ecf2;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    padding: 28px 14px 14px;
}

.sidebar-section {
    display: grid;
    gap: 8px;
}

.sidebar-section.with-border {
    border-top: 1px solid #e8ecf2;
    margin-top: 22px;
    padding-top: 22px;
}

.sidebar-section h2 {
    color: #34436d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin: 0 8px 6px;
}

.side-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #233157;
    display: grid;
    font-size: 13px;
    font-weight: 600;
    grid-template-columns: 28px 1fr auto;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
}

.side-item span {
    align-items: center;
    border: 1px solid #cad4e5;
    border-radius: 6px;
    color: #3c4b73;
    display: inline-flex;
    font-size: 10px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.side-item.active {
    background: #eef4ff;
    color: var(--blue);
}

.side-item.active span {
    border-color: #bcd1ff;
    color: var(--blue);
}

.side-item em {
    background: #eaf2ff;
    border-radius: 7px;
    color: var(--blue);
    font-size: 12px;
    font-style: normal;
    padding: 2px 7px;
}

.help-card {
    background: #f3f5f8;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding: 16px;
}

.help-card strong {
    font-size: 13px;
}

.help-card p {
    color: #34436d;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.help-card button {
    background: #fff;
    border: 1px solid #dfe5ef;
    border-radius: 7px;
    color: #233157;
    font-size: 12px;
    font-weight: 700;
    height: 32px;
}

.help-icon {
    align-items: center;
    border: 1px solid #cad4e5;
    border-radius: 50%;
    display: inline-flex;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.orders-main {
    min-width: 0;
    overflow-x: auto;
    padding: 26px 36px 32px;
}

.orders-main-header {
    align-items: start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.orders-main-header h1 {
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.orders-main-header p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.header-actions {
    align-items: center;
    display: flex;
    gap: 24px;
}

.kpi-strip {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 64px;
    width: 610px;
}

.kpi-item {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px 1fr;
    padding: 0 16px;
}

.kpi-item + .kpi-item {
    border-left: 1px solid var(--border);
}

.kpi-icon {
    align-items: center;
    border-radius: 8px;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.kpi-blue { background: #eef4ff; color: var(--blue); }
.kpi-amber { background: #fff3df; color: #f97316; }
.kpi-purple { background: #f4edff; color: var(--purple); }
.kpi-green { background: #eaf8ef; color: var(--green); }

.kpi-item div {
    align-items: baseline;
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 8px;
}

.kpi-item span {
    color: #172347;
    font-size: 11px;
    font-weight: 700;
    grid-column: span 2;
    white-space: nowrap;
}

.kpi-item strong {
    font-size: 17px;
    line-height: 1;
}

.kpi-item em {
    color: var(--green);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.kpi-item em.down {
    color: var(--red);
}

.new-order-button {
    align-items: center;
    background: var(--blue);
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    gap: 9px;
    height: 42px;
    padding: 0 22px;
    white-space: nowrap;
}

.order-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    height: 40px;
    max-width: 670px;
    margin-bottom: 16px;
}

.order-tabs button {
    background: #fff;
    border: 1px solid var(--border);
    color: #172347;
    font-size: 13px;
    font-weight: 800;
}

.order-tabs button:first-child {
    border-radius: 8px 0 0 8px;
}

.order-tabs button:last-child {
    border-radius: 0 8px 8px 0;
}

.order-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.filter-toolbar {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(400px, 1.7fr) repeat(3, minmax(150px, 0.65fr)) minmax(170px, 0.8fr) 130px;
    margin-bottom: 28px;
}

.search-field,
.select-card,
.more-filters {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 60px;
}

.search-field {
    align-items: center;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    padding: 0 10px;
}

.search-field span {
    color: #667da9;
    font-weight: 800;
}

.search-field input {
    border: 0;
    color: #233157;
    min-width: 0;
    outline: 0;
}

.search-field button {
    background: #f5f7fb;
    border: 0;
    border-radius: 7px;
    color: #4d5d84;
    height: 34px;
}

.select-card {
    display: grid;
    gap: 3px;
    padding: 10px 14px;
}

.select-card span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.select-card select {
    appearance: none;
    background: transparent;
    border: 0;
    color: #172347;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
    width: 100%;
}

.more-filters {
    color: #3e4d73;
    font-size: 13px;
    font-weight: 800;
}

.orders-list {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    min-width: 1140px;
    overflow: visible;
    position: relative;
}

.order-grid {
    display: grid;
    grid-template-columns: 170px 200px minmax(300px, 1fr) 100px 135px 90px 140px 135px;
}

.orders-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    color: #63708f;
    font-size: 11px;
    font-weight: 800;
    height: 34px;
    padding: 0 14px;
}

.order-row {
    border-bottom: 1px solid var(--soft-border);
    min-height: 82px;
    padding: 14px;
}

.order-row:hover {
    background: #fafcff;
}

.order-cell {
    align-items: center;
    display: flex;
    min-width: 0;
}

.order-id-cell {
    align-items: flex-start;
    gap: 10px;
}

.order-id-cell input {
    margin-top: 3px;
}

.order-id-cell div,
.customer-cell div,
.deadline-cell {
    display: grid;
    gap: 5px;
}

.order-id-cell strong,
.customer-name-line strong {
    color: #101a3d;
    font-size: 13px;
    font-weight: 800;
}

.order-id-cell span,
.customer-cell span,
.quiet-date,
.deadline-cell span {
    color: #53617f;
    font-size: 12px;
}

.customer-cell {
    align-items: flex-start;
    gap: 10px;
}

.avatar {
    align-items: center;
    background: linear-gradient(135deg, #1463ff, #11a878);
    border-radius: 50%;
    color: #fff !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px !important;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.customer-name-line {
    align-items: center;
    display: flex;
    gap: 7px;
}

.phone-line {
    color: #0a9d4f !important;
}

.customer-badge {
    border-radius: 6px;
    font-size: 11px !important;
    font-weight: 800;
    padding: 3px 7px;
}

.customer-new { background: #eaf2ff; color: #1463ff !important; }
.customer-returning { background: #e8f7ee; color: #128042 !important; }
.customer-vip { background: #f1e8ff; color: #7c3aed !important; }
.customer-priority { background: #fff1dc; color: #c66b00 !important; }

.items-cell {
    align-items: stretch;
    display: grid;
    gap: 6px;
    padding-right: 16px;
}

.item-line {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 28px 70px minmax(0, 1fr) 60px;
}

.item-icon,
.size-badge {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 6px;
    color: #26395f;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
}

.item-category {
    color: #2b3654;
    font-size: 12px;
    font-weight: 800;
}

.item-description {
    color: #111827;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
}

.quiet-date {
    color: #172347;
}

.deadline-cell {
    align-content: center;
}

.deadline-cell strong,
.total-cell {
    color: #101a3d;
    font-size: 13px;
    font-weight: 700;
}

.deadline-soon span {
    color: #f97316;
}

.deadline-overdue span {
    color: #ef4444;
}

.deadline-complete span {
    color: #16a34a;
}

.order-status-pill {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    min-height: 28px;
    padding: 0 12px;
    white-space: nowrap;
}

.order-status-pill span {
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.status-pendingintake { background: #fff1dc; color: #d97706; }
.status-inproduction { background: #eaf2ff; color: #1463ff; }
.status-awaitingfitting { background: #f1e8ff; color: #7c3aed; }
.status-readyfordelivery { background: #e8f7ee; color: #128042; }
.status-delivered { background: #e7f7ee; color: #128042; }
.status-overdue { background: #ffe8e8; color: #dc2626; }

.status-pendingintake span { background: #f59e0b; }
.status-inproduction span { background: #1463ff; }
.status-awaitingfitting span { background: #8b5cf6; }
.status-readyfordelivery span,
.status-delivered span { background: #16a34a; }
.status-overdue span { background: #ef4444; }

.action-cell {
    gap: 8px;
}

.action-cell button,
.pagination-controls button,
.pagination-controls select {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    color: #233157;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    min-width: 44px;
}

.action-cell button:first-child {
    color: var(--blue);
}

.action-cell .icon-action {
    min-width: 30px;
}

.row-menu-host {
    position: relative;
}

.row-menu-dismiss {
    background: transparent;
    border: 0;
    inset: 0;
    min-width: 0 !important;
    padding: 0;
    position: fixed;
    z-index: 140;
}

.row-action-menu {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    display: grid;
    min-width: 160px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 150;
}

.row-action-menu button {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 6px;
    color: #233157;
    display: flex;
    font-size: 13px;
    font-weight: 750;
    gap: 9px;
    height: 36px;
    justify-content: flex-start;
    padding: 0 10px;
    text-align: left;
}

.row-action-menu button:hover {
    background: #f6f8fb;
}

.row-action-menu span {
    align-items: center;
    background: #eef4ff;
    border-radius: 5px;
    color: var(--blue);
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.empty-orders {
    color: var(--muted);
    font-size: 14px;
    padding: 36px;
    text-align: center;
}

.orders-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 18px;
}

.orders-footer > span {
    color: #53617f;
    font-size: 13px;
}

.pagination-controls {
    align-items: center;
    display: flex;
    gap: 8px;
}

.pagination-controls button {
    height: 34px;
    min-width: 34px;
}

.pagination-controls button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.pagination-controls button:disabled {
    opacity: 0.45;
}

.pagination-controls select {
    height: 34px;
    margin-left: 16px;
    min-width: 100px;
    padding: 0 10px;
}

.ellipsis {
    color: #53617f;
    font-weight: 800;
}

.modal-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, 0.28);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 200;
}

.placeholder-modal {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 10px;
    max-width: 360px;
    padding: 20px;
}

.placeholder-modal p {
    color: var(--muted);
    margin: 0;
}

.placeholder-modal button {
    background: var(--blue);
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    height: 34px;
}

.journey-overlay {
    align-items: center;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 300;
}

.journey-modal {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
    max-height: 80vh;
    max-width: calc(100vw - 48px);
    overflow: hidden;
    width: 740px;
}

.journey-header {
    align-items: flex-start;
    display: grid;
    gap: 16px;
    grid-template-columns: 54px 1fr 36px;
    padding: 24px 28px 18px;
}

.journey-header-icon {
    align-items: center;
    background: #eaf2ff;
    border-radius: 10px;
    color: var(--blue);
    display: flex;
    font-size: 16px;
    font-weight: 900;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.journey-header h2 {
    font-size: 25px;
    line-height: 1.15;
    margin: 2px 0 6px;
}

.journey-header p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.journey-x {
    background: #fff;
    border: 0;
    color: #172347;
    font-size: 24px;
    height: 36px;
    width: 36px;
}

.journey-identity {
    align-items: center;
    background: #f2f7ff;
    border-radius: 8px;
    display: flex;
    gap: 14px;
    height: 58px;
    margin: 0 28px;
    padding: 0 16px;
}

.journey-identity span {
    align-items: center;
    background: #e5efff;
    border-radius: 8px;
    color: var(--blue);
    display: flex;
    font-size: 12px;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.journey-identity strong {
    color: var(--blue);
    font-size: 15px;
}

.journey-identity em,
.journey-meta em {
    background: #172347;
    border-radius: 50%;
    height: 4px;
    width: 4px;
}

.journey-identity p {
    color: #172347;
    font-size: 14px;
    margin: 0;
}

.journey-loading {
    color: var(--muted);
    font-size: 14px;
    padding: 40px 28px;
}

.journey-timeline {
    max-height: calc(80vh - 225px);
    overflow-y: auto;
    padding: 28px 28px 24px 44px;
}

.journey-event {
    display: grid;
    gap: 18px;
    grid-template-columns: 24px 44px minmax(0, 1fr);
    min-height: 86px;
    position: relative;
}

.journey-rail {
    background: var(--blue);
    height: 100%;
    left: 7px;
    position: absolute;
    top: 15px;
    width: 2px;
}

.journey-rail.last {
    display: none;
}

.event-pending .journey-rail {
    background: #d0d5dd;
}

.journey-dot {
    background: #fff;
    border: 3px solid var(--blue);
    border-radius: 50%;
    height: 16px;
    margin-top: 14px;
    position: relative;
    width: 16px;
    z-index: 1;
}

.event-pending .journey-dot {
    border-color: #d0d5dd;
}

.journey-stage-icon {
    align-items: center;
    background: #eaf2ff;
    border-radius: 50%;
    color: var(--blue);
    display: flex;
    font-size: 14px;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.event-pending .journey-stage-icon {
    background: #f2f4f7;
    color: #344054;
}

.journey-event-content {
    padding-top: 7px;
}

.journey-event-title {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 11px;
}

.journey-event-title strong {
    font-size: 17px;
}

.journey-event-title span {
    background: #eaf2ff;
    border-radius: 7px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 9px;
}

.event-pending .journey-event-title span {
    background: #eef0f3;
    color: #344054;
}

.journey-meta {
    align-items: center;
    color: #34436d;
    display: flex;
    font-size: 13px;
    gap: 13px;
}

.journey-meta time {
    color: #34436d;
}

.journey-footer {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    height: 70px;
    justify-content: flex-end;
    padding: 0 28px;
}

.journey-footer button {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    color: #233157;
    font-size: 13px;
    font-weight: 800;
    height: 40px;
    padding: 0 22px;
}

@media (max-width: 1500px) {
    .orders-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .header-actions {
        gap: 16px;
    }

    .kpi-strip {
        width: 570px;
    }

    .filter-toolbar {
        gap: 12px;
        grid-template-columns: minmax(400px, 1.6fr) repeat(3, minmax(140px, 0.58fr)) minmax(160px, 0.75fr) 124px;
    }
}

@media (max-width: 1279px) {
    .main-nav {
        gap: 18px;
    }

    .orders-main-header {
        align-items: stretch;
        flex-direction: column;
    }

    .orders-page-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .brand-zone {
        width: 220px;
    }

    .orders-sidebar {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.new-order-main {
    min-width: 0;
    padding: 26px 24px 28px 36px;
}

.new-order-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.new-order-header h1 {
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 7px;
}

.new-order-header p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.back-link {
    background: transparent;
    border: 0;
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
    margin-top: 7px;
}

.intake-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 390px;
}

.intake-form {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.intake-card,
.summary-card,
.action-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.intake-card {
    padding: 18px 20px;
}

.section-title {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.section-title > span {
    align-items: center;
    background: #eef4ff;
    border-radius: 7px;
    color: var(--blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.section-title h2 {
    font-size: 16px;
    line-height: 1.15;
    margin: 0 0 4px;
}

.section-title p {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}

.section-with-action {
    align-items: center;
}

.section-with-action .add-item-button {
    margin-left: auto;
}

.customer-card {
    min-height: 190px;
}

.phone-finder {
    align-items: center;
    border: 1px solid #d7deea;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 24px 1fr 28px;
    height: 40px;
    padding: 0 12px;
}

.phone-finder input {
    border: 0;
    color: #172347;
    font-size: 13px;
    font-weight: 700;
    outline: 0;
}

.phone-finder span {
    color: #667da9;
    font-weight: 800;
}

.phone-finder button {
    background: transparent;
    border: 0;
    color: #46577d;
    font-weight: 800;
}

.phone-finder em {
    color: var(--blue);
    font-style: normal;
    font-weight: 900;
}

.lookup-state {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin: 8px 0 14px;
}

.lookup-state.found {
    color: var(--green);
}

.customer-fields {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 0.9fr 1.4fr;
}

.customer-fields label,
.date-row label,
.order-state-row label {
    display: grid;
    gap: 7px;
}

.customer-fields label span,
.date-row label span,
.order-state-row label span,
.status-field > span,
.turnaround-box > span {
    color: #34436d;
    font-size: 11px;
    font-weight: 800;
}

.customer-fields input,
.date-row input,
.order-state-row input,
.order-state-row select,
.item-editor-row input,
.item-editor-row select {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    color: #111827;
    font-size: 13px;
    font-weight: 650;
    height: 38px;
    outline: 0;
    padding: 0 12px;
    width: 100%;
}

.status-field {
    display: grid;
    gap: 8px;
}

.status-pills {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.status-choice {
    border: 1px solid #d7deea;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    height: 38px;
}

.status-choice.selected {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.order-info-card {
    min-height: 205px;
}

.date-row {
    align-items: end;
    display: grid;
    gap: 40px;
    grid-template-columns: 260px 280px minmax(120px, 1fr);
}

.date-row label span em {
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
}

.turnaround-box {
    display: grid;
    gap: 7px;
}

.turnaround-box strong {
    align-items: center;
    background: #eaf2ff;
    border-radius: 8px;
    color: var(--blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 72px;
}

.date-helper,
.field-error {
    font-size: 12px;
    margin: 9px 0 16px;
}

.date-helper {
    color: #53617f;
}

.field-error {
    color: var(--red);
    font-weight: 800;
}

.order-state-row {
    display: grid;
    gap: 40px;
    grid-template-columns: 260px 270px 1fr;
}

.price-field input {
    border: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 900;
    padding-left: 0;
}

.items-card {
    min-height: 160px;
}

.add-item-button {
    background: var(--blue);
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    height: 32px;
    padding: 0 16px;
}

.item-editor-head,
.item-editor-row {
    display: grid;
    gap: 16px;
    grid-template-columns: 120px 1.25fr 1.15fr 130px 100px 40px;
}

.item-editor-head {
    color: #53617f;
    font-size: 11px;
    font-weight: 800;
    margin: 0 8px 8px;
}

.item-editor-row {
    align-items: center;
    min-height: 54px;
}

.trash-button {
    background: #fff;
    border: 0;
    color: var(--red);
    font-size: 16px;
    font-weight: 900;
}

.reference-card {
    min-height: 150px;
}

.upload-zone {
    align-items: center;
    border: 1px dashed #b9d1ff;
    border-radius: 8px;
    color: #314166;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-height: 100px;
    position: relative;
    text-align: center;
}

.upload-zone input {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
}

.upload-zone strong {
    color: #233157;
    font-size: 12px;
}

.upload-zone span {
    color: var(--muted);
    font-size: 11px;
}

.reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.reference-thumb {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    padding: 7px;
    position: relative;
    width: 90px;
}

.reference-thumb img {
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
}

.reference-thumb button {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 50%;
    height: 18px;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 18px;
}

.reference-thumb strong,
.reference-thumb span {
    color: #53617f;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-column {
    display: grid;
    gap: 16px;
    height: fit-content;
}

.summary-card {
    padding: 24px;
}

.summary-lines {
    align-items: center;
    display: grid;
    gap: 16px 12px;
    grid-template-columns: 130px 1fr;
}

.summary-lines > span {
    color: #34436d;
    font-size: 13px;
}

.summary-lines > strong {
    font-size: 13px;
    justify-self: end;
}

.summary-card hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 22px 0;
}

.summary-card h3 {
    color: #34436d;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 14px;
}

.summary-items {
    display: grid;
    gap: 14px;
}

.summary-items > div {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px 72px 1fr 52px;
}

.summary-item-icon {
    align-items: center;
    background: #eaf2ff;
    border-radius: 50%;
    color: var(--blue);
    display: flex;
    font-size: 12px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.summary-item-icon.shoe {
    background: #e8f7ee;
    color: var(--green);
}

.summary-items strong,
.summary-items span,
.summary-items em {
    font-size: 12px;
}

.summary-items em {
    font-style: normal;
    justify-self: end;
}

.total-panel {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    padding: 18px 12px;
}

.total-panel span {
    font-size: 22px;
    font-weight: 900;
}

.action-card {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.action-card button {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #25365c;
    font-size: 14px;
    font-weight: 800;
    height: 48px;
    text-align: left;
    padding: 0 22px;
}

.action-card .confirm {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    text-align: center;
}

.form-notice,
.validation-panel {
    border-radius: 8px;
    display: grid;
    font-size: 13px;
    font-weight: 700;
    gap: 4px;
    margin-bottom: 12px;
    padding: 10px 12px;
}

.form-notice {
    background: #e8f7ee;
    color: #128042;
}

.validation-panel {
    background: #fff1f1;
    color: #dc2626;
}

@media (max-width: 1279px) {
    .new-order-main {
        padding-left: 24px;
    }

    .intake-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 24px;
    }

    .date-row,
    .order-state-row {
        gap: 20px;
        grid-template-columns: 1fr 1fr 120px;
    }
}

@media (max-width: 999px) {
    .intake-grid {
        grid-template-columns: 1fr;
    }
}

.deliveries-main {
    min-width: 0;
    overflow-x: auto;
    padding: 24px 36px 32px;
}

.deliveries-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.deliveries-header h1 {
    font-size: 28px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.deliveries-header p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.dispatch-kpi-strip {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 88px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dispatch-kpi-strip > div {
    align-items: center;
    display: grid;
    gap: 2px 16px;
    grid-template-columns: 42px 1fr auto;
    padding: 0 24px;
}

.dispatch-kpi-strip > div + div {
    border-left: 1px solid var(--border);
}

.dispatch-kpi-strip strong {
    font-size: 22px;
    line-height: 1;
}

.dispatch-kpi-strip p {
    color: #26365f;
    font-size: 13px;
    font-weight: 800;
    grid-column: 2;
    margin: 0;
}

.dispatch-kpi-strip em {
    color: var(--green);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.dispatch-live-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 390px;
    margin-bottom: 16px;
}

.dispatch-map-card,
.active-drivers-card,
.dispatch-list {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.dispatch-map-card header {
    align-items: center;
    display: flex;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
}

.dispatch-map-card header div:first-child {
    display: grid;
    margin-right: auto;
}

.dispatch-map-card strong,
.active-drivers-card header strong {
    font-size: 15px;
}

.dispatch-map-card header span {
    color: var(--muted);
    font-size: 12px;
}

.live-pill {
    background: #e8f7ee;
    border-radius: 10px;
    color: var(--green);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 2px 9px;
}

.map-controls {
    align-items: center;
    display: flex !important;
    gap: 10px;
    position: relative;
}

.map-controls select,
.map-controls button {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    color: #233157;
    font-size: 12px;
    font-weight: 800;
    height: 32px;
    padding: 0 12px;
}

.map-legend {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    display: grid !important;
    gap: 8px;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 38px;
    width: 170px;
    z-index: 250;
}

.dispatch-map {
    height: 300px;
    min-height: 280px;
    width: 100%;
}

.leaflet-driver-marker {
    align-items: center;
    background: var(--blue);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(20, 99, 255, 0.35);
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.leaflet-driver-marker.stale {
    background: #f59e0b;
}

.leaflet-driver-marker.offline {
    background: #98a2b3;
}

.leaflet-stop-marker {
    background: #ef4444;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 5px 14px rgba(239, 68, 68, 0.25);
    height: 24px;
    transform: rotate(-45deg);
    width: 24px;
}

.leaflet-stop-marker.done {
    background: #16a34a;
}

.active-drivers-card header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    height: 52px;
    justify-content: space-between;
    padding: 0 18px;
}

.active-drivers-card header button,
.view-all-drivers {
    background: transparent;
    border: 0;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.driver-row {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: #172347;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px 1fr 140px;
    min-height: 82px;
    padding: 0 18px;
    text-align: left;
    width: 100%;
}

.driver-row.selected,
.driver-row:hover {
    background: #f8fbff;
}

.driver-avatar {
    align-items: center;
    background: var(--blue);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.driver-row div {
    display: grid;
    gap: 4px;
}

.driver-row strong {
    font-size: 13px;
}

.driver-row em,
.driver-row span {
    color: #53617f;
    font-size: 12px;
    font-style: normal;
}

.freshness {
    background: #eaf2ff;
    border-radius: 10px;
    color: var(--blue) !important;
    justify-self: end;
    padding: 2px 8px;
}

.freshness.stale {
    background: #fff1dc;
    color: #d97706 !important;
}

.freshness.offline {
    background: #eef0f3;
    color: #344054 !important;
}

.view-all-drivers {
    height: 44px;
    padding-left: 18px;
    text-align: left;
}

.dispatch-filters {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(360px, 1.5fr) repeat(4, minmax(150px, 0.65fr)) 130px;
    margin-bottom: 16px;
}

.dispatch-list {
    min-width: 1180px;
}

.dispatch-grid {
    display: grid;
    grid-template-columns: 28px 120px 150px 140px 150px 170px 180px 140px 120px 150px;
}

.dispatch-table-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    color: #53617f;
    font-size: 11px;
    font-weight: 900;
    height: 36px;
    padding: 0 12px;
}

.dispatch-row {
    align-items: center;
    border-bottom: 1px solid var(--soft-border);
    color: #172347;
    font-size: 12px;
    min-height: 46px;
    padding: 0 12px;
}

.dispatch-row > strong {
    font-size: 12px;
}

.dispatch-customer {
    align-items: center;
    display: flex;
    gap: 8px;
}

.dispatch-customer span {
    align-items: center;
    background: #eaf2ff;
    border-radius: 50%;
    color: var(--blue);
    display: flex;
    font-size: 10px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.dispatch-badge,
.payment-chip {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 7px;
    height: 26px;
    justify-content: center;
    padding: 0 12px;
    width: fit-content;
}

.dispatch-badge span {
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.dispatch-pending { background: #eaf2ff; color: var(--blue); }
.dispatch-assigned { background: #fff1dc; color: #d97706; }
.dispatch-outfordelivery { background: #eaf2ff; color: var(--blue); }
.dispatch-delivered { background: #e8f7ee; color: var(--green); }
.dispatch-pending span,
.dispatch-outfordelivery span { background: var(--blue); }
.dispatch-assigned span { background: #f59e0b; }
.dispatch-delivered span { background: var(--green); }

.payment-paid { background: #e8f7ee; color: var(--green); }
.payment-unpaid { background: #eef0f3; color: #344054; }
.payment-partiallypaid { background: #fff1dc; color: #d97706; }

.window-cell {
    display: grid;
    gap: 2px;
}

.window-cell strong,
.window-cell span {
    font-size: 12px;
}

.dispatch-actions {
    display: flex;
    gap: 8px;
}

.dispatch-actions button {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    height: 28px;
    min-width: 54px;
}

.dispatch-actions .primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.create-dispatch-modal {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
    max-width: calc(100vw - 48px);
    overflow: hidden;
    width: 760px;
}

.create-dispatch-modal header,
.create-dispatch-modal footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px 22px;
}

.create-dispatch-modal header {
    border-bottom: 1px solid var(--border);
}

.create-dispatch-modal h2 {
    font-size: 21px;
    margin: 0;
}

.create-dispatch-modal header button {
    background: #fff;
    border: 0;
    font-size: 20px;
}

.create-dispatch-body {
    display: grid;
    gap: 18px;
    padding: 20px 22px;
}

.create-dispatch-body h3 {
    font-size: 14px;
    margin: 0 0 10px;
}

.dispatch-order-option {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 24px 130px 1fr;
    margin-bottom: 8px;
    min-height: 40px;
    padding: 0 12px;
}

.create-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 150px 120px 120px;
}

.create-grid label {
    display: grid;
    gap: 6px;
}

.create-grid span {
    color: #34436d;
    font-size: 11px;
    font-weight: 900;
}

.create-grid input,
.create-grid select {
    border: 1px solid #d7deea;
    border-radius: 7px;
    height: 38px;
    padding: 0 10px;
}

.create-dispatch-modal footer {
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    gap: 10px;
}

.create-dispatch-modal footer button {
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    font-weight: 900;
    height: 38px;
    padding: 0 18px;
}

.create-dispatch-modal footer .confirm {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

@media (max-width: 1279px) {
    .deliveries-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .dispatch-live-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .dispatch-filters {
        grid-template-columns: minmax(320px, 1fr) repeat(3, 150px);
    }
}

@media (max-width: 999px) {
    .dispatch-live-grid {
        grid-template-columns: 1fr;
    }
}

.past-orders-main {
    min-width: 0;
    overflow-x: auto;
    padding: 24px 36px 32px;
}

.past-header {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.past-header h1 {
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.past-header p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.past-header-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.period-select {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 9px;
    grid-template-columns: 20px 1fr;
    height: 40px;
    padding: 0 12px;
    width: 142px;
}

.period-select span {
    color: #4a5b83;
    font-size: 11px;
    font-weight: 800;
}

.period-select select {
    appearance: none;
    background: transparent;
    border: 0;
    color: #172347;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
}

.period-date {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #172347;
    font-size: 12px;
    font-weight: 800;
    height: 40px;
    padding: 0 10px;
    width: 132px;
}

.export-report {
    height: 40px;
    padding: 0 18px;
}

.history-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
    min-width: 980px;
}

.history-kpi-card {
    align-items: end;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 120px;
    padding: 18px;
}

.history-kpi-copy {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
}

.history-kpi-icon {
    align-items: center;
    border-radius: 11px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.icon-blue { background: #eaf2ff; color: var(--blue); }
.icon-green { background: #e8f7ee; color: var(--green); }
.icon-red { background: #ffe8e8; color: var(--red); }
.icon-amber { background: #fff1dc; color: #f97316; }

.history-kpi-copy p {
    color: #34436d;
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 4px;
}

.history-kpi-copy strong {
    color: #101a3d;
    display: block;
    font-size: 25px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.history-kpi-copy em {
    color: #4b5a7b;
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.sparkline {
    height: 38px;
    width: 110px;
}

.spark-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.spark-fill {
    opacity: .12;
}

.sparkline-blue .spark-line,
.sparkline-blue .spark-fill { stroke: var(--blue); fill: var(--blue); }
.sparkline-green .spark-line,
.sparkline-green .spark-fill { stroke: var(--green); fill: var(--green); }
.sparkline-red .spark-line,
.sparkline-red .spark-fill { stroke: var(--red); fill: var(--red); }
.sparkline-amber .spark-line,
.sparkline-amber .spark-fill { stroke: #f97316; fill: #f97316; }

.history-analytics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 360px minmax(620px, 1fr);
    margin-bottom: 16px;
    min-width: 980px;
}

.history-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 260px;
    padding: 18px;
}

.history-card h2 {
    color: #111827;
    font-size: 14px;
    margin: 0 0 18px;
}

.completion-body {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: 170px 1fr;
}

.donut-shell {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 150px;
    justify-content: center;
    position: relative;
    width: 150px;
}

.donut-shell::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 96px;
    position: absolute;
    width: 96px;
}

.donut-shell div {
    display: grid;
    gap: 2px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.donut-shell strong {
    color: #172347;
    font-size: 23px;
}

.donut-shell span {
    color: #53617f;
    font-size: 12px;
}

.completion-legend {
    display: grid;
    gap: 18px;
}

.completion-legend p {
    align-items: center;
    color: #34436d;
    display: grid;
    font-size: 13px;
    font-weight: 700;
    gap: 9px;
    grid-template-columns: 10px 1fr auto;
    margin: 0;
}

.legend-dot,
.health-legend em {
    border-radius: 50%;
    display: inline-block;
    height: 9px;
    width: 9px;
}

.legend-dot.green,
.health-legend em.green { background: var(--green); }
.legend-dot.red,
.health-legend em.red { background: var(--red); }

.health-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.health-chart {
    display: grid;
    gap: 8px;
    grid-template-columns: 34px 1fr;
    min-height: 0;
}

.health-y-axis {
    color: #667085;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 700;
    justify-content: space-between;
    padding: 4px 0 24px;
    text-align: right;
}

.health-chart svg {
    height: 170px;
    min-width: 0;
    width: 100%;
}

.health-grid line {
    stroke: #dfe5ef;
    stroke-width: 1;
}

.health-bar {
    fill: #18bb74;
    opacity: .9;
}

.health-line {
    fill: none;
    stroke: var(--red);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.health-x-axis {
    color: #34436d;
    display: grid;
    font-size: 11px;
    font-weight: 700;
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    margin-top: -26px;
    text-align: center;
}

.health-legend {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: center;
}

.health-legend span {
    align-items: center;
    color: #53617f;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
}

.history-filter-wrap {
    margin-bottom: 16px;
    min-width: 980px;
    position: relative;
}

.history-filter-toolbar {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(340px, 1.7fr) minmax(150px, .75fr) minmax(155px, .8fr) minmax(170px, .85fr) minmax(190px, .95fr) 136px;
}

.history-filter-toolbar .search-field,
.history-filter-toolbar .select-card,
.history-filter-toolbar .more-filters {
    height: 42px;
}

.history-filter-toolbar .select-card {
    padding: 5px 12px;
}

.history-more-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) 74px;
    padding: 14px;
    position: absolute;
    right: 0;
    top: 50px;
    width: 650px;
    z-index: 20;
}

.history-custom-range {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    width: fit-content;
}

.history-custom-range label {
    display: grid;
    gap: 5px;
}

.history-custom-range span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.history-custom-range input {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    height: 34px;
    padding: 0 10px;
}

.history-more-panel label {
    display: grid;
    gap: 5px;
}

.history-more-panel span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.history-more-panel input,
.history-more-panel select,
.history-more-panel button {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    height: 34px;
    min-width: 0;
}

.history-more-panel button {
    align-self: end;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.history-table {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    min-width: 1160px;
    overflow: visible;
}

.history-grid {
    display: grid;
    grid-template-columns: 126px 168px 132px minmax(180px, 1fr) 104px 118px 116px 126px 92px 104px;
}

.history-table-header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    color: #63708f;
    font-size: 11px;
    font-weight: 800;
    height: 36px;
    padding: 0 14px;
}

.history-row {
    align-items: center;
    border-bottom: 1px solid var(--soft-border);
    min-height: 52px;
    padding: 0 14px;
}

.history-row:hover {
    background: #fafcff;
}

.history-order-number,
.history-total {
    color: #172347;
    font-size: 12px;
}

.history-customer {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.history-customer strong {
    color: #233157;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-avatar {
    align-items: center;
    background: #eaf2ff;
    border-radius: 50%;
    color: var(--blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.history-phone,
.history-date,
.history-items {
    color: #34436d;
    font-size: 12px;
    min-width: 0;
}

.history-items {
    overflow: hidden;
    padding-right: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-status,
.payment-chip {
    border-radius: 7px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px;
    width: fit-content;
}

.history-status.status-completed { background: #dff7e9; color: #0f9f4e; }
.history-status.status-cancelled { background: #ffe4e6; color: #ef4444; }

.history-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.history-actions button {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    min-width: 48px;
}

.history-actions .icon-action {
    color: #233157;
    min-width: 30px;
}

.history-empty {
    align-items: center;
    color: #53617f;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 160px;
}

.history-empty button {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    height: 32px;
    padding: 0 14px;
}

.history-footer .pagination-controls {
    gap: 8px;
}

.side-item em.green { background: #e8f7ee; color: var(--green); }
.side-item em.red { background: #ffe8e8; color: var(--red); }
.side-item em.amber { background: #fff1dc; color: #f97316; }

@media (max-width: 1280px) {
    .past-orders-main {
        padding-left: 24px;
        padding-right: 24px;
    }

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

    .history-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .top-nav,
    .orders-sidebar,
    .past-header-actions,
    .history-filter-wrap,
    .history-actions,
    .pagination-controls {
        display: none !important;
    }

    .orders-page-shell {
        display: block;
    }

    .past-orders-main {
        overflow: visible;
        padding: 0;
    }

    .history-card,
    .history-kpi-card,
    .history-table {
        break-inside: avoid;
        box-shadow: none;
    }
}

.accounting-main {
    min-width: 0;
    overflow-x: auto;
    padding: 24px 32px 32px;
}

.accounting-header {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.accounting-header h1 {
    font-size: 26px;
    margin: 0 0 8px;
}

.accounting-header p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.accounting-header-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.secondary-action {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #172347;
    font-size: 13px;
    font-weight: 800;
    height: 40px;
    padding: 0 18px;
}

.accounting-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
    min-width: 1020px;
}

.accounting-kpi-card {
    align-items: end;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 110px;
    min-height: 118px;
    padding: 18px;
}

.accounting-kpi-copy {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
}

.accounting-kpi-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-weight: 900;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.icon-purple { background: #f1e8ff; color: #8b5cf6; }

.accounting-kpi-copy p {
    color: #34436d;
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 5px;
}

.accounting-kpi-copy strong {
    color: #101a3d;
    display: block;
    font-size: 23px;
    margin-bottom: 5px;
}

.accounting-kpi-copy em {
    color: #53617f;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.accounting-analytics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .9fr) minmax(260px, .72fr);
    margin-bottom: 14px;
    min-width: 1020px;
}

.accounting-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 292px;
    padding: 16px;
}

.accounting-card h2,
.accounting-card header h2 {
    font-size: 14px;
    margin: 0;
}

.accounting-card header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.accounting-card header select {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    height: 34px;
    padding: 0 14px;
}

.rev-chart {
    display: grid;
    gap: 6px;
    grid-template-rows: 24px 1fr 20px;
    height: 245px;
}

.rev-legend {
    align-items: center;
    display: flex;
    gap: 18px;
    font-size: 11px;
    font-weight: 700;
}

.rev-legend em {
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    margin-right: 6px;
    width: 7px;
}

.rev-legend .blue { background: var(--blue); }
.rev-legend .red { background: var(--red); }
.rev-chart svg { height: 196px; width: 100%; }
.rev-bar { fill: #2681ff; }
.rev-line { fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; }
.rev-axis { display: grid; font-size: 11px; font-weight: 700; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); text-align: center; }

.expense-breakdown-body {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: 145px 1fr;
    margin-top: 18px;
}

.expense-donut {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 142px;
    justify-content: center;
    position: relative;
    width: 142px;
}

.expense-donut::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 88px;
    position: absolute;
    width: 88px;
}

.expense-donut div {
    display: grid;
    position: relative;
    text-align: center;
    z-index: 1;
}

.expense-donut strong { font-size: 19px; }
.expense-donut span { font-size: 12px; font-weight: 800; }
.expense-slices { display: grid; gap: 8px; }
.expense-slices button { align-items: center; background: transparent; border: 0; display: grid; font-size: 11px; gap: 7px; grid-template-columns: 8px 1fr auto 38px; padding: 0; text-align: left; }
.expense-slices em,
.expense-slices small { color: #53617f; font-style: normal; font-weight: 700; }
.slice-dot { border-radius: 50%; height: 8px; width: 8px; }
.dot-blue { background: var(--blue); }
.dot-green { background: var(--green); }
.dot-purple { background: var(--purple); }
.dot-amber { background: var(--amber); }
.dot-violet { background: #a855f7; }
.view-details { background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 800; height: 34px; margin-top: 18px; width: 100%; }

.cash-card { display: grid; grid-template-rows: auto 1fr; }
.cash-list { display: grid; gap: 10px; margin-top: 18px; }
.cash-list p { align-items: center; border: 1px solid var(--border); border-radius: 9px; display: grid; font-size: 12px; font-weight: 800; gap: 10px; grid-template-columns: 34px 1fr auto; margin: 0; padding: 11px 12px; }
.cash-icon { align-items: center; border-radius: 50%; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.cash-icon.green { background: #e8f7ee; color: var(--green); }
.cash-icon.red { background: #ffe8e8; color: var(--red); }
.cash-icon.blue { background: #eaf2ff; color: var(--blue); }
.cash-icon.purple { background: #f1e8ff; color: var(--purple); }

.accounting-insights {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    min-width: 1020px;
}

.accounting-insight {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    display: grid;
    grid-template-columns: 46px 1fr 18px;
    min-height: 82px;
    padding: 14px 16px;
    text-align: left;
}

.insight-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.accounting-insight p { color: #53617f; font-size: 12px; font-weight: 700; margin: 0 0 3px; }
.accounting-insight strong { color: #101a3d; display: block; font-size: 17px; }
.accounting-insight em { color: #34436d; display: block; font-size: 12px; font-style: normal; }

.accounting-filters {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(250px, 1.45fr) 90px 120px 150px 170px 130px;
    margin-bottom: 12px;
    min-width: 1020px;
    position: relative;
}

.accounting-filters label,
.accounting-filters .more-filters {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 40px;
}

.accounting-filters select,
.accounting-filters input {
    background: transparent;
    border: 0;
    height: 100%;
    outline: 0;
    padding: 0 12px;
    width: 100%;
}

.accounting-more {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    padding: 14px;
    position: absolute;
    right: 0;
    top: 48px;
    width: 760px;
    z-index: 20;
}

.accounting-more label { display: grid; height: auto; padding: 6px; }
.accounting-more span { color: #667085; font-size: 11px; font-weight: 800; }

.transaction-table {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    min-width: 1180px;
    overflow: visible;
}

.transaction-grid {
    display: grid;
    grid-template-columns: 120px 150px 190px 110px 96px 86px 120px 145px 112px 100px 58px;
}

.transaction-header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    color: #63708f;
    font-size: 11px;
    font-weight: 800;
    height: 36px;
    padding: 0 14px;
}

.transaction-row {
    align-items: center;
    border-bottom: 1px solid var(--soft-border);
    color: #233157;
    font-size: 12px;
    min-height: 48px;
    padding: 0 14px;
}

.transaction-row a { color: var(--blue); font-weight: 800; }
.transaction-row button { background: transparent; border: 0; color: #233157; font-weight: 900; }
.amount-revenue { color: var(--green); }
.amount-expense,
.amount-refund { color: var(--red); }
.amount-adjustment { color: var(--purple); }

.accounting-type,
.accounting-status {
    border-radius: 6px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    padding: 5px 9px;
    width: fit-content;
}

.type-revenue { background: #dff7e9; color: #0f9f4e; }
.type-expense { background: #ffe4e6; color: #ef4444; }
.type-refund { background: #f1e8ff; color: var(--purple); }
.type-adjustment { background: #fff1dc; color: #d97706; }
.status-posted { background: #dff7e9; color: #0f9f4e; }
.status-reconciled { background: #eaf2ff; color: var(--blue); }
.status-pending { background: #fff1dc; color: #d97706; }
.status-voided { background: #e5e7eb; color: #475569; }

.transaction-detail-modal,
.add-expense-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    padding: 18px;
    width: min(680px, calc(100vw - 40px));
}

.transaction-detail-modal header,
.add-expense-modal header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.transaction-detail-modal header button,
.add-expense-modal header button {
    background: transparent;
    border: 0;
    font-size: 18px;
}

.expense-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.expense-form label {
    display: grid;
    gap: 6px;
}

.expense-form label.wide {
    grid-column: span 2;
}

.expense-form span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.expense-form input,
.expense-form select,
.expense-form textarea {
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    min-height: 38px;
    padding: 8px 10px;
}

.add-expense-modal footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.add-expense-modal footer button {
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    font-weight: 900;
    height: 38px;
    padding: 0 18px;
}

.add-expense-modal footer .confirm {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

@media (max-width: 1280px) {
    .accounting-main {
        padding-left: 24px;
        padding-right: 24px;
    }

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

    .accounting-analytics-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Order management visual refinement */
.app-icon {
    display: block;
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.top-nav {
    border-bottom-color: #eaecf0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
}

.brand-zone {
    gap: 14px;
    padding: 0 20px;
    width: 232px;
}

.brand-mark,
.user-avatar {
    font-weight: 750;
    height: 32px;
    width: 32px;
}

.brand-name {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0;
}

.main-nav {
    gap: 30px;
}

.nav-entry {
    color: #344054;
    font-size: 13.5px;
    font-weight: 550;
    gap: 8px;
    text-decoration: none;
}

.nav-icon,
.side-item span {
    border: 0;
    border-radius: 0;
    height: auto;
    width: auto;
}

.nav-icon .app-icon {
    height: 17px;
    width: 17px;
}

.workspace-main {
    min-height: calc(100vh - 64px);
    min-width: 0;
    padding: 24px 32px 30px;
}

.workspace-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    margin-bottom: 14px;
}

.workspace-header h1 {
    color: #101828;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 5px;
}

.workspace-header p {
    color: #667085;
    font-size: 13px;
    margin: 0;
}

.workspace-placeholder {
    align-items: center;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    display: flex;
    gap: 14px;
    max-width: 720px;
    padding: 18px;
}

.workspace-placeholder > span {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    color: var(--blue);
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.workspace-placeholder h2 {
    color: #101828;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.workspace-placeholder p {
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0;
}

.orders-page-shell {
    grid-template-columns: 232px minmax(0, 1fr);
}

.orders-sidebar {
    border-right-color: #eaecf0;
    padding: 25px 14px 14px;
}

.sidebar-section {
    gap: 6px;
}

.sidebar-section.with-border {
    border-top-color: #eaecf0;
    margin-top: 20px;
    padding-top: 20px;
}

.sidebar-section h2 {
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.02em;
    margin: 0 8px 7px;
}

.side-item {
    border-radius: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    grid-template-columns: 28px 1fr auto;
    min-height: 40px;
    padding: 0 10px;
}

.side-item strong {
    font-weight: 600;
}

.side-item.active {
    background: #eef4ff;
    color: var(--blue);
}

.side-item span {
    color: #475467;
}

.side-item.active span {
    color: var(--blue);
}

.side-item .app-icon {
    height: 16px;
    width: 16px;
}

.side-item em {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    min-width: 22px;
    padding: 2px 7px;
    text-align: center;
}

.side-item.quick.ready em {
    background: #dcfae6;
    color: #079455;
}

.side-item.quick.overdue em {
    background: #fee4e2;
    color: #d92d20;
}

.help-card {
    background: #f8fafc;
    border: 1px solid #f0f2f5;
    border-radius: 10px;
}

.orders-main {
    padding: 24px 32px 30px;
}

.orders-main-header {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(300px, 1fr) auto;
    margin-bottom: 16px;
}

.orders-main-header h1 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    margin-bottom: 6px;
}

.orders-main-header p {
    color: #667085;
    font-size: 13px;
}

.header-actions {
    display: grid;
    gap: 18px;
    grid-template-columns: 600px auto;
}

.new-order-button {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    height: 42px;
    padding: 0 20px;
}

.new-order-button .app-icon {
    height: 17px;
    width: 17px;
}

.kpi-strip {
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
    height: 64px;
    overflow: hidden;
    width: 600px;
}

.kpi-item {
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 0 14px;
}

.kpi-item + .kpi-item {
    border-left-color: #eaecf0;
}

.kpi-icon {
    border-radius: 8px;
    font-size: 0;
    height: 32px;
    width: 32px;
}

.kpi-icon .app-icon {
    height: 17px;
    width: 17px;
}

.kpi-item div {
    gap: 1px 7px;
    min-width: 0;
}

.kpi-item span {
    color: #344054;
    font-size: 10.5px;
    font-weight: 600;
}

.kpi-item strong {
    font-size: 17px;
    font-weight: 700;
}

.kpi-item em {
    font-size: 10.5px;
    font-weight: 650;
}

.order-tabs {
    border: 1px solid #eaecf0;
    border-radius: 8px;
    display: inline-grid;
    grid-template-columns: repeat(4, auto);
    height: 40px;
    margin-bottom: 14px;
    min-width: 650px;
    overflow: hidden;
}

.order-tabs button {
    align-items: center;
    border: 0;
    border-right: 1px solid #eaecf0;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-width: 150px;
    padding: 0 20px;
    font-size: 12.5px;
    font-weight: 600;
}

.order-tabs button:first-child,
.order-tabs button:last-child {
    border-radius: 0;
}

.order-tabs button:last-child {
    border-right: 0;
}

.order-tabs button .app-icon {
    height: 15px;
    width: 15px;
}

.filter-toolbar {
    gap: 10px;
    grid-template-columns: minmax(340px, 1fr) 140px 145px 155px 175px 125px;
    margin-bottom: 18px;
}

.search-field,
.select-card,
.more-filters {
    border-color: #eaecf0;
    border-radius: 8px;
    height: 50px;
}

.search-field {
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    padding: 0 10px;
}

.search-field span {
    color: #667085;
}

.search-field span .app-icon {
    height: 17px;
    width: 17px;
}

.search-field input {
    color: #101828;
    font-size: 13px;
    font-weight: 450;
}

.search-field input::placeholder {
    color: #667085;
}

.search-field button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.search-field button .app-icon {
    height: 16px;
    width: 16px;
}

.select-card {
    gap: 2px;
    padding: 8px 13px;
}

.select-card span {
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
}

.select-card select {
    color: #101828;
    font-size: 12.5px;
    font-weight: 600;
}

.more-filters {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    color: #344054;
    font-size: 12.5px;
    font-weight: 600;
}

.more-filters .app-icon {
    height: 15px;
    width: 15px;
}

.orders-list {
    border-color: #eaecf0;
    border-radius: 12px;
    min-width: 1120px;
}

.order-grid {
    grid-template-columns: 150px 205px minmax(330px, 1fr) 92px 122px 90px 145px 124px;
}

.orders-header {
    background: #fcfcfd;
    border-bottom-color: #eaecf0;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
    height: 40px;
    padding: 0 14px;
}

.order-row {
    border-bottom-color: #f0f2f5;
    min-height: 82px;
    padding: 13px 14px;
}

.order-row:hover {
    background: #fcfdff;
}

.order-id-cell strong,
.customer-name-line strong {
    color: #101828;
    font-size: 13px;
    font-weight: 650;
}

.order-id-cell span,
.customer-cell span,
.quiet-date,
.deadline-cell span {
    color: #667085;
    font-size: 11.5px;
}

.customer-cell {
    gap: 10px;
}

.avatar {
    background: linear-gradient(135deg, #1769ff, #0694a2);
    font-size: 12px !important;
    font-weight: 700;
    height: 34px;
    width: 34px;
}

.customer-name-line {
    gap: 6px;
}

.customer-badge {
    border-radius: 6px;
    font-size: 10.5px !important;
    font-weight: 650;
    line-height: 1;
    min-width: 0;
    padding: 4px 8px;
}

.phone-line {
    color: #079455 !important;
}

.items-cell {
    align-content: center;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
}

.item-line {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 90px minmax(0, 1fr) 58px;
    height: 26px;
    width: 100%;
}

.item-category {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    gap: 6px;
    height: 22px;
    justify-content: flex-start;
    padding: 0 7px;
    width: fit-content;
    color: #175cd3;
    font-size: 10.5px;
    font-weight: 650;
}

.item-category .app-icon {
    height: 13px;
    width: 13px;
}

.item-garment {
    background: #eff4ff;
    color: #175cd3;
}

.item-shoe {
    background: #ecfdf3;
    color: #067647;
}

.item-description {
    color: #344054;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size-badge {
    background: #f8fafc;
    border-color: #e4e7ec;
    border-radius: 6px;
    color: #101828;
    font-size: 10.5px;
    font-weight: 650;
    height: 22px;
    justify-self: start;
    min-width: 42px;
    padding: 0 8px;
}

.quiet-date {
    color: #344054;
    font-weight: 500;
}

.deadline-cell strong,
.total-cell {
    color: #101828;
    font-size: 12.5px;
    font-weight: 650;
}

.deadline-cell span {
    font-weight: 450;
}

.order-status-pill {
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 650;
    gap: 7px;
    min-height: 24px;
    padding: 0 9px;
}

.order-status-pill span {
    height: 5px;
    width: 5px;
}

.action-cell {
    gap: 7px;
}

.action-cell button,
.pagination-controls button,
.pagination-controls select {
    border-color: #d0d5dd;
    border-radius: 7px;
    color: #344054;
    font-size: 11.5px;
    font-weight: 600;
    height: 30px;
    min-width: 42px;
}

.action-cell button:first-child {
    color: var(--blue);
}

.action-cell .icon-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 30px;
}

.action-cell .icon-action .app-icon {
    height: 15px;
    width: 15px;
}

.journey-header-icon .app-icon {
    height: 23px;
    width: 23px;
}

.journey-identity .app-icon,
.journey-stage-icon .app-icon {
    height: 18px;
    width: 18px;
}

@media (max-width: 1500px) {
    .main-nav {
        gap: 24px;
    }

    .orders-main {
        padding-left: 30px;
        padding-right: 30px;
    }

    .header-actions {
        grid-template-columns: 520px auto;
    }

    .kpi-strip {
        width: 520px;
    }

    .kpi-item {
        gap: 8px;
        padding: 0 10px;
    }

    .kpi-item span {
        font-size: 10px;
    }
}

@media (max-width: 1320px) {
    .orders-main-header {
        grid-template-columns: 1fr;
    }

    .header-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kpi-strip {
        width: 100%;
    }

    .filter-toolbar {
        grid-template-columns: minmax(300px, 1fr) repeat(2, 145px) 155px 175px 125px;
    }
}

/* New order intake refinement */
.new-order-main {
    min-width: 0;
    padding: 24px 32px 30px;
}

.new-order-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    margin-bottom: 14px;
}

.new-order-header h1 {
    color: #101828;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 5px;
}

.new-order-header p {
    color: #667085;
    font-size: 13px;
    font-weight: 400;
}

.back-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--blue);
    display: inline-flex;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    padding: 8px 0;
}

.back-link .app-icon {
    height: 15px;
    width: 15px;
}

.intake-grid {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 350px;
}

.intake-form {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.new-order-main .intake-card,
.new-order-main .summary-card,
.new-order-main .action-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.new-order-main .intake-card {
    padding: 16px 18px;
}

.new-order-main .section-title {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.new-order-main .section-title > span {
    align-items: center;
    background: #eef4ff;
    border: 0;
    border-radius: 7px;
    color: var(--blue);
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.new-order-main .section-title > span .app-icon {
    height: 18px;
    width: 18px;
}

.new-order-main .section-title h2 {
    color: #101828;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 3px;
}

.new-order-main .section-title p {
    color: #667085;
    font-size: 11.5px;
    font-weight: 400;
}

.customer-card,
.order-info-card,
.items-card,
.reference-card {
    min-height: 0;
}

.phone-finder {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 22px minmax(0, 1fr) 28px;
    height: 42px;
    padding: 0 12px;
}

.phone-finder:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.08);
}

.phone-finder input {
    color: #101828;
    font-size: 12.5px;
    font-weight: 500;
}

.phone-finder input::placeholder,
.new-order-main input::placeholder {
    color: #98a2b3;
}

.phone-finder span {
    color: #667085;
}

.phone-finder span .app-icon {
    height: 17px;
    width: 17px;
}

.phone-finder button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #667085;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.phone-finder button:hover {
    background: #f2f4f7;
}

.phone-finder button .app-icon {
    height: 14px;
    width: 14px;
}

.lookup-spinner {
    border: 2px solid #d1e0ff;
    border-top-color: var(--blue);
    border-radius: 50%;
    height: 16px;
    justify-self: center;
    width: 16px;
}

.lookup-state {
    align-items: center;
    color: #667085;
    display: inline-flex;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    margin: 6px 0 10px;
}

.lookup-state span {
    align-items: center;
    display: inline-flex;
}

.lookup-state .app-icon {
    height: 13px;
    width: 13px;
}

.lookup-state.found {
    color: #039855;
}

.customer-fields {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr 1.35fr;
}

.customer-fields label,
.date-row label,
.order-state-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.customer-fields label span,
.date-row label span,
.order-state-row label span,
.status-field > span,
.turnaround-box > span {
    color: #344054;
    font-size: 10.5px;
    font-weight: 550;
}

.customer-fields input,
.date-row input,
.order-state-row select,
.item-editor-row input,
.item-editor-row select {
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    color: #101828;
    font-size: 12.5px;
    font-weight: 450;
    height: 38px;
    outline: 0;
    padding: 0 11px;
    width: 100%;
}

.customer-fields input:focus,
.date-row input:focus,
.order-state-row select:focus,
.item-editor-row input:focus,
.item-editor-row select:focus,
.money-input:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.08);
}

.status-field {
    display: grid;
    gap: 6px;
}

.status-pills {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
}

.status-choice {
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 550;
    height: 36px;
}

.status-choice.selected {
    box-shadow: none;
}

.status-choice.customer-new.selected {
    border-color: #84adff;
}

.status-choice.customer-returning.selected {
    border-color: #75e0a7;
}

.status-choice.customer-vip.selected {
    border-color: #bdb4fe;
}

.status-choice.customer-priority.selected {
    border-color: #fec84b;
}

.date-row,
.order-state-row {
    align-items: end;
    display: grid;
    gap: 24px;
    grid-template-columns: 220px 240px 120px;
    justify-content: start;
}

.date-row label span em {
    color: #667085;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 400;
}

.turnaround-box {
    display: grid;
    gap: 6px;
}

.turnaround-box strong {
    align-items: center;
    background: #eef4ff;
    border-radius: 6px;
    color: #155eef;
    display: inline-flex;
    font-size: 11.5px;
    font-weight: 600;
    height: 26px;
    justify-content: center;
    padding: 0 9px;
    width: fit-content;
}

.date-helper,
.field-error {
    align-items: center;
    display: flex;
    gap: 6px;
    font-size: 11px;
    margin: 8px 0 12px;
}

.date-helper {
    color: #667085;
}

.date-helper .app-icon {
    height: 13px;
    width: 13px;
}

.field-error {
    color: #d92d20;
    font-weight: 500;
}

.order-state-row {
    grid-template-columns: 220px 240px 180px;
}

.money-input {
    align-items: center;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: 38px;
    padding: 0 10px 0 0;
    width: 170px;
}

.money-input input {
    border: 0;
    box-shadow: none !important;
    color: #101828;
    font-size: 12.5px;
    font-weight: 500;
    height: 36px;
    min-width: 0;
    padding: 0 10px;
}

.money-input em {
    color: #667085;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.section-with-action {
    align-items: center;
}

.section-with-action .add-item-button {
    margin-left: auto;
}

.add-item-button {
    align-items: center;
    background: var(--blue);
    border: 0;
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    height: 34px;
    padding: 0 12px;
}

.add-item-button .app-icon {
    height: 14px;
    width: 14px;
}

.item-editor-head,
.item-editor-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 116px minmax(140px, 1.1fr) minmax(140px, 1.1fr) 108px 92px 32px;
}

.item-editor-head {
    color: #667085;
    font-size: 10.5px;
    font-weight: 550;
    margin: 0 0 7px;
}

.item-editor-row {
    align-items: center;
    min-height: 48px;
    padding: 6px 0;
}

.item-editor-row + .item-editor-row {
    border-top: 1px solid #f2f4f7;
}

.item-editor-row input,
.item-editor-row select {
    font-size: 12px;
    height: 37px;
}

.trash-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #d92d20;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.trash-button:hover {
    background: #fef3f2;
}

.trash-button .app-icon {
    height: 15px;
    width: 15px;
}

.upload-zone {
    background: #fcfdff;
    border: 1px dashed #b2ccff;
    border-radius: 8px;
    gap: 5px;
    min-height: 96px;
}

.upload-zone > .app-icon {
    color: var(--blue);
    height: 22px;
    width: 22px;
}

.upload-zone strong {
    color: #101828;
    font-size: 12px;
    font-weight: 600;
}

.upload-zone span {
    color: #667085;
    font-size: 10.5px;
}

.reference-list {
    gap: 10px;
    margin-top: 10px;
}

.reference-thumb {
    border-color: #eaecf0;
    border-radius: 8px;
    grid-template-rows: 72px auto auto;
    padding: 7px;
    width: 88px;
}

.reference-thumb img {
    height: 72px;
}

.reference-thumb button {
    align-items: center;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #667085;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.reference-thumb button .app-icon {
    height: 12px;
    width: 12px;
}

.reference-thumb strong,
.reference-thumb span {
    color: #667085;
    font-size: 10px;
    font-weight: 500;
}

.summary-column {
    display: grid;
    gap: 12px;
    height: fit-content;
    position: sticky;
    top: 84px;
}

.summary-card {
    padding: 20px;
}

.summary-card .section-title {
    margin-bottom: 18px;
}

.summary-lines {
    align-items: center;
    display: grid;
    gap: 12px 12px;
    grid-template-columns: 92px minmax(0, 1fr);
}

.summary-lines > span {
    color: #667085;
    font-size: 11px;
    font-weight: 400;
}

.summary-lines > strong {
    align-items: center;
    color: #344054;
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
    justify-self: end;
    min-width: 0;
    text-align: right;
}

.summary-lines > .order-status-pill {
    justify-self: end;
    width: fit-content;
}

.summary-customer .customer-badge {
    flex: 0 0 auto;
}

.summary-card hr {
    border-top: 1px solid #eaecf0;
    margin: 18px 0;
}

.summary-card h3 {
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 10px;
}

.summary-items {
    display: grid;
    gap: 6px;
}

.summary-items > div {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 24px 66px minmax(0, 1fr) 50px;
    min-height: 34px;
}

.summary-item-icon {
    align-items: center;
    background: #eff4ff;
    border-radius: 50%;
    color: #175cd3;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.summary-item-icon .app-icon {
    height: 14px;
    width: 14px;
}

.summary-item-icon.shoe {
    background: #ecfdf3;
    color: #067647;
}

.summary-item-icon.empty {
    background: #f2f4f7;
    color: #667085;
}

.summary-items strong,
.summary-items span,
.summary-items em {
    color: #344054;
    font-size: 11.5px;
    font-weight: 500;
    min-width: 0;
}

.summary-items span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-items em {
    color: #667085;
    font-style: normal;
    justify-self: end;
}

.payment-summary {
    background: #f2f4f7;
    border-radius: 999px;
    padding: 4px 8px;
}

.deadline-summary {
    display: grid !important;
    gap: 2px;
}

.deadline-summary small {
    color: #039855;
    font-size: 10.5px;
    font-weight: 500;
}

.total-panel {
    background: #f5f8ff;
    border-radius: 8px;
    margin-top: 18px;
    padding: 14px;
}

.total-panel strong {
    color: #101828;
    font-size: 12px;
    font-weight: 550;
}

.total-panel span {
    color: #101828;
    font-size: 19px;
    font-weight: 700;
}

.action-card {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.action-card button {
    align-items: center;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    color: #344054;
    display: inline-flex;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 550;
    height: 40px;
    justify-content: flex-start;
    padding: 0 14px;
    text-align: left;
}

.action-card button .app-icon {
    height: 15px;
    width: 15px;
}

.action-card .confirm {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    height: 42px;
    justify-content: center;
}

.form-notice,
.validation-panel {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
}

@media (min-width: 1650px) {
    .intake-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .item-editor-head,
    .item-editor-row {
        gap: 12px;
        grid-template-columns: 110px minmax(190px, 1.2fr) minmax(190px, 1.2fr) 130px 105px 34px;
    }
}

@media (max-width: 1500px) {
    .new-order-main {
        padding-left: 30px;
        padding-right: 30px;
    }

    .intake-grid {
        gap: 20px;
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .summary-card {
        padding: 18px;
    }
}

@media (max-width: 1180px) {
    .intake-grid {
        grid-template-columns: 1fr;
    }

    .summary-column {
        position: static;
    }

    .date-row,
    .order-state-row,
    .customer-fields {
        grid-template-columns: 1fr;
    }
}

/* Past orders / history refinement */
.past-orders-main {
    min-width: 0;
    overflow-x: auto;
    padding: 24px 32px 32px;
}

.past-header {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.past-header h1 {
    color: #101828;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 5px;
}

.past-header p {
    color: #667085;
    font-size: 13px;
}

.past-header-actions {
    gap: 10px;
}

.period-select {
    border-color: #d0d5dd;
    border-radius: 7px;
    gap: 8px;
    grid-template-columns: 18px 1fr;
    height: 40px;
    width: 140px;
}

.period-select span {
    color: #475467;
}

.period-select span .app-icon,
.export-report .app-icon {
    height: 15px;
    width: 15px;
}

.period-select select {
    color: #101828;
    font-size: 12px;
    font-weight: 500;
}

.period-date {
    border-color: #d0d5dd;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.export-report {
    gap: 8px;
    height: 40px;
    min-width: 142px;
    padding: 0 14px;
}

.history-kpi-grid {
    gap: 14px;
    margin-bottom: 14px;
    min-width: 980px;
}

.history-kpi-card {
    align-items: center;
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    grid-template-columns: minmax(0, 1fr) 104px;
    min-height: 112px;
    padding: 16px;
}

.history-kpi-copy {
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr);
}

.history-kpi-icon {
    border-radius: 9px;
    height: 38px;
    width: 38px;
}

.history-kpi-icon .app-icon {
    height: 18px;
    width: 18px;
}

.icon-blue { background: #eef4ff; color: #1769ff; }
.icon-green { background: #ecfdf3; color: #039855; }
.icon-red { background: #fef3f2; color: #d92d20; }
.icon-amber { background: #fff6e5; color: #dc6803; }

.history-kpi-copy p {
    color: #475467;
    font-size: 11.5px;
    font-weight: 550;
    margin-bottom: 3px;
}

.history-kpi-copy strong {
    color: #101828;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 3px;
}

.history-kpi-copy em {
    color: #667085;
    font-size: 10.5px;
    font-weight: 400;
}

.sparkline {
    height: 38px;
    width: 104px;
}

.spark-line {
    stroke-width: 2;
}

.spark-fill {
    opacity: .08;
}

.sparkline-amber .spark-line,
.sparkline-amber .spark-fill { stroke: #dc6803; fill: #dc6803; }

.history-analytics-grid {
    gap: 14px;
    grid-template-columns: 340px minmax(0, 1fr);
    margin-bottom: 16px;
    min-width: 980px;
}

.history-card {
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    height: 240px;
    padding: 16px 18px;
}

.history-card h2 {
    color: #101828;
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 12px;
}

.completion-body {
    gap: 16px;
    grid-template-columns: 154px minmax(0, 1fr);
}

.donut-shell {
    height: 148px;
    width: 148px;
}

.donut-shell::after {
    height: 96px;
    width: 96px;
}

.donut-shell strong {
    color: #101828;
    font-size: 22px;
    font-weight: 700;
}

.donut-shell span {
    color: #667085;
    font-size: 10.5px;
}

.completion-legend {
    gap: 12px;
}

.completion-legend p {
    color: #475467;
    font-size: 12px;
    font-weight: 500;
    gap: 8px;
    grid-template-columns: 9px 1fr;
}

.completion-legend p strong {
    color: #101828;
    font-size: 11.5px;
    font-weight: 600;
    grid-column: 2;
}

.legend-dot,
.health-legend em {
    height: 8px;
    width: 8px;
}

.legend-dot.green,
.health-legend em.green { background: #039855; }
.legend-dot.red,
.health-legend em.red { background: #d92d20; }

.health-chart {
    gap: 8px;
    grid-template-columns: 32px 1fr;
}

.health-y-axis {
    color: #667085;
    font-size: 10px;
    font-weight: 400;
}

.health-chart svg {
    height: 150px;
}

.health-grid line {
    stroke: #eef1f4;
}

.health-bar {
    fill: #12b76a;
    opacity: .92;
}

.health-line {
    stroke: #d92d20;
    stroke-width: 2;
}

.health-line-dot {
    fill: #fff;
    stroke: #d92d20;
    stroke-width: 1.6;
}

.health-x-axis {
    color: #667085;
    font-size: 10.5px;
    font-weight: 400;
}

.health-legend {
    gap: 20px;
}

.health-legend span {
    color: #667085;
    font-size: 10.5px;
    font-weight: 500;
}

.history-list-surface {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    min-width: 1160px;
    overflow: visible;
}

.history-filter-wrap {
    border-bottom: 1px solid #eaecf0;
    margin-bottom: 0;
    min-width: 0;
    padding: 12px;
}

.history-filter-toolbar {
    gap: 10px;
    grid-template-columns: minmax(320px, 1.8fr) 160px 180px 180px 210px 135px;
}

.history-filter-toolbar .search-field,
.history-filter-toolbar .select-card,
.history-filter-toolbar .more-filters {
    border-color: #d0d5dd;
    border-radius: 7px;
    height: 40px;
}

.history-filter-toolbar .search-field {
    grid-template-columns: 30px minmax(0, 1fr);
}

.history-filter-toolbar .search-field .app-icon {
    height: 16px;
    width: 16px;
}

.history-filter-toolbar .search-field input {
    font-size: 12.5px;
    font-weight: 400;
}

.history-filter-toolbar .select-card {
    gap: 1px;
    padding: 6px 11px;
}

.history-filter-toolbar .select-card span {
    font-size: 10px;
    font-weight: 500;
}

.history-filter-toolbar .select-card select {
    font-size: 12px;
    font-weight: 500;
}

.history-filter-toolbar .more-filters {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 8px;
}

.history-filter-toolbar .more-filters .app-icon {
    height: 15px;
    width: 15px;
}

.history-custom-range {
    border-color: #eaecf0;
    border-radius: 8px;
}

.history-more-panel {
    border-color: #eaecf0;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
    top: 58px;
}

.history-custom-range span,
.history-more-panel span {
    font-size: 10.5px;
    font-weight: 500;
}

.history-more-panel input,
.history-more-panel select,
.history-more-panel button {
    border-color: #d0d5dd;
    font-size: 12px;
}

.history-table {
    border: 0;
    border-radius: 0;
    min-width: 0;
    overflow: visible;
}

.history-grid {
    grid-template-columns: 150px 170px 155px minmax(240px, 1fr) 135px 120px 120px 125px 90px 105px;
}

.history-table-header {
    background: #fcfcfd;
    border-bottom-color: #eaecf0;
    color: #667085;
    font-size: 10.5px;
    font-weight: 600;
    height: 38px;
    padding: 0 12px;
}

.history-row {
    border-bottom-color: #f2f4f7;
    min-height: 50px;
    padding: 8px 12px;
}

.history-row:hover {
    background: #fafcff;
}

.history-order-number,
.history-total {
    color: #101828;
    font-size: 12px;
    font-weight: 600;
}

.history-customer strong {
    color: #101828;
    font-size: 12px;
    font-weight: 550;
}

.history-avatar {
    background: #eef4ff;
    color: #1769ff;
    font-size: 10.5px;
    font-weight: 650;
    height: 29px;
    width: 29px;
}

.history-phone,
.history-date,
.history-items {
    color: #475467;
    font-size: 11.5px;
    font-weight: 400;
}

.history-date {
    font-weight: 500;
}

.history-status,
.payment-chip {
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 550;
    min-height: 22px;
    padding: 0 8px;
}

.history-status.status-completed { background: #ecfdf3; color: #027a48; }
.history-status.status-cancelled { background: #fef3f2; color: #b42318; }

.payment-chip {
    color: #344054;
    font-weight: 500;
}

.payment-paid { background: #ecfdf3; color: #027a48; }
.payment-partiallypaid { background: #fff6e5; color: #b54708; }
.payment-unpaid { background: #f2f4f7; color: #344054; }

.history-actions {
    gap: 7px;
}

.history-actions button {
    border-color: #d0d5dd;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    height: 30px;
    min-width: 46px;
    padding: 0 9px;
}

.history-actions .icon-action {
    color: #344054;
    min-width: 30px;
}

.history-footer {
    border-top-color: #eaecf0;
    min-height: 52px;
    padding: 0 12px;
}

.history-footer .pagination-controls {
    gap: 7px;
}

.past-sidebar .side-item em.green { background: #dcfae6; color: #039855; }
.past-sidebar .side-item em.red { background: #fee4e2; color: #d92d20; }
.past-sidebar .side-item em.amber { background: #fff6e5; color: #dc6803; }

@media (max-width: 1500px) {
    .past-orders-main {
        padding-left: 30px;
        padding-right: 30px;
    }

    .history-kpi-card {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    .sparkline {
        width: 86px;
    }

    .history-filter-toolbar {
        grid-template-columns: minmax(280px, 1.5fr) 140px 155px 155px 185px 125px;
    }
}

@media (max-width: 1280px) {
    .history-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-analytics-grid {
        grid-template-columns: 320px minmax(620px, 1fr);
    }
}

/* Deliveries / Dispatch Control refinement */
.deliveries-main {
    color: #071431;
    padding: 28px 30px 32px;
}

.deliveries-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.deliveries-header h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.18;
    margin: 0 0 7px;
}

.deliveries-header p {
    color: #475467;
    font-size: 13.5px;
    font-weight: 400;
    margin: 0;
}

.deliveries-header .new-order-button {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    white-space: nowrap;
}

.deliveries-header .new-order-button .app-icon {
    height: 17px;
    width: 17px;
}

.delivery-sidebar .side-item span {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.delivery-sidebar .side-item .app-icon,
.help-card .app-icon {
    height: 15px;
    width: 15px;
}

.dispatch-kpi-strip {
    border-color: #dfe5ef;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .03);
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    min-height: 82px;
    overflow: hidden;
    padding: 0;
}

.dispatch-kpi-strip > div {
    gap: 1px 14px;
    grid-template-areas:
        "icon value"
        "icon label"
        "icon delta";
    grid-template-columns: 40px minmax(0, 1fr);
    min-width: 0;
    padding: 17px 22px;
}

.dispatch-kpi-strip .kpi-icon {
    border-radius: 8px;
    grid-area: icon;
    height: 34px;
    width: 34px;
}

.dispatch-kpi-strip .kpi-icon .app-icon {
    height: 18px;
    width: 18px;
}

.dispatch-kpi-strip .kpi-purple {
    background: #f4ebff;
    color: #7f56d9;
}

.dispatch-kpi-strip .kpi-rose {
    background: #ffe4e8;
    color: #e11d48;
}

.dispatch-kpi-strip .kpi-green {
    background: #dcfae6;
    color: #039855;
}

.dispatch-kpi-strip .kpi-amber {
    background: #fff3dc;
    color: #dc6803;
}

.dispatch-kpi-strip strong {
    color: #071431;
    font-size: 23px;
    font-weight: 700;
    grid-area: value;
}

.dispatch-kpi-strip p {
    color: #101828;
    font-size: 12.5px;
    font-weight: 650;
    grid-area: label;
}

.dispatch-kpi-strip em {
    color: #039855;
    font-size: 11.5px;
    font-weight: 650;
    grid-area: delta;
}

.dispatch-live-grid {
    align-items: start;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 340px;
    margin-bottom: 14px;
}

.dispatch-map-card,
.active-drivers-card,
.dispatch-queue-surface {
    background: #fff;
    border: 1px solid #dfe5ef;
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .025);
    overflow: hidden;
}

.dispatch-map-card header {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    min-height: 50px;
    padding: 8px 13px;
}

.dispatch-map-card header > div:first-child strong {
    color: #101828;
    font-size: 15px;
    font-weight: 700;
}

.dispatch-map-card header > div:first-child span {
    color: #667085;
    font-size: 11.5px;
    margin-top: 2px;
}

.live-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    height: 22px;
    padding: 0 9px;
}

.live-pill.is-live {
    background: #dcfae6;
    color: #027a48;
}

.live-pill.is-offline {
    background: #f2f4f7;
    color: #667085;
}

.map-controls {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    position: relative;
}

.map-controls select,
.map-controls button {
    border-color: #d0d5dd;
    border-radius: 7px;
    color: #101828;
    font-size: 11.5px;
    font-weight: 600;
    height: 32px;
    min-width: 110px;
    padding: 0 10px;
}

.map-controls button {
    align-items: center;
    background: #fff;
    display: inline-flex;
    justify-content: center;
    min-width: 72px;
}

.map-legend {
    border-color: #d0d5dd;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
    padding: 10px 12px;
    right: 0;
    top: 38px;
}

.map-legend span {
    color: #475467;
    font-size: 11px;
    font-weight: 600;
}

.dispatch-map {
    height: 300px;
}

.leaflet-driver-marker {
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .24);
    font-size: 11px;
    font-weight: 750;
    height: 38px;
    position: relative;
    width: 38px;
}

.leaflet-driver-marker::after {
    background: #12b76a;
    border: 2px solid #fff;
    border-radius: 999px;
    bottom: 1px;
    content: "";
    height: 9px;
    position: absolute;
    right: 0;
    width: 9px;
}

.leaflet-driver-marker.stale::after {
    background: #f79009;
}

.leaflet-driver-marker.offline::after {
    background: #98a2b3;
}

.leaflet-driver-marker.selected {
    box-shadow: 0 0 0 5px rgba(21, 112, 239, .24), 0 12px 24px rgba(15, 23, 42, .28);
}

.leaflet-stop-marker {
    background: #f04438;
    border: 3px solid #fff;
    border-radius: 999px 999px 999px 4px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .2);
    height: 20px;
    transform: rotate(-45deg);
    width: 20px;
}

.leaflet-stop-marker.done {
    background: #12b76a;
}

.leaflet-stop-marker.selected {
    box-shadow: 0 0 0 4px rgba(240, 68, 56, .22), 0 8px 16px rgba(15, 23, 42, .22);
}

.active-drivers-card header {
    min-height: 50px;
    padding: 0 14px;
}

.active-drivers-card header strong {
    align-items: center;
    color: #101828;
    display: inline-flex;
    font-size: 15px;
    gap: 7px;
}

.active-drivers-card header strong span {
    align-items: center;
    background: #eef4ff;
    border-radius: 999px;
    color: #155eef;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
}

.active-drivers-card header button,
.view-all-drivers {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.active-drivers-card header button .app-icon,
.view-all-drivers .app-icon {
    height: 14px;
    width: 14px;
}

.driver-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr) 108px;
    height: 86px;
    min-height: 86px;
    padding: 12px 14px;
    position: relative;
}

.driver-row.selected {
    background: #f5f8ff;
}

.driver-row:focus {
    outline: none;
}

.driver-row:focus-visible {
    outline: 2px solid rgba(21, 94, 239, .35);
    outline-offset: -2px;
}

.driver-row.selected::before {
    background: #155eef;
    border-radius: 0 999px 999px 0;
    bottom: 12px;
    content: "";
    left: 0;
    position: absolute;
    top: 12px;
    width: 3px;
}

.driver-avatar {
    font-size: 12px;
    height: 36px;
    width: 36px;
}

.driver-main {
    min-width: 0;
}

.driver-main strong {
    color: #101828;
    display: block;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-main em,
.driver-meta span {
    color: #475467;
    display: block;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.driver-progress {
    background: #eaecf0;
    border-radius: 999px;
    display: block;
    height: 4px;
    margin: 6px 0 5px;
    overflow: hidden;
    width: 100%;
}

.driver-progress span {
    background: #155eef;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.driver-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    text-align: right;
}

.driver-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.freshness {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
}

.freshness::before {
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.freshness.live::before {
    background: #12b76a;
}

.freshness.stale::before {
    background: #f79009;
}

.freshness.offline::before {
    background: #98a2b3;
}

.view-all-drivers {
    border-top: 1px solid #eaecf0;
    height: 48px;
    padding: 0 14px;
}

.dispatch-queue-surface {
    min-width: 1100px;
}

.dispatch-filters {
    border-bottom: 1px solid #eaecf0;
    gap: 10px;
    grid-template-columns: minmax(300px, 1.6fr) 150px 150px 170px 160px 128px;
    margin-bottom: 0;
    padding: 12px;
}

.dispatch-filters .search-field,
.dispatch-filters .select-card,
.dispatch-filters .more-filters {
    border-color: #d0d5dd;
    border-radius: 7px;
    height: 40px;
}

.dispatch-filters .search-field {
    grid-template-columns: 32px minmax(0, 1fr);
}

.dispatch-filters .search-field .app-icon {
    color: #667085;
    height: 16px;
    margin-left: 11px;
    width: 16px;
}

.dispatch-filters input,
.dispatch-filters select {
    color: #101828;
    font-size: 12px;
    font-weight: 500;
}

.dispatch-filters input::placeholder {
    color: #667085;
    font-weight: 400;
}

.dispatch-filters .select-card {
    gap: 1px;
    padding: 6px 11px;
}

.dispatch-filters .select-card span {
    color: #475467;
    font-size: 10px;
    font-weight: 600;
}

.dispatch-filters .more-filters {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
}

.dispatch-filters .more-filters .app-icon {
    height: 15px;
    width: 15px;
}

.dispatch-list {
    border: 0;
    border-radius: 0;
    min-width: 0;
    overflow: visible;
}

.dispatch-grid {
    grid-template-columns: 28px 126px 142px 126px 130px 140px minmax(148px, 1fr) 108px 90px 110px;
}

.dispatch-table-head {
    background: #fcfcfd;
    border-bottom: 1px solid #eaecf0;
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
    height: 38px;
    padding: 0 12px;
}

.dispatch-row {
    border-bottom: 1px solid #f2f4f7;
    min-height: 54px;
    padding: 8px 12px;
    position: relative;
}

.dispatch-row:hover {
    background: #fafcff;
}

.dispatch-row.selected {
    background: #f5f8ff;
}

.dispatch-row.selected::before {
    background: #155eef;
    bottom: 8px;
    content: "";
    left: 0;
    position: absolute;
    top: 8px;
    width: 3px;
}

.dispatch-row > strong,
.dispatch-total {
    color: #101828;
    font-size: 12px;
    font-weight: 700;
}

.dispatch-customer {
    color: #101828;
    font-size: 12px;
    font-weight: 550;
}

.dispatch-customer span {
    font-size: 10.5px;
    height: 27px;
    width: 27px;
}

.dispatch-row > span,
.dispatch-driver,
.window-cell span {
    color: #475467;
    font-size: 11.5px;
    font-weight: 500;
}

.window-cell strong {
    color: #101828;
    font-size: 11.5px;
    font-weight: 700;
}

.dispatch-status,
.dispatch-list .payment-chip {
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 650;
    min-height: 22px;
    padding: 0 9px;
    width: max-content;
}

.dispatch-actions {
    gap: 7px;
}

.dispatch-actions button {
    border-color: #d0d5dd;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650;
    height: 30px;
    min-width: 48px;
    padding: 0 10px;
}

.dispatch-actions .primary {
    background: #155eef;
    border-color: #155eef;
}

.dispatch-actions .icon-action {
    align-items: center;
    color: #344054;
    display: inline-flex;
    justify-content: center;
    min-width: 34px;
    padding: 0;
}

.dispatch-actions .icon-action .app-icon {
    height: 16px;
    width: 16px;
}

.dispatch-list .orders-footer {
    border-top: 1px solid #eaecf0;
    min-height: 52px;
    padding: 0 12px;
}

.create-dispatch-modal header button {
    align-items: center;
    border-radius: 7px;
    color: #344054;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.create-dispatch-modal header button .app-icon {
    height: 18px;
    width: 18px;
}

@media (max-width: 1500px) {
    .deliveries-main {
        padding-left: 26px;
        padding-right: 26px;
    }

    .dispatch-live-grid {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .dispatch-kpi-strip > div {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dispatch-map {
        height: 285px;
    }
}

@media (max-width: 1280px) {
    .dispatch-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dispatch-live-grid {
        grid-template-columns: 1fr;
    }

    .dispatch-filters {
        grid-template-columns: minmax(280px, 1fr) repeat(3, 150px);
    }

    .dispatch-filters .more-filters {
        grid-column: auto;
    }
}

/* Accounting Workspace refinement */
.accounting-main {
    color: #101828;
    padding: 24px 30px 32px;
}

.accounting-header {
    align-items: flex-start;
    margin-bottom: 18px;
}

.accounting-header h1 {
    color: #101828;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.18;
    margin-bottom: 7px;
}

.accounting-header p {
    color: #667085;
    font-size: 13px;
    font-weight: 400;
}

.accounting-header-actions {
    gap: 10px;
}

.accounting-header-actions .period-select,
.accounting-header-actions .secondary-action,
.accounting-header-actions .new-order-button {
    align-items: center;
    border-color: #d0d5dd;
    border-radius: 7px;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: 8px;
    height: 40px;
    justify-content: center;
}

.accounting-header-actions .period-select {
    background: #fff;
    border: 1px solid #d0d5dd;
    padding: 0 10px;
    width: 142px;
}

.accounting-header-actions .period-select select {
    border: 0;
    color: #101828;
    font-size: 12.5px;
    font-weight: 600;
    outline: 0;
    width: 100%;
}

.accounting-header-actions .secondary-action {
    background: #fff;
    color: #101828;
    padding: 0 16px;
    width: 142px;
}

.accounting-header-actions .new-order-button {
    padding: 0 16px;
    width: 135px;
}

.accounting-header-actions .app-icon {
    height: 16px;
    width: 16px;
}

.accounting-sidebar .side-item span {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.accounting-sidebar .side-item .app-icon {
    height: 15px;
    width: 15px;
}

.accounting-sidebar .side-item strong {
    font-size: 13px;
    font-weight: 500;
}

.accounting-sidebar .side-item.quick em {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    height: 20px;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
}

.accounting-sidebar .side-item.quick em .app-icon {
    height: 13px;
    width: 13px;
}

.accounting-kpi-grid {
    gap: 14px;
    margin-bottom: 14px;
    min-width: 1080px;
}

.accounting-kpi-card {
    align-items: center;
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) 104px;
    min-height: 112px;
    padding: 16px;
}

.accounting-kpi-copy {
    gap: 13px;
    grid-template-columns: 42px minmax(0, 1fr);
}

.accounting-kpi-icon {
    border-radius: 10px;
    height: 40px;
    width: 40px;
}

.accounting-kpi-icon .app-icon {
    height: 19px;
    width: 19px;
}

.icon-blue { background: #eaf2ff; color: #1769ff; }
.icon-red { background: #fee4e2; color: #d92d20; }
.icon-green { background: #dcfae6; color: #039855; }
.icon-purple { background: #f4ebff; color: #7f56d9; }
.icon-amber { background: #fff6e5; color: #dc6803; }
.icon-neutral { background: #f2f4f7; color: #475467; }

.accounting-kpi-copy p {
    color: #475467;
    font-size: 11.5px;
    font-weight: 550;
    margin-bottom: 5px;
}

.accounting-kpi-copy strong {
    color: #101828;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.08;
    margin-bottom: 7px;
}

.kpi-state-red .accounting-kpi-copy strong {
    color: #7a271a;
}

.accounting-kpi-copy em {
    color: #667085;
    display: block;
    font-size: 10.8px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
}

.kpi-state-red .accounting-kpi-copy em {
    color: #d92d20;
}

.sparkline {
    height: 36px;
    overflow: visible;
    width: 104px;
}

.spark-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.spark-fill {
    opacity: .075;
}

.sparkline-blue .spark-line,
.sparkline-blue .spark-fill { stroke: #1769ff; fill: #1769ff; }
.sparkline-red .spark-line,
.sparkline-red .spark-fill { stroke: #d92d20; fill: #d92d20; }
.sparkline-green .spark-line,
.sparkline-green .spark-fill { stroke: #039855; fill: #039855; }
.sparkline-purple .spark-line,
.sparkline-purple .spark-fill { stroke: #7f56d9; fill: #7f56d9; }
.sparkline-neutral .spark-line,
.sparkline-neutral .spark-fill { stroke: #667085; fill: #667085; }

.accounting-analytics-grid {
    gap: 14px;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .86fr) minmax(250px, .72fr);
    margin-bottom: 14px;
    min-width: 1080px;
}

.accounting-card {
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: none;
    height: 270px;
    padding: 16px;
}

.accounting-card h2,
.accounting-card header h2 {
    color: #101828;
    font-size: 13.5px;
    font-weight: 600;
}

.accounting-card header select {
    border-color: #d0d5dd;
    border-radius: 7px;
    color: #101828;
    font-size: 11px;
    font-weight: 500;
    height: 32px;
    padding: 0 10px;
}

.rev-chart {
    gap: 5px;
    grid-template-rows: 22px 178px 18px;
    height: 224px;
    margin-top: 8px;
}

.rev-legend {
    color: #475467;
    font-size: 10.5px;
    font-weight: 500;
    gap: 16px;
}

.rev-legend em {
    height: 7px;
    width: 7px;
}

.rev-chart svg {
    height: 178px;
}

.health-grid line {
    stroke: #eef1f4;
    stroke-width: 1;
}

.health-grid text {
    fill: #667085;
    font-size: 10px;
    font-weight: 400;
}

.rev-bar {
    fill: #1769ff;
}

.rev-line {
    fill: none;
    stroke: #d92d20;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rev-point {
    fill: #fff;
    stroke: #d92d20;
    stroke-width: 2;
}

.rev-axis {
    color: #667085;
    font-size: 10.5px;
    font-weight: 400;
}

.expense-breakdown-body {
    gap: 13px;
    grid-template-columns: 140px minmax(0, 1fr);
    margin-top: 14px;
}

.expense-donut {
    height: 138px;
    width: 138px;
}

.expense-donut::after {
    height: 82px;
    width: 82px;
}

.expense-donut strong {
    color: #101828;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.expense-donut span {
    color: #475467;
    font-size: 10px;
    font-weight: 600;
}

.expense-slices {
    gap: 9px;
}

.expense-slices button {
    color: #101828;
    font-size: 11px;
    gap: 7px;
    grid-template-columns: 8px minmax(72px, 1fr) auto 38px;
}

.expense-slices button:hover strong {
    color: #1769ff;
}

.expense-slices strong {
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-slices em {
    color: #344054;
    font-size: 10.5px;
    font-weight: 550;
}

.expense-slices small {
    color: #667085;
    font-size: 10.5px;
    font-weight: 500;
    text-align: right;
}

.dot-blue { background: #1769ff; }
.dot-green { background: #039855; }
.dot-purple { background: #7f56d9; }
.dot-amber { background: #dc6803; }
.dot-violet { background: #c11574; }

.view-details {
    align-items: center;
    border-color: #eaecf0;
    border-radius: 7px;
    color: #344054;
    display: inline-flex;
    font-size: 11px;
    font-weight: 500;
    gap: 6px;
    height: 32px;
    justify-content: center;
    margin-top: 14px;
}

.view-details .app-icon {
    height: 13px;
    width: 13px;
}

.cash-card {
    height: 270px;
}

.cash-list {
    gap: 0;
    margin-top: 14px;
}

.cash-list p {
    border: 0;
    border-bottom: 1px solid #f2f4f7;
    border-radius: 0;
    color: #475467;
    font-size: 11px;
    font-weight: 500;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 46px;
    padding: 8px 0;
}

.cash-list p:last-child {
    border-bottom: 0;
}

.cash-list strong {
    color: #101828;
    font-size: 11.8px;
    font-weight: 600;
}

.cash-icon {
    height: 28px;
    width: 28px;
}

.cash-icon .app-icon {
    height: 14px;
    width: 14px;
}

.accounting-insights {
    gap: 14px;
    margin-bottom: 14px;
    min-width: 1080px;
}

.accounting-insight {
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: none;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    min-height: 76px;
    padding: 13px 14px;
}

.accounting-insight:hover {
    background: #fafcff;
}

.insight-icon {
    border-radius: 10px;
    height: 34px;
    width: 34px;
}

.insight-icon .app-icon {
    height: 17px;
    width: 17px;
}

.accounting-insight p {
    color: #667085;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 3px;
}

.accounting-insight strong {
    color: #101828;
    font-size: 16px;
    font-weight: 650;
}

.accounting-insight em {
    color: #667085;
    font-size: 10.5px;
    font-weight: 400;
}

.accounting-insight b {
    color: #98a2b3;
    display: inline-flex;
}

.accounting-insight:hover b {
    color: #1769ff;
}

.accounting-insight b .app-icon {
    height: 15px;
    width: 15px;
}

.accounting-ledger-surface {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    min-width: 1080px;
    overflow: hidden;
}

.accounting-filters {
    border-bottom: 1px solid #eaecf0;
    gap: 10px;
    grid-template-columns: minmax(320px, 1.9fr) 120px 150px 170px 170px 125px;
    margin-bottom: 0;
    min-width: 0;
    padding: 12px;
}

.accounting-filters label,
.accounting-filters .more-filters {
    border-color: #d0d5dd;
    border-radius: 7px;
    height: 38px;
}

.accounting-filters .search-field {
    align-items: center;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
}

.accounting-filters .search-field .app-icon {
    color: #667085;
    height: 16px;
    margin-left: 11px;
    width: 16px;
}

.accounting-filters select,
.accounting-filters input {
    color: #101828;
    font-size: 11.8px;
    font-weight: 500;
    padding: 0 11px;
}

.accounting-filters input::placeholder {
    color: #667085;
    font-weight: 400;
}

.accounting-filters .more-filters {
    align-items: center;
    background: #fff;
    color: #344054;
    display: inline-flex;
    font-size: 11.8px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
}

.accounting-filters .more-filters .app-icon {
    height: 15px;
    width: 15px;
}

.accounting-more {
    border-color: #eaecf0;
    border-radius: 9px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
    gap: 10px;
    top: 58px;
}

.accounting-more span {
    font-size: 10.5px;
    font-weight: 500;
}

.transaction-table {
    border: 0;
    border-radius: 0;
    min-width: 0;
    overflow: visible;
}

.transaction-grid {
    grid-template-columns: 135px 155px 185px 126px 104px 90px 120px 130px 112px 98px 46px;
}

.transaction-header {
    background: #fcfcfd;
    border-bottom-color: #eaecf0;
    color: #667085;
    font-size: 10.5px;
    font-weight: 600;
    height: 38px;
    padding: 0 12px;
}

.transaction-row {
    border-bottom-color: #f2f4f7;
    color: #475467;
    font-size: 11.5px;
    font-weight: 400;
    min-height: 47px;
    padding: 7px 12px;
}

.transaction-row:hover {
    background: #fafcff;
}

.transaction-number {
    color: #101828;
    font-size: 11.5px;
    font-weight: 600;
}

.transaction-description {
    color: #101828;
    font-size: 11.5px;
    font-weight: 500;
}

.transaction-counterparty,
.transaction-category,
.transaction-method,
.transaction-date {
    color: #475467;
    font-size: 11px;
    font-weight: 400;
}

.transaction-order {
    color: #1769ff;
    font-size: 11px;
    font-weight: 550;
}

.transaction-order.muted {
    color: #667085;
    font-weight: 400;
}

.amount {
    font-size: 11.5px;
    font-weight: 600;
}

.amount-revenue { color: #039855; }
.amount-expense { color: #d92d20; }
.amount-refund { color: #b42318; }
.amount-adjustment { color: #7f56d9; }

.accounting-type,
.accounting-status {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 550;
    min-height: 22px;
    padding: 0 8px;
}

.type-revenue { background: #ecfdf3; color: #027a48; }
.type-expense { background: #fef3f2; color: #b42318; }
.type-refund { background: #f4ebff; color: #6941c6; }
.type-adjustment { background: #eef4ff; color: #175cd3; }
.status-posted { background: #ecfdf3; color: #027a48; }
.status-reconciled { background: #eef4ff; color: #175cd3; }
.status-pending { background: #fff6e5; color: #b54708; }
.status-voided { background: #f2f4f7; color: #475467; }

.transaction-row .icon-action {
    align-items: center;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    color: #344054;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.transaction-row .icon-action:hover {
    background: #f8fafc;
}

.transaction-row .icon-action .app-icon {
    height: 15px;
    width: 15px;
}

.transaction-table .orders-footer {
    border-top: 1px solid #eaecf0;
    min-height: 52px;
    padding: 0 12px;
}

.transaction-detail-modal,
.add-expense-modal {
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
    padding: 0;
}

.transaction-detail-modal header,
.add-expense-modal header {
    border-bottom: 1px solid #eaecf0;
    min-height: 58px;
    padding: 0 18px;
}

.transaction-detail-modal h2,
.add-expense-modal h2 {
    color: #101828;
    font-size: 18px;
    font-weight: 650;
    margin: 0;
}

.transaction-detail-modal header button,
.add-expense-modal header button {
    align-items: center;
    border-radius: 7px;
    color: #344054;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.transaction-detail-modal header button .app-icon,
.add-expense-modal header button .app-icon {
    height: 18px;
    width: 18px;
}

.transaction-detail-modal p {
    color: #475467;
    font-size: 12.5px;
    margin: 12px 18px;
}

.expense-form {
    gap: 12px;
    margin: 16px 18px 0;
}

.expense-form span {
    color: #475467;
    font-size: 11px;
    font-weight: 500;
}

.expense-form input,
.expense-form select,
.expense-form textarea {
    border-color: #d0d5dd;
    border-radius: 7px;
    color: #101828;
    font-size: 12px;
    min-height: 38px;
}

.add-expense-modal footer {
    border-top: 1px solid #eaecf0;
    margin-top: 16px;
    padding: 14px 18px;
}

.add-expense-modal footer button {
    border-color: #d0d5dd;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    height: 38px;
}

@media (max-width: 1500px) {
    .accounting-main {
        padding-left: 28px;
        padding-right: 28px;
    }

    .accounting-kpi-grid,
    .accounting-analytics-grid,
    .accounting-insights,
    .accounting-ledger-surface {
        min-width: 1060px;
    }

    .accounting-card {
        height: 258px;
    }

    .rev-chart {
        grid-template-rows: 20px 166px 18px;
        height: 212px;
    }

    .rev-chart svg {
        height: 166px;
    }

    .cash-card {
        height: 258px;
    }

    .expense-breakdown-body {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .expense-donut {
        height: 128px;
        width: 128px;
    }

    .expense-donut::after {
        height: 78px;
        width: 78px;
    }

    .transaction-grid {
        grid-template-columns: 126px 145px 165px 116px 96px 82px 112px 118px 102px 90px 42px;
    }
}