/* =========================================================
   CIRClO – LIGHT THEME (NEW DESIGN)
   - bright background, soft gradients, clean cards
   - keeps your accent gradient for CTAs + highlights
========================================================= */

/* =========================
   Tokens + Base
========================= */
:root{
    /* neutrals */
    --bg: #f7f8fc;
    --bg2:#ffffff;
    --surface:#ffffff;
    --surface-2:#fbfcff;

    --ink:#0f172a;            /* slate-900-ish */
    --muted:#667085;          /* modern gray */
    --border:#e6e8f0;

    /* shadow */
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
    --shadow-md: 0 14px 40px rgba(15, 23, 42, .10);

    /* radii */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;

    /* gradient palette (brand) */
    --c1:#6D28D9;
    --c2:#EC4899;
    --c3:#F97316;

    --grad: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    background: var(--bg);
    overflow-x:hidden;
    position:relative;
}
.auth-logo {
    margin-bottom: 2rem;
}

.auth-logo img {
    max-width: 220px;
    width: 100%;
    height: auto;
    transition: transform .25s ease;
}

.auth-logo a:hover img {
    transform: scale(1.03);
}
/* Soft bright background glow */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
            radial-gradient(900px 600px at 15% 5%, rgba(109,40,217,.10), transparent 60%),
            radial-gradient(1000px 700px at 80% 10%, rgba(236,72,153,.10), transparent 60%),
            radial-gradient(1100px 700px at 50% 95%, rgba(249,115,22,.08), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
}

/* Utilities */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

.circlo-environment-banner{
    position:sticky;
    top:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    min-height:34px;
    padding:.35rem 3.5rem;
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-align:center;
}
.circlo-environment-banner[hidden]{ display:none; }
.circlo-environment-banner--local{ background:#b91c1c; }
.circlo-environment-banner--staging{ background:#c2410c; }
.circlo-environment-banner__dismiss{
    border:1px solid rgba(255,255,255,.7);
    border-radius:999px;
    padding:.1rem .55rem;
    color:#fff;
    background:transparent;
    font:inherit;
    font-size:.7rem;
    letter-spacing:normal;
}
.circlo-environment-banner__dismiss:hover,
.circlo-environment-banner__dismiss:focus-visible{ background:rgba(255,255,255,.18); }

/* =========================
   Top bar (hidden when not authed)
========================= */
#topBar{
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
}
body.is-authed #topBar{
    opacity:1;
    pointer-events:auto;
}

.bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;

    /* bright glass */
    background: rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(12px);

    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.brand-logo{
    padding:10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
            0 10px 26px rgba(15,23,42,.08),
            0 0 0 1px rgba(255,255,255,.7) inset;
}

/* =========================
   Generic form controls
========================= */
input, select, button, textarea{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:14px;
}

input, select, textarea{
    background: #fff;
    color: var(--ink);
}

input::placeholder, textarea::placeholder{ color: rgba(102,112,133,.75); }

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: rgba(109,40,217,.35);
    box-shadow: 0 0 0 4px rgba(109,40,217,.12);
}

/* Make default buttons lighter (Bootstrap still applies to .btn) */
button{
    cursor:pointer;
    background:#ffffff;
    color: var(--ink);
    border-color: var(--border);
}
button:hover{ filter:brightness(0.99); }
button:disabled{ opacity:.6; cursor:not-allowed; }

hr{
    border:none;
    border-top:1px solid rgba(15,23,42,.10);
    margin:14px 0;
}

/* =========================
   Container height
========================= */
.container{
    width:100%;
    padding:12px;
    min-height:100vh;
    height:auto;
    max-width:none;
}

body.is-authed .container{
    min-height: calc(100vh - 58px);
    height: calc(100vh - 58px);
}

body.is-authed main.container{
    display:flex;
    flex-direction:column;
}

body.is-authed main.container > .row{
    flex:1 1 auto;
    min-height:0;
}

body.is-authed #appPane{
    height:100%;
    min-height:0;
    overflow:hidden;
}

body.is-authed{
    overflow-y:hidden;
}

body.is-authed #dashPane{
    height:100%;
    overflow:auto;
}

.legal-footer{
    display:none;
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:.45rem 1rem;
    color:var(--muted);
    font-size:.78rem;
    background:rgba(255,255,255,.88);
    border-top:1px solid rgba(15,23,42,.08);
    backdrop-filter:blur(10px);
}
body.is-authed .legal-footer{
    display:flex;
}
.legal-footer a{
    color:inherit;
}
.legal-footer a:hover,
.legal-footer a:focus-visible{
    color:var(--ink);
}

