/* Relkio – simple, calm CRM styling on top of Bootstrap. */

:root {
    --rk-bg: #f5f6f8;
    --rk-surface: #ffffff;
    --rk-border: #e3e6ea;
    --rk-text: #1d2430;
    --rk-muted: #6b7380;
    --rk-primary: #2f5bd3;
    --rk-primary-dark: #2448ad;
    --rk-danger: #c62f2f;
    --rk-warn: #b86e00;
    --rk-green: #1f8a4c;
    --rk-radius: 10px;

    --bs-body-bg: var(--rk-bg);
    --bs-body-color: var(--rk-text);
    --bs-link-color-rgb: 47, 91, 211;
    --bs-border-color: var(--rk-border);
}

html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    background: var(--rk-bg);
    color: var(--rk-text);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus { outline: none; }

.btn-primary { --bs-btn-bg: var(--rk-primary); --bs-btn-border-color: var(--rk-primary); --bs-btn-hover-bg: var(--rk-primary-dark); --bs-btn-hover-border-color: var(--rk-primary-dark); --bs-btn-disabled-bg: var(--rk-primary); --bs-btn-disabled-border-color: var(--rk-primary); }
.btn-outline-primary { --bs-btn-color: var(--rk-primary); --bs-btn-border-color: var(--rk-primary); --bs-btn-hover-bg: var(--rk-primary); --bs-btn-hover-border-color: var(--rk-primary); }
.btn-link { text-decoration: none; }
.btn-reset { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 91, 211, .25);
    border-color: var(--rk-primary);
}

.validation-message { color: var(--rk-danger); font-size: .85rem; margin-top: .15rem; }
.invalid { border-color: var(--rk-danger) !important; }

/* ---------- Top bar ---------- */

.topbar {
    background: #18202e;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 56px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: inherit;
}
.brand:hover { text-decoration: none; color: inherit; }
.brand-lg { font-size: 1.4rem; }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 8px;
    background: var(--rk-primary);
    color: #fff;
    font-size: .85em;
}

.topnav {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
}

.topnav-link {
    color: rgba(255, 255, 255, .75);
    padding: .45rem .75rem;
    border-radius: 8px;
    white-space: nowrap;
}
.topnav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.topnav-link.active { color: #fff; background: rgba(255, 255, 255, .14); }

.topnav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.topnav-user form { margin: 0; }

.nav-toggle-input { display: none; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
    .topbar-inner { gap: .5rem; }
    .nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-left: auto;
        padding: 10px;
        cursor: pointer;
    }
    .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; }
    .topnav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: .75rem;
    }
    .nav-toggle-input:checked ~ .topnav { display: flex; }
    .topnav-user {
        margin-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-top: .5rem;
        margin-top: .25rem;
        justify-content: space-between;
    }
}

/* ---------- Page layout ---------- */

.app-main { padding: 1.5rem 0 3rem; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-header h1 { font-size: 1.6rem; font-weight: 650; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    color: var(--rk-muted);
    margin-top: .4rem;
    align-items: center;
}

.crumbs { font-size: .9rem; color: var(--rk-muted); margin-bottom: .5rem; }

.page-narrow { max-width: 560px; }

.description { white-space: pre-wrap; max-width: 75ch; margin-bottom: 1.25rem; }

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 992px) {
    .detail-grid { grid-template-columns: 1fr; }
}

.toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.toolbar .search { max-width: 420px; }

/* ---------- Cards ---------- */

.card {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: transparent;
    border-bottom: 1px solid var(--rk-border);
    padding: .7rem 1rem;
}
.card-title { font-size: 1rem; font-weight: 650; margin: 0; }
.card-section { padding: .85rem 1rem; border-bottom: 1px solid var(--rk-border); background: #fafbfc; }
.card > .alert { margin: .75rem 1rem; }

.count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 .4em;
    border-radius: 999px;
    background: #eef1f5;
    color: var(--rk-muted);
    font-size: .8rem;
    text-align: center;
    margin-left: .25rem;
}

