:root {
    /* Light mode */
    --pb-bg-body: #E9F7EF;
    --pb-body-border:#666;
    --pb-bg-navbar: #5bce59;
    --pb-bg-card: #edf0ed;
    --pb-bg-card-header: #caf5dd;
    --pb-bg-card-title: #caf5dd;
    --pb-color-text-light: #faf2f2;
    --pb-color-text-dark: #000000;
    --pb-shadow-light: rgba(0, 0, 0, 0.4);
    --pb-shadow-hover: rgba(0, 0, 0, 0.8);
    --pb-cookie-bg: #000000;
    --pb-cookie-text: #ffffff;
    --pb-cookie-link: #4CAF50;
    --pb-alert-info: #E9F7EF;
}


body.dark-mode {
    --pb-bg-body: #1e1e1e;
    --pb-bg-navbar: #8b1a1a;
    --pb-bg-card: #2b2b2b;
    --pb-bg-card-header: #3a3a3a;
    --pb-bg-card-title: #3a3a3a;
    --pb-color-text-light: #ffffff;
    --pb-color-text-dark: #cccccc;
    --pb-shadow-light: rgba(255, 255, 255, 0.1);
    --pb-shadow-hover: rgba(255, 255, 255, 0.3);
    --pb-cookie-bg: #111111;
    --pb-cookie-text: #dddddd;
    --pb-cookie-link: #81C784;
}


/* Bakgrundsfärg för hela sidan */
body {
    background-color: var(--pb-bg-body);
    color: var(--pb-color-text-dark);
    border: 1px solid var(--pb-body-border);
}    
body.dark-mode input,
    body.dark-mode textarea,
    body.dark-mode select {
    background-color: var(--pb-bg-body);
    color: var(--pb-color-text-dark);
    border: 1px solid var(--pb-body-border);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #aaa;
}


/* Rubriker och navbar */
.navbar-brand,
.container h1,
.container h3,
.container h4 {
    background-color: var(--pb-bg-navbar);
    color: var(--pb-color-text-light);
    padding: 10px;
    border-radius: 8px;
}

.navbar {
    background-color: var(--pb-bg-navbar);
    color: var(--pb-color-text-light);
    padding: 10px;
    border-radius: 8px;
    margin: 20px 10px;
    box-shadow: 0 6px 10px var(--pb-shadow-light);
}

/* Cards */
.card {
    background-color: var(--pb-bg-card);
    color: var(--pb-color-text-dark); 
    margin-bottom: 20px;
    border-radius: 30px;
    box-shadow: 0 6px 10px var(--pb-shadow-light);
    transition: box-shadow 0.3s ease;
}
.card-body {
    background-color: var(--pb-bg-card-body);
    border-radius: 30px;
}

.card:hover {
    box-shadow: 0 10px 18px var(--pb-shadow-hover);
}

.card-title {
    background-color: var(--pb-bg-card-title);
    color: var(--pb-color-text-dark);
}

.card-header {
    background-color: var(--pb-bg-card-header);
    border-radius: 8px;
}

.card-text {
    padding: 5px;
}

.custom-card-bg {
    background-color: var(--pb-bg-card);
}

.alert-info{
	background-color: var(--pb-alert-info);
}

/* Ikoner */
.action-icons i {
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 10px;
}

/* Cookie consent */
#cookieConsent {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--pb-cookie-bg);
    color: var(--pb-cookie-text);
    padding: 15px;
    text-align: center;
    z-index: 1000;
}

#cookieConsent a,
#cookieConsent button {
    color: var(--pb-cookie-link);
    text-decoration: underline;
    margin-left: 10px;
    border: none;
    background: none;
    cursor: pointer;
}

/* Positioneringshjälp */
.bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.description-wrapper {
    position: relative;
}

.full-description {
    display: block;
}

/* === DARK MODE IMPROVEMENTS === */

body.dark-mode input,
body.dark-mode .modal-content,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #333;
    color: var(--pb-color-text-light);
    border: 1px solid #666;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #aaa;
}

body .card, input, textarea, select {
    transition: background-color 0.5s ease, color 0.3s ease;
}
body.dark-mode .text-muted {
    color: var(--pb-color-text-light) !important
}