/* MijnFlexurance - core.css
   Basislaag voor kleuren, typografie, knoppen, formulieren, badges en meldingen.
   Deze versie houdt bestaande classnames in stand en voegt de nieuwe MijnFlexurance
   design tokens toe voor de Companies-module.
*/

:root {
    --mf-font-family: Arial, Helvetica, sans-serif;

    --mf-navy: #082d3f;
    --mf-navy-2: #0b354a;
    --mf-teal: #149988;
    --mf-teal-dark: #0f7f73;
    --mf-teal-soft: #e6faf5;

    --mf-page-bg: #f3f6f7;
    --mf-card-bg: #ffffff;
    --mf-surface: #f8fafc;
    --mf-surface-2: #eef3f5;

    --mf-text: #263d45;
    --mf-text-strong: #173447;
    --mf-text-muted: #64748b;
    --mf-text-subtle: #8a9aa5;

    --mf-border: #d8e2e7;
    --mf-border-soft: #e8eef2;
    --mf-border-subtle: #f0f4f6;
    --mf-border-input: #cbd7df;

    --mf-primary: var(--mf-teal);
    --mf-primary-hover: var(--mf-teal-dark);

    --mf-danger: #df4747;
    --mf-danger-border: #f3b5b5;
    --mf-danger-bg: #fff5f5;
    --mf-danger-bg-hover: #ffecec;
    --mf-danger-strong-border: #ef7777;

    --mf-success: #11a887;
    --mf-success-border: #43c59e;
    --mf-success-bg: #e9fff7;
    --mf-success-bg-hover: #d9fff0;
    --mf-success-strong-border: #2ec4a6;

    --mf-radius-sm: 6px;
    --mf-radius-md: 8px;
    --mf-radius-lg: 12px;
    --mf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --mf-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --mf-header-height: 58px;
}

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

body {
    margin: 0;
    background: var(--mf-page-bg);
    color: var(--mf-text);
    font-family: var(--mf-font-family);
    font-size: 14px;
    line-height: 1.45;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 12px;
    color: var(--mf-text-strong);
    font-weight: 800;
    line-height: 1.2;
}

h1 { font-size: 24px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0 0 12px; }

a { color: inherit; }
.link { color: #0f766e; text-decoration: underline; }
.muted, .text-muted { color: var(--mf-text-subtle); }
.small, .text-small { font-size: 12px; }
.hidden { display: none !important; }

/* ===== Buttons / actions ===== */

.button-link,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid var(--mf-border-input);
    border-radius: var(--mf-radius-md);
    background: #ffffff;
    color: var(--mf-text-strong);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: var(--mf-shadow-sm);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.button-link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background: var(--mf-surface);
    border-color: #b8c8d2;
}

.button:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.button-link.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.button-primary,
.btn-primary,
input[type="submit"].button-primary {
    border-color: var(--mf-primary);
    background: var(--mf-primary);
    color: #ffffff;
}

.button-primary:hover,
.btn-primary:hover,
input[type="submit"].button-primary:hover {
    border-color: var(--mf-primary-hover);
    background: var(--mf-primary-hover);
    color: #ffffff;
}

.button-danger,
.btn-danger,
.btn-danger-outline {
    border-color: var(--mf-danger-border);
    background: #ffffff;
    color: var(--mf-danger);
}

.button-danger:hover,
.btn-danger:hover,
.btn-danger-outline:hover {
    background: var(--mf-danger-bg-hover);
    border-color: var(--mf-danger-strong-border);
}

.button-success,
.btn-success {
    border-color: var(--mf-success-border);
    background: var(--mf-success-bg);
    color: #087866;
}

.button-success:hover,
.btn-success:hover { background: var(--mf-success-bg-hover); }

/* ===== Form controls ===== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select,
textarea,
.input,
.select,
.textarea {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--mf-border-input);
    border-radius: var(--mf-radius-md);
    background: #ffffff;
    color: var(--mf-text);
    font: inherit;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(20, 153, 136, 0.18);
    border-color: var(--mf-teal);
}

textarea { min-height: 96px; resize: vertical; }
input[readonly], textarea[readonly], .readonly-input, .value-box, .static-value {
    background: var(--mf-surface);
    border-radius: var(--mf-radius-sm);
}

.checkbox, input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-height: auto;
    accent-color: var(--mf-teal);
}

.field-help, .form-help, .help-text {
    margin-top: 6px;
    color: var(--mf-text-subtle);
    font-size: 12px;
}

/* ===== Messages ===== */