.legal-modal{
    overflow:hidden;
    border:0;
    border-radius:22px;
    box-shadow:0 24px 80px rgba(15,23,42,.22);
}
.legal-modal .modal-header{
    align-items:flex-start;
    padding:1.35rem 1.5rem 1.15rem;
    color:var(--ink);
    border-bottom:1px solid var(--border);
    background:#fff;
}
.legal-modal .modal-title{
    margin-top:.15rem;
    font-weight:800;
    letter-spacing:-.02em;
}
.legal-modal__eyebrow{
    color:var(--muted);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.legal-modal .btn-close{
    opacity:.85;
}
.legal-modal .modal-body{
    padding:1.5rem clamp(1.1rem, 4vw, 2.25rem);
    background:#fff;
    color:var(--ink);
    line-height:1.7;
}
.legal-document-content{
    max-width:72ch;
    margin:0 auto;
}
.legal-document-content h1,
.legal-document-content h2,
.legal-document-content h3,
.legal-document-content h4{
    margin-top:1.35em;
    margin-bottom:.45em;
    color:var(--ink);
    line-height:1.25;
}
.legal-document-content h1:first-child,
.legal-document-content h2:first-child,
.legal-document-content h3:first-child{
    margin-top:0;
}
.legal-document-content p:last-child,
.legal-document-content ul:last-child,
.legal-document-content ol:last-child{
    margin-bottom:0;
}
.legal-document-content a{
    color:var(--c1);
}
.legal-modal .modal-footer{
    padding:.85rem 1.5rem;
    border-top:1px solid var(--border);
    background:var(--surface-2);
}
@media (max-width:576px){
    .legal-modal{
        margin:.5rem;
        border-radius:18px;
    }
    .legal-modal .modal-header{
        padding:1.1rem 1.15rem 1rem;
    }
    .legal-modal .modal-body{
        padding:1.15rem;
    }
    .legal-modal .modal-footer{
        padding:.75rem 1.15rem;
    }
}

/* =========================
   Cards
========================= */
.card{
    background: var(--surface);
    border:1px solid rgba(15,23,42,.08);
    border-radius: var(--r-md);
    padding:14px;
    box-shadow: var(--shadow-sm);
}

/* Bootstrap input spacing */
.card input, .card select, .card button, .card textarea{ border-radius:12px; }

/* Card headers in light theme */
.card-header{
    background: linear-gradient(180deg, rgba(249,250,255,.9), rgba(255,255,255,.7));
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* =========================
   Auth / Landing
========================= */
#authPane{ height:auto; }
body.is-authed #authPane{ display:none; }

.authLayout{
    max-width:1200px;
    padding:18px;
}

/* HERO – now LIGHT */
.heroCard{
    position:relative;
    border-radius: var(--r-lg);
    padding:28px;
    overflow:hidden;

    background:
            radial-gradient(900px 420px at 25% 10%, rgba(236,72,153,.10), transparent 60%),
            radial-gradient(900px 420px at 85% 20%, rgba(249,115,22,.08), transparent 60%),
            radial-gradient(900px 420px at 55% 95%, rgba(109,40,217,.09), transparent 60%),
            rgba(255,255,255,.82);

    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
}

.heroGlow{ display:none; } /* not needed on light theme */

.heroTitle{
    color: var(--ink);
    font-size: clamp(28px, 4.2vw, 46px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin: 10px 0 12px;
}

.gradText{
    background: var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.heroLead{
    color: rgba(15,23,42,.72);
    font-size:16px;
    max-width:58ch;
}

.heroBadges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.heroBadge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;

    background: rgba(255,255,255,.85);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.78);
    font-size:13px;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.heroSteps{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
@media (max-width: 991px){
    .heroSteps{ grid-template-columns: 1fr; }
}

.step{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius: 16px;

    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,23,42,.08);
}

.stepIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;

    background: var(--grad);
    color:#fff;
    box-shadow: 0 10px 18px rgba(109,40,217,.18);
}

.stepTitle{
    color: var(--ink);
    font-weight:800;
    font-size:14px;
    margin-bottom:2px;
}
.stepText{
    color: rgba(15,23,42,.68);
    font-size:13px;
}

.heroCtas{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.btnHeroPrimary{
    border:0;
    border-radius:14px;
    padding:10px 14px;
    background: var(--grad);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    box-shadow: 0 14px 28px rgba(109,40,217,.22);
}
.btnHeroPrimary:hover{ filter:brightness(1.03); color:#fff; }

.btnHeroGhost{
    border-radius:14px;
    padding:10px 14px;
    background: rgba(255,255,255,.9);
    border:1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.85);
    font-weight:700;
    text-decoration:none;
}
.btnHeroGhost:hover{ background:#fff; color: var(--ink); }

.heroFineprint{
    color: rgba(15,23,42,.55);
    font-size:12px;
}

/* =========================
   Login/Register card – LIGHT
========================= */
#loginRegisterBox.card{
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    overflow:hidden;
    position: relative;
}

#loginRegisterBox.card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(520px 220px at 15% 10%, rgba(236,72,153,.10), transparent 65%),
            radial-gradient(520px 220px at 85% 10%, rgba(249,115,22,.08), transparent 65%),
            radial-gradient(520px 220px at 55% 95%, rgba(109,40,217,.08), transparent 65%);
}

#loginRegisterBox .card-header{
    background: rgba(255,255,255,.75);
}
#loginRegisterBox h2{
    margin:0;
    font-size:18px;
    font-weight:900;
}

#loginRegisterBox label{
    color: rgba(15,23,42,.70);
    font-size: 12px;
    margin-bottom: 6px;
}

#loginRegisterBox .form-control{
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.10);
    color: var(--ink);
}

#loginRegisterBox .form-control:focus{
    border-color: rgba(236,72,153,.35);
    box-shadow: 0 0 0 4px rgba(236,72,153,.12);
    outline: none;
}

/* Keep your gradient primary inside auth */
#loginRegisterBox .btn-primary{
    border:0;
    font-weight:900;
    border-radius:14px;
    background: var(--grad);
    box-shadow: 0 14px 28px rgba(109,40,217,.18);
}
#loginRegisterBox .btn-primary:hover{ filter:brightness(1.03); }

/* Secondary now looks like a soft card button */
#loginRegisterBox .btn-secondary{
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.90);
    color: rgba(15,23,42,.88);
    border-radius: 14px;
    font-weight: 800;
}
#loginRegisterBox .btn-secondary:hover{
    background:#fff;
}

/* forgot btn */
#loginRegisterBox .btn-warning{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.12);
    color: rgba(15,23,42,.88);
    border-radius: 14px;
    font-weight: 800;
}
#loginRegisterBox .btn-warning:hover{ background:#fff; }

#loginRegisterBox hr{
    border-top: 1px solid rgba(15,23,42,.10);
}

#loginRegisterBox .form-check-label{
    color: rgba(15,23,42,.70);
}
#loginRegisterBox .form-check-label a{
    color: rgba(15,23,42,.92);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#loginRegisterBox .form-check-label a:hover{ color: var(--ink); }

@media (min-width: 992px){
    #loginRegisterBox{ position: sticky; top: 16px; }
}

/* =========================
   Articles (LIGHT)
========================= */
.articlesCard{ padding:22px; }

.articlesHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
@media (max-width: 991px){
    .articlesHead{ flex-direction:column; align-items:flex-start; }
}

.articlesTitle{
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 26px);
    line-height:1.1;
    margin:0 0 6px;
    letter-spacing:-0.02em;
}
.articlesSub{
    margin:0;
    color: rgba(15,23,42,.66);
    font-size:13px;
    max-width:78ch;
}

.articlesAllBtn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    padding:10px 12px;
    border-radius:12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.88);
    font-weight:800;
    white-space:nowrap;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.articlesAllBtn:hover{ background:#fff; color: var(--ink); }

.articlesList{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.articleRow{
    text-decoration:none;
    display:block;
    border-radius:16px;
    padding:14px 14px 12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.articleRow:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
    border-color: rgba(109,40,217,.18);
}

.articleRowTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.articlePill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;

    background: rgba(109,40,217,.08);
    border: 1px solid rgba(109,40,217,.12);
    color: rgba(15,23,42,.82);
    font-size:12px;
    font-weight:800;
}

.articleMeta{
    color: rgba(15,23,42,.55);
    font-size:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.articleRowTitle{
    color: var(--ink);
    font-weight:950;
    font-size:16px;
    line-height:1.2;
    margin:0 0 6px;
    letter-spacing:-0.01em;
}

.articleRowExcerpt{
    color: rgba(15,23,42,.70);
    font-size:13px;
    line-height:1.45;
    margin:0 0 10px;
    max-width:92ch;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.articleRowCta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    color:#fff;
    padding:8px 10px;
    border-radius:12px;
    background: var(--grad);
    width: fit-content;
    box-shadow: 0 12px 22px rgba(109,40,217,.18);
}

/* =========================
   App (authed) layout
========================= */
#appPane{ height:100%; }
.circlo-advanced-toggle{
    display:flex;
    align-items:center;
    gap:.4rem;

    width:100%;

    padding:.65rem .85rem;

    border-radius:12px;

    transition:.2s;
}

.circlo-advanced-toggle:hover{
    background:#f8f9fa;
}

.circlo-advanced-toggle .toggle-icon{
    transition:transform .25s ease;
}

.circlo-advanced-toggle[aria-expanded="true"] .toggle-icon{
    transform:rotate(180deg);
}

.circlo-color-option--custom {
    display: grid;
    place-items: center;

    color: #fff;

    background:
            conic-gradient(
                    #ef4444,
                    #f59e0b,
                    #eab308,
                    #22c55e,
                    #06b6d4,
                    #3b82f6,
                    #8b5cf6,
                    #ec4899,
                    #ef4444
            ) !important;
}

.circlo-color-option--custom i {
    font-size: 16px;
    line-height: 1;

    text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.8),
            0 0 2px rgba(0, 0, 0, 0.8);
}

.circlo-color-option--custom:hover {
    transform: scale(1.08) rotate(4deg);
}



.circlo-color-palette {
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 9px;
    margin-top: 8px;
}

.circlo-color-option {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #5f6b7a;
    border-radius: 50%;
    cursor: pointer;
    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease,
            border-color 0.15s ease;
}

.circlo-color-option:hover {
    transform: scale(1.08);
}

.circlo-color-option:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.3);
    outline-offset: 2px;
}

