/*
██████  ██ ███    ██ ██   ██     ████████ ██   ██ ███████ ███    ███ ███████ 
██   ██ ██ ████   ██ ██  ██         ██    ██   ██ ██      ████  ████ ██      
██████  ██ ██ ██  ██ █████          ██    ███████ █████   ██ ████ ██ █████   
██      ██ ██  ██ ██ ██  ██         ██    ██   ██ ██      ██  ██  ██ ██      
██      ██ ██   ████ ██   ██        ██    ██   ██ ███████ ██      ██ ███████ 
*/

/* 
   Postin oranssi #e87500 taustaksi
   Ruskeat sävyt korostuksiin ja reunuksiin
   Kehykset hieman paksumpina 
*/



html[data-bs-theme="light"] {

    /* ========== 1. Perusvärit ja tausta ========== */
    --bs-border-width: 2px;         /* Hieman paksumpi yleisreunus */
    --bs-border-style: solid;       /* Kiinteä reunaviiva */

    /* Tausta & Teksti */
    --bs-body-bg: #ffc58a;          /* Oranssi tausta */
    --bs-body-color: #1d0d00;       /* Tumma ruskea teksti */

    /* ========== 2. Ydinväripaletti (oranssin eri sävyjä) ========== */
    --bs-primary: #ff8c00;          /* Kirkas oranssi */
    --bs-primary-rgb: 255, 163, 51;

    --bs-secondary: #b8860b;        /* Syvä kultainen keltainen */
    --bs-secondary-rgb: 184, 134, 11;

    --bs-success: #18583e;          /* Tummanvihreä success */
    --bs-success-rgb: 47, 79, 79;

    --bs-info: #6a5acd;             /* Syvä sinivioletti info */
    --bs-info-rgb: 106, 90, 205;

    --bs-warning: #b8860b;          /* Tumma kullan keltainen warning */
    --bs-warning-rgb: 184, 134, 11;

    --bs-danger: #dc3545;           /* Tumma punainen danger */
    --bs-danger-rgb: 220, 53, 69;

    --bs-light: #f5f5dc;            /* Beige vaalea */
    --bs-light-rgb: 245, 245, 220;

    --bs-dark: #3b2f2f;             /* Syvä ruskea dark */
    --bs-dark-rgb: 59, 47, 47;

    /* ========== Alert-boxit ========== */

    /* Success */
    --bs-alert-success-color: #75b798;
    --bs-alert-success-bg: #051b11;
    --bs-alert-success-border-color: #0f5132;
    --bs-alert-success-link-color: #75b798;

    /* Warning */
    --bs-alert-warning-color: #ffda6a;
    --bs-alert-warning-bg: #332701;
    --bs-alert-warning-border-color: #997404;
    --bs-alert-warning-link-color: #ffda6a;

    /* Danger */
    --bs-alert-danger-color: #ea868f;
    --bs-alert-danger-bg: #2c0b0e;
    --bs-alert-danger-border-color: #842029;
    --bs-alert-danger-link-color: #ea868f;

    /* Sekundaariset taustasävyt oranssille */
    --bs-secondary-bg: #ffcc99;   /* Lämmin vaalea oranssi */
    --bs-tertiary-bg: #ffd9b3;    /* Vielä hieman vaaleampi oranssi */

    /* Korostusväriä HR-viivoille & muuhun */
    --bs-hr-color: #000000; /* Tummahko oranssi korostus */

    /* ========== 3. Yleiset nappien kohdistusvärit (fokusvarjot yms.) ========== */
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

    /* ========== 4. Primääripainikkeet ========== */
    --bs-btn-primary-color: #000000;
    --bs-btn-primary-bg: var(--bs-primary);
    --bs-btn-primary-border-color: var(--bs-primary);
    --bs-btn-primary-hover-color: #000;
    --bs-btn-primary-hover-bg: #c26b00; /* Hieman tummempi oranssi */
    --bs-btn-primary-hover-border-color: #e07a00;
    --bs-btn-primary-active-color: #000;
    --bs-btn-primary-active-bg: #cc6d00;
    --bs-btn-primary-active-border-color: #cc6d00;
    --bs-btn-primary-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-primary-active-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Pehmeämpi varjo */

    /* ========== 5. Sekundääripainikkeet ========== */
    --bs-btn-secondary-color: #fff;
    --bs-btn-secondary-bg: #8c6905;
    --bs-btn-secondary-border-color: #8c6905;
    --bs-btn-secondary-hover-color: #fff;
    --bs-btn-secondary-hover-bg: #705304;
    --bs-btn-secondary-hover-border-color: #705304;
    --bs-btn-secondary-active-color: #fff;
    --bs-btn-secondary-active-bg: #8c6905;
    --bs-btn-secondary-active-border-color: #8c6905;
    --bs-btn-secondary-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-secondary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 6. Success-painikkeet ========== */
    --bs-btn-success-color: #fff;
    --bs-btn-success-bg: #1f3838;
    --bs-btn-success-border-color: #1f3838;
    --bs-btn-success-hover-color: #fff;
    --bs-btn-success-hover-bg: #142626;
    --bs-btn-success-hover-border-color: #142626;
    --bs-btn-success-active-color: #fff;
    --bs-btn-success-active-bg: #1f3838;
    --bs-btn-success-active-border-color: #1f3838;
    --bs-btn-success-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-success-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 7. Danger-painikkeet ========== */
    --bs-btn-danger-color: #fff;
    --bs-btn-danger-bg: #660000;
    --bs-btn-danger-border-color: #660000;
    --bs-btn-danger-hover-color: #fff;
    --bs-btn-danger-hover-bg: #4d0000;
    --bs-btn-danger-hover-border-color: #4d0000;
    --bs-btn-danger-active-color: #fff;
    --bs-btn-danger-active-bg: #660000;
    --bs-btn-danger-active-border-color: #660000;
    --bs-btn-danger-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-danger-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 8. Warning-painikkeet ========== */
    --bs-btn-warning-color: #fff;
    --bs-btn-warning-bg: #a87808;
    --bs-btn-warning-border-color: #a87808;
    --bs-btn-warning-hover-color: #fff;
    --bs-btn-warning-hover-bg: #805d06;
    --bs-btn-warning-hover-border-color: #805d06;
    --bs-btn-warning-active-color: #fff;
    --bs-btn-warning-active-bg: #a87808;
    --bs-btn-warning-active-border-color: #a87808;
    --bs-btn-warning-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-warning-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 9. Info-painikkeet ========== */
    --bs-btn-info-color: #fff;
    --bs-btn-info-bg: #4b3c9d;
    --bs-btn-info-border-color: #4b3c9d;
    --bs-btn-info-hover-color: #fff;
    --bs-btn-info-hover-bg: #3a2f7b;
    --bs-btn-info-hover-border-color: #3a2f7b;
    --bs-btn-info-active-color: #fff;
    --bs-btn-info-active-bg: #4b3c9d;
    --bs-btn-info-active-border-color: #4b3c9d;
    --bs-btn-info-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-info-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 10. Light-painikkeet ========== */
    --bs-btn-light-color: #1d0d00;
    --bs-btn-light-bg: #e6dcc6;
    --bs-btn-light-border-color: #e6dcc6;
    --bs-btn-light-hover-color: #1d0d00;
    --bs-btn-light-hover-bg: #d4c4b0;
    --bs-btn-light-hover-border-color: #d4c4b0;
    --bs-btn-light-active-color: #1d0d00;
    --bs-btn-light-active-bg: #e6dcc6;
    --bs-btn-light-active-border-color: #e6dcc6;
    --bs-btn-light-focus-shadow-rgb: var(--bs-light-rgb);
    --bs-btn-light-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 11. Dark-painikkeet ========== */
    --bs-btn-dark-color: #fff;
    --bs-btn-dark-bg: #2a1f1f;
    --bs-btn-dark-border-color: #2a1f1f;
    --bs-btn-dark-hover-color: #fff;
    --bs-btn-dark-hover-bg: #1f1717;
    --bs-btn-dark-hover-border-color: #1f1717;
    --bs-btn-dark-active-color: #fff;
    --bs-btn-dark-active-bg: #2a1f1f;
    --bs-btn-dark-active-border-color: #2a1f1f;
    --bs-btn-dark-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-dark-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

    /* ========== 12. Outline-button ========== */
    --bs-btn-outline-primary-color: var(--bs-primary);
    --bs-btn-outline-primary-border-color: var(--bs-primary);
    --bs-btn-outline-primary-hover-color: #fff;
    --bs-btn-outline-primary-hover-bg: var(--bs-primary);
    --bs-btn-outline-primary-hover-border-color: var(--bs-primary);
    --bs-btn-outline-primary-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-outline-primary-active-color: #fff;
    --bs-btn-outline-primary-active-bg: var(--bs-primary);
    --bs-btn-outline-primary-active-border-color: var(--bs-primary);
    --bs-btn-outline-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* ========== 13. Peruspainikkeiden oletus (jos ei erikseen määritelty) ========== */
    --bs-btn-color: var(--bs-btn-primary-color);
    --bs-btn-bg: var(--bs-btn-primary-bg);
    --bs-btn-border-color: var(--bs-btn-primary-border-color);
    --bs-btn-hover-color: var(--bs-btn-primary-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color);
    --bs-btn-active-color: var(--bs-btn-primary-active-color);
    --bs-btn-active-bg: var(--bs-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb);
    --bs-btn-active-shadow: var(--bs-btn-primary-active-shadow);

    /* ========== 14. Linkit & korostus ========== */
    --bs-link-color: var(--bs-body-color);
    --bs-link-hover-color: #5c2a06; /* Tummempi ruskea hover */

    /* ========== 15. Lomakekentät, syöte & napit ========== */
    --bs-input-bg: var(--bs-body-bg);           /* Käytetään oranssia taustaa inputsissa */
    --bs-input-border-color: #8c4e19;           /* Syvempi ruskea reunus */
    --bs-button-color: #3b1d04;                 /* Nappien tekstiväri */
    --bs-button-bg: #ffa333;                    /* Nappien taustaväri */
    --bs-button-hover-bg: #f18500;              /* Hover-oranssi */

    /* ========== 16. Nav-tabs, dropdownit & linkit ========== */
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-color: #8c4e19;       /* Paksumpi ruskea border tab-containerille */
    --bs-nav-tabs-border-radius: 0.25rem;
    --bs-nav-tabs-link-hover-border-color: #8c4e19 #8c4e19 #8c4e19;
    --bs-nav-tabs-link-active-color: #3b1d04;  /* Ruskea teksti aktiivisessa tabissa */
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: #8c4e19 #8c4e19 transparent;

    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: #8c4e19;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: #ff9d4d;      /* Hieman tummempi oranssi hover */
    --bs-dropdown-link-active-color: #ffcfa9;  
    --bs-dropdown-link-active-bg: #ffa333;     /* Aktiivinen tausta */
    --bs-dropdown-link-disabled-color: #6c757d;
    --bs-dropdown-divider-bg: #8c4e19;         
    --bs-dropdown-header-color: #5c2a06;       

    /* ========== 17. Viikkoseparator (esim. kalentereihin) ========== */
    --bs-week-separator-bg: #ffa347;           /* Vaalea oranssi */
    --bs-week-separator-text-color: #2a1502;   /* Tumma teksti */

    /* ========== 18. Entrybox-sävytykset ========== */
    --entry-box-even-bg: #ffad66;            /* Vaaleampi oranssi parillisille riveille */
    --entry-box-odd-bg: var(--bs-body-bg);   /* Taustaoranssi parittomille */

    /* Latauslinkin väri */
    --download-link-color: #3b1d04; /* Ruskea linkkiväri */

    /* ========== 19. Form Control (input, textarea) ========== */
    --bs-form-control-bg: var(--bs-input-bg);
    --bs-form-control-color: var(--bs-body-color);
    --bs-form-control-border-color: var(--bs-input-border-color);
    --bs-form-control-focus-border-color: #9f5820; /* Aavistuksen vaaleampi ruskea fokuksessa */
    --bs-form-control-focus-shadow: rgba(143, 78, 25, 0.4);
    --bs-form-control-placeholder-color: #6c3b13;
    --bs-form-control-disabled-bg: #ffd5a8;
    --bs-form-control-disabled-color: #3b1d04;
    --bs-form-control-disabled-border-color: #8c4e19;

    /* ========== 20. Checkbox & Switch ========== */
    --bs-form-check-bg: #ffad66;
    --bs-form-check-border: #8c4e19;
    --bs-form-check-checked-bg: #cc3300; 
    --bs-form-check-checked-border-color: #8c4e19;
    --bs-form-check-focus-shadow: rgba(143, 78, 25, 0.4);
    --bs-form-check-focus-border-color: #cc3300;
    --bs-form-check-switch-handle-color: #ffffff;

    /* ========== 21. Taulukot ========== */
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-color: #3b1d04;
    --bs-table-border-color: #8c4e19;
    --bs-table-accent-bg: #ff9d4d;  
    --bs-table-hover-color: #3b1d04;
    --bs-table-hover-bg: #ffb366;

    /* ========== 22. Modaalit ========== */
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: #8c4e19;  /* Reilumpi ruskea reuna */
    --bs-modal-header-border-color: var(--bs-modal-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-footer-bg: var(--bs-body-bg);
    --bs-modal-footer-border-color: var(--bs-modal-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);

}

/* ========== 23. HR-tyyli ========== */
html[data-bs-theme="light"] hr {
    --bs-hr-border-width: var(--bs-border-width);
    --bs-hr-opacity: 0.4;                    /* Hieman näkyvämpi viiva */
    
    margin: 1rem 0;
    color: var(--bs-hr-color);
    border: 0;
    border-top: var(--bs-hr-border-width) solid var(--bs-hr-color);
    opacity: var(--bs-hr-opacity);
}

/* ========== 24. Linkit ja hoverit ========== */
html[data-bs-theme="light"] a {
    color: var(--bs-link-color);
    text-decoration: none;
}

html[data-bs-theme="light"] a:hover,
html[data-bs-theme="light"] a:focus {
    color: var(--bs-link-hover-color);
}

/* Navbarin linkit */
html[data-bs-theme="light"] .navbar a {
    color: var(--bs-body-color);
    text-decoration: none;
}

html[data-bs-theme="light"] .navbar a:hover,
html[data-bs-theme="light"] .navbar a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

/* Dropdown-menu */
html[data-bs-theme="light"] .dropdown-menu {
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: #8c4e19;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: #ff9d4d; 
    --bs-dropdown-link-active-color: #ffcfa9;
    --bs-dropdown-link-active-bg: #ffa333;
    --bs-dropdown-link-disabled-color: #6c757d;
    --bs-dropdown-divider-bg: #8c4e19;
    --bs-dropdown-header-color: #5c2a06;

    color: var(--bs-dropdown-color);
    background-color: var(--bs-dropdown-bg);
    border-color: var(--bs-dropdown-border-color);
}

/* Dropdown item - hover, active, disabled */
html[data-bs-theme="light"] .dropdown-item {
    color: var(--bs-dropdown-link-color);
    background-color: transparent;
}
html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}
html[data-bs-theme="light"] .dropdown-item.active,
html[data-bs-theme="light"] .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
    text-decoration: none;
}
html[data-bs-theme="light"] .dropdown-item.disabled,
html[data-bs-theme="light"] .dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent;
}
html[data-bs-theme="light"] .dropdown-divider {
    background-color: var(--bs-dropdown-divider-bg);
}
html[data-bs-theme="light"] .dropdown-header {
    color: var(--bs-dropdown-header-color);
}

