/*
  CY Flow visual system
  Shared polish layer for the container yard application.
*/
:root {
    --cy-bg: #f4efe6;
    --cy-bg-2: #fbf7ef;
    --cy-surface: #fffdf9;
    --cy-surface-2: #f7f2ea;
    --cy-text: #1f2933;
    --cy-muted: #64707b;
    --cy-brand: #143730;
    --cy-brand-2: #245548;
    --cy-deep: #113a5c;
    --cy-accent: #b86d38;
    --cy-accent-soft: #f5e4d6;
    --cy-line: rgba(20, 55, 48, .12);
    --cy-line-strong: rgba(20, 55, 48, .22);
    --cy-shadow: 0 18px 42px rgba(20, 34, 28, .08);
    --cy-shadow-soft: 0 10px 26px rgba(20, 34, 28, .06);
    --cy-radius-sm: 6px;
    --cy-radius-md: 8px;
    --cy-radius-lg: 12px;
    --cy-radius-xl: 16px;
    --cy-ok: #1e7a58;
    --cy-ok-bg: #e6f4ed;
    --cy-warn: #a35f22;
    --cy-warn-bg: #faead8;
    --cy-danger: #b54848;
    --cy-danger-bg: #fde7e7;
    --cy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

:root[data-cy-theme="dark"] {
    --cy-bg: #101214;
    --cy-bg-2: #151719;
    --cy-surface: #1b1d20;
    --cy-surface-2: #24272b;
    --cy-text: #f4f0e8;
    --cy-muted: #a9adb4;
    --cy-brand: #f4f0e8;
    --cy-brand-2: #293c36;
    --cy-deep: #111821;
    --cy-accent: #f28a3f;
    --cy-accent-soft: rgba(242, 138, 63, .14);
    --cy-line: rgba(255, 255, 255, .10);
    --cy-line-strong: rgba(255, 255, 255, .18);
    --cy-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    --cy-shadow-soft: 0 10px 24px rgba(0, 0, 0, .24);
    --cy-ok: #67d6a3;
    --cy-ok-bg: rgba(103, 214, 163, .14);
    --cy-warn: #f5be6a;
    --cy-warn-bg: rgba(245, 190, 106, .14);
    --cy-danger: #ff8b8b;
    --cy-danger-bg: rgba(255, 139, 139, .14);
    color-scheme: dark;
}

html {
    min-height: 100%;
    font-size: 15px;
    background: var(--cy-bg);
    font-family: var(--cy-font);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(circle at 84% 0%, rgba(184, 109, 56, .12), transparent 28%),
        linear-gradient(180deg, var(--cy-bg-2) 0%, var(--cy-bg) 100%) !important;
    color: var(--cy-text) !important;
    font-family: var(--cy-font) !important;
    font-size: .94rem !important;
    line-height: 1.42 !important;
}

body,
button,
input,
select,
textarea,
table,
.btn,
.button-link,
.download-link,
.action,
.link-pill,
.pill,
.cy-action-pill {
    font-family: var(--cy-font) !important;
}

a {
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wrap,
.page-shell,
.cy-content {
    width: min(1380px, calc(100% - 28px)) !important;
}

.hero,
.cy-page-hero,
.moduleHead {
    background:
        linear-gradient(135deg, rgba(20, 55, 48, .98), rgba(17, 58, 92, .94)) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: var(--cy-shadow) !important;
}

:root[data-cy-theme="dark"] .hero,
:root[data-cy-theme="dark"] .cy-page-hero,
:root[data-cy-theme="dark"] .moduleHead {
    background:
        radial-gradient(circle at 90% 0%, rgba(242, 138, 63, .20), transparent 32%),
        linear-gradient(135deg, #1a1c1f, #10251f) !important;
}

.card,
.panel,
.module,
.metric,
.attentionCard,
.statusBox,
.summary-card,
.record-card,
.stat,
.tool,
.box {
    background: var(--cy-surface) !important;
    border-color: var(--cy-line) !important;
    border-radius: var(--cy-radius-lg) !important;
    box-shadow: var(--cy-shadow-soft) !important;
    color: var(--cy-text) !important;
}

.hero,
.cy-page-hero,
.moduleHead {
    border-radius: var(--cy-radius-xl) !important;
}

:root[data-cy-theme="dark"] .sectionTitle {
    color: #f4f0e8 !important;
}

:root[data-cy-theme="dark"] .metric {
    background: linear-gradient(180deg, #202328, #181b1f) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
}

:root[data-cy-theme="dark"] .metric small {
    color: #c9cdd3 !important;
}

:root[data-cy-theme="dark"] .metric strong {
    color: #fff !important;
}

.hero,
.hero h1,
.hero p,
.cy-page-hero,
.cy-page-hero h1,
.cy-page-hero p,
.moduleHead {
    color: #fff !important;
}

h1,
h2,
h3,
.panel-title,
.section-heading,
.sectionTitle {
    color: var(--cy-brand) !important;
    letter-spacing: 0 !important;
}

.hero h1,
.cy-page-hero h1,
.moduleHead {
    color: #fff !important;
}

.copy,
.panel-copy,
.subtle-copy,
.helper-note,
.field-note,
.sub,
.muted,
.summary-label,
.record-label {
    color: var(--cy-muted) !important;
}

input,
select,
textarea {
    background: color-mix(in srgb, var(--cy-surface) 92%, #fff 8%) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-text) !important;
    box-shadow: none !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: var(--cy-radius-md) !important;
    font-size: .94rem !important;
}

textarea {
    min-height: 68px !important;
}

.cy-uppercase-input {
    text-transform: uppercase;
}

td,
.record-value,
.summary-value,
.receipt-consignee,
.receipt-meta strong,
.box strong,
.metric strong,
.attentionCard strong,
.tool b,
.sub,
.tag,
.pill,
.meta-pill {
    text-transform: uppercase;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--cy-accent) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--cy-accent) 65%, var(--cy-line)) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(31, 99, 163, .72) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(31, 99, 163, .14) !important;
}

input[readonly],
textarea[readonly] {
    background: var(--cy-surface-2) !important;
    color: var(--cy-muted) !important;
}

.btn,
button,
.button-link,
.download-link,
.action,
.link-pill,
.cy-action-pill {
    border-radius: var(--cy-radius-md) !important;
    letter-spacing: 0 !important;
    min-height: 34px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: .93rem !important;
}

.pill,
.tag,
.meta-pill,
.cy-role,
.password-toggle {
    border-radius: 999px !important;
}

.btn:not(.alt):not(.danger),
button:not(.cy-theme-toggle):not(.cy-confirm-btn):not(.password-toggle):not(.cy-nav-toggle):not(.cy-nav-scrim):not(.alt):not(.danger),
.button-link,
.download-link {
    background: linear-gradient(135deg, var(--cy-brand), var(--cy-brand-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.btn.alt,
.action,
.link-pill,
.cy-action-pill {
    background: var(--cy-accent-soft) !important;
    color: var(--cy-brand) !important;
    border: 1px solid color-mix(in srgb, var(--cy-accent) 22%, var(--cy-line)) !important;
}

.btn:hover,
button:hover,
.button-link:hover,
.download-link:hover,
.action:hover,
.tool:hover,
.moduleBtn:hover,
.cy-action-pill:hover {
    transform: translateY(-1px);
}

.password-toggle,
.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle:active {
    min-height: 34px !important;
    padding: 0 11px !important;
    transform: translateY(-50%) !important;
}

.cy-nav-scrim,
.cy-nav-scrim:hover,
.cy-nav-scrim:focus-visible,
.cy-nav-scrim:active {
    background: rgba(9, 18, 25, .48) !important;
    border-radius: 0 !important;
    transform: none !important;
}

.flash,
.flash-success,
.ok,
.pill.ok,
.tag.released,
.tag.completed {
    background: var(--cy-ok-bg) !important;
    color: var(--cy-ok) !important;
}

.bad,
.flash-error,
.danger,
.tag.cancelled {
    background: var(--cy-danger-bg) !important;
    color: var(--cy-danger) !important;
}

.warn,
.pending,
.pill.pending {
    background: var(--cy-warn-bg) !important;
    color: var(--cy-warn) !important;
}

.tableWrap,
.table-wrap {
    border-color: var(--cy-line) !important;
    background: var(--cy-surface) !important;
    border-radius: var(--cy-radius-lg) !important;
    box-shadow: var(--cy-shadow-soft) !important;
    overflow: auto !important;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--cy-text) !important;
    font-size: .9rem !important;
}

th {
    background: var(--cy-surface-2) !important;
    color: var(--cy-muted) !important;
    border-color: var(--cy-line) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

td {
    background: color-mix(in srgb, var(--cy-surface) 94%, transparent) !important;
    border-color: var(--cy-line) !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

th,
td {
    padding: 10px 12px !important;
}

tbody tr:last-child td {
    border-bottom-color: transparent !important;
}

tbody tr:hover td {
    background: color-mix(in srgb, var(--cy-accent-soft) 58%, var(--cy-surface)) !important;
}

.topbar,
.cy-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    background: color-mix(in srgb, var(--cy-surface) 95%, transparent) !important;
    border-bottom: 1px solid var(--cy-line) !important;
    color: var(--cy-text) !important;
    box-shadow: 0 12px 28px rgba(20, 34, 28, .06) !important;
}

.sidebar,
.cy-sidebar {
    position: sticky !important;
    align-self: start !important;
    overflow: auto !important;
    background:
        radial-gradient(circle at 20% 12%, rgba(184, 109, 56, .22), transparent 22%),
        linear-gradient(180deg, #143730 0%, #113a5c 100%) !important;
}

.sidebar {
    top: 66px !important;
    height: calc(100vh - 66px) !important;
}

.cy-sidebar {
    top: 62px !important;
    height: calc(100vh - 62px) !important;
}

@media (max-width: 1100px) {
    .sidebar {
        top: 0 !important;
        height: auto !important;
        max-height: none !important;
        z-index: 30 !important;
    }

    .wrap,
    .page-shell,
    .cy-content {
        width: min(100%, calc(100% - 18px)) !important;
    }

    .hero,
    .card,
    .panel,
    .module,
    .cy-page-hero {
        border-radius: var(--cy-radius-xl) !important;
    }

    .hero,
    .card,
    .panel,
    .module {
        padding: 16px !important;
    }

    .cy-main {
        padding: 16px !important;
    }

    .cy-page-hero {
        width: 100% !important;
        padding: 18px !important;
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fields,
    .grid.two,
    .two {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tableWrap {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 920px !important;
    }

    .recent-table,
    .type-plan-table {
        min-width: 100% !important;
    }

    th,
    td {
        padding: 9px 10px !important;
        font-size: .92rem !important;
    }

    .actions,
    .inline-actions,
    .search-card-actions,
    .cy-hero-actions {
        gap: 6px !important;
    }

    .pill,
    .btn,
    .ghost-btn,
    .action,
    .cy-action-pill,
    .link-btn {
        min-height: 36px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        font-size: .92rem !important;
    }
}

@media (max-width: 1100px) {
    .grid,
    .workspace,
    .split-cards,
    .content-grid {
        grid-template-columns: 1fr !important;
    }

    .stats,
    .summary,
    .summary-grid,
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .reservation-meta {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .sidebar,
    .cy-sidebar {
        top: 0 !important;
        height: auto !important;
        max-height: none !important;
        z-index: 30 !important;
    }
}

.nav a,
.cy-nav-link {
    border-radius: var(--cy-radius-md) !important;
}

.nav a.active,
.nav a:hover,
.cy-nav-link.active,
.cy-nav-link:hover {
    background: var(--cy-accent) !important;
    color: #fff !important;
}

.app,
.cy-app {
    grid-template-columns: 250px minmax(0, 1fr) !important;
}

.app > .topbar .brand {
    width: 250px !important;
}

.sidebar,
.cy-sidebar {
    background: linear-gradient(180deg, #102f2a 0%, #123b35 48%, #102f4d 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .10) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .24) transparent;
}

.sidebar::before {
    opacity: .025 !important;
}

.nav,
.cy-sidebar nav {
    display: grid !important;
    gap: 6px !important;
}

.nav {
    padding: 16px 10px 24px !important;
}

.cy-sidebar {
    padding: 16px 10px !important;
}

.navGroup,
.cy-nav-section {
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding-top: 8px !important;
}

.cy-nav-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
}

.navGroup summary,
.cy-nav-title {
    min-height: 30px !important;
    margin: 2px 4px 5px !important;
    padding: 0 9px !important;
    border-radius: var(--cy-radius-md) !important;
    color: rgba(255, 255, 255, .58) !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    letter-spacing: .09em !important;
}

.navGroup summary::after,
.cy-nav-title::after {
    font-size: 14px !important;
    color: rgba(255, 255, 255, .70) !important;
}

.navGroup summary:hover,
.cy-nav-title:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: rgba(255, 255, 255, .92) !important;
}

.nav a,
.cy-nav-link {
    position: relative !important;
    min-height: 34px !important;
    margin: 3px 2px !important;
    padding: 0 10px 0 9px !important;
    gap: 8px !important;
    border-radius: var(--cy-radius-md) !important;
    color: rgba(255, 255, 255, .80) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
}

.nav a::before,
.cy-nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: transparent !important;
}

.nav a:hover,
.cy-nav-link:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

.nav a.active,
.cy-nav-link.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

.nav a.active::before,
.cy-nav-link.active::before {
    background: var(--cy-accent) !important;
}

.nav .cy-nav-icon,
.cy-nav-icon {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    stroke-width: 1.85 !important;
    opacity: .78 !important;
}

.nav a:hover .cy-nav-icon,
.nav a.active .cy-nav-icon,
.cy-nav-link:hover .cy-nav-icon,
.cy-nav-link.active .cy-nav-icon {
    opacity: 1 !important;
}

.nav .mark,
.cy-nav-code {
    width: 28px !important;
    height: 20px !important;
    flex: 0 0 28px !important;
    border-radius: var(--cy-radius-sm) !important;
    background: rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 9px !important;
    letter-spacing: .02em !important;
}

.nav a.active .mark,
.cy-nav-link.active .cy-nav-code {
    background: rgba(184, 109, 56, .26) !important;
    color: #fff !important;
}

.nav .navText,
.cy-nav-label {
    font-size: 13px !important;
    white-space: nowrap !important;
}

.navGroup a {
    margin-left: 2px !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
    .app,
    .cy-app {
        grid-template-columns: 218px minmax(0, 1fr) !important;
    }

    .app > .topbar .brand {
        width: 218px !important;
    }

    .sidebar,
    .cy-sidebar {
        padding: 13px 7px !important;
    }

    .nav {
        padding: 13px 7px 20px !important;
    }

    .nav a,
    .cy-nav-link {
        min-height: 32px !important;
        margin: 3px 1px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        font-size: 12.5px !important;
    }

    .nav .navText,
    .cy-nav-label {
        font-size: 12.5px !important;
    }

    .nav .mark,
    .cy-nav-code {
        width: 25px !important;
        height: 19px !important;
        flex-basis: 25px !important;
        font-size: 8.5px !important;
    }

    .nav .cy-nav-icon,
    .cy-nav-icon {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }

    .navGroup summary,
    .cy-nav-title {
        margin: 2px 3px 4px !important;
        padding: 0 8px !important;
        font-size: 9.5px !important;
    }

    .navGroup a {
        margin-left: 1px !important;
    }
}

@media (max-width: 1180px) {
    .app,
    .cy-app {
        grid-template-columns: 1fr !important;
    }

    .app > .topbar .brand {
        width: auto !important;
    }

    .sidebar,
    .cy-sidebar {
        width: min(282px, 86vw) !important;
        padding: 14px 9px !important;
    }

    .nav {
        padding: 14px 9px 24px !important;
    }

    .nav a,
    .cy-nav-link {
        min-height: 35px !important;
    }

    .nav .navText,
    .cy-nav-label {
        white-space: normal !important;
    }
}

.cy-theme-toggle {
    position: static;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cy-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cy-surface) 88%, transparent);
    color: var(--cy-text);
    box-shadow: var(--cy-shadow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
}

.topbar .cy-theme-toggle,
.cy-topbar .cy-theme-toggle {
    width: 38px;
    height: 38px;
    box-shadow: none;
}

.cy-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cy-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cy-accent) 48%, var(--cy-line));
}

.cy-theme-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cy-accent) 30%, transparent);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .cy-theme-toggle {
        position: static;
        width: 38px;
        height: 38px;
        box-shadow: none;
    }

    .filters,
    .fields,
    .grid.two,
    .two,
    .stats,
    .summary,
    .summary-grid,
    .metric-grid {
        grid-template-columns: 1fr !important;
    }

    table {
        min-width: 760px !important;
    }
}

