/*
 * global.css — Design tokens, CSS reset, typography, and reusable components.
 *
 * Every other CSS file in the project builds on top of these tokens.
 * Never hardcode colour hex values in page-specific CSS files — always use var().
 */

/* ============================================================
   Design Tokens — Light Mode (default)
   ============================================================ */
:root {
    /* Brand blues */
    --color-primary:        #1a4fa0;
    --color-primary-hover:  #153d7d;
    --color-primary-light:  #dce8f8;
    --color-accent:         #2980b9;

    /* Surfaces */
    --color-bg:             #f4f6fb;
    --color-surface:        #ffffff;
    --color-surface-alt:    #eef2f9;
    --color-border:         #c8d6ea;

    /* Text — WCAG AA verified */
    --color-text:           #1a2233;  /* 16:1 on light surface */
    --color-text-muted:     #5a6a84;  /* 5.4:1 on light surface */
    --color-text-inverse:   #ffffff;

    /* Semantic states */
    --color-success:        #1e8449;
    --color-success-light:  #d5f0e0;
    --color-warning:        #b7770d;
    --color-warning-light:  #fef3cd;
    --color-danger:         #c0392b;
    --color-danger-light:   #fde8e6;
    --color-info:           #1a6fa0;
    --color-info-light:     #d6eaf8;

    /* Shape */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(26,79,160,0.08);
    --shadow-md:  0 2px 8px rgba(26,79,160,0.12);
    --shadow-lg:  0 4px 20px rgba(26,79,160,0.16);

    /* Typography */
    --font-body:       'Inter', 'Segoe UI', Arial, sans-serif;
    --font-mono:       'Fira Code', 'Courier New', monospace;
    --font-size-base:  1rem;    /* 16px — never less on mobile */
    --line-height:     1.6;

    /* Spacing scale */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Layout */
    --max-width:        1200px;
    --sidebar-width:    240px;
}

/* ============================================================
   Design Tokens — Dark Mode
   ============================================================ */
[data-theme="dark"] {
    --color-primary:        #4d8fdc;
    --color-primary-hover:  #6aaae8;
    --color-primary-light:  #1a2d45;
    --color-accent:         #5ba3d0;

    --color-bg:             #0f1923;
    --color-surface:        #172334;
    --color-surface-alt:    #1e2f42;
    --color-border:         #2a3d56;

    --color-text:           #e8edf5;  /* 15:1 on dark surface */
    --color-text-muted:     #8fa8c8;  /* 5.7:1 on dark surface */
    --color-text-inverse:   #0f1923;

    --color-success:        #2ecc71;
    --color-success-light:  #0f2d1c;
    --color-warning:        #f0b429;
    --color-warning-light:  #2d2000;
    --color-danger:         #e74c3c;
    --color-danger-light:   #2d0f0e;
    --color-info:           #3498db;
    --color-info-light:     #0d2035;
}

/* OS dark mode preference — applies when user has not explicitly chosen */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary:        #4d8fdc;
        --color-primary-hover:  #6aaae8;
        --color-primary-light:  #1a2d45;
        --color-accent:         #5ba3d0;
        --color-bg:             #0f1923;
        --color-surface:        #172334;
        --color-surface-alt:    #1e2f42;
        --color-border:         #2a3d56;
        --color-text:           #e8edf5;
        --color-text-muted:     #8fa8c8;
        --color-text-inverse:   #0f1923;
        --color-success:        #2ecc71;
        --color-success-light:  #0f2d1c;
        --color-warning:        #f0b429;
        --color-warning-light:  #2d2000;
        --color-danger:         #e74c3c;
        --color-danger-light:   #2d0f0e;
        --color-info:           #3498db;
        --color-info-light:     #0d2035;
    }
}

/* ============================================================
   CSS Reset & Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);

    /* ----------------------------------------------------------------
     * Sticky-footer layout.
     * Body is a flex column at least 100vh tall. Combined with
     * `margin-top: auto` on .site-footer below, this pushes the footer
     * to the bottom of the viewport on short pages (e.g. the login
     * card) while behaving normally on long, scrollable pages.
     * ---------------------------------------------------------------- */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content fills the gap between nav and footer on every page. */
main {
    flex: 1 0 auto;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

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

a:hover, a:focus {
    color: var(--color-primary-hover);
}

/* Remove list styling when lists are used for navigation */
ul[role="list"], ol[role="list"] {
    list-style: none;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    color: var(--color-text);
    font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   Icons (Font Awesome 6 Free)
   ============================================================ */
/* A heading icon: sits just left of the title, neutral primary color. */
.heading-icon {
    color: var(--color-primary);
    margin-right: var(--space-xs);
    font-size: 0.9em;
    vertical-align: -0.05em;
}

/* When a heading icon should look softer (e.g. on muted dashboards). */
.heading-icon--muted {
    color: var(--color-text-muted);
}

/* Button glyphs sit slightly tighter against the label and don't get coloured. */
.btn .fa-solid,
.btn .fa-regular {
    margin-right: 0.4em;
    font-size: 0.95em;
}
.btn--icon-only .fa-solid,
.btn--icon-only .fa-regular {
    margin-right: 0;
}

/* Stat card / inline status accents — subtle, never the only meaning carrier. */
.stat-icon {
    color: var(--color-primary);
    margin-right: var(--space-xs);
    opacity: 0.85;
}

/* Big featured icons (dashboard cards). Keep contrast strong on primary. */
.dashboard-card__icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.page-content {
    padding: var(--space-lg) var(--space-md);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-xl); }
    .page-content { padding: var(--space-xl); }
}