/* ========== 25. Alert-boksit ========== */

/* LIGHT-TEEMA PAKOTETAAN KÄYTTÄMÄÄN DARK-MODEN SÄVYJÄ */
html[data-bs-theme="light"] {
    --bs-alert-success-color: #a3c4a8;  /* Pehmeä vihreä, joka sopii lämpimän oranssin kanssa */
    --bs-alert-success-bg: #2e654e;     /* Syvä, murrettu vihreä taustaväri */
    --bs-alert-success-border-color: #1e5036; /* Tummempi reunaväri */
    --bs-alert-success-link-color: #b5d1b8; /* Hieman kirkkaampi vihreä linkeille */


    --bs-alert-warning-color: #ffda6a;
    --bs-alert-warning-bg: #332701;
    --bs-alert-warning-border-color: #997404;
    --bs-alert-warning-link-color: #ffda6a;

    --bs-alert-danger-color: #ea868f;
    --bs-alert-danger-bg: #2c0b0e;
    --bs-alert-danger-border-color: #842029;
    --bs-alert-danger-link-color: #ea868f;
}

html[data-bs-theme="light"] .alert-primary {
    background-color: var(--bs-primary);
    color: var(--bs-light);
    border-color: #a67c00;
}
html[data-bs-theme="light"] .alert-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    border-color: #8b6508;
}
html[data-bs-theme="light"] .alert-success {
    --bs-alert-color: var(--bs-alert-success-color);
    --bs-alert-bg: var(--bs-alert-success-bg);
    --bs-alert-border-color: var(--bs-alert-success-border-color);
    --bs-alert-link-color: var(--bs-alert-success-link-color);
    
    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    border-color: var(--bs-alert-border-color);
}
html[data-bs-theme="light"] .alert-info {
    background-color: var(--bs-info);
    color: var(--bs-light);
    border-color: #4b3c9a;
}
html[data-bs-theme="light"] .alert-warning {
    --bs-alert-color: var(--bs-alert-warning-color);
    --bs-alert-bg: var(--bs-alert-warning-bg);
    --bs-alert-border-color: var(--bs-alert-warning-border-color);
    --bs-alert-link-color: var(--bs-alert-warning-link-color);

    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    border-color: var(--bs-alert-border-color);
}