@media (max-height: 800px) and (min-width: 761px) {
    .cy-topbar,
    .topbar {
        height: 56px !important;
        min-height: 56px !important;
    }

    .cy-sidebar {
        top: 56px !important;
        height: calc(100vh - 56px) !important;
        padding-top: 14px !important;
    }

    .cy-main {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .hero,
    .card,
    .panel,
    .module,
    .cy-page-hero {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* Design consolidation layer */
.card,
.panel,
.module,
.fuel-panel,
.scan-card,
.selected-type-card,
.unlock-card,
.qr-card,
.repo-metric,
.repo-trend,
.record-card,
.summary-card,
.attentionCard,
.statusBox,
.box,
.tool,
.metric,
.stat {
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-radius-lg) !important;
    background: var(--cy-surface) !important;
    box-shadow: var(--cy-shadow-soft) !important;
}

.card .card,
.panel .panel,
.module .module {
    box-shadow: none !important;
}

.hero,
.cy-page-hero,
.moduleHead {
    border-radius: var(--cy-radius-xl) !important;
}

.btn,
button,
.button-link,
.download-link,
.action,
.link-pill,
.table-action,
.email-mini-btn,
.backup-btn,
.sms-btn,
.cy-action-pill {
    border-radius: var(--cy-radius-md) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.btn.cy-action-save,
button.cy-action-save,
a.cy-action-save,
.sms-btn,
.backup-btn:not(.danger):not(.alt) {
    background: var(--cy-ok) !important;
    color: #fff !important;
}

.btn.cy-action-warn,
button.cy-action-warn,
a.cy-action-warn {
    background: var(--cy-warn-bg) !important;
    color: var(--cy-warn) !important;
    border-color: color-mix(in srgb, var(--cy-warn) 22%, var(--cy-line)) !important;
}

.btn.cy-action-danger,
button.cy-action-danger,
a.cy-action-danger,
.btn.danger,
button.danger,
.table-action.danger,
.delete-link,
.action-button.delete,
.email-mini-btn.danger,
.backup-btn.danger {
    background: var(--cy-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-decoration: none !important;
}

.btn.cy-action-secondary,
button.cy-action-secondary,
a.cy-action-secondary,
.btn.secondary,
.btn.alt,
.button-link,
.action,
.link-pill,
.cy-action-pill,
.backup-btn.alt {
    background: var(--cy-surface-2) !important;
    color: var(--cy-brand) !important;
    border-color: var(--cy-line) !important;
}

.btn:disabled,
button:disabled {
    opacity: .52 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.form-actions,
.actions,
.inline-actions,
.search-card-actions,
.email-actions,
.backup-actions-inline,
.table-actions,
.hero-actions,
.cy-hero-actions,
.toolbar {
    gap: 8px !important;
}

.form-actions,
.actions {
    align-items: center !important;
}

.record-search,
.filters,
.email-form,
.sms-form,
.allocation-form,
.fields,
.field-grid {
    gap: 10px !important;
}

.tableWrap,
.table-wrap,
.email-table-wrap,
.backup-table-wrap {
    position: relative !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-radius-lg) !important;
    background: var(--cy-surface) !important;
    box-shadow: var(--cy-shadow-soft) !important;
}

.tableWrap table,
.table-wrap table,
.email-table,
.backup-table,
table.cy-enhanced-table {
    min-width: 860px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.tableWrap thead th,
.table-wrap thead th,
.email-table thead th,
.backup-table thead th,
table.cy-enhanced-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cy-surface-2) !important;
    border-bottom: 1px solid var(--cy-line-strong) !important;
}

.tableWrap th,
.tableWrap td,
.table-wrap th,
.table-wrap td,
.email-table th,
.email-table td,
.backup-table th,
.backup-table td,
table.cy-enhanced-table th,
table.cy-enhanced-table td {
    padding: 8px 10px !important;
    line-height: 1.28 !important;
}

.table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.table-action,
.table-actions .action-link,
.table-actions .action-button {
    width: auto !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: var(--cy-radius-sm) !important;
    font-size: .76rem !important;
    text-decoration: none !important;
}

.download,
.download-link,
a[download] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin-top: 10px !important;
    padding: 0 12px !important;
    border-radius: var(--cy-radius-md) !important;
    background: var(--cy-surface-2) !important;
    color: var(--cy-brand) !important;
    border: 1px solid var(--cy-line) !important;
    font-weight: 850 !important;
}

.cy-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.cy-column-menu {
    position: relative;
}

.cy-column-toggle {
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: var(--cy-radius-md) !important;
    background: var(--cy-surface-2) !important;
    color: var(--cy-brand) !important;
    border: 1px solid var(--cy-line) !important;
    font-size: .86rem !important;
}

.cy-column-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    width: min(280px, 82vw);
    max-height: 320px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-radius-lg);
    background: var(--cy-surface);
    box-shadow: var(--cy-shadow);
}