/* Table scroll wrapper — prevents horizontal overflow on mobile */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.625rem 1.25rem;
    min-height: 44px;       /* Minimum touch target */
    min-width: 44px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.btn--danger:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff;
}

.btn--success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.btn--success:hover {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
    filter: brightness(0.92);
}

.btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    min-height: 36px;
}

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   Forms
   ============================================================ */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-danger);
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,79,160,0.18);
}

.form-control--error {
    border-color: var(--color-danger);
}

.form-control--error:focus {
    box-shadow: 0 0 0 3px rgba(192,57,43,0.18);
}

.form-hint {
    margin-top: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.form-error {
    margin-top: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-danger);
    font-weight: 500;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* ============================================================
   Alert / Flash messages
   ============================================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    margin-bottom: var(--space-lg);
    font-weight: 500;
}

.alert--success {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert--error {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.alert--info {
    background: var(--color-info-light);
    border-color: var(--color-info);
    color: var(--color-info);
}

.alert--warning {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert__message { flex: 1; }

.alert__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-top: 1px;
}

.alert__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    min-height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert__close:hover { opacity: 1; }

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

/* ============================================================
   Tables
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--color-border);
}

td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: var(--color-surface-alt); }

/* ============================================================
   Badges
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.badge--primary  { background: var(--color-primary-light); color: var(--color-primary); }
.badge--success  { background: var(--color-success-light); color: var(--color-success); }
.badge--danger   { background: var(--color-danger-light);  color: var(--color-danger); }
.badge--warning  { background: var(--color-warning-light); color: var(--color-warning); }
.badge--info     { background: var(--color-info-light);    color: var(--color-info); }

/* ------------------------------------------------------------
   Canonical role colour scheme — used EVERYWHERE a user role is
   shown so the whole platform is uniform and instantly readable.
   Apply as: <span class="badge badge-role badge-role--styreleder">.
   The role → colour mapping is the single source of truth:
     Hovedadministrator (supreme)    → red    (danger)
     Plattformadmin    (superadmin)  → blue   (primary)
     Styreleder        (styreleder)  → amber  (warning)
     Styremedlem       (boardadmin)  → info-blue (info)
     Beboer            (resident)    → green  (success)
   Each variant also carries a subtle border so the colours read
   clearly against both card and table backgrounds.
   ------------------------------------------------------------ */
.badge-role            { border: 1px solid transparent; }
.badge-role--supreme   { background: var(--color-danger-light);  color: var(--color-danger);  border-color: var(--color-danger); }
.badge-role--superadmin{ background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.badge-role--styreleder{ background: var(--color-warning-light); color: var(--color-warning); border-color: var(--color-warning); }
.badge-role--boardadmin{ background: var(--color-info-light);    color: var(--color-info);    border-color: var(--color-info); }
.badge-role--resident  { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success); }

/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
    margin-top: auto;
    padding: var(--space-lg) var(--space-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin-inline: auto;
}

.site-footer__copy {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.site-footer__nav { display: flex; gap: var(--space-md); }
.site-footer__nav a { font-size: 0.875rem; color: var(--color-text-muted); }

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle {
    background: none;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text);
    padding: 0.375rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: border-color 0.15s;
}

.theme-toggle:hover { border-color: var(--color-primary); }

[data-theme="dark"] .theme-toggle__icon--dark,
:root:not([data-theme="dark"]) .theme-toggle__icon--light { display: none; }

/* ============================================================
   Utility classes
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-muted  { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.gap-sm { gap: var(--space-sm); }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ============================================================
   Active-domain banner (SuperAdmin working inside a borettslag)
   Text is centred across the full width so it never hides behind
   the fixed sidebar; the exit button stays anchored top-right.
   ============================================================ */
.active-domain-banner {
    position: relative;
    /* Offset by the sidebar so the banner lives in the content column and is
       never hidden behind the fixed sidebar. */
    margin-left: var(--sidebar-width);
    background: var(--color-warning-light);
    color: var(--color-warning);
    border-bottom: 2px solid var(--color-warning);
    padding: 0.5rem 3rem;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-domain-banner__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-domain-banner__exit {
    margin: 0;
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    /* No sidebar offset on mobile; give the absolute button room on the right */
    .active-domain-banner {
        margin-left: 0;
        padding: 0.5rem 3.5rem 0.5rem var(--space-md);
    }
}