html[data-bs-theme="light"] .alert-danger {
    --bs-alert-color: var(--bs-alert-danger-color);
    --bs-alert-bg: var(--bs-alert-danger-bg);
    --bs-alert-border-color: var(--bs-alert-danger-border-color);
    --bs-alert-link-color: var(--bs-alert-danger-link-color);

    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    border-color: var(--bs-alert-border-color);
}
html[data-bs-theme="light"] .alert-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-color: #d4c4a4;
}
html[data-bs-theme="light"] .alert-dark {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    border-color: #2b1f1f;
}

/* ========== 26. Painikkeiden varsinaiset luokat (hover, focus, active) ========== */
/* Primary Button */
html[data-bs-theme="light"] .btn-primary {
    background-color: var(--bs-btn-primary-bg);
    color: var(--bs-btn-primary-color);
    border-color: var(--bs-btn-primary-border-color);
    --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-shadow: var(--bs-btn-primary-active-shadow);
}


html[data-bs-theme="light"] .btn-primary:hover,
html[data-bs-theme="light"] .btn-primary:focus,
html[data-bs-theme="light"] .btn-primary:active {
    background-color: var(--bs-button-hover-bg);
    border-color: var(--bs-button-hover-bg);
}

/* Secondary Button */
html[data-bs-theme="light"] .btn-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .btn-secondary:hover,
html[data-bs-theme="light"] .btn-secondary:focus,
html[data-bs-theme="light"] .btn-secondary:active {
    background-color: var(--bs-btn-secondary-hover-bg);
    border-color: var(--bs-btn-secondary-hover-border-color);
}