.cy-column-menu.open .cy-column-panel {
    display: grid;
    gap: 4px;
}

.cy-column-panel label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0 !important;
    padding: 5px 7px;
    border-radius: var(--cy-radius-sm);
    color: var(--cy-text);
    font-size: .86rem;
    font-weight: 750;
}

.cy-column-panel label:hover {
    background: var(--cy-surface-2);
}

.cy-column-panel input {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    accent-color: var(--cy-brand);
}

.cy-col-hidden {
    display: none !important;
}

.fuel-grid {
    align-items: start !important;
}

.operator-only.fuel-grid,
.public-qr-main {
    width: min(680px, 100%) !important;
}

.operator-only .fuel-panel,
.public-qr-hero,
.unlock-card,
.scan-card {
    border-radius: var(--cy-radius-lg) !important;
}

.type-card {
    border-radius: var(--cy-radius-lg) !important;
    border-color: var(--cy-line) !important;
    box-shadow: none !important;
}

.qr-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
}

.qr-card {
    min-height: 310px !important;
}

@media (max-width: 1180px) {
    .cy-main {
        padding: 14px !important;
    }

    .wrap,
    .page-shell,
    .cy-content {
        width: min(100%, calc(100% - 12px)) !important;
    }

    .grid,
    .content-grid,
    .fuel-grid,
    .workspace,
    .split-cards {
        grid-template-columns: 1fr !important;
    }

    .cy-page-hero,
    .hero {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 16px !important;
    }

    .cy-topbar {
        gap: 8px !important;
    }

    .cy-user {
        font-size: .9rem !important;
    }

    .cy-main {
        padding: 10px !important;
    }

    .hero,
    .cy-page-hero,
    .card,
    .panel,
    .module,
    .fuel-panel {
        border-radius: var(--cy-radius-lg) !important;
    }

    .card,
    .panel,
    .module,
    .fuel-panel,
    .form-layout,
    .panel-header,
    .table-wrap,
    .tableWrap {
        padding: 12px !important;
    }

    input,
    select,
    textarea {
        min-height: 46px !important;
        font-size: 16px !important;
    }

    .fields,
    .field-grid,
    .form-grid,
    .allocation-form,
    .allocation-form .mini,
    .container-input-group,
    .select-add-row,
    .date-lock-row,
    .record-search,
    .filters,
    .email-form,
    .sms-form,
    .vehicle-info,
    .allocation-crew-grid,
    .mode-switch,
    .toolbar {
        grid-template-columns: 1fr !important;
    }

    .actions,
    .form-actions,
    .hero-actions,
    .cy-hero-actions,
    .toolbar,
    .backup-actions-inline,
    .email-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .btn,
    button,
    .button-link,
    .download-link,
    .action,
    .link-pill,
    .cy-action-pill,
    .backup-btn,
    .sms-btn,
    .email-btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    .tableWrap table,
    .table-wrap table,
    .email-table,
    .backup-table,
    table.cy-enhanced-table {
        min-width: 720px !important;
    }

    .cy-table-toolbar {
        justify-content: stretch;
    }

    .cy-column-menu,
    .cy-column-toggle {
        width: 100% !important;
    }

    .cy-column-panel {
        left: 0;
        right: auto;
        width: 100%;
    }

    .qr-grid {
        grid-template-columns: 1fr !important;
    }
}

