/* ==========================================================================
   EaSee Tenant Manager — base styles, brand tokens, forms, auth pages
   ========================================================================== */

:root {
    --easee-primary: #007390;
    --easee-primary-600: #00637c;
    --easee-primary-700: #005266;
    --easee-primary-50: #e6f3f6;
    --easee-primary-100: #cce6ed;
    --easee-secondary: #1D2764;
    --easee-secondary-600: #161e4d;
    --easee-secondary-800: #10164a;
    --easee-bg: #f2f5f9;
    --easee-surface: #ffffff;
    --easee-border: #e4e9f0;
    --easee-border-strong: #c9d3df;
    --easee-text: #1a2438;
    --easee-muted: #5f6c82;
    --easee-success: #157347;
    --easee-success-bg: #e6f5ec;
    --easee-danger: #c0362f;
    --easee-danger-bg: #fdeceb;
    --easee-warning: #9a5b00;
    --easee-warning-bg: #fff6e5;
    --easee-warning-border: #f5dcae;
    --easee-info: #0b6aa8;
    --easee-info-bg: #e5f2fb;
    --easee-neutral: #556175;
    --easee-neutral-bg: #edf1f6;
    --easee-radius: 12px;
    --easee-radius-sm: 8px;
    --easee-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --easee-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);
    --easee-sidebar-w: 248px;

    /* Bootstrap overrides */
    --bs-primary: var(--easee-primary);
    --bs-primary-rgb: 0, 115, 144;
    --bs-link-color: var(--easee-primary);
    --bs-link-color-rgb: 0, 115, 144;
    --bs-link-hover-color: var(--easee-primary-700);
    --bs-body-color: var(--easee-text);
    --bs-body-bg: var(--easee-bg);
    --bs-border-color: var(--easee-border);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-focus-ring-color: rgba(0, 115, 144, .25);
}

html, body { min-height: 100%; }
body { background: var(--easee-bg); color: var(--easee-text); -webkit-font-smoothing: antialiased; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: var(--easee-secondary); background: var(--easee-neutral-bg); padding: .1em .35em; border-radius: 4px; font-size: .85em; }

.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--easee-radius-sm); font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--easee-primary); --bs-btn-border-color: var(--easee-primary);
    --bs-btn-hover-bg: var(--easee-primary-600); --bs-btn-hover-border-color: var(--easee-primary-600);
    --bs-btn-active-bg: var(--easee-primary-700); --bs-btn-active-border-color: var(--easee-primary-700);
    --bs-btn-disabled-bg: var(--easee-primary); --bs-btn-disabled-border-color: var(--easee-primary);
    --bs-btn-focus-shadow-rgb: 0, 115, 144;
}
.btn-outline-primary {
    --bs-btn-color: var(--easee-primary); --bs-btn-border-color: var(--easee-primary);
    --bs-btn-hover-bg: var(--easee-primary); --bs-btn-hover-border-color: var(--easee-primary);
    --bs-btn-active-bg: var(--easee-primary-700); --bs-btn-active-border-color: var(--easee-primary-700);
    --bs-btn-focus-shadow-rgb: 0, 115, 144;
}
.btn-secondary-brand { background: var(--easee-secondary); border-color: var(--easee-secondary); color: #fff; }
.btn-secondary-brand:hover { background: var(--easee-secondary-600); color: #fff; }
.btn-light { --bs-btn-bg: #f1f4f8; --bs-btn-border-color: #f1f4f8; --bs-btn-hover-bg: #e6ebf1; --bs-btn-hover-border-color: #e6ebf1; }
.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--easee-radius-sm); color: var(--easee-muted); background: transparent; border: 1px solid transparent; }
.btn-icon:hover { background: var(--easee-neutral-bg); color: var(--easee-text); }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon .bi { font-size: 1.15rem; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--easee-radius-sm); border-color: var(--easee-border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--easee-primary); box-shadow: 0 0 0 .2rem rgba(0, 115, 144, .15); }
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.form-text { font-size: .8rem; color: var(--easee-muted); }
.form-check-input:checked { background-color: var(--easee-primary); border-color: var(--easee-primary); }
.form-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--easee-muted); margin-bottom: .75rem; }
.code-input { letter-spacing: .4em; font-variant-numeric: tabular-nums; font-weight: 600; }

.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--easee-muted); pointer-events: none; z-index: 2; }
.input-icon > .form-control { padding-left: 2.4rem; }
.input-icon-action { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--easee-muted); padding: .25rem .5rem; z-index: 2; }
.input-icon-action:hover { color: var(--easee-text); }
.input-icon:has(.input-icon-action) > .form-control { padding-right: 2.5rem; }
.input-icon-sm > .bi { left: .6rem; font-size: .85rem; }
.input-icon-sm > .form-control { padding-left: 1.9rem; }

details.advanced-block > summary { cursor: pointer; color: var(--easee-primary); font-weight: 500; font-size: .875rem; }

/* ---------- Status badges ---------- */
.status-badge {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    font-size: .75rem; font-weight: 600; line-height: 1; padding: .38rem .6rem; border-radius: 999px;
    background: var(--easee-neutral-bg); color: var(--easee-neutral);
}
.status-badge .bi { font-size: .8rem; }
.status-success { background: var(--easee-success-bg); color: var(--easee-success); }
.status-danger { background: var(--easee-danger-bg); color: var(--easee-danger); }
.status-warning { background: var(--easee-warning-bg); color: var(--easee-warning); box-shadow: inset 0 0 0 1px var(--easee-warning-border); }
.status-info { background: var(--easee-info-bg); color: var(--easee-info); }
.status-primary { background: var(--easee-primary-50); color: var(--easee-primary-700); }
.status-secondary { background: var(--easee-neutral-bg); color: var(--easee-neutral); }

/* ---------- Auth pages ---------- */
.auth-body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(0, 115, 144, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(29, 39, 100, .16), transparent 60%),
        var(--easee-bg);
}
.auth-wrapper { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 420px; background: var(--easee-surface); border: 1px solid var(--easee-border); border-radius: 16px; box-shadow: var(--easee-shadow-lg); padding: 2.25rem 2rem; }
.auth-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.75rem; }
.auth-brand-name { font-size: 1.35rem; font-weight: 700; color: var(--easee-secondary); line-height: 1.1; }
.auth-brand-sub { font-size: .8rem; color: var(--easee-muted); }
.auth-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
.auth-subtitle { color: var(--easee-muted); margin-bottom: 1.5rem; font-size: .9rem; }
.auth-footnote { margin-top: 1.25rem; font-size: .8rem; color: var(--easee-muted); text-align: center; }
.mfa-intro { display: flex; gap: .75rem; align-items: center; background: var(--easee-primary-50); border-radius: var(--easee-radius-sm); padding: .75rem 1rem; margin-bottom: 1.25rem; }
.mfa-intro .bi { font-size: 1.5rem; color: var(--easee-primary); }
.mfa-intro p { margin: 0; font-size: .875rem; }

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}