/* Success Button */
html[data-bs-theme="light"] .btn-success {
    background-color: var(--bs-success);
    color: var(--bs-dark);
    border-color: var(--bs-success);
}
html[data-bs-theme="light"] .btn-success:hover,
html[data-bs-theme="light"] .btn-success:focus,
html[data-bs-theme="light"] .btn-success:active {
    background-color: var(--bs-btn-success-hover-bg);
    border-color: var(--bs-btn-success-hover-border-color);
}

/* Info Button */
html[data-bs-theme="light"] .btn-info {
    background-color: var(--bs-info);
    color: var(--bs-dark);
    border-color: var(--bs-info);
}
html[data-bs-theme="light"] .btn-info:hover,
html[data-bs-theme="light"] .btn-info:focus,
html[data-bs-theme="light"] .btn-info:active {
    background-color: var(--bs-btn-info-hover-bg);
    border-color: var(--bs-btn-info-hover-border-color);
}

/* Warning Button */
html[data-bs-theme="light"] .btn-warning {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
    border-color: var(--bs-warning);
}
html[data-bs-theme="light"] .btn-warning:hover,
html[data-bs-theme="light"] .btn-warning:focus,
html[data-bs-theme="light"] .btn-warning:active {
    background-color: var(--bs-btn-warning-hover-bg);
    border-color: var(--bs-btn-warning-hover-border-color);
}