@supports selector(:has(*)) {
    @media (max-width: 760px) {
        .form-layout > .form-actions,
        #outward-form .actions,
        #fuelIssueForm .full:has(button[type="submit"]),
        #fuelTransferForm .full:has(button[type="submit"]) {
            position: sticky !important;
            bottom: 0 !important;
            z-index: 10 !important;
            margin: 12px -12px -12px !important;
            padding: 10px 12px !important;
            background: color-mix(in srgb, var(--cy-surface) 94%, transparent) !important;
            border-top: 1px solid var(--cy-line) !important;
            backdrop-filter: blur(12px);
        }
    }
}

/* First-phase UX modernization */
:root {
    --cy-bg: #f3f6f4;
    --cy-bg-2: #fbfcfb;
    --cy-surface: #ffffff;
    --cy-surface-2: #f5f7f6;
    --cy-text: #17212b;
    --cy-muted: #62717c;
    --cy-brand: #123b35;
    --cy-brand-2: #1f6b5b;
    --cy-deep: #163a59;
    --cy-accent: #c46d35;
    --cy-accent-soft: #f8eadf;
    --cy-line: rgba(23, 33, 43, .11);
    --cy-line-strong: rgba(23, 33, 43, .2);
    --cy-shadow: 0 18px 44px rgba(22, 42, 35, .10);
    --cy-shadow-soft: 0 8px 22px rgba(22, 42, 35, .07);
    --cy-radius-sm: 6px;
    --cy-radius-md: 8px;
    --cy-radius-lg: 10px;
    --cy-radius-xl: 14px;
}

