/*
 * Sistem Operasional UI refinement
 * Monochrome-first foundation with functional colour only.
 * Loaded after page-local styles so legacy markup and behaviour can stay intact.
 */

:root {
    --ops-page: #f5f6f7;
    --ops-surface: #ffffff;
    --ops-surface-muted: #f8f9fa;
    --ops-ink: #17191c;
    --ops-muted: #667085;
    --ops-border: #dfe3e8;
    --ops-border-strong: #cbd1d8;
    --ops-primary: #0f766e;
    --ops-primary-hover: #0b5f59;
    --ops-primary-soft: #edf7f5;
    --ops-info: #2563eb;
    --ops-info-soft: #eff6ff;
    --ops-success: #15803d;
    --ops-success-soft: #f0fdf4;
    --ops-warning: #a16207;
    --ops-warning-soft: #fffbeb;
    --ops-danger: #b42318;
    --ops-danger-soft: #fff5f4;
    --ops-disabled: #667085;
    --ops-disabled-soft: #f2f4f7;
    --ops-radius-sm: 6px;
    --ops-radius: 8px;
    --ops-radius-lg: 10px;
    --ops-shadow: 0 1px 2px rgba(16, 24, 40, .04);

    /* Reconcile the most common legacy token sets. */
    --mono-bg: var(--ops-page);
    --mono-bg-soft: var(--ops-surface-muted);
    --mono-surface: var(--ops-surface);
    --mono-border: var(--ops-border);
    --mono-ink: var(--ops-ink);
    --mono-muted: var(--ops-muted);
    --mono-shadow: var(--ops-shadow);
    --page-bg: var(--ops-page);
    --surface: var(--ops-surface);
    --surface-soft: var(--ops-surface-muted);
    --line: var(--ops-border);
    --ink: var(--ops-ink);
    --text-main: var(--ops-ink);
    --text-soft: var(--ops-muted);
    --muted: var(--ops-muted);
    --brand: var(--ops-primary);
    --brand-soft: var(--ops-primary-soft);
    --shadow: var(--ops-shadow);
    --shadow-soft: var(--ops-shadow);
    --shadow-card: var(--ops-shadow);
    --proc-bg: var(--ops-page);
    --proc-ink: var(--ops-ink);
    --proc-muted: var(--ops-muted);
    --proc-accent: var(--ops-primary);
    --proc-accent-soft: var(--ops-primary-soft);
    --proc-card: var(--ops-surface);
    --proc-border: var(--ops-border);
}

html {
    background: var(--ops-page);
}

body,
body.bg-light,
body[class*="bg-"] {
    color: var(--ops-ink) !important;
    background: var(--ops-page) !important;
    background-image: none !important;
}

/* Calm surfaces: separation comes from spacing and borders, not decoration. */
:where(
    .card,
    .panel,
    .surface-card,
    .hero-card,
    .hero-panel,
    .chart-card,
    .request-row,
    .metric-card,
    .summary-card,
    .glass-card,
    .panel-card,
    .step-card,
    .filter-card,
    .stats-card,
    .info-card,
    .preview-card,
    .form-card,
    .list-card,
    .table-card,
    .wizard-card,
    .timeline-card,
    .metric-surface,
    .proc-card,
    .proc-topbar,
    .auth-shell,
    .accordion-item,
    .modal-content,
    .dropdown-menu,
    .list-group-item,
    .offcanvas
) {
    color: var(--ops-ink) !important;
    background-color: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: var(--ops-shadow) !important;
    backdrop-filter: none !important;
}

:where(
    [class*="-card"],
    [class*="-panel"],
    [class*="-surface"],
    [class*="-shell"],
    [class*="-hero"]
)[style*="gradient"],
:where([class*="gradient"], .bg-gradient) {
    background-image: none !important;
}

/* Restrained geometry. Pills remain available for status/category metadata only. */
.rounded-4,
.rounded-5,
.card.rounded-4,
.panel.rounded-4,
.modal-content.rounded-4,
.modal-content.rounded-5 {
    border-radius: var(--ops-radius-lg) !important;
}