.group-overdue .card-title { color: var(--rk-danger); }
.group-overdue { border-color: #f0c8c8; }

.empty { color: var(--rk-muted); }
.empty-state {
    background: var(--rk-surface);
    border: 1px dashed var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 2rem;
    text-align: center;
}

/* ---------- Chips ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 550;
    line-height: 1.5;
    white-space: nowrap;
    background: #eef1f5;
    color: #3d4654;
}
.page-header h1 .chip { font-size: .8rem; }
a.chip:hover { text-decoration: none; filter: brightness(.96); }
.chip-blue { background: #e6edfc; color: #2448ad; }
.chip-green { background: #e3f4ea; color: #17673a; }
.chip-gray { background: #eceef1; color: #5d6573; }
.chip-outline { background: transparent; border: 1px solid var(--rk-border); color: #4a5361; font-weight: 500; }

.rating-dead { background: #eceef1; color: #5d6573; }
.rating-cold { background: #e2f0fb; color: #1f5f93; }
.rating-lukewarm { background: #fdf3dc; color: #8a5a00; }
.rating-warm { background: #fde6d6; color: #a2470e; }
.rating-hot { background: #fbdcdc; color: #a51d1d; }

/* ---------- Segmented control ---------- */

.segmented {
    display: inline-flex;
    border: 1px solid var(--rk-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rk-surface);
}
.segment {
    border: 0;
    background: transparent;
    padding: .3rem .8rem;
    font-size: .875rem;
    color: var(--rk-muted);
    cursor: pointer;
    margin: 0;
}
.segment + .segment { border-left: 1px solid var(--rk-border); }
.segment.active { background: var(--rk-primary); color: #fff; }

/* ---------- Row lists (companies, users) ---------- */

.row-list { list-style: none; padding: 0; margin: 0; }
.row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--rk-border);
    flex-wrap: wrap;
}
.row-item:last-child { border-bottom: 0; }
.row-main { min-width: 0; }
.row-title { font-weight: 600; }
.row-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--rk-muted); font-size: .875rem; }
.row-side { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.row-opps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.opp-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .1rem .15rem .1rem .6rem;
    border: 1px solid var(--rk-border);
    border-radius: 999px;
    background: var(--rk-surface);
    color: var(--rk-text);
    font-size: .82rem;
}
.opp-pill:hover { text-decoration: none; border-color: #c5ccd6; background: #f8f9fb; }
.opp-pill-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.opp-pill .chip { font-size: .72rem; }
.row-muted { opacity: .6; }

/* ---------- Contacts & opportunities ---------- */

.contact-list, .opp-list { list-style: none; margin: 0; padding: 0; }
.contact, .opp { padding: .75rem 1rem; border-bottom: 1px solid var(--rk-border); }
.contact:last-child, .opp:last-child { border-bottom: 0; }
.contact-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.contact-name { font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.contact-actions .btn, .timeline-actions .btn, .task-actions .btn { padding: 0 .35rem; font-size: .85rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .875rem; margin-top: .2rem; word-break: break-all; }
.contact-note {
    margin-top: .4rem;
    font-size: .875rem;
    color: #4a5361;
    white-space: pre-wrap;
    background: #fbf8ec;
    border-left: 3px solid #e8d48a;
    padding: .35rem .6rem;
    border-radius: 4px;
}

.opp-title { font-weight: 600; display: block; }
.opp-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.opp-closed .opp-title { color: var(--rk-muted); }

/* ---------- Tasks ---------- */

.task-list { list-style: none; margin: 0; padding: 0; }
.task {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rk-border);
    flex-wrap: wrap;
}
.task:last-child { border-bottom: 0; }
.task > form { flex: 1; }
.task-check { margin-top: .2rem; width: 1.15rem; height: 1.15rem; cursor: pointer; flex-shrink: 0; }
.task-main { flex: 1; min-width: 12rem; }
.task-title { font-weight: 550; }
.task-meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .85rem; color: var(--rk-muted); margin-top: .15rem; align-items: center; }
.task-actions { display: flex; align-items: center; }
.task-overdue .task-due { color: var(--rk-danger); font-weight: 600; }
.task-overdue { box-shadow: inset 3px 0 0 var(--rk-danger); }
.task-soon .task-due { color: var(--rk-warn); font-weight: 600; }
.task-soon { box-shadow: inset 3px 0 0 #e9a23b; }
.task-done .task-title { text-decoration: line-through; color: var(--rk-muted); }

.quick-dates { display: flex; gap: .75rem; margin-top: .2rem; }
.quick-dates .btn { font-size: .8rem; }

/* ---------- Activity timeline ---------- */

.timeline { list-style: none; margin: 0; padding: .5rem 1rem 1rem; }
.timeline-item {
    position: relative;
    padding: .75rem 0 .75rem 1.1rem;
    border-left: 2px solid var(--rk-border);
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 1.05rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9aa3b0;
    border: 2px solid var(--rk-surface);
}
.timeline-item.type-phonecall::before { background: var(--rk-green); }
.timeline-item.type-emailsent::before { background: var(--rk-primary); }
.timeline-item.type-note::before { background: #c9962a; }

.timeline-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.timeline-type { font-weight: 600; font-size: .9rem; }
.timeline-actions { margin-left: auto; display: flex; align-items: center; }
.timeline-body { white-space: pre-wrap; margin-top: .3rem; overflow-wrap: anywhere; }
.timeline-footer { margin-top: .4rem; font-size: .78rem; color: var(--rk-muted); }

/* ---------- Event log ---------- */

.event-list { list-style: none; margin: 0; padding: 0; }
.event {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: .25rem 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rk-border);
}
.event:last-child { border-bottom: 0; }
.event-time { color: var(--rk-muted); font-size: .85rem; white-space: nowrap; }
.event-changes { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .85rem; }
.event-changes .field { color: var(--rk-muted); }
.event-changes .old { text-decoration: line-through; color: #8a919c; }
.event-changes .new { color: var(--rk-text); }
@media (max-width: 640px) {
    .event { grid-template-columns: 1fr; }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }

/* ---------- Confirm ---------- */

.confirm { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.confirm-text { font-size: .85rem; color: var(--rk-danger); }

/* ---------- Login ---------- */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

/* ---------- Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: #fff4d6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "Der opstod en fejl."; }