/* Final operation-page layer. Loaded after legacy styles on purpose. */
:root {
    --ops-red: #e30613;
    --ops-red-dark: #9f1019;
    --ops-black: #101010;
    --ops-ink: #172033;
    --ops-muted: #6d7789;
    --ops-line: #dfe5ed;
    --ops-surface: #ffffff;
    --ops-soft: #f6f8fb;
    --ops-green: #07875e;
    --ops-blue: #1f6fff;
    --ops-radius: 8px;
}

/* Admin dashboard */
.admin-command-banner {
    align-items: center;
    background: var(--ops-black);
    border: 1px solid #252525;
    border-bottom: 3px solid var(--ops-red);
    border-radius: var(--ops-radius);
    color: #fff;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-bottom: 16px;
    min-height: 132px;
    padding: 24px 28px;
}

.admin-command-banner-icon,
.payments-reference-hero > span,
.returns-hero > span {
    align-items: center;
    background: rgba(227, 6, 19, .14);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.admin-command-banner-icon svg,
.payments-reference-hero > span svg,
.returns-hero > span svg {
    color: #fff;
    height: 26px;
    width: 26px;
}

.admin-command-banner-copy > span {
    color: #ffacb3;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.admin-command-banner h2 {
    color: #fff;
    font-size: 27px;
    line-height: 1.15;
    margin: 0;
}

.admin-command-banner p {
    color: #d3d8df;
    margin: 7px 0 0;
    max-width: 700px;
}

.admin-command-banner-period {
    border-left: 1px solid rgba(255, 255, 255, .18);
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding-left: 20px;
}

.admin-command-banner-period span {
    color: #aeb6c2;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-command-banner-period strong {
    color: #fff;
    font-size: 15px;
}

.admin-dashboard-summary .stat-card,
.ledger-summary-grid .ledger-stat {
    border-left: 5px solid var(--ops-red);
    min-height: 105px;
}

/* Payment ledger */
.payments-reference-hero {
    align-items: center;
    background: var(--ops-black);
    border: 1px solid #252525;
    border-bottom: 3px solid var(--ops-red);
    border-radius: var(--ops-radius);
    color: #fff;
    display: flex;
    gap: 17px;
    justify-content: flex-start;
    margin-bottom: 16px;
    min-height: 130px;
    padding: 22px 28px;
}

.payments-reference-hero h2,
.returns-hero h2 {
    color: #fff;
    font-size: 27px;
    line-height: 1.15;
    margin: 0;
}

.payments-reference-hero p,
.returns-hero p {
    color: #d1d7df;
    margin: 7px 0 0;
}

.payments-reference-hero .btn {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    margin-left: auto;
}

.payments-reference-hero .btn:hover {
    background: #fff;
    color: var(--ops-black);
}

.ledger-summary-grid { margin-bottom: 16px; }
.payment-ledger-panel { margin-top: 0; overflow: hidden; }

.ledger-toolbar {
    align-items: start;
    display: grid;
    gap: 18px 22px;
    grid-template-columns: minmax(180px, 1fr) auto;
    padding: 24px;
}

.ledger-toolbar .table-toolbar-title strong {
    color: var(--ops-ink);
    display: block;
    font-size: 23px;
    line-height: 1.1;
}

.ledger-entries-control { justify-self: end; }

.entries-control label {
    align-items: center;
    color: #56647a;
    display: inline-flex;
    font-weight: 600;
    gap: 9px;
    white-space: nowrap;
}

.entries-control select {
    background: #fff;
    border: 1px solid #ccd6e3;
    border-radius: 8px;
    color: #192233;
    height: 44px;
    min-width: 120px;
    padding: 0 34px 0 13px;
}

.ledger-filters {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(148px, .9fr) minmax(130px, .8fr) minmax(200px, 1.25fr) minmax(150px, .9fr) minmax(150px, .9fr) auto auto;
    width: 100%;
}

.ledger-filters input,
.ledger-filters select,
.returns-filter-form input,
.returns-filter-form select,
.advice-search-form input,
.ops-side-drawer input,
.ops-side-drawer select,
.ops-side-drawer textarea {
    background: #fff;
    border: 1px solid #ccd6e3;
    border-radius: 8px;
    color: var(--ops-ink);
    min-height: 46px;
    padding: 0 13px;
    width: 100%;
}

.ledger-filters input:focus,
.ledger-filters select:focus,
.returns-filter-form input:focus,
.returns-filter-form select:focus,
.advice-search-form input:focus,
.ops-side-drawer input:focus,
.ops-side-drawer select:focus,
.ops-side-drawer textarea:focus {
    border-color: var(--ops-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .12);
    outline: 0;
}

.ledger-filters .btn { align-self: stretch; min-height: 46px; white-space: nowrap; }

/* Shipper advice */
.advice-reference-page,
.returns-reference-page {
    display: grid;
    gap: 20px;
}

.advice-hero {
    align-items: center;
    background: var(--ops-black);
    border: 1px solid #252525;
    border-bottom: 3px solid var(--ops-red);
    border-radius: var(--ops-radius);
    color: #fff;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 25px 28px;
}

.advice-support-pill {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 7px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.advice-support-pill svg { height: 16px; width: 16px; }

.advice-hero h2 {
    color: #fff;
    font-size: 28px;
    line-height: 1.16;
    margin: 13px 0 7px;
}

.advice-hero p { color: #d1d7df; margin: 0; max-width: 700px; }

.advice-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.advice-hero-metrics > div {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    display: grid;
    min-width: 118px;
    padding: 11px 13px;
}

.advice-hero-metrics strong { color: #fff; font-size: 22px; line-height: 1; }
.advice-hero-metrics span { color: #c6cdd7; font-size: 12px; margin-top: 5px; }

.advice-recovery-ring {
    align-content: center;
    border: 7px solid #5c646f;
    border-left-color: var(--ops-red);
    border-radius: 50%;
    display: grid;
    height: 106px;
    justify-items: center;
    transform: rotate(-36deg);
    width: 106px;
}

.advice-recovery-ring strong,
.advice-recovery-ring span { transform: rotate(36deg); }
.advice-recovery-ring strong { color: #fff; font-size: 25px; line-height: 1; }
.advice-recovery-ring span { color: #c6cdd7; font-size: 11px; margin-top: 3px; text-transform: uppercase; }

.advice-export { align-self: start; border-color: rgba(255, 255, 255, .3); color: #fff; }
.advice-export:hover { background: #fff; color: var(--ops-black); }

.advice-section-heading { align-items: center; display: flex; gap: 10px; }
.advice-section-heading > span {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: var(--ops-blue);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.advice-section-heading svg { height: 19px; width: 19px; }
.advice-section-heading strong,
.advice-section-heading small { display: block; }
.advice-section-heading strong { color: var(--ops-ink); }
.advice-section-heading small { color: var(--ops-muted); margin-top: 2px; }

.advice-activity-grid,
.returns-summary-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advice-activity-grid article,
.returns-summary-grid article {
    align-items: center;
    background: var(--ops-surface);
    border: 1px solid var(--ops-line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 96px;
    padding: 18px;
}

.advice-activity-grid article > span,
.returns-summary-grid article > span {
    align-items: center;
    background: #e8f1ff;
    border-radius: 8px;
    color: var(--ops-blue);
    display: inline-flex;
    grid-row: span 2;
    height: 46px;
    justify-content: center;
    margin-right: 13px;
    width: 46px;
}
.advice-activity-grid article:nth-child(2) > span,
.returns-summary-grid article:nth-child(4) > span { background: #e2f5ee; color: #07875e; }
.advice-activity-grid article:nth-child(3) > span,
.returns-summary-grid article:nth-child(3) > span { background: #f0e8fb; color: #7b3db2; }
.returns-summary-grid article:first-child > span { background: #fae2e3; color: #c82731; }
.returns-summary-grid article:nth-child(2) > span { background: #fff2db; color: #a26900; }
.advice-activity-grid strong,
.returns-summary-grid strong { color: var(--ops-ink); font-size: 25px; line-height: 1; }
.advice-activity-grid small,
.returns-summary-grid small { color: var(--ops-muted); margin-top: 5px; }

.advice-impact-panel {
    align-items: center;
    background: #f4faf8;
    border: 1px solid #c5e7dc;
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr auto 1fr;
    padding: 22px;
}
.advice-impact-panel > div:not(.advice-impact-bar) { display: grid; justify-items: center; }
.advice-impact-panel strong { color: var(--ops-green); font-size: 31px; line-height: 1; }
.advice-impact-panel span { color: #60708a; font-size: 12px; font-weight: 700; margin-top: 5px; text-transform: uppercase; }
.advice-impact-arrow { color: var(--ops-green) !important; font-size: 28px !important; }
.advice-impact-bar { background: #dceae5; border-radius: 999px; grid-column: 1 / -1; height: 8px; overflow: hidden; }
.advice-impact-bar > span { background: var(--ops-green); border-radius: inherit; display: block; height: 100%; margin: 0; }

.advice-orders-panel { overflow: hidden; }
.advice-list-toolbar {
    align-items: center;
    display: grid;
    gap: 15px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 18px 22px;
}

.advice-filter-tabs,
.returns-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.advice-filter-tabs a,
.returns-tabs a {
    align-items: center;
    border: 1px solid #dae2ed;
    border-radius: 999px;
    color: #42516a;
    display: inline-flex;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    text-decoration: none;
}

.advice-filter-tabs a span,
.returns-tabs a span { background: #e7edf4; border-radius: 999px; font-size: 12px; padding: 2px 7px; }
.advice-filter-tabs a.active,
.returns-tabs a.active { background: var(--ops-red); border-color: var(--ops-red); color: #fff; }
.advice-filter-tabs a.active span,
.returns-tabs a.active span { background: rgba(255,255,255,.2); }

.advice-search-form { align-items: center; display: flex; gap: 8px; }
.advice-search-form label,
.returns-search {
    align-items: center;
    background: #fff;
    border: 1px solid #ccd6e3;
    border-radius: 8px;
    display: flex;
    min-height: 44px;
    overflow: hidden;
}
.advice-search-form label svg,
.returns-search svg { color: #71809a; flex: 0 0 auto; height: 19px; margin-left: 12px; width: 19px; }
.advice-search-form input,
.returns-search input { border: 0; box-shadow: none; min-width: 220px; }
.advice-search-form input:focus,
.returns-search input:focus { box-shadow: none; }

.advice-order-list { display: grid; gap: 10px; padding: 0 22px 20px; }
.advice-order-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ops-line);
    border-radius: 8px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: 94px;
    padding: 16px 20px;
}
.advice-order-primary { display: grid; gap: 3px; }
.advice-order-primary strong { color: var(--ops-green); font-size: 16px; }
.advice-order-primary > span { color: #8290a5; font-size: 13px; }
.advice-order-primary small { color: #65728a; }
.advice-order-primary small:last-child { color: #9ca7b7; }
.advice-order-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Returns */
.returns-hero {
    align-items: center;
    background: var(--ops-red-dark);
    border: 1px solid #a3242d;
    border-bottom: 3px solid var(--ops-red);
    border-radius: 8px;
    color: #fff;
    display: flex;
    gap: 17px;
    min-height: 126px;
    padding: 23px 28px;
}
.returns-orders-panel { overflow: hidden; }
.returns-tabs { border-bottom: 1px solid var(--ops-line); padding: 18px 22px; }
.returns-toolbar {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 18px 22px;
}
.returns-filter-form {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1.25fr) minmax(145px, .8fr) minmax(145px, .8fr) auto;
}
.returns-search input { min-width: 0; }
.returns-filter-form .btn { min-height: 46px; }
.returns-bulk-button { white-space: nowrap; }
.returns-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.returns-confirm-button { background: var(--ops-blue); border-color: var(--ops-blue); }
.returns-confirm-button:hover { background: #1356c7; border-color: #1356c7; }
.returns-orders-table th { white-space: nowrap; }

/* Shared right-side dialogs */
body:has(.ops-side-drawer[open]) { overflow: hidden; }
.ops-side-drawer {
    background: #fff;
    border: 0;
    box-shadow: -18px 0 44px rgba(18, 28, 45, .22);
    color: var(--ops-ink);
    height: 100dvh;
    margin: 0 0 0 auto;
    max-height: none;
    max-width: 96vw;
    overflow: hidden;
    padding: 0;
    width: min(590px, 96vw);
}
.ops-side-drawer.ops-side-drawer-wide { width: min(730px, 96vw); }
.ops-side-drawer::backdrop { background: rgba(12, 18, 29, .54); backdrop-filter: blur(2px); }
.ops-side-drawer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ops-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--ops-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 21px 24px;
}
.ops-drawer-header > div { display: grid; gap: 3px; }
.ops-drawer-header strong { color: var(--ops-ink); font-size: 19px; }
.ops-drawer-header small { color: var(--ops-muted); }
.ops-drawer-header button {
    align-items: center;
    background: #f5f7fa;
    border: 0;
    border-radius: 8px;
    color: #647086;
    cursor: pointer;
    display: inline-flex;
    font-size: 27px;
    height: 38px;
    justify-content: center;
    line-height: 1;
    width: 38px;
}
.ops-drawer-header button:hover { background: #fee5e7; color: var(--ops-red); }
.ops-drawer-body { align-content: start; display: grid; gap: 20px; overflow-y: auto; padding: 24px; }
.ops-drawer-body > label,
.ops-drawer-section > label { color: #35435c; display: grid; font-size: 13px; font-weight: 750; gap: 7px; }
.ops-side-drawer textarea { min-height: 102px; padding: 12px 13px; resize: vertical; }
.ops-drawer-section { border-bottom: 1px solid #e7ebf0; padding-bottom: 18px; }
.ops-drawer-section h3 { color: #5d6b82; font-size: 12px; letter-spacing: .07em; margin: 0 0 13px; text-transform: uppercase; }
.ops-drawer-section dl { display: grid; margin: 0; }
.ops-drawer-section dl > div {
    align-items: start;
    border-top: 1px solid #edf0f4;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(120px, .72fr) minmax(0, 1.3fr);
    padding: 12px 0;
}
.ops-drawer-section dl > div:first-child { border-top: 0; padding-top: 0; }
.ops-drawer-section dt { color: #75829a; font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.ops-drawer-section dd { color: var(--ops-ink); font-weight: 700; margin: 0; overflow-wrap: anywhere; text-align: right; }
.ops-timeline { display: grid; gap: 0; padding-left: 17px; }
.ops-timeline > div { border-left: 2px solid #bdd6ce; display: grid; gap: 4px; padding: 0 0 22px 18px; position: relative; }
.ops-timeline > div::before { background: var(--ops-red); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--ops-red); content: ''; height: 10px; left: -7px; position: absolute; top: 3px; width: 10px; }
.ops-timeline small { color: #738099; }
.ops-timeline strong { color: var(--ops-ink); }
.ops-timeline span { color: #71809b; font-size: 13px; }
.ops-drawer-actions { align-items: center; border-top: 1px solid var(--ops-line); display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; padding-top: 18px; }
.return-scanner-placeholder { align-items: center; background: #f5f8fc; border: 1px dashed #b7c6dc; border-radius: 8px; display: grid; gap: 6px; justify-items: center; margin-bottom: 16px; padding: 22px; text-align: center; }
.return-scanner-placeholder > span { color: var(--ops-blue); }
.return-scanner-placeholder svg { height: 28px; width: 28px; }
.return-scanner-placeholder small { color: var(--ops-muted); }
.returns-info-box { background: #f2f7ff; border: 1px solid #d6e5fb; border-radius: 8px; margin-bottom: 14px; padding: 14px; }
.returns-info-box strong { color: #2358a9; }
.returns-info-box p { color: #53647e; font-size: 14px; margin: 5px 0 0; }

@media (max-width: 1280px) {
    .ledger-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ledger-filters .btn { width: 100%; }
    .returns-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .advice-list-toolbar { grid-template-columns: 1fr auto; }
    .advice-search-form { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
    .admin-command-banner,
    .advice-hero { grid-template-columns: auto minmax(0, 1fr); }
    .admin-command-banner-period,
    .advice-recovery-ring { grid-column: 1 / -1; }
    .admin-command-banner-period { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 14px 0 0; }
    .advice-recovery-ring { justify-self: start; }
    .advice-export { grid-column: 2; justify-self: end; }
    .advice-activity-grid,
    .returns-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .returns-toolbar { grid-template-columns: 1fr auto; }
    .returns-filter-form { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .admin-command-banner,
    .payments-reference-hero,
    .returns-hero,
    .advice-hero { align-items: flex-start; gap: 14px; min-height: 0; padding: 19px; }
    .admin-command-banner { grid-template-columns: auto minmax(0, 1fr); }
    .admin-command-banner-icon,
    .payments-reference-hero > span,
    .returns-hero > span { height: 48px; width: 48px; }
    .admin-command-banner h2,
    .payments-reference-hero h2,
    .returns-hero h2,
    .advice-hero h2 { font-size: 23px; }
    .payments-reference-hero { flex-wrap: wrap; }
    .payments-reference-hero .btn { margin-left: 0; }
    .advice-hero { grid-template-columns: 1fr; }
    .advice-export { grid-column: auto; justify-self: start; }
    .advice-hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .advice-hero-metrics > div { min-width: 0; }
    .ledger-toolbar { grid-template-columns: 1fr; padding: 18px; }
    .ledger-entries-control { justify-self: start; }
    .ledger-filters { grid-template-columns: 1fr; }
    .advice-activity-grid,
    .returns-summary-grid { grid-template-columns: 1fr; }
    .advice-list-toolbar,
    .returns-toolbar { grid-template-columns: 1fr; padding: 16px; }
    .advice-search-form { align-items: stretch; flex-direction: column; }
    .advice-search-form label { width: 100%; }
    .advice-search-form input { min-width: 0; }
    .advice-filter-tabs a,
    .returns-tabs a { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .advice-order-row { align-items: flex-start; flex-direction: column; padding: 15px; }
    .advice-order-actions { justify-content: flex-start; }
    .returns-filter-form { grid-template-columns: 1fr; }
    .returns-toolbar > .entries-control { justify-self: start; }
    .ops-side-drawer { max-width: 100vw; width: 100vw; }
    .ops-drawer-header,
    .ops-drawer-body { padding: 18px; }
    .ops-drawer-section dl > div { gap: 7px; grid-template-columns: 1fr; }
    .ops-drawer-section dd { text-align: left; }
    .ops-drawer-actions { align-items: stretch; flex-direction: column-reverse; }
    .ops-drawer-actions .btn { width: 100%; }
}