.btn.rounded-pill,
.form-control.rounded-pill,
.form-select.rounded-pill,
.input-group.rounded-pill,
.page-link.rounded-pill {
    border-radius: var(--ops-radius) !important;
}

.shadow,
.shadow-sm,
.shadow-lg,
[class*="shadow-"] {
    box-shadow: var(--ops-shadow) !important;
}

/* Typography drives hierarchy. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ops-ink);
    letter-spacing: -.015em;
}

.text-muted,
.proc-meta,
[class*="-meta"],
[class*="-subtitle"],
[class*="-hint"] {
    color: var(--ops-muted) !important;
}

/* Forms stay neutral until focus or validation communicates state. */
.form-control,
.form-select,
.input-group-text,
.ts-control,
.form-check-input {
    color: var(--ops-ink);
    background-color: var(--ops-surface);
    border-color: var(--ops-border-strong);
    border-radius: var(--ops-radius);
    box-shadow: none;
}

.form-control,
.input-group-text,
.ts-control,
.form-check-input {
    background-image: none;
}

/* Keep the native Bootstrap chevron so selects never look like free-text inputs. */
select.form-select:not([multiple]):not([size]),
select.form-select[size="1"] {
    padding-right: 2.5rem;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center, center right 2.25rem !important;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control,
.form-check-input:focus {
    border-color: var(--ops-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--ops-danger);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--ops-success);
}

.form-check-input:checked {
    background-color: var(--ops-primary);
    border-color: var(--ops-primary);
}

.nav-link.active,
.list-group-item.active,
[role="tab"][aria-selected="true"] {
    color: var(--ops-primary) !important;
    background: var(--ops-primary-soft) !important;
    background-image: none !important;
    border-color: #b9ddd8 !important;
}

.page-item.active .page-link {
    color: #fff !important;
    background: var(--ops-primary) !important;
    border-color: var(--ops-primary) !important;
}

tr.selected,
tr[aria-selected="true"] {
    background: var(--ops-primary-soft) !important;
}

/* One clear primary action; secondary actions remain neutral. */
.btn {
    border-radius: var(--ops-radius);
    box-shadow: none !important;
    font-weight: 650;
}