.circlo-color-option.is-selected {
    border-color: #ffffff;
    box-shadow:
            0 0 0 2px #212529,
            0 2px 6px rgba(0, 0, 0, 0.25);
}

.circlo-color-option.is-selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.85),
            0 0 2px rgba(0, 0, 0, 0.85);
}

@media (max-width: 480px) {
    .circlo-color-palette {
        grid-template-columns: repeat(5, 34px);
    }
}


/* =========================================================
   HJUL / KALENDER-VISNING
========================================================= */

.view-switcher {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;

    padding: 4px;
    border-radius: 14px;

    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
}

.view-switcher .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
}

#wheelView,
#calendarView {
    width: 100%;
    height: 100%;
}

#wheelView {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

#wheelLoading {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .78);
    color: var(--muted);
    font-size: .9rem;
    backdrop-filter: blur(2px);
}

.brand-loader {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
}

.brand-loader img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    animation: brand-loader-spin 1.8s linear infinite;
}

@keyframes brand-loader-spin {
    to { transform: rotate(360deg); }
}


#calendarView {
    overflow: auto;
    padding: 62px 14px 18px;
}

.calendar-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;

    margin-bottom: 14px;
}

.calendar-title {
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 900;
    color: var(--ink);
}

.circlo-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    min-width: 820px;

    border-top: 1px solid rgba(15, 23, 42, .10);
    border-left: 1px solid rgba(15, 23, 42, .10);

    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}

.calendar-weekday {
    padding: 10px 8px;

    border-right: 1px solid rgba(15, 23, 42, .10);
    border-bottom: 1px solid rgba(15, 23, 42, .10);

    background: rgba(249, 250, 255, .96);

    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.calendar-day {
    position: relative;
    min-height: 120px;
    padding: 8px;

    border-right: 1px solid rgba(15, 23, 42, .10);
    border-bottom: 1px solid rgba(15, 23, 42, .10);

    background: #fff;
    cursor: pointer;

    transition:
            background-color .15s ease,
            box-shadow .15s ease;
}

.calendar-day:hover {
    background: rgba(109, 40, 217, .025);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .12);
}

.calendar-day--outside {
    background: rgba(247, 248, 252, .72);
}

.calendar-day--outside .calendar-day-number {
    opacity: .42;
}

.calendar-day--today {
    background: rgba(109, 40, 217, .045);
}

.calendar-day--today .calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 27px;
    padding: 0 6px;

    border-radius: 999px;
    background: var(--grad);
    color: #fff;
}

.calendar-day-number {
    margin-bottom: 7px;

    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-event {
    display: block;
    width: 100%;

    padding: 5px 7px;
    border: 0;
    border-radius: 7px;

    font-size: 11px;
    line-height: 1.25;
    text-align: left;

    overflow: hidden;
    box-shadow: none;

    transition:
            transform .12s ease,
            filter .12s ease;
}

.calendar-event:hover {
    transform: translateY(-1px);
    filter: brightness(.97);
}

.calendar-event-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
}

.calendar-more {
    padding: 2px 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .view-switcher {
        top: 10px;
        right: 10px;
    }

    .view-switcher .btn {
        min-width: auto;
    }

    #calendarView {
        padding-top: 58px;
    }

    .circlo-calendar {
        grid-template-columns: repeat(7, minmax(90px, 1fr));
        min-width: 680px;
    }

    .calendar-weekday {
        font-size: 10px;
    }

    .calendar-day {
        min-height: 100px;
        padding: 6px;
    }
}





/* Dashboard grid (projects) */
.dashGrid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap:12px;
}
.dashboard-create-card{
    display:block;
    min-height:260px;
    padding:12px;
    cursor:default;
    border-color:rgba(109,40,217,.20);
    background:rgba(255,255,255,.92);
}
.dashboard-create-card:hover{ transform:none; }
.dashboard-create-card__thumb{
    display:grid;
    place-items:center;
    width:100%;
    aspect-ratio:1 / 1;
    min-height:0;
    border-radius:14px;
    border:1px solid transparent;
    color:var(--brand);
    background:rgba(109,40,217,.12);
    background-image:radial-gradient(circle at center, rgba(255,255,255,.72) 0 2px, transparent 3px), linear-gradient(135deg, rgba(109,40,217,.16), rgba(109,40,217,.04));
    background-size:22px 22px, auto;
    font-size:42px;
    cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dashboard-create-card__thumb:hover,
.dashboard-create-card__thumb:focus-visible{
    border-color:rgba(109,40,217,.35);
    box-shadow:0 8px 20px rgba(109,40,217,.12);
    outline:none;
    transform:translateY(-1px);
}
.dashboard-create-card__body{
    padding:12px 2px 2px;
}
.dashboard-create-card h3{
    margin:0 0 5px;
    color:var(--ink);
    font-size:17px;
}
.dashboard-create-card p{
    margin:0 0 12px;
    color:rgba(15,23,42,.66);
    font-size:13px;
}
.dashboard-create-card__body > .btn{ width:100%; }
.dashboard-create-card.is-upgrade{
    border-color:rgba(245,158,11,.30);
}
.dashboard-create-card__thumb.is-upgrade{
    color:#b45309;
    background-color:rgba(245,158,11,.14);
    background-image:radial-gradient(circle at center, rgba(255,255,255,.72) 0 2px, transparent 3px), linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.05));
}
@media (max-width:576px){
    .dashboard-create-card{ min-height:230px; }
}

