/* Single source of truth for app + Keycloak styling.
 * Bind-mounted into the app container at /app/static/styles.css and into
 * the Keycloak theme at login/resources/css/styles.css. Both pages load
 * this same file, so changes here propagate to both.
 *
 * Layout:
 *   1. tokens         — CSS custom properties (colors, fonts, spacing)
 *   2. reset + base   — element defaults shared by both contexts
 *   3. app components — .btn, .add-form, .item, etc.
 *   4. keycloak bridge — .pf-v5-* overrides that map PatternFly to the same tokens
 */

/* ---------- 1. tokens ---------- */
:root {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-text: #1a1a1a;
    --color-bg: #fff;
    --color-border: #e5e5e5;
    --color-row-border: #f3f4f6;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-input-border: #d1d5db;
    --color-text-muted: #6b7280;
    --color-success-bg: #ecfdf5;

    --font-family: system-ui, sans-serif;
    --font-size-base: 0.875rem;
    --font-size-h1: 1.25rem;
    --font-weight-h1: 600;
    --font-weight-base: 400;
    --line-height-base: 1.5;

    --radius: 4px;
    --container-max-width: 640px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
}

/* ---------- 2. reset + base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-3);
    line-height: var(--line-height-base);
    font-size: 1rem;
}

h1 {
    font-family: var(--font-family);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius);
    padding: var(--space-2);
    line-height: var(--line-height-base);
}

/* ---------- 3. app components ---------- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}
nav h1 a { color: inherit; }

.muted { color: var(--color-text-muted); }

.notice {
    padding: var(--space-2) var(--space-3);
    background: var(--color-success-bg);
    border-radius: var(--radius);
}

.dashboard h2 { margin-bottom: var(--space-2); }
.dashboard .lede { margin-bottom: var(--space-4); }
.dashboard #data { margin-top: var(--space-3); }

.empty-state { padding: var(--space-3) 0; }

#redirect-msg { margin-top: var(--space-3); }
.back-link { margin-top: var(--space-3); }

.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-base);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover {
    background: var(--color-primary-hover);
    color: #fff;
    text-decoration: none;
}

.btn-sm { padding: var(--space-1) var(--space-2); font-size: 0.75rem; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-hover); }

.links h2 { margin-bottom: var(--space-2); }
.links ul { list-style: none; }
.links li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-row-border);
}

/* ---------- 4. keycloak / patternfly bridge ----------
 * PatternFly applies its own classes with high specificity and direct
 * font-family/color declarations. !important is required to win the cascade
 * without restructuring PatternFly's selector list.
 */

/* Page background */
#keycloak-bg,
.login-pf body {
    background: var(--color-bg) !important;
}

/* Keycloak's <body> picks up the same body rules as the app (centered,
 * max-width, padded), so the nested PatternFly login wrappers must collapse
 * to transparent shells — no extra width, padding, or centering. */
.pf-v5-c-login {
    min-height: auto !important;
    display: block !important;
    background: none !important;
    padding: 0 !important;
}

.pf-v5-c-login__container {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Strip PatternFly card chrome so the form sits flat on the page. */
.pf-v5-c-login__main,
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.pf-v5-c-login__main-header { padding: 0 0 var(--space-3) 0 !important; }
.pf-v5-c-login__main-footer-band { padding-top: var(--space-3) !important; }

/* The realm name renders inside #kc-header-wrapper. Make it look like the
 * app's <nav> band: padded, with bottom rule and bottom margin. */
.pf-v5-c-login__header {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#kc-header-wrapper {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-h1) !important;
    color: var(--color-text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    padding: var(--space-3) 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: var(--space-5) !important;
}

/* Page title inside the form ("Sign in to your account" etc.) */
h1#kc-page-title {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-h1) !important;
    color: var(--color-text) !important;
}

/* PatternFly primary button → match .btn exactly */
.pf-v5-c-button.pf-m-primary {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-base) !important;
    line-height: var(--line-height-base) !important;
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: var(--space-2) var(--space-3) !important;
}
.pf-v5-c-button.pf-m-primary:hover {
    background-color: var(--color-primary-hover) !important;
}

/* PatternFly inputs → match the app's text input styling */
.pf-v5-c-form-control,
input.pf-v5-c-form-control {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text) !important;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-input-border) !important;
    border-radius: var(--radius) !important;
    padding: var(--space-2) !important;
    line-height: var(--line-height-base) !important;
}

/* Form labels — PatternFly uses RedHatText. Pin to system-ui too. */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-form__helper-text {
    font-family: var(--font-family) !important;
    color: var(--color-text) !important;
}

.pf-v5-c-alert { border-radius: var(--radius); }