/* Danger Button */
html[data-bs-theme="light"] .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

/* Danger Button Hover, Focus & Active */
html[data-bs-theme="light"] .btn-danger:hover,
html[data-bs-theme="light"] .btn-danger:focus,
html[data-bs-theme="light"] .btn-danger:active {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
}

/* Disabled State */
html[data-bs-theme="light"] .btn-danger:disabled {
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    color: var(--bs-btn-disabled-color);
    opacity: var(--bs-btn-disabled-opacity);
}

/* Light Button */
html[data-bs-theme="light"] .btn-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .btn-light:hover,
html[data-bs-theme="light"] .btn-light:focus,
html[data-bs-theme="light"] .btn-light:active {
    background-color: var(--bs-btn-light-hover-bg);
    border-color: var(--bs-btn-light-hover-border-color);
}

/* Dark Button */
html[data-bs-theme="light"] .btn-dark {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    border-color: var(--bs-dark);
}
html[data-bs-theme="light"] .btn-dark:hover,
html[data-bs-theme="light"] .btn-dark:focus,
html[data-bs-theme="light"] .btn-dark:active {
    background-color: var(--bs-btn-dark-hover-bg);
    border-color: var(--bs-btn-dark-hover-border-color);
}

/* Entry Box Styling (oranssissa taustassa näkyvät kentät) */
html[data-bs-theme="light"] .entry-box:nth-child(even) {
    background-color: var(--entry-box-even-bg);
}
html[data-bs-theme="light"] .entry-box:nth-child(odd) {
    background-color: var(--entry-box-odd-bg);
}

/* Week Separators */
html[data-bs-theme="light"] .weekSeparator.custom-week-header {
    background-color: var(--bs-week-separator-bg);
    padding: 0.5em 1em;
    text-align: center;
    margin: 1em 0;
}
html[data-bs-theme="light"] .custom-week-title,
html[data-bs-theme="light"] .custom-week-range {
    color: var(--bs-week-separator-text-color);
}

/* Checkbox & Switch */
html[data-bs-theme="light"] .form-check-input {
    background-color: var(--bs-form-check-bg);
    border: 1px solid var(--bs-form-check-border);
}
html[data-bs-theme="light"] .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg);
    border-color: var(--bs-form-check-checked-border-color);
}
html[data-bs-theme="light"] .form-check-input:focus,
html[data-bs-theme="light"] .form-check-input:active {
    box-shadow: 0 0 0 0.25rem var(--bs-form-check-focus-shadow);
    border-color: var(--bs-form-check-focus-border-color);
}
html[data-bs-theme="light"] .form-switch .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg);
    border-color: var(--bs-form-check-checked-border-color);
}
html[data-bs-theme="light"] .form-switch .form-check-input:checked::before {
    background-color: var(--bs-form-check-switch-handle-color);
}

/* Form Control */
html[data-bs-theme="light"] .form-control {
    background-color: var(--bs-form-control-bg);
    color: var(--bs-form-control-color);
    border: 2px var(--bs-border-style) var(--bs-form-control-border-color);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
html[data-bs-theme="light"] .form-control::placeholder {
    color: var(--bs-form-control-placeholder-color);
    opacity: 0.7;
}
html[data-bs-theme="light"] .form-control:focus {
    border-color: var(--bs-form-control-focus-border-color);
    box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow);
}
html[data-bs-theme="light"] .form-control:disabled,
html[data-bs-theme="light"] .form-control[readonly] {
    background-color: var(--bs-form-control-disabled-bg);
    color: var(--bs-form-control-disabled-color);
    border-color: var(--bs-form-control-disabled-border-color);
    opacity: 1;
}
html[data-bs-theme="light"] .form-select {
    background-color: var(--bs-form-control-bg);
    color: var(--bs-form-control-color);
    border: 2px var(--bs-border-style) var(--bs-form-control-border-color);
}
html[data-bs-theme="light"] .form-select:focus {
    border-color: var(--bs-form-control-focus-border-color);
    box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow);
}

/* Tiedoston valintapainike */
html[data-bs-theme="light"] .form-control::-webkit-file-upload-button {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
html[data-bs-theme="light"] .form-control::file-selector-button {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--bs-secondary-bg);
}
html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--bs-secondary-bg);
}

/* Taulukot */
html[data-bs-theme="light"] .table {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}
html[data-bs-theme="light"] .table-striped tbody tr {
    --bs-table-striped-color: var(--bs-table-color);
}
html[data-bs-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bs-table-accent-bg);
}
html[data-bs-theme="light"] .table-hover tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}
html[data-bs-theme="light"] .table thead th {
    background-color: var(--bs-body-bg);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Nav Tabs */
html[data-bs-theme="light"] .nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: #8c4e19;
    --bs-nav-tabs-link-hover-border-color: #8c4e19 #8c4e19 #8c4e19;
    --bs-nav-tabs-link-active-color: #3b1d04;
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: #8c4e19 #8c4e19 var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) var(--bs-border-style) var(--bs-nav-tabs-border-color);
}
html[data-bs-theme="light"] .nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
    color: var(--bs-nav-link-color);
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
html[data-bs-theme="light"] .nav-tabs .nav-link:hover {
    color: var(--bs-nav-link-hover-color);
    border-color: var(--bs-nav-tabs-link-hover-border-color);
}
html[data-bs-theme="light"] .nav-tabs .nav-item.show .nav-link,
html[data-bs-theme="light"] .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