.empty-dashboard{
    grid-column:1 / -1;
    min-height:420px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:48px 24px;
    text-align:center;
    border:1px solid rgba(109,40,217,.14);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:0 18px 40px rgba(15,23,42,.07);
}
.empty-dashboard__icon{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    border-radius:22px;
    color:var(--brand);
    background:rgba(109,40,217,.10);
    font-size:32px;
}
.empty-dashboard h2{
    margin:0;
    color:var(--ink);
    font-size:clamp(22px, 3vw, 30px);
}
.empty-dashboard p{
    max-width:600px;
    margin:0;
    color:rgba(15,23,42,.68);
}
.empty-dashboard__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:6px;
}
.empty-dashboard__notice{
    padding:14px 16px;
    border:1px solid rgba(220,38,38,.18);
    border-radius:12px;
    color:#991b1b;
    background:rgba(254,226,226,.65);
}
.template-choice{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid rgba(15,23,42,.09);
}
.template-choice:last-child{ border-bottom:0; }
.template-choice__preview{
    min-height:96px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#fff;
    background:var(--brand-grad);
    font-size:30px;
}
.template-choice__body h3{
    margin:0;
    color:var(--ink);
    font-size:18px;
}
.template-choice__body p{
    margin:6px 0 12px;
    color:rgba(15,23,42,.68);
}
.creation-choice-list{
    display:grid;
    gap:10px;
}
.creation-choice{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    text-align:left;
    color:var(--ink);
    background:#fff;
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.creation-choice:hover{
    background:rgba(109,40,217,.05);
    border-color:rgba(109,40,217,.30);
    transform:translateY(-1px);
}
.creation-choice > i{
    width:34px;
    color:var(--brand);
    font-size:22px;
    text-align:center;
}
.creation-choice span{
    display:grid;
    gap:2px;
}
.creation-choice small{
    color:rgba(15,23,42,.62);
}
@media (max-width:576px){
    .template-choice{ grid-template-columns:1fr; }
    .template-choice__preview{ min-height:72px; }
}

.dashCard{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    padding:12px;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
    transition: transform .10s ease, box-shadow .10s ease;
}
.dashCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

.dashThumbWrap{
    display:block;
    width:100%;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    overflow:hidden;
    background:#fff;
    margin-bottom:10px;
    padding:0;
    text-align:left;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.dashThumbWrap:hover,
.dashThumbWrap:focus-visible{
    border-color:rgba(109,40,217,.35);
    box-shadow:0 8px 20px rgba(109,40,217,.12);
    outline:none;
    transform:translateY(-1px);
}
.dashThumb{ width:100%; height:auto; display:block; }
.dashTitle{ font-weight:900; }
.dashMeta{ color:var(--muted); font-size:12px; margin-top:4px; }

/* App topbar row inside app views */
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:12px;
    flex-wrap:wrap;
}

/* Two-column layout (canvas + sidepane) */
.layout{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:12px;
    align-items:stretch;
}
@media (max-width: 992px){
    .layout{ grid-template-columns: 1fr; height:auto; }
}

#appInner{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
}

#appPane > .row{
    height:100%;
    min-height:0;
}

/* Canvas pane */
.canvasPane{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    overflow:hidden;
    min-height:0;
}

#wheelWrap {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    flex: 1 1 auto;
    position: relative;
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

#wheel{
    width:100%;
    height:100%;
    display:block;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Side pane scroll */
.sidePane{ height:100%; overflow:auto; }

.activity-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.activity-pane > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.activity-pane > .card-footer:empty {
    display: none;
}

.profile-modal-content #profile-integrations-pane .account-logout-block {
    display: none !important;
}

/* Lists */
.listItem{
    padding: 10px 8px;
    border-bottom:1px solid rgba(15,23,42,.08);
}
.listItem:hover{ background: rgba(249,250,255,.9); }

.itemTitle{ font-weight:800; color:#242424; }
.itemMeta{ color:var(--muted); font-size:12px; margin-top:4px; }

.listItem button{ padding:6px 10px; font-size:12px; }
.btn i.bi{ display:inline-block; width:1em; }

.activity-groups {
    display: grid;
    gap: .75rem;
}

.activity-year-group {
    display: grid;
    gap: .5rem;
}

.activity-year-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .55rem .65rem;
    border: 0;
    border-radius: 10px;
    background: rgba(109, 40, 217, .08);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.activity-year-heading::before {
    content: "▸";
    margin-right: .45rem;
    color: var(--primary);
    transition: transform .15s ease;
}

.activity-year-group.is-open .activity-year-heading::before {
    transform: rotate(90deg);
}

.activity-year-heading:hover,
.activity-year-group.is-open .activity-year-heading {
    background: rgba(109, 40, 217, .14);
}

.activity-year-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: var(--primary);
    font-size: .68rem;
}

.activity-load-more-years {
    width: 100%;
    margin-top: .75rem;
}

.activity-month-group {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
}

.activity-month-heading {
    width: 100%;
    border: 0;
    border-radius: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .65rem;
    color: var(--muted);
    background: rgba(241, 245, 249, .72);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: capitalize;
    cursor: pointer;
}

.activity-month-heading:hover,
.activity-month-group.is-open .activity-month-heading {
    background: rgba(226, 232, 240, .85);
}

.activity-month-heading::after {
    content: "▸";
    order: -1;
    margin-right: .45rem;
    color: var(--primary);
    transition: transform .15s ease;
}

.activity-month-group.is-open .activity-month-heading::after {
    transform: rotate(90deg);
}

.activity-month-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(109, 40, 217, .1);
    color: var(--primary);
    font-size: .68rem;
}

.activity-month-group .listItem {
    padding: .65rem .7rem;
    border-bottom-color: rgba(15, 23, 42, .06);
}

.activity-month-group .listItem:last-child {
    border-bottom: 0;
}

/* Icon button */
.icon-btn{
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
    border-radius:999px;
}

/* Small inline button */
.btn-xs{
    padding:4px 8px;
    font-size:12px;
    border-radius:10px;
}

/* Invite + members */
.inviteBox{
    margin-top:12px;
    padding:12px;
    border:1px dashed rgba(15,23,42,.18);
    border-radius:14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Tooltip */
#wheelTooltip{
    position:fixed;
    display:none;
    pointer-events:none;
    z-index:9999;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 12px;
    padding:8px 10px;
    box-shadow: 0 10px 26px rgba(15,23,42,.12);
    font:12px system-ui;
    color: var(--ink);
    max-width:260px;
}

.event-view-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.45rem;
    color:var(--muted);
    font-size:.9rem;
}
.event-view-color{
    width:12px;
    height:12px;
    flex:0 0 12px;
    border-radius:50%;
    border:1px solid rgba(15,23,42,.18);
}
.event-view-description{
    min-height:2rem;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

/* =========================
   Optional: make Bootstrap "dark" buttons fit light theme
   (Your header uses btn-dark for "Nyt projekt")
========================= */
.btn-dark{
    background: var(--grad) !important;
    border: 0 !important;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(109,40,217,.18);
}
.btn-dark:hover{ filter:brightness(1.03); }

.btn-outline-secondary{
    border-color: rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-secondary:hover{
    background: rgba(15,23,42,.04) !important;
}

/* Make .text-light readable on light backgrounds (your dashboard heading uses text-light) */
.text-light{ color: var(--ink) !important; }


/* =========================================================
   Circlo Buttons (match logo + light background)
   Paste AFTER the Light Theme CSS
========================================================= */

/* Brand button tokens */
:root{
    --brand-ink: #2b1453;              /* deep logo purple vibe */
    --brand-1: #6D28D9;                /* purple */
    --brand-2: #EC4899;                /* pink */
    --brand-3: #F97316;                /* orange */
    --brand-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));

    --btn-radius: 14px;
    --btn-shadow: 0 12px 22px rgba(109,40,217,.18);
    --btn-shadow-hover: 0 16px 30px rgba(109,40,217,.22);

    --btn-soft-bg: rgba(109,40,217,.08);
    --btn-soft-border: rgba(109,40,217,.16);
    --btn-soft-hover: rgba(109,40,217,.12);

    --btn-outline-border: rgba(43,20,83,.20);
    --btn-outline-hover: rgba(43,20,83,.05);
}