.message-success,
.flash-success {
    margin: 0 0 16px;
    padding: 13px 16px;
    max-height: 90px;
    overflow: hidden;
    background: var(--mf-success-bg);
    border: 1px solid var(--mf-success-strong-border);
    border-radius: var(--mf-radius-md);
    color: #0b6e60;
    font-weight: 700;
    animation: mf-flash-autohide 420ms ease 2s forwards;
}

@keyframes mf-flash-autohide {
    to {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        transform: translateY(-4px);
    }
}

.message-error,
.flash-error {
    margin: 0 0 16px;
    padding: 13px 16px;
    background: var(--mf-danger-bg);
    border: 1px solid var(--mf-danger-strong-border);
    border-radius: var(--mf-radius-md);
    color: #a61b1b;
    font-weight: 700;
}

.message-info,
.flash-info {
    margin: 0 0 16px;
    padding: 13px 16px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: var(--mf-radius-md);
}

/* ===== Badges ===== */

.archive-badge,
.badge,
.role-badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 9px;
    border: 1px solid var(--mf-border);
    border-radius: 999px;
    background: #eef4f6;
    color: var(--mf-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.badge-success,
.status-pill--success,
.role-badge {
    background: #d8faf1;
    border-color: #c0f3e7;
    color: #0b7668;
}

.badge-danger,
.status-pill--danger {
    background: var(--mf-danger-bg);
    border-color: var(--mf-danger-border);
    color: var(--mf-danger);
}

/* ===== MijnFlexurance density: compact desktop (90%-gevoel) =====
   Gebaseerd op de ervaring dat de interface op laptopbreedte prettiger oogt
   bij 90% browserzoom. Dit is bewust niet met transform: scale() of CSS zoom
   opgelost, maar als compacte density in de basiscomponenten verwerkt.
*/
:root {
    --mf-header-height: 52px;
    --mf-density: 0.9;
}

body {
    font-size: 13px;
    line-height: 1.38;
}

h1 { font-size: 22px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
.small, .text-small { font-size: 11px; }

.button-link,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 34px;
    padding: 7px 12px;
    gap: 6px;
    font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select,
textarea,
.input,
.select,
.textarea {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}

textarea { min-height: 86px; }

.message-success,
.flash-success,
.message-error,
.flash-error,
.message-info,
.flash-info {
    margin-bottom: 12px;
    padding: 11px 14px;
}

.message-success,
.flash-success { max-height: 74px; }

.archive-badge,
.badge,
.role-badge,
.status-pill {
    min-height: 20px;
    padding: 3px 8px;
    font-size: 11px;
}

/* =========================================================
   MijnFlexurance - centrale typografieschaal
   Eén bron voor fontfamilie, fontgroottes en line-heights.
   ========================================================= */
:root {
    --mf-font-family: Arial, Helvetica, sans-serif;
    --mf-font-size-xs: 11px;
    --mf-font-size-sm: 12px;
    --mf-font-size-md: 13px;
    --mf-font-size-base: 14px;
    --mf-font-size-lg: 16px;
    --mf-font-size-xl: 18px;
    --mf-line-height-tight: 1.25;
    --mf-line-height-normal: 1.45;
}

html,
body {
    font-family: var(--mf-font-family);
}

body {
    font-size: var(--mf-font-size-base);
    line-height: var(--mf-line-height-normal);
}

h1 { font-size: 22px; }
h2 { font-size: var(--mf-font-size-lg); }
h3 { font-size: var(--mf-font-size-md); }

.button-link,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-size: var(--mf-font-size-md);
    line-height: 1.2;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select,
textarea,
.input,
.select,
.textarea {
    font-size: var(--mf-font-size-md);
    line-height: 1.3;
}


/* =========================================================
   MijnFlexurance - definitieve centrale typografie
   Laatste override: één typografieschaal voor alle modules.
   ========================================================= */
:root {
    --mf-font-family: Arial, Helvetica, sans-serif;
    --mf-font-size-xs: 11px;
    --mf-font-size-sm: 12px;
    --mf-font-size-md: 13px;
    --mf-font-size-base: 14px;
    --mf-font-size-lg: 16px;
    --mf-font-size-xl: 18px;
    --mf-line-height-tight: 1.25;
    --mf-line-height-compact: 1.35;
    --mf-line-height-normal: 1.45;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--mf-font-family);
}

body {
    font-size: var(--mf-font-size-base);
    line-height: var(--mf-line-height-normal);
}

.button-link,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select,
textarea,
.input,
.select,
.textarea {
    font-size: var(--mf-font-size-md);
    line-height: var(--mf-line-height-compact);
}