/* Button Group */
html[data-bs-theme="light"] .btn-group .btn-primary {
    color: var(--bs-btn-primary-color);
    background-color: var(--bs-btn-primary-bg);
    border-color: var(--bs-btn-primary-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-primary:hover,
html[data-bs-theme="light"] .btn-group .btn-primary:focus {
    color: var(--bs-btn-primary-hover-color);
    background-color: var(--bs-btn-primary-hover-bg);
    border-color: var(--bs-btn-primary-hover-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-secondary {
    color: var(--bs-btn-secondary-color);
    background-color: var(--bs-btn-secondary-bg);
    border-color: var(--bs-btn-secondary-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-secondary:hover,
html[data-bs-theme="light"] .btn-group .btn-secondary:focus {
    color: var(--bs-btn-secondary-hover-color);
    background-color: var(--bs-btn-secondary-hover-bg);
    border-color: var(--bs-btn-secondary-hover-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-success {
    color: var(--bs-btn-success-color);
    background-color: var(--bs-btn-success-bg);
    border-color: var(--bs-btn-success-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-success:hover,
html[data-bs-theme="light"] .btn-group .btn-success:focus {
    color: var(--bs-btn-success-hover-color);
    background-color: var(--bs-btn-success-hover-bg);
    border-color: var(--bs-btn-success-hover-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-danger {
    color: var(--bs-btn-danger-color);
    background-color: var(--bs-btn-danger-bg);
    border-color: var(--bs-btn-danger-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-danger:hover,
html[data-bs-theme="light"] .btn-group .btn-danger:focus {
    color: var(--bs-btn-danger-hover-color);
    background-color: var(--bs-btn-danger-hover-bg);
    border-color: var(--bs-btn-danger-hover-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-light {
    color: var(--bs-btn-light-color);
    background-color: var(--bs-btn-light-bg);
    border-color: var(--bs-btn-light-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-light:hover,
html[data-bs-theme="light"] .btn-group .btn-light:focus {
    color: var(--bs-btn-light-hover-color);
    background-color: var(--bs-btn-light-hover-bg);
    border-color: var(--bs-btn-light-hover-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-dark {
    color: var(--bs-btn-dark-color);
    background-color: var(--bs-btn-dark-bg);
    border-color: var(--bs-btn-dark-border-color);
}
html[data-bs-theme="light"] .btn-group .btn-dark:hover,
html[data-bs-theme="light"] .btn-group .btn-dark:focus {
    color: var(--bs-btn-dark-hover-color);
    background-color: var(--bs-btn-dark-hover-bg);
    border-color: var(--bs-btn-dark-hover-border-color);
}

/* Outline primary hover */
html[data-bs-theme="light"] .btn-outline-primary:hover,
html[data-bs-theme="light"] .btn-outline-primary:focus {
    color: var(--bs-btn-outline-primary-hover-color);
    background-color: var(--bs-btn-outline-primary-hover-bg);
    border-color: var(--bs-btn-outline-primary-hover-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-outline-primary-focus-shadow-rgb), 0.5);
}

/* Aktiiviset ja checkatut tilat */
html[data-bs-theme="light"] .btn-check:checked + .btn,
html[data-bs-theme="light"] .btn.active,
html[data-bs-theme="light"] .btn.show,
html[data-bs-theme="light"] .btn:first-child:active,
html[data-bs-theme="light"] :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    background-image: none;
    box-shadow: var(--bs-btn-active-shadow);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
html[data-bs-theme="light"] .btn-check:checked:focus-visible + .btn,
html[data-bs-theme="light"] .btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

/* ========== 27. Taulukkotyyli laajennus ========== */
html[data-bs-theme="light"] .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-secondary);
}

/* ========== 28. Modaalit (valintaikkunat) ========== */
html[data-bs-theme="light"] .modal {
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: #8c4e19;
    --bs-modal-header-border-color: var(--bs-modal-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-footer-bg: var(--bs-body-bg);
    --bs-modal-footer-border-color: #8c4e19;
    --bs-modal-footer-border-width: var(--bs-border-width);

    color: var(--bs-modal-color);
    border-color: var(--bs-modal-border-color);
    box-shadow: var(--bs-modal-box-shadow);
}

/* Modaalin header */
html[data-bs-theme="light"] .modal .modal-header {
    color: var(--bs-modal-color);
    border-bottom: var(--bs-modal-header-border-width) var(--bs-border-style) var(--bs-modal-header-border-color);
}

/* Modaalin footer */
html[data-bs-theme="light"] .modal-footer {
    border-top: var(--bs-modal-footer-border-width) var(--bs-border-style) var(--bs-modal-footer-border-color);
}

/* Tummempi tausta avautuvalle modalille */
html[data-bs-theme="light"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Border-top */
html[data-bs-theme="light"] .border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) #8c4e19 !important;
}

/* Custom cards */
html[data-bs-theme="light"] .custom-card.card {
    background-color: #ffe6cc; /* Vaalea oranssi */
    transition: all 0.3s ease;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
html[data-bs-theme="light"] .custom-card.card:hover {
    background-color: #ffd9b3; /* Hieman tummempi hover-tausta */
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #000000;
    --bs-nav-pills-link-active-bg: #ffc107;
}

html[data-bs-theme="light"] .nav-pills .nav-link.active, 
html[data-bs-theme="light"] .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg);
}



/* 
██████   █████  ██████  ██   ██     ████████ ██   ██ ███████ ███    ███ ███████ 
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ████  ████ ██      
██   ██ ███████ ██████  █████          ██    ███████ █████   ██ ████ ██ █████   
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ██  ██  ██ ██      
██████  ██   ██ ██   ██ ██   ██        ██    ██   ██ ███████ ██      ██ ███████ 
*/

/* Dark Mode Customization */
html[data-bs-theme="dark"] {
    /* Entry box colors */
    --entry-box-even-bg: var(--bs-gray-900); /* Dark gray for even entries */
    --entry-box-odd-bg: var(--bs-gray-800);  /* Lighter gray for odd entries */

    /* Link colors */
    --download-link-color: #ffffff; /* White for links in dark mode */
}

/* Entry Box Styling for Dark Mode */
html[data-bs-theme="dark"] .entry-box:nth-child(even) {
    background-color: var(--entry-box-even-bg); /* Dark theme color for even entries */
}
html[data-bs-theme="dark"] .entry-box:nth-child(odd) {
    background-color: var(--entry-box-odd-bg); /* Dark theme color for odd entries */
}

/* Week Separators in Dark Mode */
html[data-bs-theme="dark"] .weekSeparator.custom-week-header {
    background-color: #efadce;
    padding: 0.5em 1em;
    text-align: center;
    margin: 1em 0;
}

/* var(--bs-gray-800); */

html[data-bs-theme="dark"] .custom-week-title,
html[data-bs-theme="dark"] .custom-week-range {
    color: #000; /* Light text for readability on dark background */
}

html[data-bs-theme="dark"] .custom-card.card {
    background-color: #2a2d31; /* Tumma neutraali */
    transition: all 0.3s ease;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

html[data-bs-theme="dark"] .custom-card.card:hover {
    background-color: #343a40; /* Kirkkaampi hover-tausta */
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* color: #e0e0e0;  */
/* Light text for readability on dark background */

/*    ____  ____   _________   ____    ____    _____                        */
/*   |_   ||   _| |  _   _  | |_   \  /   _|  |_   _|                       */
/*     | |__| |   |_/ | | \_|   |   \/   |      | |                         */
/*     |  __  |       | |       | |\  /| |      | |   _                     */
/*    _| |  | |_     _| |_     _| |_\/_| |_    _| |__/ |                    */
/*   |____||____|   |_____|   |_____||_____|  |________|                    */
/*                                                                          */
/*      ___             ___                      _                          */
/*    .' _ '.         .' ..]                    / |_                        */
/*    | (_) '___     _| |_     .--.     .--.   `| |-'  .---.   _ .--.       */
/*    .`___'/ _/    '-| |-'  / .'`\ \ / .'`\ \  | |   / /__\\ [ `/'`\]      */
/*   | (___)  \_      | |    | \__. | | \__. |  | |,  | \__.,  | |          */
/*   `._____.\__|    [___]    '.__.'   '.__.'   \__/   '.__.' [___]         */


html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}


.icon-link .pencil-icon {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for transform, color, and opacity */
    color: lightgrey; /* Default color for pencil icon */
    opacity: 0.2; /* Start with a lower opacity */
}

.icon-link:hover .pencil-icon {
    transform: translateY(-0.25rem); /* Moves icon slightly up */
    color: #62c370; /* Pleasant pastel green on hover */
    opacity: 1.0; /* Full opacity on hover */
}


/* Buttons used in the index.php to accept and reject users*/

.user-activation-buttons {
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

.user-activation-buttons:hover {
    transform: translateY(-10%);
}

/* Responsive font size adjustments */

@media (max-width: 575.98px) {
    .console-wrapper {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50vh; /* Full viewport height */
        font-size: 0.75em; /* Smaller font size for small devices */
        border: none;
    }

    .console-output {
        padding: 0 0 0 8px; /* Remove padding */
    }

    #console-input {
        padding: 15px 0 0 0;
    }

    .console-input-wrapper {
        padding: 5px 0 0 8px;
    }
}

/* Maintain fixed dimensions and adjust font size for larger screens */
@media (min-width: 576px) {
    .console-wrapper {
        font-size: 0.875em;
    }
}

@media (min-width: 768px) {
    .console-wrapper {
        font-size: 1em;
    }
}

@media (min-width: 992px) {
    .console-wrapper {
        font-size: 1.125em;
    }
}

@media (min-width: 1200px) {
    .console-wrapper {
        font-size: 1.25em;
    }
}

@media (min-width: 1400px) {
    .console-wrapper {
        font-size: 1.5em;
    }
}



/*   _     _____ _____ ___________  ___  _____  _____   */
/*  | |   |_   _/  ___|_   _| ___ \/ _ \|  __ \|  ___|  */
/*  | |     | | \ `--.  | | | |_/ / /_\ \ |  \/| |__    */
/*  | |     | |  `--. \ | | |  __/|  _  | | __ |  __|   */
/*  | |_____| |_/\__/ / | | | |   | | | | |_\ \| |___   */
/*  \_____/\___/\____/  \_/ \_|   \_| |_/\____/\____/   */

/* Cards for the "list tasks" page */

.list-card {
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Add border to the transition */
}

.list-card:hover {
    transform: scale(1.05);
}

.list-card-description {
    position: relative;
    max-height: 240px; /* Default max height */
    overflow: hidden;
}

.list-card-description::after {
    content: '';
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    height: 60px; /* Height of the fade effect */
    background: linear-gradient(to bottom, rgba(33,37,41,0), rgba(33,37,41,1));
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .list-card-description {
        max-height: 240px; /* Adjusted max height for medium screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .list-card-description {
        max-height: 240px; /* Adjusted max height for large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}

/* Extra-large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .list-card-description {
        max-height: 220px; /* Optional: Adjust if needed for extra-large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 160px;
        height: 60px; /* Height of the fade effect */
    }
}

@media (min-width: 1400px) {
    .list-card-description {
        max-height: 240px; /* Optional: Adjust if needed for extra-large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}



.custom-input, .custom-span {
    border-radius: 0;  /* Removes rounded corners */
}

.custom-span {
    width: 125px;       /* Fixed width of 60px */
    display: inline-block; /* Changes display to inline-block */
    text-align: center; /* Centers text horizontally */
    border-radius: 0;  /* Removes rounded corners */
}


/* compare.php */

.blinking-today strong {
    font-weight: bold;
    color: yellow;
}


/* Custom style for inline code blocks */
.inline-code {
    font-family: Consolas, "Courier New", monospace;
    background-color: var(--bs-body-bg); /* Use body background color as base */
    color: var(--bs-body-color); /* Ensure text color is appropriate */
    padding: 0px 4px;
    border-radius: 4px;
    display: inline-block;
}

/* Adjust the background and border for dark mode */
[data-bs-theme="dark"] .inline-code {
    background-color: var(--bs-gray-700);
}

/* Adjust the background and border for light mode */
[data-bs-theme="light"] .inline-code {
    background-color: var(--bs-gray-200);
}

.print-only {
    display: none;
}

.no-print {
    display: block; /* Visible by default */
}

@media print {
    body {
        color: #000;
        background: #fff;
    }
    table {
        border: 1px solid #000;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 8px;
    }
    .print-only {
        display: block !important; /* Make the message visible in print */
    }
    #reportForm button[type="submit"] {
        display: none; /* Hide the submit button in print */
    }
    .no-print {
        display: none !important; /* Hide in print */
    }
}

/* Custom class for paragraphs with no spacing */
.no-spacing {
    margin-bottom: 0 !important; /* No margin between paragraphs */
    margin-top: 0 !important;    /* No margin above the paragraph */
}

/* Ensure the custom class has higher specificity than Bootstrap's default */
.ql-editor p.no-spacing {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.bg-green-300 { background-color: rgba(111, 207, 151, 0.5); }  /* Soft green */
.bg-green-200 { background-color: rgba(129, 234, 161, 0.5); }
.bg-yellow-300 { background-color: rgba(255, 235, 59, 0.5); }  /* Soft yellow */
.bg-yellow-200 { background-color: rgba(255, 238, 88, 0.5); }
.bg-orange-300 { background-color: rgba(255, 167, 38, 0.5); }  /* Soft orange */
.bg-orange-200 { background-color: rgba(255, 183, 77, 0.5); }
.bg-red-300 { background-color: rgba(255, 82, 82, 0.5); }      /* Soft red */
.bg-red-200 { background-color: rgba(255, 134, 124, 0.5); }

/* Entry box in Posts index */
.entry-box {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}

.entry-box:nth-child(odd) {
    background-color: var(--bs-gray-900);
}

.entry-box:nth-child(even) {
    background-color: var(--bs-gray-800);
}

/* Adjust image columns */
@media (min-width: 768px) {
    .entry-box .col-md-6 {
        max-width: 50%;
        flex: 0 0 50%;
    }
}
@media (max-width: 767.98px) {
    .entry-box .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* light theme */
:root {
    --pink-pencil-color: #ff0066;
}

.pink-pencil {
    color: var(--pink-pencil-color);
    font-size: 1.5rem; /* Adjust as needed */
}

/* dark theme */
html[data-bs-theme="dark"] {
    --pink-pencil-color: #fbcfe8;
}

/* Apply the color to the download-link-text class */
.download-link-text {
    color: var(--download-link-color);
}

/* Charts in statistics_ajax.php */
@media (max-width: 576px) {
    /* Adjust the chart container height to accommodate rotated labels */
    #categoryUsageChart {
        height: 400px !important; /* Increase height if necessary */
    }
}

.form-check-input[type=checkbox].big-checkbox {
    transform: scale(3); /* Scaled up significantly */
    margin: 1.5rem 1.5rem 1.5rem 1rem;
    border-radius: 0; /* Overrides the default border-radius */
}