/* Base for ALL bootstrap buttons */
.btn{
    border-radius: var(--btn-radius) !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em;
    transition: transform .10s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

/* PRIMARY — logo accent (gradient) */
.btn-primary,
.btn-dark{ /* you use btn-dark for “Nyt projekt” */
    border: 0 !important;
    background: var(--brand-grad) !important;
    color: #fff !important;
    box-shadow: var(--btn-shadow);
}
.btn-primary:hover,
.btn-dark:hover{
    filter: brightness(1.03);
    box-shadow: var(--btn-shadow-hover);
}

/* SECONDARY — soft purple “complementary” */
.btn-secondary{
    background: var(--btn-soft-bg) !important;
    border: 1px solid var(--btn-soft-border) !important;
    color: var(--brand-ink) !important;
}
.btn-secondary:hover{
    background: var(--btn-soft-hover) !important;
}

/* OUTLINE SECONDARY — clean, slightly purple/ink */
.btn-outline-secondary{
    background: transparent !important;
    border: 1px solid var(--btn-outline-border) !important;
    color: rgba(43,20,83,.82) !important;
}
.btn-outline-secondary:hover{
    background: var(--btn-outline-hover) !important;
    border-color: rgba(43,20,83,.26) !important;
    color: var(--brand-ink) !important;
}

/* OUTLINE DARK — make it match the system (you use it for zoom buttons) */
.btn-outline-dark{
    border: 1px solid var(--btn-outline-border) !important;
    color: rgba(43,20,83,.82) !important;
}
.btn-outline-dark:hover{
    background: var(--btn-outline-hover) !important;
}

/* INFO — make it “brand-soft” (your 100% zoom button) */
.btn-info{
    border: 1px solid rgba(236,72,153,.18) !important;
    background: rgba(236,72,153,.10) !important;
    color: var(--brand-ink) !important;
}
.btn-info:hover{
    background: rgba(236,72,153,.14) !important;
}

/* LIGHT — for export pills in modal */
.btn-light{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: rgba(15,23,42,.85) !important;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.btn-light:hover{
    background: #fff !important;
}

/* DANGER / SUCCESS — keep semantic colors but softer for the light UI */
.btn-danger{
    background: rgba(220,53,69,.12) !important;
    border: 1px solid rgba(220,53,69,.22) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-danger:hover{ background: rgba(220,53,69,.16) !important; }

.btn-outline-danger{
    border-color: rgba(220,53,69,.30) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-outline-danger:hover{ background: rgba(220,53,69,.08) !important; }

.btn-success{
    background: rgba(25,135,84,.12) !important;
    border: 1px solid rgba(25,135,84,.22) !important;
    color: rgba(12,95,55,.95) !important;
}
.btn-success:hover{ background: rgba(25,135,84,.16) !important; }

/* Small buttons look nicer */
.btn-sm{
    border-radius: 12px !important;
    font-weight: 850 !important;
}


/* =========================================================
   CIRClO – NORDIC LIGHT THEME
   - cool whites, blue-gray neutrals, calm accents
   - keeps Circlo purple as PRIMARY accent
   - uses pink/orange very sparingly (ring vibe)
========================================================= */

/* =========================
   Tokens
========================= */
:root{
    /* Nordic base surfaces */
    --bg:        #f3f6fb;     /* cool, light */
    --bg2:       #ffffff;
    --surface:   rgba(255,255,255,.88);
    --surface-2: rgba(255,255,255,.94);

    /* Typography */
    --ink:   #0f172a;         /* slate */
    --muted: #5f6b7a;         /* nordic gray */
    --border:#e3e8f2;

    /* Brand accents (logo aligned) */
    --brand:     #4c1d95;     /* deep purple (calm) */
    --brand-1:   #6D28D9;     /* purple */
    --brand-2:   #EC4899;     /* pink */
    --brand-3:   #F97316;     /* orange */

    /* A "Nordic" gradient: mostly purple, subtle warm edge */
    --brand-grad: linear-gradient(90deg,
    rgba(109,40,217,1) 0%,
    rgba(109,40,217,1) 55%,
    rgba(236,72,153,1) 82%,
    rgba(249,115,22,1) 100%);

    /* Soft functional accent (icy blue) */
    --ice: #2f7dd1;
    --ice-soft: rgba(47,125,209,.10);

    /* Shadows (calm, minimal) */
    --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
    --shadow-md: 0 16px 46px rgba(15,23,42,.10);

    /* radii */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    background: var(--bg);
    overflow-x:hidden;
    position:relative;
}

/* Nordic background: barely-there gradients + calm paper feel */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
            radial-gradient(900px 560px at 10% 0%, rgba(109,40,217,.07), transparent 62%),
            radial-gradient(900px 560px at 95% 10%, rgba(47,125,209,.06), transparent 62%),
            radial-gradient(1000px 680px at 50% 100%, rgba(249,115,22,.05), transparent 65%),
            linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
}

/* Utilities */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* =========================
   Top bar
========================= */
#topBar{
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
}
body.is-authed #topBar{
    opacity:1;
    pointer-events:auto;
}

.bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;

    background: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.brand-logo{
    padding:10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

/* =========================
   Forms
========================= */
input, select, button, textarea{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius: 12px;
    font-size:14px;
}

input, select, textarea{
    background:#fff;
    color:var(--ink);
}

input::placeholder, textarea::placeholder{
    color: rgba(95,107,122,.75);
}

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: rgba(109,40,217,.30);
    box-shadow: 0 0 0 4px rgba(109,40,217,.10);
}

hr{
    border:none;
    border-top:1px solid rgba(15,23,42,.10);
    margin:14px 0;
}

/* =========================
   Layout containers
========================= */
.container{
    width:100%;
    padding:12px;
    min-height:100vh;
    height:auto;
    max-width:none;
}

body.is-authed .container{
    min-height: calc(100vh - 58px);
    height: calc(100vh - 58px);
}

/* =========================
   Cards (Nordic: soft surface + thin border)
========================= */
.card{
    background: var(--surface);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--r-md);
    padding:14px;
    box-shadow: var(--shadow-sm);
}

.card-header{
    background: rgba(255,255,255,.70);
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* =========================
   HERO (Nordic minimal)
========================= */
.heroCard{
    position:relative;
    border-radius: var(--r-lg);
    padding:28px;
    overflow:hidden;

    background:
            linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));

    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
}

/* a thin “Nordic accent stripe” */
.heroCard::after{
    content:"";
    position:absolute;
    left:0; top:0; right:0;
    height:4px;
    background: var(--brand-grad);
    opacity:.9;
}

.heroGlow{ display:none; }

