:root {
    --color-paper: #D9D2C9;
    --color-rust: #C46E52;
    --color-steel: #8C949D;
    --color-charcoal: #1A1A1A;
}

/* BASE */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--color-paper);
    color: var(--color-charcoal);
    font-family: "Inter", sans-serif;
    line-height: 1.5;
    background-image: radial-gradient(var(--color-charcoal) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
    background-attachment: fixed;
}

/* TYPOGRAFI */
h1, h2, h3, h4, h5 {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

small, .text-muted {
    color: var(--color-steel) !important;
}

code, .mono {
    font-family: "JetBrains Mono", monospace;
}

/* NAVBAR */
.navbar {
    background-color: var(--color-paper) !important;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.navbar-brand {
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 1px;
    color: var(--color-charcoal) !important;
}

.nav-link {
    color: var(--color-charcoal) !important;
    font-weight: 500;
}

    .nav-link:hover {
        color: var(--color-rust) !important;
    }

/* PAGE STRUCTURE */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .page-wrapper > .container {
        flex: 1;
    }

/* CARD */
.card {
    background-color: rgba(255,255,255,0.75);
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(2px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(26,26,26,0.1);
    font-weight: 700;
}

.card-body {
    color: var(--color-charcoal);
}

/* BUTTONS */
.btn {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
}

/*.btn-primary {
    background-color: var(--color-rust);
    border-color: var(--color-rust);
}

    .btn-primary:hover {
        background-color: #a8573f;
        border-color: #a8573f;
    }

.btn-outline-secondary {
    color: var(--color-charcoal);
    border-color: rgba(26,26,26,0.3);
}

    .btn-outline-secondary:hover {
        background-color: var(--color-charcoal);
        color: white;
    }
    */
/* ACCORDION – mer nøytral */
.accordion-button {
    background-color: rgba(255,255,255,0.6);
    color: var(--color-charcoal);
    font-weight: 600;
    border: none;
}

    .accordion-button.collapsed {
        background-color: rgba(255,255,255,0.6);
    }

    .accordion-button:not(.collapsed) {
        background-color: rgba(196, 110, 82, 0.08); /* veldig subtil rust */
        color: var(--color-charcoal);
    }

    .accordion-button:hover {
        background-color: rgba(0,0,0,0.04);
    }

    .accordion-button:focus {
        box-shadow: none;
    }

/* litt roligare body også */
.accordion-body {
    background-color: transparent;
}

/* LISTS */
.list-group-item {
    background: transparent;
    border: 1px solid rgba(26,26,26,0.1);
}

/* BADGES */
.badge {
    background-color: var(--color-steel);
    color: white;
}

    .badge.bg-danger {
        /*background-color: var(--color-rust) !important;*/
    }

/* TABLE */
.table-shift tbody tr {
    background-color: rgba(255,255,255,0.75);
    border: 1px solid rgba(26,26,26,0.1);
}

/* SELECT2 */
.select2-container--default .select2-selection--single {
    border: 1px solid rgba(26,26,26,0.2);
}

.select2-container {
    width: 100% !important;
}

/* PUSH BANNER */
.push-banner {
    background: var(--color-charcoal);
    color: white;
}

/* FOOTER */
.footer {
    background-color: var(--color-paper);
    border-top: 1px solid rgba(26,26,26,0.1);
    position: static !important;
}

.footer {
    width: 100%;
    overflow-x: hidden;
}

    /* Viktig: sørg for at innhald ikkje kan presse breidda */
    .footer .container {
        max-width: 100%;
    }

/* Sikring mot overflow globalt */
body {
    overflow-x: hidden;
}

/* INSTALL BUTTON */
#installBtn {
    background-color: var(--color-rust);
    border: none;
}

/* ICONS (Font Awesome finjustering) */
.fa-solid,
.fa-regular {
    margin-right: 6px;
    color: var(--color-steel);
}

.nav-link i {
    color: var(--color-charcoal);
}

.nav-link:hover i {
    color: var(--color-rust);
}

/* SCROLLBAR */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    scrollbar-width: none;
}

/* SELECTION */
::selection {
    background-color: var(--color-rust);
    color: white;
}

/* RESPONSIVE TABLE */
@media (max-width: 768px) {
    .table-shift tbody tr {
        display: block;
        margin-bottom: 15px;
        padding: 10px;
    }

    .table-shift td {
        display: block;
        width: 100% !important;
    }
}
.refresh-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.85); /* charcoal */
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-box {
    text-align: center;
    color: white;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.footer {
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: small;
}

    .footer .container {
        white-space: normal;
    }

.copy-email {
    cursor: pointer;
    color: #888;
}

.copy-email:hover {
    color: #000;
}

.copy-email.copied {
    color: green;
}
.notification-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem; /* match other nav items */
}

    .notification-icon .badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background: #dc3545;
        color: white;
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 10px;
    }

/* Visual indicator for unread notifications: color bell icon (font-awesome <i> or inline SVG) */
/* Only show colored bell states on desktop / larger screens. Disable color changes on small/mobile screens. */
/* Do not change bell color via CSS. Unread state is indicated via the badge only. */

/* Ensure inline SVG bell is visible and sized when used directly */
.notification-bell svg.fa-bell {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: inherit; /* allow parent color or .has-unread to control */
}
.notification-bell svg.fa-bell path {
    fill: currentColor !important;
}

/* No CSS-based highlight while dropdown is open; keep color control to badge/state only. */

/* Mobile override: keep bell color regular and prevent JS/CSS from turning it red on small screens */
@media (max-width: 767.98px) {
    .notification-bell,
    .notification-bell svg.fa-bell,
    .notification-bell i.fa-bell {
        color: inherit !important;
    }
    .notification-bell svg.fa-bell path {
        fill: currentColor !important;
    }
}

/* Keep bell icon visible and let badge styling control badge color. Target only the icon elements. */
.navbar .notification-bell svg.fa-bell,
.navbar .notification-bell i.fa-bell {
    color: inherit !important;
}
.navbar .notification-bell svg.fa-bell {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Notifications specific styles */
.notif-unread { background-color: #eef6ff !important; }
.notif-item:hover { background-color: #f8f9fa; }
.notif-count-badge { top: -6px; right: -6px; font-size: 0.75rem; }

.incident-description {
    white-space: pre-line;

}
.select2-container--default .select2-selection--single {
    min-height: 38px;
    border: 1px solid #ced4da;
}
.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px);
}

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: calc(2.25rem + 2px);
        padding-left: .75rem;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: calc(2.25rem + 2px);
    }