/*
 * app.css — Handlingsplaner NIFU
 * Single combined stylesheet for the PHP MVC application.
 * Matches wireframe designs: wireframe_forside_leser.html,
 * wireframe_forside_skriver.html, wireframe_handlingsplan_leser.html,
 * wireframe_handlingsplan_skriver.html, wireframe_tilgangskontroll.html
 *
 * Fonts: IBM Plex Sans (UI text), IBM Plex Mono (labels, metadata, badges)
 * Loaded from Google Fonts in header.php / individual views.
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (design tokens)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');

:root {
    /* Backgrounds */
    --bg:              #F2F2F0;
    --surface:         #FFFFFF;

    /* Borders */
    --border:          #C8C8C4;
    --border-dark:     #8A8A86;

    /* Text */
    --text:            #1A1A18;
    --text-sub:        #5A5A56;
    --muted:           #A0A09C;

    /* Accent (dark / black used for primary actions and logo) */
    --accent:          #1A1A18;

    /* Tag / pill background */
    --tag-bg:          #E4E4E0;

    /* Status badge backgrounds */
    --badge-blue:      #D0E4F4;
    --badge-green:     #CDF0DC;
    --badge-yellow:    #F6EDCC;
    --badge-red:       #F4D0D0;

    /* Indent levels (mal / delmaal) */
    --indent-mal:      #E8F0FB;
    --indent-delmaal:  #F5F0FB;

    /* Brand colours (used in feedback text, tilgang-select states) */
    --nifu-teal:       #2D8E9F;
    --nifu-green:      #1A5E36;
    --nifu-red:        #B03030;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5{
    font-family: "Roboto Flex", sans-serif;
}

body {
    background: var(--surface);
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.index-wrapper{
    background: var(--bg);
}

a {
    color: var(--nifu-teal);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
textarea,
select {
    font-family: inherit;
}

/* Hindrer mellomrom mellom punktliste og paragraph */
p:has(+ ul),
p:has(+ ol) {
    margin-bottom: 0;
}


/* ==========================================================================
   3. TOP NAVIGATION
   ========================================================================== */

nav {
    background: var(--surface);
    border-bottom: 2px solid var(--border-dark);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Logo + app name */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
}

.nav-logo:hover {
    text-decoration: none;
}

.logo-box {
    height: 34px;
    background: var(--nifu-teal);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    flex-shrink: 0;
}

.logo-box span {
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.app-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Right side of nav */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* ==========================================================================
   4. USER PILL & DROPDOWN
   ========================================================================== */

.dropdown-wrap {
    position: relative;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tag-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px 5px 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s;
}

.user-pill:hover,
.user-pill.open {
    border-color: var(--border-dark);
}

.user-avatar {
    width: 26px;
    height: 26px;
    background: var(--border-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.chevron {
    font-size: 10px;
    color: var(--muted);
    margin-left: 2px;
}

.role-badge {
    font-size: 11px;
    color: var(--text-sub);
    font-family: 'IBM Plex Mono', monospace;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border-dark);
    border-radius: 10px;
    min-width: 210px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 300;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.1s;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--tag-bg);
    text-decoration: none;
}

.dropdown-item.danger {
    color: var(--nifu-red);
}

.dropdown-item.danger:hover {
    background: #FDF5F5;
}

.di-icon {
    width: 18px;
    height: 18px;
    background: var(--tag-bg);
    border: 1.5px solid var(--border-dark);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}


/* ==========================================================================
   5. MAIN LAYOUT
   ========================================================================== */

.layout {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 24px;
}


/* ==========================================================================
   6. PAGE HEADER
   ========================================================================== */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 4px;
}


/* ==========================================================================
   7. TOOLBAR (search + filter bar on index page)
   ========================================================================== */

.toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--muted);
    min-width: 200px;
}

.search-box:focus-within {
    border-color: var(--border-dark);
}

.search-box input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
    color: var(--text);
    background: transparent;
}

.search-box input::placeholder {
    color: var(--muted);
}