.heroTitle{
    color: var(--ink);
    font-size: clamp(28px, 4.2vw, 46px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin: 10px 0 12px;
}

.gradText{
    background: var(--brand-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.heroLead{
    color: rgba(15,23,42,.72);
    font-size:16px;
    max-width:58ch;
}

.heroBadges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.heroBadge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;

    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.72);
    font-size:13px;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

/* Steps */
.heroSteps{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
@media (max-width: 991px){
    .heroSteps{ grid-template-columns: 1fr; }
}

.step{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius: 16px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
}

.stepIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;

    /* Nordic icon style: calm purple on icy background */
    background: rgba(109,40,217,.10);
    color: var(--brand);
    border: 1px solid rgba(109,40,217,.16);
}

.stepTitle{
    color: var(--ink);
    font-weight:900;
    font-size:14px;
    margin-bottom:2px;
}
.stepText{
    color: rgba(15,23,42,.66);
    font-size:13px;
}

.heroFineprint{
    color: rgba(15,23,42,.55);
    font-size:12px;
}

/* =========================
   Articles (Nordic clean list)
========================= */
.articlesCard{ padding:22px; }

.articlesTitle{
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 26px);
    line-height:1.1;
    margin:0 0 6px;
    letter-spacing:-0.02em;
}
.articlesSub{
    margin:0;
    color: rgba(15,23,42,.66);
    font-size:13px;
    max-width:78ch;
}

.articleRow{
    text-decoration:none;
    display:block;
    border-radius:16px;
    padding:14px 14px 12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.articleRow:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
    border-color: rgba(109,40,217,.18);
}

.articlePill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;

    background: rgba(47,125,209,.08);
    border: 1px solid rgba(47,125,209,.14);
    color: rgba(15,23,42,.80);
    font-size:12px;
    font-weight:850;
}

.articleRowTitle{
    color: var(--ink);
    font-weight:950;
    font-size:16px;
    line-height:1.2;
    margin:0 0 6px;
}

.articleRowExcerpt{
    color: rgba(15,23,42,.70);
    font-size:13px;
    line-height:1.45;
    margin:0 0 10px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.articleRowCta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    color: var(--brand);
    padding:8px 10px;
    border-radius:12px;
    background: rgba(109,40,217,.08);
    border: 1px solid rgba(109,40,217,.14);
}

/* =========================
   App pieces
========================= */
.dashCard{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    padding:12px;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
    transition: transform .10s ease, box-shadow .10s ease;
}
.dashCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

#wheel{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

/* Lists */
.listItem{
    padding: 10px 8px;
    border-bottom:1px solid rgba(15,23,42,.08);
}
.listItem:hover{ background: rgba(255,255,255,.70); }

/* Fix .text-light in your dashboard header */
.text-light{ color: var(--ink) !important; }

/* =========================================================
   NORDIC BUTTON SYSTEM (Bootstrap-compatible)
========================================================= */
:root{
    --btn-radius: 14px;
    --btn-shadow: 0 10px 22px rgba(15,23,42,.08);
    --btn-shadow-hover: 0 14px 30px rgba(15,23,42,.12);
}