body {
    background:
        linear-gradient(180deg, var(--cy-bg-2) 0%, var(--cy-bg) 46%, #eef3f0 100%) !important;
}

.cy-app,
.app {
    background: transparent !important;
}

.cy-main,
.content {
    background: transparent !important;
}

.cy-page-hero,
.hero {
    background:
        linear-gradient(135deg, rgba(18, 59, 53, .98), rgba(22, 58, 89, .95)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}

.cy-page-hero p,
.hero p {
    color: rgba(255, 255, 255, .84) !important;
}

.cy-page-hero,
.hero,
.card,
.panel,
.module,
.metric,
.attentionCard,
.statusBox,
.summary-card,
.record-card,
.stat,
.tool,
.box,
.billing-card,
.email-card {
    border-radius: var(--cy-radius-lg) !important;
}

.card,
.panel,
.module,
.metric,
.attentionCard,
.statusBox,
.summary-card,
.record-card,
.stat,
.tool,
.box,
.billing-card,
.email-card {
    border: 1px solid var(--cy-line) !important;
    box-shadow: var(--cy-shadow-soft) !important;
}

.cy-topbar,
.topbar {
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(16px);
}

:root[data-cy-theme="dark"] .cy-topbar,
:root[data-cy-theme="dark"] .topbar {
    background: rgba(27, 29, 32, .92) !important;
}

.cy-sidebar,
.sidebar {
    background: linear-gradient(180deg, #0f312c 0%, #123b35 54%, #122f49 100%) !important;
}

.cy-nav-search {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    gap: 6px;
    padding: 0 2px 8px;
    background: linear-gradient(180deg, rgba(15, 49, 44, .98), rgba(15, 49, 44, .88));
}

.cy-nav-search label {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cy-nav-search input {
    width: 100%;
    min-height: 34px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: var(--cy-radius-md) !important;
    background: rgba(255, 255, 255, .09) !important;
    color: #fff !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
}

.cy-nav-search input::placeholder {
    color: rgba(255, 255, 255, .54);
}

.cy-nav-hidden {
    display: none !important;
}

.cy-nav-empty {
    display: none;
    margin: 6px 4px 0;
    padding: 9px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: var(--cy-radius-md);
    color: rgba(255, 255, 255, .68);
    font-size: .82rem;
}

.cy-nav-empty.visible {
    display: block;
}

label {
    color: var(--cy-text);
    font-weight: 780 !important;
}

input,
select,
textarea {
    border-color: var(--cy-line-strong) !important;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--cy-muted) 70%, transparent);
}

.flash,
.flash-success,
.billing-flash,
.email-flash {
    border: 1px solid transparent !important;
    border-radius: var(--cy-radius-lg) !important;
}

.flash-success,
.flash.ok,
.billing-flash.ok,
.email-flash.ok {
    border-color: color-mix(in srgb, var(--cy-ok) 22%, transparent) !important;
}

.bad,
.flash-error,
.flash.err,
.billing-flash.err,
.email-flash.err {
    border-color: color-mix(in srgb, var(--cy-danger) 24%, transparent) !important;
}

.tag,
.pill,
.meta-pill,
.email-pill,
.userBadge,
.cy-role {
    min-height: 24px !important;
    padding: 4px 9px !important;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

.btn,
button,
.button-link,
.download-link,
.action,
.link-pill,
.table-action,
.email-mini-btn,
.backup-btn,
.sms-btn,
.cy-action-pill,
.hero-link {
    border-radius: var(--cy-radius-md) !important;
    min-height: 38px !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.btn:hover,
button:hover,
.button-link:hover,
.download-link:hover,
.action:hover,
.link-pill:hover,
.table-action:hover,
.email-mini-btn:hover,
.backup-btn:hover,
.sms-btn:hover,
.cy-action-pill:hover,
.hero-link:hover {
    box-shadow: 0 8px 18px rgba(22, 42, 35, .10) !important;
}

.cy-table-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    justify-content: stretch;
    align-items: center;
    gap: 8px;
}

.cy-table-search {
    width: 100%;
    min-height: 36px !important;
    padding: 7px 10px !important;
}

.cy-table-density,
.cy-column-toggle {
    white-space: nowrap;
}

.cy-table-density {
    min-height: 36px !important;
    padding: 0 11px !important;
    background: var(--cy-surface-2) !important;
    color: var(--cy-brand) !important;
    border: 1px solid var(--cy-line) !important;
}

.cy-table-meta {
    grid-column: 1 / -1;
    color: var(--cy-muted);
    font-size: .78rem;
    font-weight: 750;
}

.cy-table-empty {
    display: none;
    padding: 18px;
    border: 1px dashed var(--cy-line-strong);
    border-radius: var(--cy-radius-lg);
    background: var(--cy-surface-2);
    color: var(--cy-muted);
    font-weight: 780;
    text-align: center;
}

.cy-table-empty.visible {
    display: block;
}

.cy-row-hidden {
    display: none !important;
}

table.cy-table-compact th,
table.cy-table-compact td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: .84rem !important;
}

.tableWrap,
.table-wrap,
.email-table-wrap,
.backup-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cy-brand) 28%, transparent) transparent;
}

.tableWrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.email-table-wrap::-webkit-scrollbar,
.backup-table-wrap::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.tableWrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.email-table-wrap::-webkit-scrollbar-thumb,
.backup-table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cy-brand) 28%, transparent);
    border-radius: 999px;
}

.cy-page-dashboard .todaySnapshot,
.cy-page-dashboard .dashboardInsights,
.cy-page-inward .content-grid,
.cy-page-outward .grid {
    align-items: start !important;
}

.cy-page-dashboard .metricAction,
.cy-page-dashboard .attentionCard a,
.cy-page-dashboard .moduleBtn {
    text-decoration: none !important;
}

.cy-page-dashboard .metricAction {
    border-color: color-mix(in srgb, var(--cy-accent) 24%, var(--cy-line)) !important;
}

.cy-page-dashboard .attentionBoard {
    gap: 12px !important;
}

.cy-page-inward .panel-header,
.cy-page-outward .card h2,
.cy-page-outward .allocation-panel {
    border-bottom: 1px solid var(--cy-line) !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
}

.cy-page-inward .editing-banner,
.cy-page-outward .repo-snapshot {
    border: 1px solid color-mix(in srgb, var(--cy-accent) 20%, var(--cy-line)) !important;
    border-radius: var(--cy-radius-lg) !important;
}

