:root { --gap: 16px; --radius: 12px; --shadow: 0 8px 24px rgba(0,0,0,0.06); }
* { box-sizing: border-box; }
html, body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #fbfbfc; color: #111; }
a { text-decoration: none; color: inherit; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: white; border-bottom: 1px solid #eee; }
.topbar .brand { font-weight: 700; }
.topbar nav a { margin-left: 10px; padding: 8px 10px; border-radius: 8px; }
.topbar nav a.active, .button.primary { background: #111; color: #fff; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.card { background: white; border: 1px solid #eee; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.vstack { display: flex; flex-direction: column; gap: 10px; }
.hstack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.button { display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius: 10px; background: white; cursor: pointer; }
.button[disabled] { opacity: .6; cursor: not-allowed; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.input, .textarea, .select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; }
.textarea { min-height: 96px; }
.badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #f2f2f2; }
.badge.oblig { background:#ffe9e9; color:#b00; font-weight:600; }
.small { font-size: 13px; }
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; gap: 10px; } }
.footer { padding: 24px 20px; text-align: center; color: #666; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding:8px; border-bottom:1px solid #eee; vertical-align: top; }
.toolbar { display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kontakt { display:flex; flex-direction: column; gap:2px; }
.kontakt strong { display:block; }
.subnav { display:flex; gap:8px; margin: 4px 0 8px; }

/* === Added: Calendar & Visit log styles === */
.cal { display:flex; flex-direction:column; gap:10px; }
.weekrow { grid-template-columns: 110px 1fr; gap:10px; align-items:center; }   /* TODO: Ikke grid hvis mobilskjerm!!! smal skjerm */
.wlabel { font-weight:600; color:#555; }
.days { display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
.cell { border:1px solid #eee; border-radius:10px; padding:10px; min-height:64px; display:flex; flex-direction:column; justify-content:space-between; box-shadow: var(--shadow); }
.cell .dow { font-size:12px; color:#555; }
.cell .txt { font-size: 8px; font-weight: 600; }
@media (min-width: 768px) {
    .cell .txt {
        font-size: 12px;
    } 
}
@media (min-width: 1200px) {
    .cell .txt {
        font-size: 14px;
    }
}

    .cell.school { background: #fff7d6; }    /* gul */
    .cell.placed { background: #e7f6e9; }    /* grønn */
    .cell.blue { background: #e3f0ff; }    /* blå */
    .cell.holiday { background: #ffe6e6; }   /* rød */
    .cell.other { background: #fbe1bc; }    /* oransje - annen */
    .cell.udv { border-style: dashed; }    /* UDV markering */

    div[data-status="1"] { background: #e3f0ff; }    /* blå - fellesfag */
    div[data-status="2"] { background: #fff7d6; }    /* gul - skole */
    div[data-status="3"] { background: #e7f6e9; }    /* grønn - i praksis */
    div[data-status="4"] { background: #ffe6e6; }    /* rød - ferie */
    div[data-status="5"] { background: #fbe1bc; }    /* orange - annen */
    div[data-status="6"] { border-style: dashed;}    /* hvit - UDV markering */

    .table th, .table td {
        vertical-align: middle;
    }

    /* === Varslingsbjelle === */
    .bell {
        font-size: 20px;
        cursor: pointer;
        margin-left: 10px;
        user-select: none;
    }

        .bell:hover {
            transform: translateY(-1px);
        }


    /* === Added: Certificates & Docs UI (lightweight) === */
    .badges {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px
    }

    .badge {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #eef4ff;
        border: 1px solid #d6e2ff;
        color: #173a6a;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 13px
    }

        .badge.ok {
            background: #e9f7ef;
            border-color: #c7ecd5;
            color: #1a5a3b
        }

    .icon {
        width: 16px;
        height: 16px
    }

    .docs {
        display: grid;
        gap: 10px;
        margin-top: 10px
    }

    .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: var(--radius);
        padding: 10px
    }

    .rowtitle {
        font-weight: 600
    }

    .btns {
        display: flex;
        gap: 8px
    }

    .btn {
        appearance: none;
        border: none;
        border-radius: 10px;
        padding: 10px 12px;
        background: #2756d8;
        color: #fff;
        cursor: pointer
    }

        .btn.ghost {
            background: transparent;
            border: 1px solid #c8d3f0;
            color: #2756d8
        }

        .btn.secondary {
            background: #6072a5;
            color: #fff
        }

    .toast {
        position: fixed;
        right: 16px;
        bottom: 16px;
        background: #163d7a;
        color: #fff;
        border: 1px solid #2b5fb5;
        padding: 12px 14px;
        border-radius: 12px;
        display: none;
        box-shadow: var(--shadow)
    }