.search-icon {
    width: 16px;
    height: 16px;
    border: 2px solid var(--muted);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.search-icon::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 6px;
    height: 2px;
    background: var(--muted);
    transform: rotate(45deg);
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.filter-btn:hover {
    border-color: var(--border-dark);
}

.filter-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.filter-icon span {
    display: block;
    height: 1.5px;
    background: var(--text-sub);
    border-radius: 2px;
}

.filter-icon span:nth-child(1) { width: 14px; }
.filter-icon span:nth-child(2) { width: 10px; }
.filter-icon span:nth-child(3) { width: 6px; }


/* ==========================================================================
   8. STATS ROW (summary boxes)
   ========================================================================== */

.stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.stat-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.stat-number {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28px;
    font-weight: 500;
    color: var(--text);
}

.stat-label {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 4px;
}


/* ==========================================================================
   9. HANDLINGSPLAN CARD LIST (index page)
   ========================================================================== */

.card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: var(--text);
}

.card:hover {
    border-color: var(--border-dark);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    text-decoration: none;
}

.card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.card-index {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    width: 28px;
    flex-shrink: 0;
}

.card-body {
    min-width: 0;
    flex: 1;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.card-desc {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.card-arrow {
    color: var(--muted);
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

/* Card action buttons (Rediger / Slett on index page) */
.card-btn {
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.card-btn:hover {
    border-color: var(--border-dark);
    color: var(--text);
}

.card-btn.delete {
    color: var(--nifu-red);
    border-color: #F4D0D0;
    background: #FDF5F5;
}

.card-btn.delete:hover {
    border-color: #ECAAAA;
    background: #FAF0F0;
}


/* ==========================================================================
   10. BADGES & PRIORITY DOTS
   ========================================================================== */

.badge {
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    display: inline-block;
}

.badge-blue   { background: var(--badge-blue);   color: #1A4F7A; border-color: #A8CCEC; }
.badge-green  { background: var(--badge-green);  color: #1A5E36; border-color: #8ADCAC; }
.badge-yellow { background: var(--badge-yellow); color: #6B5000; border-color: #DEC87A; }
.badge-red    { background: var(--badge-red);    color: #7A1A1A; border-color: #ECAAAA; }
.badge-gray   { background: var(--tag-bg);       color: var(--text-sub); border-color: var(--border); }

/* Priority dots */
.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.dot-high   { background: #E05050; }
.dot-medium { background: #E0A030; }
.dot-low    { background: #50A070; }


/* ==========================================================================
   11. HANDLINGSPLAN DETAIL — HP HEADER
   ========================================================================== */

.hp-header {
    background: var(--surface);
    /*border: 1.5px solid var(--border);*/
    /*border-radius: 12px;*/
    padding: 28px 0px;
    margin-bottom: 12px;
}

.hp-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hp-title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    font-family: "Roboto Flex", sans-serif;
}

.hp-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.hp-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.hp-desc {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.65;
    max-width: 700px;
    margin-top: 4px;
}

.hp-meta {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.hp-meta-item {
    font-size: 12px;
    color: var(--text-sub);
}

.hp-meta-item strong {
    display: block;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 2px;
    text-transform: uppercase;
}


/* ==========================================================================
   12. SECTION LABEL
   ========================================================================== */

.section-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 12px;
    text-transform: uppercase;
}


/* ==========================================================================
   13. BREADCRUMB
   ========================================================================== */

.breadcrumb {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    background: none;
    padding: 0;
    list-style: none;
}

.breadcrumb a {
    color: var(--text-sub);
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb a:hover {
    color: var(--text);
}


/* ==========================================================================
   14. MÃ…L BLOCKS (accordion)
   ========================================================================== */

.mal-block {
    /*background: var(--surface);*/
    /*border: 1.5px solid var(--border);*/
    /*border-radius: 12px;*/
    margin-bottom: 16px;
    overflow: hidden;
}

/* Bootstrap accordion overrides for mal-block */
.mal-block .accordion-item {
    border: none !important;
    background: transparent;
}

.mal-block .accordion-header {
    margin: 0;
}

/* mal-header: used both as a Bootstrap accordion-button and as a plain div */
.mal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
    /*background: var(--surface);*/
    /*border: none;*/
    width: 100%;
    text-align: left;
    transition: background 0.12s;
    /* Reset Bootstrap accordion button styles */
    box-shadow: none !important;
    color: var(--text) !important;
    font-weight: inherit;
    font-size: inherit;
}

/*.mal-header:hover {*/
/*    background: #FAFAF8;*/
/*}*/

/* Bootstrap accordion-button overrides */
.accordion-button.mal-header {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    outline: none !important;
}

.accordion-button.mal-header:not(.collapsed) {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

/* Hide the default Bootstrap chevron icon */
.accordion-button.mal-header::after {
    display: none !important;
}

.mal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mal-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.mal-title {
    font-family: "Roboto Flex", sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.mal-desc {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 3px;
    line-height: 1.5;
}

.mal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 4px;
}

.mal-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.toggle-icon {
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
    line-height: 1;
    width: 16px;
    text-align: center;
    transition: transform 0.15s;
}

/* Toggle icon visibility for Bootstrap accordion */
.mal-header .icon-open  { display: inline; }
.mal-header .icon-closed { display: none; }

.mal-header.collapsed .icon-open  { display: none; }
.mal-header.collapsed .icon-closed { display: inline; }

/* Mal body (accordion content) */
.mal-body {
    /*border-top: 1px solid var(--border);*/
    padding: 16px 20px;
    /*background: #FAFAF8;*/
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* For plain JS accordion (wireframe_handlingsplan_skriver style) */
.mal-body.hidden {
    display: none;
}

/* add-delmaal-row utility */
.add-delmaal-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}


/* ==========================================================================
   15. DELMÃ…L BLOCKS
   ========================================================================== */

.delmaal-block {
    /*border: 1px solid var(--border);*/
    /*border-radius: 8px;*/
    background: var(--surface);
    overflow: hidden;
}

.delmaal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 10px;
    /*background: var(--nifu-teal);*/
    /*border-bottom: 1px solid var(--border);*/
    flex-wrap: wrap;
}

.delmaal-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    color: #000;
    margin-right: 8px;
}

.delmaal-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.delmaal-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.delmaal-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ==========================================================================
   16. SUB-SECTIONS (TILTAK / KONSEKVENSER inside mal/delmaal)
   ========================================================================== */

.sub-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.sub-section-empty{
    background: var(--surface);
    overflow: hidden;
}

.sub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    background: var(--tag-bg);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.sub-section-header-empty{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--tag-bg);
    gap: 8px;
}

.sub-row {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background 0.1s;
}

.sub-row:last-child {
    border-bottom: none;
}

.sub-row:hover {
    background: #FAFAF8;
}

.sub-row-text {
    flex: 1;
    min-width: 0;
}

.sub-row-title {
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
}

.sub-row-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace;
}

.sub-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Empty state inside sub-section */
.empty-state {
    padding: 14px 16px;
    font-size: 12px;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    font-style: italic;
}


/* ==========================================================================
   17. BUTTONS
   ========================================================================== */

/* Generic small/outline button */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-decoration: none;
}

.btn:hover {
    border-color: var(--border-dark);
    color: var(--text);
    text-decoration: none;
}

/* Primary action button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'IBM Plex Sans', sans-serif;
    padding: 9px 20px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

.btn-primary:hover {
    background: #2E2E2C;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: #fff;
    text-decoration: none;
}

.btn-primary:active {
    background: #111110;
}

/* Destructive / delete button */
.btn-delete,
.btn.btn-delete {
    color: var(--nifu-red);
    border-color: #F4D0D0;
    background: #FDF5F5;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 7px;
    border-width: 1.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.btn-delete:hover,
.btn.btn-delete:hover {
    border-color: #E8AAAA;
    background: #FAF0F0;
}
.btn-info{
    color: var(--surface);
    border-color: #2ca36b;
    background: #2ca36b;
    padding: 9px 20px;
}


/* ==========================================================================
   18. TILGANGSKONTROLL — TABLE CARD
   ========================================================================== */

.table-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* DataTables wrapper */
.dataTables_wrapper {
    padding: 20px 24px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--text);
}

/* DataTables search input */
.dataTables_filter label {
    font-size: 13px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_filter input {
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    outline: none !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    margin-left: 6px;
    transition: border-color 0.15s;
}

.dataTables_filter input:focus {
    border-color: var(--border-dark) !important;
}

/* Hide show-N-entries */
.dataTables_length {
    display: none;
}

/* Info text */
.dataTables_info {
    font-size: 12px;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    padding-top: 12px !important;
}

/* Pagination */
.dataTables_paginate {
    padding-top: 12px !important;
}

.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    padding: 4px 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-sub) !important;
    cursor: pointer;
}

.dataTables_paginate .paginate_button.current {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--tag-bg) !important;
    color: var(--text) !important;
}

/* DataTable itself */
table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 12px 0 !important;
}

table.dataTable thead th {
    background: var(--tag-bg);
    border-bottom: 1.5px solid var(--border-dark) !important;
    border-top: 1.5px solid var(--border) !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    letter-spacing: 0.08em !important;
    color: var(--text-sub) !important;
    text-transform: uppercase;
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle;
}

table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

table.dataTable tbody tr:hover td {
    background: #FAFAF8;
}

/* User cell (avatar + name + email) */
.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cell-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.cell-name {
    font-size: 13px;
    font-weight: 500;
}

.cell-email {
    font-size: 11px;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
}

/* Tilgang dropdown */
.tilgang-select {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    outline: none;
    min-width: 140px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    appearance: auto;
}

.tilgang-select:focus {
    border-color: var(--border-dark);
}

/* Role-colour variants */
.tilgang-select.leser         { background: #D0E4F4; color: #1A4F7A; border-color: #A8CCEC; }
.tilgang-select.skriver        { background: #CDF0DC; color: #1A5E36; border-color: #8ADCAC; }
.tilgang-select.administrator  { background: #F6EDCC; color: #6B5000; border-color: #DEC87A; }

/* Feedback span next to tilgang-select */
.tilgang-feedback {
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tilgang-feedback.show {
    opacity: 1;
}


/* ==========================================================================
   19. FLASH MESSAGES
   ========================================================================== */

.flash-success,
.flash-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    line-height: 1.45;
}

.flash-success {
    background: var(--badge-green);
    color: #1A5E36;
    border-color: #8ADCAC;
}

.flash-error {
    background: var(--badge-red);
    color: #7A1A1A;
    border-color: #ECAAAA;
}


/* ==========================================================================
   20. LOGIN PAGE
   ========================================================================== */

body:has(.login-wrap) {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 48px 44px 44px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nifu-teal);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.login-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Microsoft login button */
.btn-ms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.btn-ms:hover {
    border-color: var(--border-dark);
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--text);
}

.btn-ms:active {
    background: var(--tag-bg);
}


/* ==========================================================================
   21. ERROR PAGES (400, 403, 404, 500)
   ========================================================================== */

.error-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg);
}

.error-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 56px 48px 48px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

.error-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 72px;
    font-weight: 500;
    color: var(--border-dark);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 16px;
}

.error-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.error-desc {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.error-card .btn-primary {
    display: inline-flex;
    margin: 0 auto;
}


/* ==========================================================================
   22. BOOTSTRAP MODAL OVERRIDES
   ========================================================================== */

.modal-content {
    border: 1.5px solid var(--border-dark);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    font-family: 'IBM Plex Sans', sans-serif;
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 24px 16px;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 24px;
    gap: 8px;
}

/* Form controls inside modals */
.modal .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-sub);
    margin-bottom: 5px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.modal .form-control {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modal .form-control:focus {
    border-color: var(--border-dark);
    box-shadow: 0 0 0 3px rgba(138, 138, 134, 0.15);
    outline: none;
}

.modal .form-control::placeholder {
    color: var(--muted);
}

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

/* Bootstrap close button */
.btn-close {
    opacity: 0.5;
    transition: opacity 0.15s;
}

.btn-close:hover {
    opacity: 1;
}

/* Delete confirmation text */
.modal .text-danger {
    color: var(--nifu-red) !important;
}

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.35;
}


/* ==========================================================================
   23. WIREFRAME ANNOTATION (not shown in production, kept for compatibility)
   ========================================================================== */

.wf-banner {
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
}

.annotation {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    background: var(--tag-bg);
    border: 1px dashed var(--border-dark);
    border-radius: 4px;
    padding: 2px 8px;
}

.annotations-bar {
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1.5px dashed var(--border-dark);
    border-radius: 10px;
}

.annotations-bar h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-sub);
    margin-bottom: 12px;
}