@media (max-width: 760px) {
    .cy-table-toolbar {
        grid-template-columns: 1fr !important;
    }

    .cy-table-search,
    .cy-table-density,
    .cy-column-toggle {
        width: 100% !important;
    }

    .cy-nav-search {
        position: static;
    }
}

/* Report-page standardization */
.cy-page-report .wrap,
.cy-page-report .page-shell,
.cy-page-report .cy-content {
    width: min(1420px, calc(100% - 28px)) !important;
}

.cy-page-report .hero,
.cy-page-report .cy-page-hero {
    margin-bottom: 16px !important;
}

.cy-page-report .hero h1,
.cy-page-report .cy-page-hero h1 {
    font-size: clamp(1.55rem, 2vw, 2.2rem) !important;
}

.cy-page-report .grid,
.cy-page-report .report-grid,
.cy-page-report .billing-grid,
.cy-page-report .dashboard-grid {
    gap: 16px !important;
}

.cy-page-report .card,
.cy-page-report .panel,
.cy-page-report .billing-card,
.cy-page-report .email-card {
    padding: 16px !important;
}

.cy-page-report .card > h2:first-child,
.cy-page-report .panel > h2:first-child,
.cy-page-report .billing-head h2,
.cy-page-report .panel-head h2 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 1.05rem !important;
}

.cy-page-report .filters,
.cy-page-report .report-filters,
.cy-page-report .cy-report-filters,
.cy-page-report form[method="get"].cy-polished-form {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 12px !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-radius-lg) !important;
    background: color-mix(in srgb, var(--cy-surface-2) 74%, var(--cy-surface)) !important;
}

.cy-page-report .filters > .full,
.cy-page-report .cy-report-filters > .full,
.cy-page-report .filters > .actions,
.cy-page-report .cy-report-filters > .actions,
.cy-page-report .filters > .field-full,
.cy-page-report .cy-report-filters > .field-full {
    grid-column: 1 / -1 !important;
}

.cy-filter-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.cy-filter-chips.is-empty {
    display: none;
}

.cy-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--cy-accent-soft);
    color: var(--cy-brand);
    border: 1px solid color-mix(in srgb, var(--cy-accent) 22%, var(--cy-line));
    font-size: .76rem;
    font-weight: 850;
}

.cy-page-report .pagination,
.cy-page-report .pager,
.cy-page-report .page-links {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
}

.cy-page-report .pagination a,
.cy-page-report .pagination span,
.cy-page-report .pager a,
.cy-page-report .pager span,
.cy-page-report .page-links a,
.cy-page-report .page-links span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-radius-md);
    background: var(--cy-surface);
    color: var(--cy-brand);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
}

.cy-page-report .pagination .active,
.cy-page-report .pager .active,
.cy-page-report .page-links .active {
    background: var(--cy-brand) !important;
    color: #fff !important;
}