.btn-primary,
.btn-proc {
    color: #fff !important;
    background: var(--ops-primary) !important;
    background-image: none !important;
    border-color: var(--ops-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-proc:hover,
.btn-proc:focus {
    color: #fff !important;
    background: var(--ops-primary-hover) !important;
    border-color: var(--ops-primary-hover) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border-strong) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    color: var(--ops-ink) !important;
    background: var(--ops-surface-muted) !important;
    border-color: #aeb6c0 !important;
}

.btn-success { background: var(--ops-success) !important; border-color: var(--ops-success) !important; }
.btn-warning { background: var(--ops-warning) !important; border-color: var(--ops-warning) !important; color: #fff !important; }
.btn-danger { background: var(--ops-danger) !important; border-color: var(--ops-danger) !important; }
.btn-info { color: var(--ops-ink) !important; background: var(--ops-surface) !important; border-color: var(--ops-border-strong) !important; }

.btn-success[href*="export"],
.btn-success:has(.bi-file-earmark-excel),
.btn-success:has(.bi-download) {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border-strong) !important;
}

:where(button, a, input)[class*="submit"]:not(.btn-danger):not(.btn-warning),
input[type="submit"]:not(.btn-danger):not(.btn-warning),
.btn-next {
    color: #fff !important;
    background: var(--ops-primary) !important;
    background-image: none !important;
    border-color: var(--ops-primary) !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

.btn-prev {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border-strong) !important;
}

/* Undo the legacy rule that made every badge black. */
.badge,
[class*="status-badge"],
[class*="status-pill"],
[class*="status-chip"] {
    color: #344054 !important;
    background: var(--ops-disabled-soft) !important;
    background-image: none !important;
    border: 1px solid var(--ops-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.badge.bg-warning,
.badge.text-bg-warning,
.bg-warning.badge,
.text-bg-warning,
.status-badge-pending,
.status-pill.warning,
.status-chip.draft,
[class*="status-"][class*="warning"],
[class*="status-"][class*="pending"],
[class*="status-"][class*="active"] {
    color: #854d0e !important;
    background: var(--ops-warning-soft) !important;
    border-color: #f3d38a !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.badge.bg-info,
.badge.text-bg-info,
.text-bg-primary,
.text-bg-info,
.status-pill.info,
[class*="status-"][class*="info"],
[class*="status-"][class*="processing"],
[class*="status-"][class*="running"] {
    color: #1d4ed8 !important;
    background: var(--ops-info-soft) !important;
    border-color: #bfdbfe !important;
}

.badge.bg-success,
.badge.text-bg-success,
.text-bg-success,
.status-badge-approved,
.status-pill.online,
.status-chip.submitted,
[class*="status-"][class*="success"],
[class*="status-"][class*="approved"],
[class*="status-"][class*="done"] {
    color: #166534 !important;
    background: var(--ops-success-soft) !important;
    border-color: #bbdfc5 !important;
}

.badge.bg-danger,
.badge.text-bg-danger,
.text-bg-danger,
.status-badge-rejected,
.status-pill.offline,
.status-chip.overdue,
[class*="status-"][class*="danger"],
[class*="status-"][class*="error"],
[class*="status-"][class*="failed"],
[class*="status-"][class*="rejected"] {
    color: #991b1b !important;
    background: var(--ops-danger-soft) !important;
    border-color: #f1c3c0 !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-dark,
.badge.text-bg-dark,
.text-bg-secondary,
.text-bg-dark,
[class*="status-"][class*="muted"],
[class*="status-"][class*="idle"],
[class*="status-"][class*="inactive"],
[class*="status-"][class*="cancelled"] {
    color: #475467 !important;
    background: var(--ops-disabled-soft) !important;
    border-color: var(--ops-border) !important;
}

/* Functional feedback may use colour; ordinary sections may not. */
.alert { border-radius: var(--ops-radius); box-shadow: none !important; }
.alert-success, .bg-success-subtle { color: #166534 !important; background: var(--ops-success-soft) !important; border-color: #bbdfc5 !important; }
.alert-warning, .bg-warning-subtle { color: #854d0e !important; background: var(--ops-warning-soft) !important; border-color: #f3d38a !important; }
.alert-danger, .bg-danger-subtle { color: #991b1b !important; background: var(--ops-danger-soft) !important; border-color: #f1c3c0 !important; }
.alert-info, .bg-info-subtle, .bg-primary-subtle { color: #1d4ed8 !important; background: var(--ops-info-soft) !important; border-color: #bfdbfe !important; }

.text-success { color: var(--ops-success) !important; }
.text-warning { color: var(--ops-warning) !important; }
.text-danger { color: var(--ops-danger) !important; }
.text-info { color: var(--ops-info) !important; }
.border-success { border-color: #bbdfc5 !important; }
.border-warning { border-color: #f3d38a !important; }
.border-danger { border-color: #f1c3c0 !important; }
.border-info { border-color: #bfdbfe !important; }

/* Dense operational tables and lists. */
.table-responsive {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #fafbfc;
    color: var(--ops-ink);
}

.table > :not(caption) > * > * {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-color: var(--ops-border);
}

.table thead th,
.table-light,
.table-light > * > * {
    color: #475467 !important;
    background: var(--ops-surface-muted) !important;
    border-color: var(--ops-border) !important;
    box-shadow: none !important;
}

/* Modals are informational workspaces, not decorative showcases. */
.modal-content {
    overflow: hidden;
}

.modal-header,
.modal-footer {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
}

.modal-header [class*="icon"]:not(.btn),
.modal-header [class*="orb"] {
    box-shadow: none !important;
}

/* Public authentication: focused, quiet, and corporate. */
.auth-shell {
    max-width: 960px;
    min-height: 0;
    border: 1px solid var(--ops-border) !important;
}

.auth-shell .brand-panel,
.auth-shell .form-panel,
.auth-shell [class*="auth-"] {
    background-image: none !important;
    backdrop-filter: none !important;
}

.auth-shell .brand-panel {
    background: #202428 !important;
}

.auth-shell [class*="glow"],
.auth-shell [class*="orb"],
.auth-shell [class*="spark"],
.auth-shell [class*="decoration"] {
    display: none !important;
}

.feature-card,
.spotlight-shell,
.compliance-note,
.maintenance-alert {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .18) !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.login-panel {
    background: var(--ops-surface) !important;
}

.btn-login {
    color: #fff !important;
    background: var(--ops-primary) !important;
    background-image: none !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* Floating assistant: colour identifies the action and message ownership only. */
.chatbot-fab {
    background: var(--ops-primary) !important;
    background-image: none !important;
    border: 1px solid var(--ops-primary) !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .16) !important;
}

.chatbot-fab:hover { transform: none !important; box-shadow: 0 2px 8px rgba(16, 24, 40, .16) !important; }

.chatbot-container {
    background: var(--ops-surface) !important;
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12) !important;
    animation: none !important;
}

.chatbot-header {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ops-border) !important;
}

.chatbot-avatar {
    color: var(--ops-primary) !important;
    background: var(--ops-primary-soft) !important;
    border-radius: var(--ops-radius) !important;
}

.chatbot-body { background: var(--ops-surface-muted) !important; }
.chatbot-msg { border-radius: var(--ops-radius) !important; }
.chatbot-msg.bot { color: var(--ops-ink) !important; background: var(--ops-surface) !important; border: 1px solid var(--ops-border) !important; }
.chatbot-msg.user { color: #fff !important; background: var(--ops-primary) !important; background-image: none !important; }
.chatbot-quick-btn { color: var(--ops-ink) !important; background: var(--ops-surface) !important; border-color: var(--ops-border-strong) !important; border-radius: var(--ops-radius) !important; }
.chatbot-quick-btn:hover { color: var(--ops-ink) !important; background: var(--ops-surface-muted) !important; transform: none !important; }
.chatbot-send-btn { color: #fff !important; background: var(--ops-primary) !important; background-image: none !important; border-radius: var(--ops-radius) !important; }
.chatbot-input-wrap input { background: var(--ops-surface) !important; border-color: var(--ops-border-strong) !important; border-radius: var(--ops-radius) !important; }

.gnt-card,
.building-comment-toast,
.building-upload-gate-card {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12) !important;
    backdrop-filter: none !important;
}

.building-upload-gate-info,
.building-upload-gate-status,
.building-upload-gate-hint {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius) !important;
}

.building-upload-gate-btn-primary,
.gnt-btn-primary {
    color: #fff !important;
    background: var(--ops-primary) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.notification-menu,
.notification-menu-header,
.notification-menu-footer {
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    box-shadow: var(--ops-shadow) !important;
}

.notif-item-latest,
.unread {
    background: var(--ops-info-soft) !important;
    background-image: none !important;
    border-color: #bfdbfe !important;
}

.notif-live-dot {
    background: var(--ops-danger) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.vendor-skip-swal-popup,
.swal2-popup {
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12) !important;
}

.vendor-skip-swal-confirm,
.swal2-confirm {
    color: #fff !important;
    background: var(--ops-primary) !important;
    background-image: none !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

.vendor-skip-swal-confirm-danger,
.swal2-deny {
    color: #fff !important;
    background: var(--ops-danger) !important;
    background-image: none !important;
}

.vendor-skip-swal-cancel,
.vendor-skip-swal-cancel-neutral,
.swal2-cancel {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    background-image: none !important;
    border: 1px solid var(--ops-border-strong) !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* Dashboard/menu: keep information architecture, remove SaaS-template styling. */
.dashboard-shell,
.dashboard-hero,
.dashboard-panel,
.menu-card,
.section-board,
.section-order-card,
.stat-card,
.helper-note {
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: none !important;
}

.menu-card-icon,
.drag-handle,
.stat-card i {
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* UN-LOCK SBG reference: retain layout, remove ornamental motion and pill controls. */
.action-spotlight {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    border: 1px solid var(--ops-border-strong) !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

.action-spotlight::after { display: none !important; }
.action-spotlight:hover { transform: none !important; background: var(--ops-surface-muted) !important; }
.action-spotlight .icon { color: var(--ops-ink) !important; background: transparent !important; border: 0 !important; }
.card-hover:hover { transform: none !important; box-shadow: var(--ops-shadow) !important; }

/* Shared high-noise modules. */
:where(
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-surface"],
    [class*="-surface "]
):not(.alert):not([class*="status"]):not([class*="progress"]):not([class*="selected"]):not([class*="active"]) {
    background-color: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

:where([class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-tile"], [class*="-tile "]):hover {
    transform: none !important;
}

:where(.card, [class$="-card"], [class*="-card "]) :where(.card, [class$="-card"], [class*="-card "]):not(.alert):not([class*="status"]):not([class*="selected"]):not([class*="active"]) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

:where(
    [class$="-pill"],
    [class*="-pill "],
    [class$="-chip"],
    [class*="-chip "],
    [class$="-badge"],
    [class*="-badge "]
):not(.badge):not([class*="status"]):not([class*="success"]):not([class*="warning"]):not([class*="danger"]):not([class*="info"]) {
    color: #475467 !important;
    background: var(--ops-surface-muted) !important;
    background-image: none !important;
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-sm) !important;
    box-shadow: none !important;
}

:where(
    [class*="-icon"],
    [class*="icon-"]
):not(i):not(.carousel-control-prev-icon):not(.carousel-control-next-icon) {
    background-image: none !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

.status-badge.is-active,
.status-pill.is-online,
.status-pill.is-success {
    color: #166534 !important;
    background: var(--ops-success-soft) !important;
    border-color: #bbdfc5 !important;
}

.status-badge.is-inactive {
    color: #475467 !important;
    background: var(--ops-disabled-soft) !important;
    border-color: var(--ops-border) !important;
}

:where(
    [class^="visit-outlet-"],
    [class*=" visit-outlet-"],
    [class^="qa-"],
    [class*=" qa-"],
    [class^="monitoring-"],
    [class*=" monitoring-"],
    [class^="offline-"],
    [class*=" offline-"],
    [class^="whatsapp-"],
    [class*=" whatsapp-"],
    [class^="wa-"],
    [class*=" wa-"],
    [class^="cctv-"],
    [class*=" cctv-"],
    [class^="sales-"],
    [class*=" sales-"]
):where(
    [class$="card"], [class*="card "],
    [class$="panel"], [class*="panel "],
    [class$="surface"], [class*="surface "],
    [class$="hero"], [class*="hero "]
) {
    background-color: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.mbkcp-card,
.mbkcp-section-card,
.mbkcp-module-panel,
.mbkcp-table-shell,
.mbkcp-select-card,
.mbkcp-guide-card,
.mbkcp-hero,
.toolbar-panel,
.browser-panel,
.header-panel,
.dashboard-panel,
.orphan-panel,
.pane-card,
.sidebar-stack-card,
.composer-card,
.viewport-card,
.conversation-shell,
.question-card,
.question-card-wrap,
.section-block,
.content-card,
.side-card,
.helper-panel,
.field-shell,
.audit-meta-card,
.asset-card,
.unit-card,
.info-panel,
.access-panel,
.form-panel,
.evidence-card,
.lock-card,
.location-panel,
.filter-panel,
.empty-panel {
    color: var(--ops-ink) !important;
    background-color: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Pengajuan detail and workflow modals: flatten card-in-card hierarchies. */
.memo-hero,
.memo-detail-showcase,
.memo-doc-card,
.memo-approval-card,
.memo-step-card,
.memo-modal-card,
.proposal-vendor-card,
.proposal-stat-card,
.payment-order-shell,
.payment-summary-card,
.payment-phase-card,
.payment-proof-card,
.payment-items-shell,
.payment-action-card,
.payment-status-note,
.payment-side-card,
.bast-order-shell,
.bast-summary-card,
.bast-phase-card,
.bast-proof-card {
    color: var(--ops-ink) !important;
    background: var(--ops-surface) !important;
    background-image: none !important;
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-lg) !important;
    box-shadow: none !important;
}

.payment-order-shell,
.bast-order-shell {
    padding: 18px !important;
}

.payment-summary-card,
.payment-phase-card,
.payment-side-card,
.payment-proof-card,
.payment-action-card,
.bast-summary-card,
.bast-phase-card {
    padding: 16px !important;
}

.payment-section-group {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--ops-border) !important;
    border-radius: 0 !important;
    padding: 16px 0 0 !important;
}

.payment-budget-item,
.payment-summary-chip,
.payment-status-inline-chip,
.payment-side-stat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
}

.payment-section-group-badge,
.payment-summary-kicker,
.payment-order-kicker,
.payment-section-kicker,
.memo-summary-badge,
.badge-soft {
    color: var(--ops-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
}

.payment-summary-orb,
.payment-summary-kicker i,
.payment-order-kicker i,
.payment-section-kicker i,
.payment-section-group-badge i {
    color: var(--ops-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.payment-action-submit {
    background: var(--ops-primary) !important;
    background-image: none !important;
    border-color: var(--ops-primary) !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* PDF is a document action: red is reserved as its cross-module visual cue. */
.ops-pdf-action,
button.ops-pdf-action,
.memo-action-btn.print,
.hero-print,
button[onclick*="window.print"] {
    color: #fff !important;
    background: #c62828 !important;
    background-image: none !important;
    border-color: #c62828 !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

.ops-pdf-action:hover,
.ops-pdf-action:focus,
.memo-action-btn.print:hover,
.memo-action-btn.print:focus,
.hero-print:hover,
.hero-print:focus,
button[onclick*="window.print"]:hover,
button[onclick*="window.print"]:focus {
    color: #fff !important;
    background: #a61f1f !important;
    border-color: #a61f1f !important;
}

.memo-action-btn.print .memo-action-icon {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
}

/* Dashboard carousel intentionally uses a dark promotional background. */
.info-carousel-frame,
.info-slide,
.info-slide .info-title {
    color: #fff !important;
}

.info-slide .info-text,
.info-slide .info-date {
    color: rgba(255, 255, 255, .82) !important;
}

.info-slide .info-cta,
.info-slide .info-cta:hover,
.info-slide .info-cta:focus {
    color: #fff !important;
}

.proposal-revision-banner {
    color: #991b1b !important;
    background: var(--ops-danger-soft) !important;
    background-image: none !important;
    border: 1px solid #f1c3c0 !important;
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* Decorative icon wrappers become quiet; icon colour itself may remain functional. */
:where(
    .ga-stat-icon,
    .payment-summary-orb,
    .memo-hero-icon,
    .memo-section-icon,
    .memo-fact-icon,
    .csat-icon,
    .nps-csat-info-icon
) {
    border-radius: var(--ops-radius) !important;
    box-shadow: none !important;
}

/* Charts, progress, maps, media, selected state, and semantic feedback retain colour. */
.progress,
.progress-bar,
canvas,
.chart-container,
.map-container,
.leaflet-container,
img,
video,
.active,
.selected,
[aria-selected="true"] {
    forced-color-adjust: auto;
}

@media (max-width: 767.98px) {
    .auth-shell {
        border-radius: var(--ops-radius-lg) !important;
    }

    .payment-order-shell,
    .bast-order-shell,
    .proc-card,
    .proc-topbar {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media print {
    body { background: #fff !important; }
    .card, .panel, .proc-card, .modal-content { box-shadow: none !important; }
}