:root {
    --mps-ink: #182433;
    --mps-muted: #5f6f80;
    --mps-line: #d9e1e8;
    --mps-paper: #f3f6f8;
    --mps-panel: #ffffff;
    --mps-navy: #16324f;
    --mps-navy-soft: #244d70;
    --mps-accent: #c9572c;
    --mps-success: #287a55;
    --mps-warning: #a86b16;
    --mps-danger: #a23b3b;
}

html { background: var(--mps-paper); }
body { color: var(--mps-ink); background: var(--mps-paper); line-height: 1.5; }

body, body.bg-light { background: var(--mps-paper) !important; color: var(--mps-ink) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--mps-ink) !important; }

.navbar, .topbar, header, .page-hero { background: #fff !important; color: var(--mps-ink) !important; }
.navbar a, .topbar a, header a { color: var(--mps-ink) !important; }

.card, .panel, .kpi-card, .page-hero, form, .modal-content, .table-responsive {
    background: var(--mps-panel) !important;
    border-color: var(--mps-line) !important;
}

nav a, .dashboard-nav a, .btn-primary, .btn-success, .button, .link-btn,
button:not(.btn-close) { background: var(--mps-navy) !important; border-color: var(--mps-navy) !important; color: #fff !important; }
nav a:hover, .dashboard-nav a:hover, .btn-primary:hover, .btn-success:hover,
.button:hover, .link-btn:hover, button:not(.btn-close):hover { background: var(--mps-accent) !important; border-color: var(--mps-accent) !important; }

nav a:hover, .dashboard-nav a:hover { background: var(--mps-navy-soft) !important; border-color: var(--mps-navy-soft) !important; }
nav a:hover, .dashboard-nav a:hover, nav a:hover i { color: #fff !important; }

table thead th, th { background: var(--mps-navy) !important; color: #fff !important; border-color: var(--mps-navy) !important; }
table tbody tr:hover td { background: #edf3f6 !important; }
a, td a, .document-link { color: var(--mps-accent) !important; }
a:hover, td a:hover, .document-link:hover { color: var(--mps-navy-soft) !important; }

.alert, .message, .notice { border-color: #c8d8e2 !important; background: #edf5f8 !important; color: var(--mps-ink) !important; }
.status-pill, .badge, .stage-badge { background: #e6eef2 !important; color: var(--mps-navy) !important; }
.status-pill.paid, .badge.successful, .badge.closed { background: #dff1e7 !important; color: var(--mps-success) !important; }
.status-pill.partial, .badge.waiting, .badge.with_client { background: #fff0d4 !important; color: var(--mps-warning) !important; }
.status-pill.unpaid, .badge.not_taken_up { background: #f8e3e3 !important; color: var(--mps-danger) !important; }

button, .button, .btn, .link-btn, nav a {
    border-radius: 6px;
    background: var(--mps-navy);
    color: #fff;
    border: 1px solid var(--mps-navy);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
button:hover, .button:hover, .btn:hover, .link-btn:hover, nav a:hover {
    background: var(--mps-navy-soft);
    border-color: var(--mps-navy-soft);
}

input, select, textarea { border: 1px solid #bdc9d3; border-radius: 6px; color: var(--mps-ink); background: #fff; }
input:focus, select:focus, textarea:focus, button:focus, a:focus {
    outline: 3px solid rgba(201, 87, 44, .32);
    outline-offset: 2px;
}

table { border-color: var(--mps-line); background: var(--mps-panel); }
th, table thead th { background: var(--mps-navy); color: #fff; border-color: var(--mps-navy); }
td { color: var(--mps-ink); border-color: var(--mps-line); }
tbody tr:hover td { background: #f1f6f9; }

.card, .panel, .kpi-card, .page-hero, form {
    border-color: var(--mps-line);
    box-shadow: 0 8px 24px rgba(24, 36, 51, .07);
}

.status-pill, .badge, .stage-badge { border-radius: 999px; }

/* Keep labels readable on every button and navigation state. */
button, button:hover, button:focus, button:active,
.button, .button:hover, .button:focus, .button:active,
.btn, .btn:hover, .btn:focus, .btn:active,
.link-btn, .link-btn:hover, .link-btn:focus, .link-btn:active,
nav a, nav a:hover, nav a:focus, nav a:active,
.dashboard-nav a, .dashboard-nav a:hover, .dashboard-nav a:focus, .dashboard-nav a:active {
    color: #fff !important;
}

button *, .button *, .btn *, .link-btn *, nav a *, .dashboard-nav a * {
    color: #fff !important;
}

.button-link, .button-link:hover, .button-link:focus, .button-link:active,
.secondary, .secondary:hover, .secondary:focus, .secondary:active,
.nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active,
.navbar-nav .nav-link, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
    color: #fff !important;
}

.button-link *, .secondary *, .nav-link *, .navbar-nav .nav-link * {
    color: #fff !important;
}

nav a, nav a:hover, nav a:visited, nav a:focus,
.dashboard-nav a, .dashboard-nav a:hover, .dashboard-nav a:visited,
.dashboard-nav a:focus, .topbar a, .button, .button-link, .btn,
.link-btn, .quick a, .export-actions a {
    text-decoration: none !important;
}

.quick a, .quick a:hover, .quick a:focus, .quick a:active,
.export-actions a, .export-actions a:hover, .export-actions a:focus, .export-actions a:active,
.new-sale-heading button, .new-sale-heading button:hover,
.modal-heading button, .modal-heading button:hover {
    background: var(--mps-navy) !important;
    border-color: var(--mps-navy) !important;
    color: #fff !important;
}

.quick a.active, .quick a.active:hover,
.export-actions a.primary, .export-actions a.primary:hover {
    background: var(--mps-accent) !important;
    border-color: var(--mps-accent) !important;
    color: #fff !important;
}

.tab-btn, .tab-btn:hover, .tab-btn:focus, .tab-btn:active {
    background: var(--mps-navy) !important;
    border-color: var(--mps-navy) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.tab-btn.active { background: var(--mps-accent) !important; border-color: var(--mps-accent) !important; color: #fff !important; }

@media (max-width: 760px) {
    body { padding-left: 12px; padding-right: 12px; }
    table { display: block; max-width: 100%; overflow-x: auto; }
    form { max-width: 100%; }
    nav, .actions, .form-actions { flex-wrap: wrap; }
}