.annotations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* ==========================================================================
   24. UTILITY HELPERS
   ========================================================================== */

.text-muted-mono {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==========================================================================
   25. RESPONSIVE — TABLET & MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    nav {
        padding: 0 16px;
        height: 54px;
    }

    .app-name {
        font-size: 14px;
    }

    .layout {
        margin: 24px auto;
        padding: 0 16px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-title {
        font-size: 22px;
    }

    .stats-row {
        flex-wrap: wrap;
    }

    .stat-box {
        min-width: calc(50% - 8px);
    }

    .card {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .card-title {
        font-size: 14px;
    }

    .card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .hp-header {
        padding: 20px;
    }

    .hp-title {
        font-size: 20px;
    }

    .hp-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .hp-meta {
        flex-direction: column;
        gap: 12px;
    }

    .mal-header {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .mal-title {
        font-size: 14px;
    }

    .mal-meta {
        width: 100%;
    }

    .mal-body {
        padding: 12px 14px;
    }

    .delmaal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sub-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sub-row-right {
        width: 100%;
        justify-content: flex-end;
    }

    .toolbar {
        flex-direction: column;
    }

    .search-box {
        min-width: 100%;
    }

    .login-card {
        padding: 36px 24px 32px;
    }

    .login-code {
        font-size: 56px;
    }

    .error-card {
        padding: 40px 24px 36px;
    }

    .error-code {
        font-size: 56px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 480px) {
    .stats-row {
        flex-direction: column;
    }

    .stat-box {
        min-width: 100%;
    }

    .user-pill span:not(.chevron) {
        display: none;
    }

    .card-left {
        min-width: 0;
        flex: 1;
    }

    .card-index {
        display: none;
    }

    .dropdown-menu {
        min-width: 180px;
    }
}


/* ==========================================================================
   26. PRINT STYLES
   ========================================================================== */

@media print {
    nav,
    .card-actions,
    .hp-actions,
    .mal-actions,
    .delmaal-actions,
    .sub-row-right,
    .btn,
    .btn-primary,
    .btn-delete,
    .btn-ms,
    .dropdown-wrap {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .layout {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .mal-block,
    .delmaal-block,
    .sub-section,
    .hp-header,
    .card,
    .table-card {
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .mal-body {
        display: flex !important;
    }
}
/* ── Formatert tekst (formatTekst() helper) ── */
.fmt-p {
  margin: 0 0 4px 0;
  line-height: 1.6;
}
.fmt-p:last-child { margin-bottom: 0; }

.fmt-list {
  margin: 4px 0 4px 0;
  padding-left: 20px;
  list-style: disc;
}
.fmt-list li {
  margin: 2px 0;
  line-height: 1.5;
  font-size: inherit;
  color: inherit;
}

/* ── Quill WYSIWYG Editor ── */
.quill-editor {
  background: #fff;
  border-radius: 0 0 4px 4px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  min-height: 140px;
}
.ql-toolbar.ql-snow {
  border: 1px solid var(--border-dark, #ccc);
  border-radius: 4px 4px 0 0;
  background: var(--tag-bg, #f5f5f5);
  padding: 6px 8px;
}
.ql-container.ql-snow {
  border: 1px solid var(--border-dark, #ccc);
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
}
.ql-editor {
  min-height: 120px;
  padding: 10px 12px;
  line-height: 1.6;
}
.ql-editor p { margin: 0 0 4px 0; }
.ql-editor ul, .ql-editor ol { padding-left: 20px; margin: 4px 0; }
.ql-editor li { margin: 2px 0; }
.ql-editor.ql-blank::before {
  color: var(--muted, #aaa);
  font-style: normal;
  font-size: 13px;
}

/* ── Public-seksjon (administrator toggle) ────────────────── */
.public-section {
  margin: 0 0 20px 0;
  /*padding: 12px 16px;*/
  /*border: 1px solid var(--border, #e0e0e0);*/
  /*border-radius: 6px;*/
  background: var(--surface, #fafafa);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.public-label {
  font-size: 13px;
  color: var(--muted, #666);
}
.public-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.public-on .public-label strong { color: #2a7d4f; }
.public-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}
.public-url-input {
  flex: 1;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg, #fff);
}

/* ── Public-badge i nav ────────────────────────────────────── */
.public-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e8f4f0;
  color: #2a7d4f;
  border: 1px solid #b3dac9;
  border-radius: 4px;
  padding: 3px 8px;
  margin-left: auto;
}

/* ── Utskriftsknapp ───────────────────────────────────────── */
.print-btn-row {
  margin-top: 32px;
  padding-top: 16px;
  padding-bottom: 50px;
  border-top: 1px solid var(--border);
  text-align: center;
}