/* Parallel North Global Styling */

:root {
    --pn-primary-dark: #303030;
    --pn-background-light: #f4f4f4;
    --pn-mid-text: #6b6b6b;
    --pn-border-line: #d8d8d8;
    --pn-surface: #ffffff;
    --pn-success: #1e824c;
    --pn-warning: #c48a00;
    --pn-error: #d32f2f;
    --pn-info: #1976d2;

    /* Legacy token aliases used by older page-level styles */
    --ink: #303030 !important;
    --text: #303030 !important;
    --text-dark: #303030 !important;
    --muted: #6b6b6b !important;
    --text-muted: #6b6b6b !important;
    --brand1: #303030 !important;
    --brand2: #303030 !important;
    --brand-1: #303030 !important;
    --brand-2: #303030 !important;
    --primary: #303030 !important;
    --secondary: #303030 !important;
    --border: #d8d8d8 !important;
    --border-light: #d8d8d8 !important;
    --bg: #f4f4f4 !important;
    --bg-off-white: #f4f4f4 !important;
    --bg-white: #ffffff !important;
    --glass1: #ffffff !important;
    --glass2: #ffffff !important;
    --glass-1: #ffffff !important;
    --glass-2: #ffffff !important;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Stolzl', 'DM Sans', Arial, sans-serif;
    background: var(--pn-background-light);
    color: var(--pn-primary-dark);
    line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Stolzl', 'DM Sans', Arial, sans-serif;
    color: var(--pn-primary-dark);
    font-weight: 500;
    letter-spacing: -0.01em;
    max-width: 40ch;
}

.form-label,
label,
th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--pn-mid-text);
    font-weight: 700;
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-soft,
.btn-submit {
    font-weight: 600;
}

.btn-primary,
.btn-submit,
button.btn-primary,
a.btn-primary {
    background: var(--pn-primary-dark);
    color: #ffffff;
    border: 1px solid var(--pn-primary-dark);
}

.btn-primary:hover,
.btn-submit:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: #232323;
    border-color: #232323;
}

.btn-secondary,
.btn-outline,
.btn-soft {
    background: var(--pn-surface);
    color: var(--pn-primary-dark);
    border: 1px solid var(--pn-border-line);
}

.btn-danger,
button.btn-danger,
a.btn-danger {
    background: #fff5f5;
    color: var(--pn-error);
    border: 1px solid #f3b1b1;
}

.btn-cyan,
.btn-emerald,
.btn-indigo,
.btn-brand {
    background: var(--pn-primary-dark) !important;
    border-color: var(--pn-primary-dark) !important;
    color: #ffffff !important;
}

/* Surfaces */
.card,
.panel,
.page-header,
.stat-card,
.metric-card,
.table-wrap,
.modal,
.modal-content,
.container-card {
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-border-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--pn-primary-dark) !important;
}

.card-header,
.panel-header,
.table-wrap thead th {
    background: var(--pn-background-light) !important;
    border-bottom: 1px solid var(--pn-border-line) !important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.field {
    width: 100%;
    background: var(--pn-surface) !important;
    color: var(--pn-primary-dark) !important;
    border: 1px solid var(--pn-border-line) !important;
    border-radius: 2px !important;
}

input:focus,
select:focus,
textarea:focus,
.field:focus {
    outline: none;
    border-color: var(--pn-primary-dark) !important;
    box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.1) !important;
}

/* Tables */
table,
.table {
    width: 100%;
    background: var(--pn-surface);
}

table th,
.table th {
    background: var(--pn-background-light) !important;
    color: var(--pn-mid-text) !important;
    border-bottom: 1px solid var(--pn-border-line) !important;
}

table td,
.table td {
    color: var(--pn-primary-dark);
    border-bottom: 1px solid var(--pn-border-line) !important;
}

table tbody tr:hover,
.table tbody tr:hover {
    background: var(--pn-background-light) !important;
}

/* Status */
.status-banner,
.alert {
    border-left: 4px solid var(--pn-border-line);
    border-radius: 2px;
    background: var(--pn-background-light);
}

.status-banner.success,
.alert-success,
.badge-success,
.chip-paid,
.accepted,
.completed,
.profit-pos {
    color: var(--pn-success) !important;
}

.status-banner.warning,
.alert-warning,
.badge-warning,
.chip-unpaid,
.pending,
.alert-warn {
    color: var(--pn-warning) !important;
}

.status-banner.error,
.alert-danger,
.badge-danger,
.chip-overdue,
.declined,
.profit-neg,
.error-text {
    color: var(--pn-error) !important;
}

.status-banner.info,
.alert-info,
.badge-info,
.chip-sent,
.badge-in-progress,
.info-text {
    color: var(--pn-info) !important;
}

.badge,
.chip {
    border: 1px solid var(--pn-border-line);
    border-radius: 999px;
    background: #efefef;
    color: var(--pn-primary-dark);
}

/* Enforce monochrome on heavily customized page wrappers */
.summary-card,
.kpi-card,
.glass,
.glass-1,
.glass-2 {
    background: var(--pn-surface) !important;
    border-color: var(--pn-border-line) !important;
    color: var(--pn-primary-dark) !important;
}

/* Keep foreground readable inside surfaces, even when legacy classes set old text tones */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card span,
.card div,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5,
.panel h6,
.panel p,
.panel span,
.panel div,
.table-wrap,
.table-wrap * {
    color: inherit;
}

/* Neutralize common inline table-row coloring in legacy pages */
tr[style*="background-color"] {
    background-color: var(--pn-background-light) !important;
}

tr[style*="border-top"] {
    border-top-color: var(--pn-border-line) !important;
}

/* Normalize common inline color usage from legacy templates */
a[style*="color:#"],
a[style*="color: #"],
button[style*="color:#"],
button[style*="color: #"],
span[style*="color:#6b7280"],
span[style*="color: #6b7280"],
p[style*="color:#6b7280"],
p[style*="color: #6b7280"],
p[style*="color:#374151"],
p[style*="color: #374151"] {
    color: var(--pn-primary-dark) !important;
}

div[style*="background:#f3f4f6"],
div[style*="background: #f3f4f6"],
div[style*="background:#f9fafb"],
div[style*="background: #f9fafb"],
div[style*="background:#eff6ff"],
div[style*="background: #eff6ff"] {
    background: var(--pn-background-light) !important;
    border-color: var(--pn-border-line) !important;
}

/* Neutralize legacy Tailwind blue/indigo utility classes */
[class*="text-blue-"],
[class*="text-indigo-"],
[class*="hover:text-blue-"],
[class*="hover:text-indigo-"] {
    color: var(--pn-primary-dark) !important;
}

[class*="bg-blue-"],
[class*="bg-indigo-"] {
    background-color: var(--pn-surface) !important;
}

[class*="border-blue-"],
[class*="border-indigo-"] {
    border-color: var(--pn-border-line) !important;
}

[class*="focus:ring-blue-"],
[class*="focus:ring-indigo-"] {
    --tw-ring-color: rgba(48, 48, 48, 0.15) !important;
}