/* ===========================================================================
   Vigr shared design system — one source of truth for the app's look.

   Flat, sharp (no rounded corners), thin-bordered, muted greys with a blue
   accent. Extracted from the pages that were already styled this way
   (events/detail, events/personell, users/edit, users/list) so those pages
   don't change; the plain-Bootstrap pages get converted to these classes so
   the whole app reads as one system instead of two.

   Load order (base.html): Bootstrap -> THIS -> per-page {% block extra_css %}.
   So this can layer on Bootstrap, and a page's own inline CSS still wins.
   Purely additive: new class names only, no overriding of core Bootstrap
   classes, so pages not yet converted are untouched.
   =========================================================================== */

:root {
    --ink:        #0f1117;   /* primary text */
    --ink-2:      #4a4f5a;   /* secondary text */
    --ink-3:      #8a9099;   /* muted / labels */
    --line:       #d8dce3;   /* borders */
    --bg:         #f5f6f8;   /* page / strip background */
    --white:      #ffffff;
    --accent:     #1a56db;   /* primary blue */
    --accent-dark:#1144b8;
    --success:    #057a55;
    --warn:       #b45309;
    --danger:     #b91c1c;
    --row-hover:  #f0f4ff;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-sharp {
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    line-height: 1.4;
}
.btn-sharp-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-sharp-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-sharp-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sharp-success:hover { background: #046644; color: #fff; }
.btn-sharp-outline { background: var(--white); color: var(--ink-2); border-color: var(--line); }
.btn-sharp-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sharp-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-sharp-danger:hover { background: var(--danger); color: #fff; }
.btn-sharp-sm { font-size: 0.76rem; padding: 0.25rem 0.6rem; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.v-panel { background: var(--white); border: 1px solid var(--line); }
.v-panel-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}
.v-panel-hdr .sub { font-weight: 400; color: var(--ink-3); font-size: 0.85rem; }

/* ── Row list (clickable) ────────────────────────────────────────────────── */
.v-list { border: 1px solid var(--line); background: var(--white); }
.v-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--line);
    transition: background 0.08s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.v-row:last-child { border-bottom: none; }
.v-row:hover { background: var(--row-hover); }
.v-row .grow { flex: 1; min-width: 0; }
.v-row .name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.v-row .sub  { font-size: 0.78rem; color: var(--ink-3); }

/* ── Table (columnar list) ───────────────────────────────────────────────── */
.v-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
.v-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-3);
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.v-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); }
.v-table tbody tr:last-child td { border-bottom: none; }
.v-table tbody tr.clickable { cursor: pointer; transition: background 0.08s; }
.v-table tbody tr.clickable:hover { background: var(--row-hover); }
.v-table .t-strong { font-weight: 600; color: var(--ink); }

/* ── Status pills (sharp) ────────────────────────────────────────────────── */
.pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border: 1px solid transparent; white-space: nowrap; }
.pill.green  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.pill.blue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.pill.grey   { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.pill.amber  { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* A strip above a list, for counts/filters. */
.v-strip {
    display: flex;
    gap: 2rem;
    padding: 0.55rem 1.25rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-bottom: none;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.v-strip strong { color: var(--ink); }

/* ── Role badges — ONE definition (was copy-pasted across 3 templates) ────── */
.role-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.role-badge.ko    { background: #dbeafe; color: #1e40af; }
.role-badge.enhet { background: #d1fae5; color: #065f46; }
.role-badge.lege  { background: #cffafe; color: #155e75; }
.role-badge.telt  { background: #f3e8fd; color: #6b21a8; }
.role-badge.ansv,
.role-badge.arrangement_admin { background: #f3f4f6; color: #374151; }
.role-badge.firma_admin { background: #e0e7ff; color: #3730a3; }

/* ── Stat tiles ──────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 1rem 1.25rem;
    text-decoration: none;
    display: block;
    color: inherit;
    transition: border-color 0.1s, transform 0.1s;
}
a.stat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat-card .label { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 0.15rem; }
.stat-card .value { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-card .value.warn { color: var(--warn); }
.stat-card .sub-label { font-size: 0.72rem; color: var(--ink-3); margin-top: 0.2rem; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--ink-3); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.active   { background: #10b981; }
.status-dot.inactive { background: #d1d5db; }
.avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Sharp form controls ─────────────────────────────────────────────────── */
.v-input, .v-select {
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.83rem;
    background: var(--white);
    color: var(--ink);
}
.v-input:focus, .v-select:focus { outline: none; border-color: var(--accent); }

.v-page-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ink); }