.cy-page-report .tableWrap,
.cy-page-report .table-wrap,
.cy-page-report .billing-table-wrap,
.cy-page-report .email-table-wrap {
    margin-top: 8px !important;
}

.cy-page-report table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--cy-surface-2) 42%, var(--cy-surface)) !important;
}

.cy-page-report table tbody tr:hover td {
    background: color-mix(in srgb, var(--cy-accent-soft) 48%, var(--cy-surface)) !important;
}

.cy-page-report .btn,
.cy-page-report .button-link,
.cy-page-report .download-link,
.cy-page-report .billing-btn,
.cy-page-report .email-btn {
    min-height: 38px !important;
}

/* Progressive form polish */
.cy-page-form .cy-polished-form,
.cy-page-form .fields,
.cy-page-form .field-grid,
.cy-page-form .form-grid,
.cy-page-form .form-layout,
.cy-page-form .billing-form,
.cy-page-form .email-form,
.cy-page-form .sms-form,
.cy-page-form .rate-form,
.cy-page-form .ref-form,
.cy-page-form .vessel-form,
.cy-page-form .repo-form {
    gap: 12px !important;
}

.cy-page-form .form-layout,
.cy-page-form .cy-polished-form:not(.filters):not(.cy-report-filters) {
    position: relative;
}

.cy-page-form .panel-header,
.cy-page-form .panel-head,
.cy-page-form .billing-head,
.cy-page-form .email-card > h2:first-child,
.cy-page-form .card > h2:first-child {
    margin-bottom: 14px !important;
}

.cy-page-form label {
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    width: fit-content;
}

.cy-required-mark,
.required,
.required-mark {
    color: var(--cy-danger) !important;
    font-weight: 900 !important;
}

.cy-page-form .cy-field-required label,
.cy-page-form label:has(+ input[required]),
.cy-page-form label:has(+ select[required]),
.cy-page-form label:has(+ textarea[required]) {
    color: var(--cy-text) !important;
}

.cy-page-form input,
.cy-page-form select,
.cy-page-form textarea {
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.cy-page-form input.cy-field-has-value,
.cy-page-form select.cy-field-has-value,
.cy-page-form textarea.cy-field-has-value {
    border-color: color-mix(in srgb, var(--cy-brand) 26%, var(--cy-line)) !important;
}

.cy-page-form input.cy-field-invalid,
.cy-page-form select.cy-field-invalid,
.cy-page-form textarea.cy-field-invalid,
.cy-page-form .cy-field-invalid input,
.cy-page-form .cy-field-invalid select,
.cy-page-form .cy-field-invalid textarea {
    border-color: color-mix(in srgb, var(--cy-danger) 70%, var(--cy-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cy-danger) 12%, transparent) !important;
}

.cy-page-form input:focus,
.cy-page-form select:focus,
.cy-page-form textarea:focus {
    background: var(--cy-surface) !important;
}

.cy-page-form .toggle,
.cy-page-form .toggle-card,
.cy-page-form .date-unlock-toggle,
.cy-page-form .mode-btn,
.cy-page-form .email-check {
    border-radius: var(--cy-radius-lg) !important;
    border: 1px solid var(--cy-line) !important;
    background: color-mix(in srgb, var(--cy-surface-2) 72%, var(--cy-surface)) !important;
}

.cy-page-form .form-actions,
.cy-page-form .actions,
.cy-page-form .inline-actions {
    padding-top: 4px !important;
}

.cy-page-form .form-actions .btn:first-child,
.cy-page-form .actions .btn:first-child,
.cy-page-form .form-actions button[type="submit"]:first-child,
.cy-page-form .actions button[type="submit"]:first-child {
    box-shadow: 0 8px 18px rgba(22, 42, 35, .10) !important;
}

.cy-page-form .panel-note,
.cy-page-form .field-note,
.cy-page-form .helper-note,
.cy-page-form .muted,
.cy-page-form .copy {
    line-height: 1.5 !important;
}

.cy-page-form .section-title,
.cy-page-form .panel-title,
.cy-page-form .panel-head h2,
.cy-page-form .card h2 {
    font-size: 1.08rem !important;
}

.cy-page-form .tableWrap,
.cy-page-form .table-wrap {
    margin-top: 10px !important;
}

@media (min-width: 900px) {
    .cy-page-form .fields:not(.compact-three),
    .cy-page-form .field-grid,
    .cy-page-form .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .cy-page-report .wrap,
    .cy-page-report .page-shell,
    .cy-page-report .cy-content {
        width: min(100%, calc(100% - 12px)) !important;
    }

    .cy-page-report .filters,
    .cy-page-report .report-filters,
    .cy-page-report .cy-report-filters,
    .cy-page-report form[method="get"].cy-polished-form {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }

    .cy-page-report .pagination,
    .cy-page-report .pager,
    .cy-page-report .page-links {
        justify-content: stretch !important;
    }

    .cy-page-report .pagination a,
    .cy-page-report .pagination span,
    .cy-page-report .pager a,
    .cy-page-report .pager span,
    .cy-page-report .page-links a,
    .cy-page-report .page-links span {
        flex: 1 1 auto;
    }
}