/* Base */
.btn{
    border-radius: var(--btn-radius) !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em;
    transition: transform .10s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active{ transform: translateY(1px); }

/* PRIMARY: calm purple (Nordic), gradient only on hover */
.btn-primary,
.btn-dark{
    background: var(--brand-1) !important;
    border: 1px solid rgba(109,40,217,.35) !important;
    color:#fff !important;
    box-shadow: var(--btn-shadow);
}
.btn-primary:hover,
.btn-dark:hover{
    background: var(--brand-grad) !important;   /* subtle brand ring feel */
    box-shadow: var(--btn-shadow-hover);
}

/* SECONDARY: light ice / calm */
.btn-secondary{
    background: rgba(47,125,209,.10) !important;
    border: 1px solid rgba(47,125,209,.22) !important;
    color: rgba(15,23,42,.88) !important;
}
.btn-secondary:hover{
    background: rgba(47,125,209,.14) !important;
}

/* OUTLINE SECONDARY: minimal nordic outline */
.btn-outline-secondary{
    background: transparent !important;
    border: 1px solid rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-secondary:hover{
    background: rgba(15,23,42,.04) !important;
    border-color: rgba(15,23,42,.24) !important;
    color: rgba(15,23,42,.88) !important;
}

/* OUTLINE DARK: same style */
.btn-outline-dark{
    background: transparent !important;
    border: 1px solid rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-dark:hover{ background: rgba(15,23,42,.04) !important; }

/* INFO: use ice color (Nordic accent) */
.btn-info{
    background: var(--ice-soft) !important;
    border: 1px solid rgba(47,125,209,.22) !important;
    color: rgba(15,23,42,.88) !important;
}
.btn-info:hover{ background: rgba(47,125,209,.14) !important; }

/* LIGHT: clean pill buttons */
.btn-light{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: rgba(15,23,42,.85) !important;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.btn-light:hover{ background:#fff !important; }

/* DANGER/SUCCESS: softer nordic semantics */
.btn-danger{
    background: rgba(220,53,69,.10) !important;
    border: 1px solid rgba(220,53,69,.22) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-danger:hover{ background: rgba(220,53,69,.14) !important; }

.btn-success{
    background: rgba(25,135,84,.10) !important;
    border: 1px solid rgba(25,135,84,.20) !important;
    color: rgba(12,95,55,.95) !important;
}
.btn-success:hover{ background: rgba(25,135,84,.14) !important; }

/* Small buttons */
.btn-sm{
    border-radius: 12px !important;
    font-weight: 850 !important;
}

/* Hero CTA buttons (keep your custom classes consistent) */
.btnHeroPrimary{
    background: var(--brand-1) !important;
    border: 1px solid rgba(109,40,217,.35) !important;
    color:#fff !important;
    box-shadow: var(--btn-shadow);
}
.btnHeroPrimary:hover{
    background: var(--brand-grad) !important;
    box-shadow: var(--btn-shadow-hover);
}
.btnHeroGhost{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    color: rgba(15,23,42,.86) !important;
}
.btnHeroGhost:hover{ background:#fff !important; }
/* Auth routes and integrated legal signup */
.auth-view.d-none { display: none !important; }
.auth-switch a { font-weight: 800; color: var(--ink); }
.legal-signup {
    padding: 14px;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
}
.legal-signup__intro { color: rgba(15,23,42,.68); }
.legal-signup .accordion-item { background: transparent; border-color: rgba(15,23,42,.08); }
.legal-signup .accordion-button { padding: 10px 4px; font-size: 13px; font-weight: 800; background: transparent; box-shadow: none; }
.legal-signup .accordion-body { padding: 8px 4px 12px; }
.legal-document { max-height: 190px; overflow: auto; font-size: 12px; color: rgba(15,23,42,.72); }



/* =========================================================
   CIRClO KALENDER
========================================================= */

#calendarView {
    min-height: 600px;
    position: relative;
}

#calendarLoading {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 240px;
    background: rgba(255, 255, 255, .78);
    color: var(--muted);
    font-size: .9rem;
    backdrop-filter: blur(2px);
}

#integrationsCenter {
    position: relative;
}

#integrationSyncOverlay {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: inherit;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    text-align: center;
    backdrop-filter: blur(3px);
}

#integrationSyncOverlay span {
    color: var(--muted);
    font-size: .85rem;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1rem;
}

.calendar-navigation,
.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.calendar-title {
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    font-size: 1.25rem;
    font-weight: 800;
}

.calendar-selection-help {
    margin-bottom: .75rem;
    color: var(--muted);
    font-size: .8rem;
}

.calendar-ring-filters {
    margin-bottom: 1rem;
    padding: .85rem;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.calendar-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
}

#calendarRingFilterList {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.calendar-ring-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .4rem .6rem;

    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;

    font-size: .8rem;
    cursor: pointer;
}

.calendar-ring-filter-color {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
}

.circlo-calendar.calendar-mode-month,
.circlo-calendar.calendar-mode-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.calendar-weekday {
    padding: .65rem .4rem;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: #f8f9fc;

    color: var(--muted);
    text-align: center;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.calendar-day {
    position: relative;
    min-width: 0;

    padding: .45rem;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: #fff;
    cursor: crosshair;

    user-select: none;

    transition:
            background-color .12s ease,
            box-shadow .12s ease;
}

.calendar-day--compact {
    min-height: 125px;
}

.calendar-day--week {
    min-height: 420px;
}

.calendar-day:hover {
    background: #fafaff;
}

.calendar-day--outside {
    background: #f8f8fa;
    color: #a4a9b4;
}

.calendar-day--today {
    box-shadow:
            inset 0 0 0 2px
            rgba(109, 40, 217, .55);
}

.calendar-day--selected {
    background:
            rgba(109, 40, 217, .1);
}

.calendar-day--selection-start,
.calendar-day--selection-end {
    box-shadow:
            inset 0 0 0 2px
            var(--c1);
}

.calendar-day--drop-target {
    background:
            rgba(34, 197, 94, .13);

    box-shadow:
            inset 0 0 0 2px
            rgba(34, 197, 94, .8);
}

.calendar-day-number {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    min-height: 24px;
    margin-bottom: .35rem;

    font-weight: 800;
}

.calendar-day-number small {
    color: var(--muted);
    font-size: .7rem;
    text-transform: capitalize;
}

.calendar-day--today .calendar-day-number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 25px;
    padding: 0 .35rem;

    border-radius: 999px;
    background: var(--c1);
    color: #fff;
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.calendar-event {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: .35rem .45rem;

    border: 0;
    border-radius: 8px;

    text-align: left;
    line-height: 1.2;

    box-shadow:
            0 2px 6px
            rgba(15, 23, 42, .12);

    cursor: pointer;
}

.calendar-event:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.calendar-event--compact {
    font-size: .72rem;
}

.calendar-event--large {
    padding: .55rem;
    font-size: .85rem;
}

.calendar-event--dragging {
    opacity: .4;
}

.calendar-event-title {
    display: block;
    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-weight: 700;
}

.wheel-controls {
    position: absolute;
    z-index: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    padding: 0 12px;
}

.wheel-controls > .wheel-navigation,
.wheel-controls > .wheel-zoom-controls {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.wheel-controls > .wheel-navigation {
    order: 1;
}

.wheel-controls > #wheelRangeSelect,
.wheel-controls > label {
    order: 2;
}

.wheel-controls > .wheel-zoom-controls {
    order: 3;
    margin-left: auto;
}

.calendar-event-google-icon {
    flex: 0 0 auto;
    margin-right: .3rem;
    color: currentColor;
    font-size: .78em;
}

.calendar-event-date {
    margin-top: .2rem;
    opacity: .8;
}
/* =========================================================
   FLER-DAGES EVENTS I KALENDEREN
========================================================= */

/*
 * Events skal kunne ligge oven på kalendercellernes
 * indvendige afstand, så de visuelt mødes.
 */
.calendar-day {
    overflow: visible;
}

.calendar-day-events {
    position: relative;
    z-index: 2;
}

/*
 * Fler-dages events får ingen mellemrum mellem
 * de enkelte datosegmenter.
 */
.calendar-event--multi-day {
    position: relative;
    z-index: 3;

    /*
     * Vi beholder samme højde i samtlige celler,
     * også når titlen er skjult.
     */
    min-height: 30px;

    border-radius: 0 !important;

    box-shadow:
            0 2px 5px rgba(15, 23, 42, .10);
}

/*
 * Første del af eventet.
 * Højre side trækkes ud til næste kalendercelle.
 */
.calendar-event--segment-start {
    width: calc(100% + .45rem + 1px);
    margin-right: calc(-.45rem - 1px);

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
 * Midterste del.
 * Segmentet trækkes ud på begge sider.
 */
.calendar-event--segment-middle {
    width: calc(100% + .9rem + 2px);
    margin-right: calc(-.45rem - 1px);
    margin-left: calc(-.45rem - 1px);

    border-radius: 0;
}

/*
 * Sidste del.
 * Venstre side trækkes tilbage til den foregående celle.
 */
.calendar-event--segment-end {
    width: calc(100% + .45rem + 1px);
    margin-left: calc(-.45rem - 1px);

    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
 * Enkeltstående events beholder deres normale,
 * afrundede udseende.
 */
.calendar-event--single,
.calendar-event--one-day {
    border-radius: 8px;
}

/*
 * Titlen skal ligge over eventets øvrige segmenter,
 * så den ikke bliver klippet ved cellegrænsen.
 */
.calendar-event--segment-start .calendar-event-title {
    position: relative;
    z-index: 4;
}

/*
 * Et eventsegment skal ikke hoppe op ved hover.
 * Ellers vil de sammenhængende dele forskyde sig.
 */
.calendar-event--multi-day:hover {
    z-index: 8;
    transform: none;
    filter: brightness(.96);
}
.calendar-more {
    order: 9999;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: .15rem .3rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.calendar-more:hover {
    color: var(--primary);
    text-decoration: underline;
}

.calendar-day--expanded {
    min-height: 150px;
}

.circlo-calendar.calendar-mode-agenda {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.calendar-agenda-day {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 1rem;

    padding: .75rem;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #fff;
}

.calendar-agenda-date {
    display: flex;
    align-items: center;
    gap: .65rem;

    border: 0;
    background: transparent;

    font-weight: 700;
    text-align: left;
    text-transform: capitalize;
}

.calendar-agenda-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border-radius: 50%;

    background:
            rgba(109, 40, 217, .1);

    color: var(--c1);
    font-size: 1rem;
    font-weight: 900;
}

.calendar-agenda-events {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.calendar-agenda-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 300px;
    gap: .5rem;

    border: 2px dashed var(--border);
    border-radius: 16px;

    color: var(--muted);
    cursor: pointer;
}

.calendar-agenda-empty i {
    font-size: 2rem;
}

/*
 * I agenda-visningen vises hvert event som
 * en almindelig selvstændig række.
 */
.calendar-mode-agenda .calendar-event--multi-day {
    width: 100%;
    margin-right: 0;
    margin-left: 0;

    border-radius: 8px;
}

.calendar-mode-agenda
.calendar-event--multi-day
.calendar-event-title {
    display: block;
}

@media (max-width: 900px) {
    .wheel-controls {
        gap: .35rem;
    }

    .wheel-controls > .wheel-zoom-controls {
        margin-left: 0;
    }

    .calendar-toolbar {
        grid-template-columns: 1fr;
    }

    .calendar-title {
        order: -1;
    }

    .calendar-navigation,
    .calendar-toolbar-actions {
        justify-content: center;
    }

    .circlo-calendar.calendar-mode-month,
    .circlo-calendar.calendar-mode-week {
        min-width: 850px;
    }

    #calendarView {
        overflow-x: auto;
    }

    .calendar-agenda-day {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PRINT KALENDER
========================================================= */

@media print {

    /*
     * Fjern appens faste højder og overflow,
     * så hele kalenderen kan fylde flere printsider.
     */
    html,
    body,
    body.is-authed,
    body.is-authed .container,
    #appPane,
    #appInner,
    .layout,
    .canvasPane,
    #calendarView,
    #calendarGrid {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
        display: block !important;
    }

    body.printing-calendar {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /*
     * Skjul alt som udgangspunkt.
     */
    body.printing-calendar * {
        visibility: hidden !important;
    }

    /*
     * Gør kalenderen og alle dens nødvendige
     * forældreelementer synlige igen.
     */
    body.printing-calendar #appPane,
    body.printing-calendar #appInner,
    body.printing-calendar .layout,
    body.printing-calendar .canvasPane,
    body.printing-calendar #calendarView,
    body.printing-calendar #calendarView * {
        visibility: visible !important;
    }

    /*
     * Fjern elementer som ikke skal med på printet.
     */
    body.printing-calendar #topBar,
    body.printing-calendar .view-switcher,
    body.printing-calendar #wheelView,
    body.printing-calendar #wheelControls,
    body.printing-calendar .calendar-navigation,
    body.printing-calendar .calendar-toolbar-actions,
    body.printing-calendar .calendar-selection-help,
    body.printing-calendar .calendar-ring-filters,
    body.printing-calendar #calendarRingFilters {
        display: none !important;
    }

    body.printing-calendar #calendarView {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.printing-calendar .canvasPane {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    body.printing-calendar .calendar-toolbar {
        display: block !important;
        margin: 0 0 12px !important;
    }

    body.printing-calendar .calendar-title {
        display: block !important;
        margin: 0 0 12px !important;

        color: #000 !important;
        font-size: 18pt !important;
        text-align: left !important;
        text-transform: capitalize;
    }

    /*
     * Bevar grid-layoutet under print.
     */
    body.printing-calendar .circlo-calendar.calendar-mode-month,
    body.printing-calendar .circlo-calendar.calendar-mode-week {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;

        width: 100% !important;
        min-width: 0 !important;

        border-top: 1px solid #aaa !important;
        border-left: 1px solid #aaa !important;
    }

    body.printing-calendar .calendar-weekday {
        display: block !important;

        padding: 5px !important;

        border-right: 1px solid #aaa !important;
        border-bottom: 1px solid #aaa !important;

        background: #f2f2f2 !important;
        color: #000 !important;

        font-size: 8pt !important;

        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.printing-calendar .calendar-day {
        display: block !important;
        visibility: visible !important;

        min-width: 0 !important;
        min-height: 90px !important;
        height: auto !important;

        padding: 4px !important;

        border-right: 1px solid #aaa !important;
        border-bottom: 1px solid #aaa !important;

        background: #fff !important;
        color: #000 !important;

        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.printing-calendar .calendar-day--outside {
        background: #f7f7f7 !important;
        color: #777 !important;
    }

    body.printing-calendar .calendar-day-number {
        display: flex !important;
        visibility: visible !important;

        min-height: 18px !important;
        margin-bottom: 3px !important;

        color: #000 !important;
        font-size: 8pt !important;
    }

    body.printing-calendar .calendar-day-events {
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    body.printing-calendar .calendar-event {
        display: block !important;
        visibility: visible !important;

        width: 100% !important;
        min-height: 0 !important;

        padding: 3px 4px !important;

        border: 1px solid rgba(0, 0, 0, .2) !important;
        border-radius: 4px !important;
        box-shadow: none !important;

        font-size: 7pt !important;
        line-height: 1.15 !important;

        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.printing-calendar .calendar-event-title {
        display: block !important;
        visibility: visible !important;

        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    body.printing-calendar .calendar-more {
        display: block !important;
        visibility: visible !important;

        color: #333 !important;
        font-size: 7pt !important;
    }

    /*
     * Agenda-print.
     */
    body.printing-calendar .circlo-calendar.calendar-mode-agenda {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    body.printing-calendar .calendar-agenda-day {
        display: grid !important;
        grid-template-columns: 150px 1fr !important;

        padding: 8px !important;

        border: 1px solid #aaa !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.printing-calendar .calendar-agenda-date,
    body.printing-calendar .calendar-agenda-events {
        visibility: visible !important;
    }

    @page {
        size: A4 landscape;
        margin: 8mm;
    }
}


/* =========================================================
   PROFIL OG ABONNEMENT
   ========================================================= */

.profile-modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
}

.profile-modal-content .modal-header {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.profile-modal-content .modal-body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    padding: 1.5rem 1.75rem 2rem;
}

.profile-modal-content #profileGeneralMessage {
    grid-column: 1 / -1;
}

.profile-tabs {
    gap: 0.25rem;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    flex-direction: column;
    margin-bottom: 0 !important;
    border-bottom: 0;
}

.profile-tabs .nav-item {
    width: 100%;
}

.profile-tabs .nav-link {
    width: 100%;
    color: #5f6673;
    border: 0;
    border-right: 3px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-weight: 600;
    text-align: left;
}

.profile-tabs .nav-link:hover {
    color: #212529;
    border-right-color: #d1d5db;
}

.profile-tabs .nav-link.active {
    color: #212529;
    background: transparent;
    border-right-color: #212529;
}

.profile-modal-content > .modal-body > .tab-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.profile-info-box {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.profile-info-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #6b7280;
    font-size: 0.8rem;
}

@media (max-width: 767.98px) {
    .profile-modal-content .modal-body {
        display: block;
    }

    .profile-tabs {
        flex-direction: row;
        margin-bottom: 1rem !important;
        overflow-x: auto;
        white-space: nowrap;
        border-bottom: 1px solid #e5e7eb;
    }

    .profile-tabs .nav-item {
        width: auto;
        flex: 0 0 auto;
    }

    .profile-tabs .nav-link {
        width: auto;
        border-right: 0;
        border-bottom: 2px solid transparent;
        text-align: center;
    }

    .profile-tabs .nav-link:hover {
        border-right-color: transparent;
        border-bottom-color: #d1d5db;
    }

    .profile-tabs .nav-link.active {
        border-right-color: transparent;
        border-bottom-color: #212529;
    }

    .profile-modal-content > .modal-body > .tab-content {
        min-width: 0;
    }
}

.current-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background:
            linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 1),
                    rgba(248, 250, 252, 1)
            );
}

.profile-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    transition:
            transform 160ms ease,
            box-shadow 160ms ease,
            border-color 160ms ease;
}

.profile-plan-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.profile-plan-card.is-current {
    border-color: #198754;
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.08);
}

.profile-plan-price {
    margin-top: 0.5rem;
    color: #111827;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
}

.profile-trial-label {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    color: #075985;
    border-radius: 999px;
    background: #e0f2fe;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-plan-features {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.55rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.profile-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #4b5563;
    font-size: 0.875rem;
}

.profile-plan-features i {
    margin-top: 0.05rem;
    color: #198754;
}

@media (max-width: 767.98px) {
    .current-plan-card {
        align-items: stretch;
        flex-direction: column;
    }

    .current-plan-card .btn {
        width: 100%;
    }

    .profile-modal-content .modal-header,
    .profile-modal-content .modal-body {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #topActions {
        gap: 0.4rem;
    }

    #profileBtnLabel {
        display: none;
    }
}
.two-factor-login-modal {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, .18);
}

.two-factor-code-input {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .45rem;
    text-align: center;
    padding: .7rem .5rem;
}

.two-factor-code-input::placeholder {
    letter-spacing: .45rem;
    opacity: .3;
}