/* ============================================================================
   Bootstrap Override with NUK.css Look and Feel
   This file overrides Bootstrap's default styling to match the NUK.css design system
   ============================================================================ */

/* ============================================================================
   1. BUTTONS
   ============================================================================ */

/* Bootstrap button base */
.btn {
    border: none;
    border-radius: 0;
    padding: var(--2e) var(--2e);
    font-size: calc(var(--e) * 1.4);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.5%;
    transition: color 0.2s linear, cubic-bezier() 0.2s linear;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e);
    color: var(--svetla);
    background: var(--temna);
    line-height:1;
}

.btn::after {
   /*content: '\e819';*/
    font-family: 'nuk-ikone';
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--e) * 1.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-flex;
    align-items: center;
    color: inherit;
    height: auto;
    line-height: 1;
    transition: background-color 0.25s linear, color 0.25s linear;
}

/* Primary button */
.btn-primary {
    background-color: var(--temna);
    color: var(--svetla);
}

.btn:hover,
.btn-primary:hover {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.btn-primary:active,
.btn-primary:focus {
    background-color: var(--svetlosiva);
    color: var(--temna);
    outline: none;
}

.btn-primary:disabled {
    background-color: var(--svetlosiva);
    color: var(--siva);
    opacity: 1;
    pointer-events: none;
}

/* Secondary button */
.btn-secondary {
    background-color: var(--siva);
    color: var(--temna);
}

.btn-secondary:hover {
    background-color: var(--modra);
    color: var(--temna);
}

.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--modra);
    color: var(--temna);
}

/* Success button */
.btn-success {
    background-color: var(--uspeh);
    color: var(--svetla);
}

.btn-success:hover {
    background-color: var(--sveteluspeh);
    color: var(--temna);
}

.btn-success:active,
.btn-success:focus {
    background-color: var(--sveteluspeh);
    color: var(--temna);
}

/* Danger button */
.btn-danger {
    background-color: var(--napaka);
    color: var(--svetla);
}

.btn-danger:hover {
    background-color: var(--svetlanapaka);
    color: var(--temna);
}

.btn-danger:active,
.btn-danger:focus {
    background-color: var(--svetlanapaka);
    color: var(--temna);
}

/* Warning button */
.btn-warning {
    background-color: var(--opozorilo);
    color: var(--svetla);
}

.btn-warning:hover {
    background-color: var(--svetloopozorilo);
    color: var(--temna);
}

.btn-warning:active,
.btn-warning:focus {
    background-color: var(--svetloopozorilo);
    color: var(--temna);
}

/* Info button */
.btn-info {
    background-color: var(--info);
    color: var(--svetla);
}

.btn-info:hover {
    background-color: var(--svetleinformacije);
    color: var(--temna);
}

.btn-info:active,
.btn-info:focus {
    background-color: var(--svetleinformacije);
    color: var(--temna);
}

/* Light button */
.btn-light {
    background-color: var(--svetlosiva);
    color: var(--temna);
    border: 0px solid var(--svetlosiva);
}

.btn-light:hover {
    background-color: var(--temna);
    color: var(--svetla);
}


.nuk-2 .btn-light:before,
.btn-light:before {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.nuk-2 .btn-light:hover:before,
.btn-lighthover::before {
    background-color: var(--temna);
    color: var(--svetla);
}

/* Dark button */
.btn-dark {
    background-color: var(--temna);
    color: var(--svetla);
}

.btn-dark:hover {
    background-color: var(--temnosiva);
    color: var(--svetla);
}

/* Link button */
.btn-link {
    background-color: transparent;
    color: var(--temna);
    text-decoration: underline;
    padding: 0;
    gap: 0;
}

.btn-link:hover {
    color: var(--modra);
    text-decoration: underline;
}

.btn-link::after {
    display: none;
}


.btn-outline-dark.disabled, .btn-outline-dark:disabled {
	color: var(--siva);
	background-color:  var(--svetlosiva);;
}

/* Focus style override */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
}

/* Remove arrow icon from certain button types */
.btn.btn-link::after,
.btn.btn-outline-primary::after,
.btn.btn-outline-secondary::after,
.btn.btn-outline-success::after,
.btn.btn-outline-danger::after,
.btn.btn-outline-warning::after,
.btn.btn-outline-info::after {
    display: none;
}

/* ============================================================================
   2. FORM CONTROLS
   ============================================================================ */

/* Input and textarea base */
.form-control,
.form-select {
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    padding: var(--2e) var(--1e);
    font-size: calc(var(--e) * 1.4);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.5%;
    line-height: 1.4;
    font-weight: 300;
    background-color: var(--svetla);
    color: var(--temna);
    height: auto;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--temna);
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
}

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

/* Invalid form control */
.form-control.is-invalid,
.form-select.is-invalid {
    border: 2px solid var(--napaka);
}

/* Valid form control */
.form-control.is-valid,
.form-select.is-valid {
    border: 2px solid var(--uspeh);
}

/* Label styling */
.form-label {
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    margin-bottom: var(--e);
    color: var(--temna);
}

.form-label.required::after {
    content: '*';
    padding-left: 1px;
}

/* Checkbox and Radio */

.form-check {
    min-height: auto;
  padding-left: 0;
  margin-bottom: 0;
}

.form-check-input {
    width: var(--3e);
    height: var(--3e);
    border: 1px solid var(--temna);
    background-color: var(--svetla);
    margin-top: 0.25em;
}

.form-check-input:checked {
    background-color: var(--temnosiva);
    border-color: var(--temnosiva);
}

.form-check-input:focus {
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
    border-color: var(--temna);
}

.form-check-label {
    padding-left: var(--e);
    font-size: calc(var(--2e) * 0.875);
    color: var(--temna);
}

/* ============================================================================
   3. ALERTS
   ============================================================================ */

.alert {
    padding: var(--e) var(--e) var(--e) var(--4e);
    border: none;
    border-radius: 0;
    position: relative;
    margin-bottom: var(--2e);
}

.alert ul{
    list-style-type:none;
    padding-left:0;
}

.alert::before {
    position: absolute;
    left: var(--e);
    top: var(--e);
    width: var(--2e);
    height: var(--2e);
    text-align: center;
    line-height: var(--2e);
    border-radius: 50%;
    font-family: 'nuk-ikone';
    color: var(--svetla);
    font-weight: 400;
    font-size: calc(var(--e) * 1.4);
}

/* Alert Primary (Info) */
.alert-primary,
.alert-info {
    background-color: var(--svetleinformacije);
    color: var(--temna);
}

.alert-primary::before,
.alert-info::before {
    content: '\e808';
    background-color: var(--info);
}

/* Alert Secondary */
.alert-secondary {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.alert-secondary::before {
    background-color: var(--modra);
    content: 'ℹ';
}

/* Alert Success */
.alert-success {
    background-color: var(--sveteluspeh);
    color: var(--temna);
}

.alert-success::before {
    content: '\e848';
    background-color: var(--uspeh);
}

/* Alert Danger */
.alert-danger {
    background-color: var(--svetlanapaka);
    color: var(--temna);
}

.alert-danger::before {
    content: '\e808';
    background-color: var(--napaka);
}

/* Alert Warning */
.alert-warning {
    background-color: var(--svetloopozorilo);
    color: var(--temna);
}



.alert-warning::before {
    content: '\e811';
    background-color: var(--opozorilo);
}

.alert-light {
    background-color: var(--svetla);
    color: var(--temna);
    border: 1px solid var(--svetlosiva);
}

.alert-dark {
    background-color: var(--temnosiva);
    color: var(--svetla);
}


html[data-tema="temna"] {
    .alert
{
    color:var(--svetla);
}

}

/* ============================================================================
   4. BADGES
   ============================================================================ */

.badge {
    background-color: transparent;
    color: var(--temna);
    border-radius: 2px;
    border: 1px solid var(--temna);
    padding: 4px 19px;
    font-size: calc(var(--e) * 1.2);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
}

.badge.bg-primary {
   color: var(--temna) !important;
   border-color: var(--temna) !important;
}

.badge.bg-secondary {
    color: var(--temnosiva) !important;
    border-color: var(--temnosiva) !important;
}

.badge.bg-success {
    color: var(--uspeh) !important;
    border-color: var(--uspeh) !important;
}

.badge.bg-danger {
    color: var(--napaka) !important;
    border-color: var(--napaka) !important;
}

.badge.bg-warning {
    color: var(--opozorilo) !important;
    border-color: var(--opozorilo) !important;
}

.badge.bg-info {
    color: var(--info) !important;
    border-color: var(--info) !important;
}

.badge.bg-light {
   color: var(--svetla) !important;
    border-color: var(--temna);
}

.badge.bg-dark {
    background-color: var(--temna) !important;
}

/* ============================================================================
   5. PAGINATION
   ============================================================================ */

.pagination {
    gap: var(--e);  align-items:center;
}

.page-link {
    background-color: var(--svetla);
    border: 0px solid var(--svetla);
    border-radius: 0;
    color: var(--temna);
    padding:var(--e) var(--2e);
    font-size: calc(var(--e) * 1.75);
    text-decoration: none;
    transition: background-color 0.2s linear;
}

.page-link:hover {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.page-item.active .page-link {
    background-color: var(--svetla);
    border-color: var(--temna);
    color: var(--temna);
    font-weight: 700;
}

.page-item.disabled .page-link {
    background-color: var(--svetla);
    color: var(--siva);
    pointer-events: none;
    border: 0px solid var(--svetla)
} 

/* ============================================================================
   6. CARDS
   ============================================================================ */

.card {
    border: 0px solid var(--svetla);
    border-radius: 0;
    background-color: var(--svetla);
    box-shadow: none;
    display: block;
}

.nuk-2 .card,
.nuk-2 .card .card-header,
.nuk-2 .card .card-body {
    padding:0 !important;
    margin-top: 0 !important;
} 

.card-header {
    background-color: var(--svetla);
    border-bottom: 0px solid var(--svetla);
    padding:0;
    font-weight: 300;

}
.card-header:first-child {
	border-radius: 0;
} 

.nuk-2 .shadow-sm ,
.nuk-2 .shadow-lg ,
.nuk-2 .shadow-md {
	box-shadow: none !important;
}

.card-body {
    padding: 0;
}

.card-footer {
    background-color: var(--sekundarna);
    border-top: 1px solid var(--svetlosiva);
    padding: var(--3e);
}

/* ============================================================================
   7. TABLES
   ============================================================================ */

.table {
    font-size: calc(var(--2e) * 0.875);
    line-height: 1.15;
    border-collapse: collapse;
}

.table thead th {
    background-color: var(--svetla);
    color: var(--temna);
    font-weight: 700;
    padding: var(--1e);
    border: none;
    text-align: left;
    vertical-align: bottom;
}

.table tbody td {
    padding: var(--1e);
    border: none;
    text-align: left;
}

.table tbody tr:nth-child(odd) td {
    background-color: var(--svetla);
}

.table tbody tr:nth-child(even) td {
    background-color: var(--sekundarna);
}

.table tbody tr:hover td {
    background-color: var(--svetlosiva);
}

.table.table-striped tbody tr:nth-child(odd) {
    background-color: transparent;
}

.table.table-striped tbody tr:nth-child(odd) td {
    background-color: var(--svetla);
}

/* ============================================================================
   8. MODALS / OFFCANVAS
   ============================================================================ */

.modal-content {
    background-color: var(--svetla);
    border: 0px solid var(--svetlosiva);
    border-radius: 0;
}

.modal-header {
    background-color: var(--svetla);
    border-bottom: 0px solid var(--svetlosiva);
    padding: var(--2e) var(--2e) var(--3e) var(--2e);
}

.modal-body {
    padding: var(--2e);
    color: var(--temna);
}

.modal-footer {
    background-color: var(--svetla);
    border-top: 0px solid var(--svetla);
    padding: var(--3e) var(--2e) var(--2e) var(--2e);
}

.modal-footer > * {
    margin: 0;
}
.modal-footer > btn {
	margin: 0;
}

.btn-close {
    filter: invert(0) !important;
}

.offcanvas {
    background-color: var(--svetla);
}

.offcanvas-header {
    background-color: var(--sekundarna);
    border-bottom: 1px solid var(--svetlosiva);
}

/* ============================================================================
   9. DROPDOWNS
   ============================================================================ */

.dropdown-menu {
    background-color: var(--svetla);
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    box-shadow: 0px 0px var(--e) rgba(0, 0, 0, 0.2);
    padding: 0;
}

.dropdown-item {
    padding: var(--2e) var(--2e);
    color: var(--temna);
    text-decoration: none;
    font-size: calc(var(--2e) * 0.875);
}

.dropdown-item:hover {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.dropdown-item.active {
    background-color: var(--sekundarna);
    color: var(--temna);
}

.dropdown-divider {
    background-color: var(--svetlosiva);
    margin: 0;
}

/* ============================================================================
   10. NAVIGATION
   ============================================================================ */

.nav-link {
    color: var(--temna);
    text-decoration: none;
    padding: var(--e) var(--2e);
    font-size: calc(var(--2e) * 0.875);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    transition: color 0.2s linear;
}

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

.nav-link.active {
    color: var(--temna);
    font-weight: 600;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--siva);
    gap: var(--1e);
}

.nav-tabs .nav-link {
    border: 1px solid var(--zelena);
    border-bottom: 1px solid var(--svetla);
    background-color: var(--zelena);
    color: var(--temna);
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    background-color: var(--modra);
    border-color: var(--modra);
}

.nav-tabs .nav-link.active {
    background-color: var(--svetla);
    border-color: var(--siva);
    color: var(--temna);
}

/* Pills */
.nav-pills .nav-link {
    border-radius: 0;
    background-color: transparent;
    color: var(--temna);
    border: 1px solid var(--svetlosiva);
}

.nav-pills .nav-link:hover {
    background-color: var(--svetlosiva);
}

.nav-pills .nav-link.active {
    background-color: var(--temnosiva);
    color: var(--svetla);
}

/* ============================================================================
   11. BREADCRUMBS
   ============================================================================ */

.breadcrumb {
    background-color: var(--sekundarna);
    padding: var(--2e);
    border-radius: 0;
    margin-bottom: var(--3e);
}

.breadcrumb-item {
    color: var(--temna);
}

.breadcrumb-item a {
    color: var(--temna);
    text-decoration: underline;
}

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

.breadcrumb-item.active {
    color: var(--temna);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--temna);
    content: ">";
}

/* ============================================================================
   12. PROGRESS
   ============================================================================ */

.progress {
    background-color: var(--siva);
    border-radius: 0;
    height: var(--2e);
}

.progress-bar {
    background-color: var(--temna);
}

.progress-bar.bg-primary {
    background-color: var(--temna) !important;
}

.progress-bar.bg-success {
    background-color: var(--uspeh) !important;
}

.progress-bar.bg-danger {
    background-color: var(--napaka) !important;
}

.progress-bar.bg-warning {
    background-color: var(--opozorilo) !important;
}

.progress-bar.bg-info {
    background-color: var(--info) !important;
}

/* ============================================================================
   13. TOOLTIPS & POPOVERS
   ============================================================================ */

.tooltip-inner {
    background-color: var(--temna);
    color: var(--svetla);
    border-radius: 0;
    padding: var(--e) var(--2e);
    font-size: calc(var(--e) * 1.5);
}

.bs-tooltip-auto[data-popper-placement^="top"] > .tooltip-arrow::before,
.bs-tooltip-top > .tooltip-arrow::before {
    border-top-color: var(--temna);
}

.bs-tooltip-auto[data-popper-placement^="right"] > .tooltip-arrow::before,
.bs-tooltip-end > .tooltip-arrow::before {
    border-right-color: var(--temna);
}

.bs-tooltip-auto[data-popper-placement^="bottom"] > .tooltip-arrow::before,
.bs-tooltip-bottom > .tooltip-arrow::before {
    border-bottom-color: var(--temna);
}

.bs-tooltip-auto[data-popper-placement^="left"] > .tooltip-arrow::before,
.bs-tooltip-start > .tooltip-arrow::before {
    border-left-color: var(--temna);
}

.popover {
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    background-color: var(--svetla);
}

.popover-header {
    background-color: var(--sekundarna);
    border-bottom: 1px solid var(--svetlosiva);
    padding: var(--2e) var(--3e);
}

.popover-body {
    padding: var(--3e);
    color: var(--temna);
}

/* ============================================================================
   14. TEXT UTILITIES
   ============================================================================ */

.text-primary {
    color: var(--temna) !important;
}

.text-secondary {
    color: var(--siva) !important;
}

.text-success {
    color: var(--uspeh) !important;
}

.text-danger {
    color: var(--napaka) !important;
}



.text-warning {
    color: var(--opozorilo) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-light {
    color: var(--svetla) !important;
}

.text-dark {
    color: var(--temna) !important;
}

.text-body {
    color: var(--temna) !important;
}

.text-muted {
    color: var(--temnosiva) !important;
}

/* ============================================================================
   15. BACKGROUND UTILITIES
   ============================================================================ */

.bg-primary {
    background-color: var(--temna);
}

.bg-secondary {
    background-color: var(--siva);
}

.bg-success {
    background-color: var(--uspeh);
}

.bg-danger {
    background-color: var(--napaka);
}

.bg-warning {
    background-color: var(--opozorilo);
}

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

.bg-light {
    background-color: var(--svetla);
}

.bg-dark {
    background-color: var(--temna);
}

.bg-body {
    background-color: var(--svetla);
}

.nuk-2 .badge.bg-primary,
.nuk-2 .badge.bg-secondary,
.nuk-2 .badge.bg-success,
.nuk-2 .badge.bg-danger,
.nuk-2 .badge.bg-warning,
.nuk-2 .badge.bg-info,
.nuk-2 .badge.bg-light,
.nuk-2 .badge.bg-dark,
.nuk-2 .badge.bg-body {
    background-color: transparent !important;
}

/* ============================================================================
   16. BORDERS
   ============================================================================ */

.border {
    border: 1px solid var(--svetlosiva) !important;
}

.border-primary {
    border-color: var(--temna) !important;
}

.border-secondary {
    border-color: var(--siva) !important;
}

.border-success {
    border-color: var(--uspeh) !important;
}

.border-danger {
    border-color: var(--napaka) !important;
}

.border-warning {
    border-color: var(--opozorilo) !important;
}

.border-info {
    border-color: var(--info) !important;
}

.border-light {
    border-color: var(--svetla) !important;
}

.border-dark {
    border-color: var(--temna) !important;
}

/* ============================================================================
   17. LIST GROUPS
   ============================================================================ */

.list-group-item {
    background-color: var(--svetla);
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    padding: var(--2e);
    color: var(--temna);
}

.list-group-item:hover {
    background-color: var(--ssvetla);
}

.list-group-item.active {
    background-color: var(--temnosiva);
    border-color: var(--temnosiva);
    color: var(--svetla);
}

.list-group-item.disabled {
    background-color: var(--svetlosiva);
    color: var(--siva);
}

/* ============================================================================
   18. SPINNERS & LOADING
   ============================================================================ */

.spinner-border {
    border-color: var(--siva);
    border-right-color: var(--temna);
}

.spinner-grow {
    background-color: var(--temna);
}

/* ============================================================================
   19. GENERIC ELEMENTS
   ============================================================================ */


body {
    background-color: transparent;
}

/* Links */
a {
    color: var(--temna);
    text-decoration: underline;
}

a:hover {
    color: var(--modra);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--temna);
    font-family: 'nuk-sans-alt', 'Times New Roman', Times, serif;
    font-weight: 400;
    line-height: 1.0;
}

h1 {
    font-size: var(--6e);
}

h2 {
    font-size: var(--4e);
    font-weight: 500;
}

h3 {
    font-size: calc(var(--2e) * 1.25);
    font-weight: 600;
}

h4 {
    font-size: calc(var(--e) * 1.4);
    font-weight: 600;
}

h5 {
    font-size: calc(var(--2e) * 0.875);
    font-weight: 600;
}

h6 {
    font-size: calc(var(--2e) * 0.875);
    font-weight: 300;
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 2px solid var(--temna);
    opacity: 1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* ============================================================================
   20. CONTAINER & GRID OVERRIDES
   ============================================================================ */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100%;
    padding-left:0;
    padding-right:0;
}

/* Focus visible override */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
}

/* Remove Bootstrap focus box-shadow globally */
*:focus-visible {
    outline-color: var(--temna);
    outline-offset: 3px;
    outline-style: solid;
    outline-width: 1px;
}

.nuk-2 .row {
	--bs-gutter-x:0;
	--bs-gutter-y: 0;
	display: block;
	flex-wrap: wrap;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto);
}

/* ============================================================================
   21. MARGINS
   ============================================================================ */

.m-0 { margin: 0 !important; }
.m-1 { margin: var(--1e) !important; }
.m-2 { margin: var(--2e) !important; }
.m-3 { margin: var(--3e) !important; }
.m-4 { margin: var(--4e) !important; }
.m-5 { margin: var(--5e) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--1e) !important; }
.mt-2 { margin-top: var(--2e) !important; }
.mt-3 { margin-top: var(--3e) !important; }
.mt-4 { margin-top: var(--4e) !important; }
.mt-5 { margin-top: var(--5e) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--1e) !important; }
.mb-2 { margin-bottom: var(--2e) !important; }
.mb-3 { margin-bottom: var(--3e) !important; }
.mb-4 { margin-bottom: var(--4e) !important; }
.mb-5 { margin-bottom: var(--5e) !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: var(--1e) !important; }
.ms-2 { margin-left: var(--2e) !important; }
.ms-3 { margin-left: var(--3e) !important; }
.ms-4 { margin-left: var(--4e) !important; }
.ms-5 { margin-left: var(--5e) !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: var(--1e) !important; }
.me-2 { margin-right: var(--2e) !important; }
.me-3 { margin-right: var(--3e) !important; }
.me-4 { margin-right: var(--4e) !important; }
.me-5 { margin-right: var(--5e) !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--1e) !important; margin-right: var(--1e) !important; }
.mx-2 { margin-left: var(--2e) !important; margin-right: var(--2e) !important; }
.mx-3 { margin-left: var(--3e) !important; margin-right: var(--3e) !important; }
.mx-4 { margin-left: var(--4e) !important; margin-right: var(--4e) !important; }
.mx-5 { margin-left: var(--5e) !important; margin-right: var(--5e) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--1e) !important; margin-bottom: var(--1e) !important; }
.my-2 { margin-top: var(--2e) !important; margin-bottom: var(--2e) !important; }
.my-3 { margin-top: var(--3e) !important; margin-bottom: var(--3e) !important; }
.my-4 { margin-top: var(--4e) !important; margin-bottom: var(--4e) !important; }
.my-5 { margin-top: var(--5e) !important; margin-bottom: var(--5e) !important; }

/* ============================================================================
   22. PADDING
   ============================================================================ */

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--1e) !important; }
.p-2 { padding: var(--2e) !important; }
.p-3 { padding: var(--3e) !important; }
.p-4 { padding: var(--4e) !important; }
.p-5 { padding: var(--5e) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--1e) !important; }
.pt-2 { padding-top: var(--2e) !important; }
.pt-3 { padding-top: var(--3e) !important; }
.pt-4 { padding-top: var(--4e) !important; }
.pt-5 { padding-top: var(--5e) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--1e) !important; }
.pb-2 { padding-bottom: var(--2e) !important; }
.pb-3 { padding-bottom: var(--3e) !important; }
.pb-4 { padding-bottom: var(--4e) !important; }
.pb-5 { padding-bottom: var(--5e) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: var(--1e) !important; }
.ps-2 { padding-left: var(--2e) !important; }
.ps-3 { padding-left: var(--3e) !important; }
.ps-4 { padding-left: var(--4e) !important; }
.ps-5 { padding-left: var(--5e) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: var(--1e) !important; }
.pe-2 { padding-right: var(--2e) !important; }
.pe-3 { padding-right: var(--3e) !important; }
.pe-4 { padding-right: var(--4e) !important; }
.pe-5 { padding-right: var(--5e) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--1e) !important; padding-right: var(--1e) !important; }
.px-2 { padding-left: var(--2e) !important; padding-right: var(--2e) !important; }
.px-3 { padding-left: var(--3e) !important; padding-right: var(--3e) !important; }
.px-4 { padding-left: var(--4e) !important; padding-right: var(--4e) !important; }
.px-5 { padding-left: var(--5e) !important; padding-right: var(--5e) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--1e) !important; padding-bottom: var(--1e) !important; }
.py-2 { padding-top: var(--2e) !important; padding-bottom: var(--2e) !important; }
.py-3 { padding-top: var(--3e) !important; padding-bottom: var(--3e) !important; }
.py-4 { padding-top: var(--4e) !important; padding-bottom: var(--4e) !important; }
.py-5 { padding-top: var(--5e) !important; padding-bottom: var(--5e) !important; }

/* ============================================================================
   23. SELECT2
   ============================================================================ */

/* --- Container --- */
.nuk-2 .select2-container {
    width: 100%;
} 

/* --- Single selection --- */
.nuk-2 .select2-container--default .select2-selection--single {
    background-color: var(--svetla);
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    height: auto;
    padding: var(--2e) var(--1e);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    letter-spacing: 0.5%;
    line-height: 1.4;
    color: var(--temna);
    transition: border-color 0.2s linear;
}

.nuk-2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--temna);
    line-height: 1;
    padding-left: 0;
    padding-right: var(--3e);
}

.nuk-2 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--siva);
}

.nuk-2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: var(--1e);
    width: var(--3e);
}

.nuk-2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--temna) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
    margin-top: -2px;
}

.nuk-2 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--temna) transparent;
    border-width: 0 4px 5px 4px;
}

/* --- Multiple selection --- */
.nuk-2 .select2-container--default .select2-selection--multiple {
    background-color: var(--svetla);
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    min-height: calc(var(--2e) + var(--2e) + var(--2e) + 2px);
    padding: var(--e) var(--1e);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    color: var(--temna);
    transition: border-color 0.2s linear;
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e);
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--sekundarna);
    border-radius: 0;
    color: var(--temna);
    padding: var(--e) var(--e);
    font-size: calc(var(--e) * 1.4);
    margin: 0;
    line-height: 1.4;
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--temnosiva);
    margin-right: var(--e);
    font-weight: 700;
    border: none;
    background: none;
    padding: 0;
    font-size: calc(var(--e) * 1.4);
    cursor: pointer;
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--napaka);
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    color: var(--temna);
    margin-top: 0;
    padding: var(--e) 0;
}

.nuk-2 .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--siva);
}

/* --- Focus / open state --- */
.nuk-2 .select2-container--default.select2-container--focus .select2-selection--single,
.nuk-2 .select2-container--default.select2-container--focus .select2-selection--multiple,
.nuk-2 .select2-container--default.select2-container--open .select2-selection--single,
.nuk-2 .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--temna);
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
}

/* --- Disabled state --- */
.nuk-2 .select2-container--default.select2-container--disabled .select2-selection--single,
.nuk-2 .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--svetlosiva);
    border-color: var(--svetlosiva);
    color: var(--siva);
    cursor: not-allowed;
    opacity: 1;
}

.nuk-2 .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--siva);
}

/* --- Dropdown panel --- */
.nuk-2 .select2-container--default .select2-dropdown {
    background-color: var(--svetla);
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    box-shadow: 0 0 var(--e) rgba(0, 0, 0, 0.2);
    z-index: 1060;
}

.nuk-2 .select2-container--default .select2-dropdown--above {
    border-bottom: 1px solid var(--svetlosiva);
}

.nuk-2 .select2-container--default .select2-dropdown--below {
    border-top: 1px solid var(--svetlosiva);
}

/* --- Search field inside dropdown --- */
.nuk-2 .select2-container--default .select2-search--dropdown {
    padding: var(--e);
}

.nuk-2 .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--svetlosiva);
    border-radius: 0;
    padding: var(--e) var(--1e);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    color: var(--temna);
    outline: none;
    background-color: var(--svetla);
}

.nuk-2 .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--temna);
    outline: 1px solid var(--temna);
    outline-offset: 3px;
    box-shadow: none;
}

/* --- Results / options list --- */
.nuk-2 .select2-container--default .select2-results__options {
    max-height: 300px;
    overflow-y: auto;
}

.nuk-2 .select2-container--default .select2-results__option {
    padding: var(--e) var(--e);
    font-family: 'nuk-sans-alt', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    color: var(--temna);
    transition: background-color 0.2s linear;
}

.nuk-2 .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--svetlosiva);
    color: var(--temna);
}

.nuk-2 .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--sekundarna);
    color: var(--temna);
}

.nuk-2 .select2-container--default .select2-results__option--disabled {
    color: var(--siva);
    background-color: var(--svetla);
}

/* --- Option group headings --- */
.nuk-2 .select2-container--default .select2-results__group {
    padding: var(--e) var(--2e);
    font-weight: 600;
    font-size: calc(var(--e) * 1.75);
    color: var(--temnosiva);
}

/* --- Loading indicator --- */
.nuk-2 .select2-container--default .select2-results__option--load-more,
.nuk-2 .select2-container--default .select2-results__option[role="alert"] {
    color: var(--temnosiva);
    font-style: italic;
    padding: var(--e) var(--2e);
}

/* --- Clear button (allowClear) --- */
.nuk-2 .select2-container--default .select2-selection__clear {
    color: var(--temnosiva);
    font-weight: 700;
    font-size: calc(var(--e) * 1.4);
    margin-right: var(--e);
    cursor: pointer;
    /*stran*/
    display: none;
}

.nuk-2 .select2-container--default .select2-selection__clear:hover {
    color: var(--napaka);
}

/* --- Scrollbar styling inside dropdown --- */
.nuk-2 .select2-container--default .select2-results__options::-webkit-scrollbar {
    width: var(--e);
}

.nuk-2 .select2-container--default .select2-results__options::-webkit-scrollbar-track {
    background: var(--svetlosiva);
}

.nuk-2 .select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--siva);
}

.nuk-2 .select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: var(--temnosiva);
}

/* --- Validation states --- */
.nuk-2 .is-invalid + .select2-container--default .select2-selection--single,
.nuk-2 .is-invalid + .select2-container--default .select2-selection--multiple {
    border: 2px solid var(--napaka);
}

.nuk-2 .is-valid + .select2-container--default .select2-selection--single,
.nuk-2 .is-valid + .select2-container--default .select2-selection--multiple {
    border: 2px solid var(--uspeh);
}


/*izjeme*/

.nuk-2 .table-striped > tbody > tr:nth-of-type(2n+1) {
	--bs-table-accent-bg: var(--svetla);
	color: var(--temna);
}

/*list group*/

/* ============================================================================
   LIST GROUP — NUK overrides
   Covers: .list-group, .list-group-item, all colour variants,
   flush, numbered, horizontal, action items, checkboxes/radios
   ============================================================================ */

/* ── Container ─────────────────────────────────────────────────────── */
.nuk-2 .list-group {
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

/* ── Base item ─────────────────────────────────────────────────────── */
.list-group-item {
    background-color: var(--svetla);
    border: none;
    border-bottom: 1px solid var(--svetlosiva);
    border-radius: 0 !important;   /* override Bootstrap's :first-child/:last-child radii */
    padding: var(--e) 0;
    color: var(--temna);
    font-family: 'nuk-sans-alt', Arial, sans-serif;
    font-size: calc(var(--e) * 1.4);
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    display: block;
}

/* alternating rows — mirrors the table pattern */
.list-group-item:nth-child(even) {
   /* background-color: var(--sekundarna); */
}

.list-group-item:first-child {
    border-top: 1px solid var(--svetlosiva);
}

/* ── Hover / action items ───────────────────────────────────────────── */
.list-group-item-action {
    color: var(--temna);
    text-decoration: none;
    cursor: pointer;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--svetlosiva);
    color: var(--temna);
    outline: none;
    text-decoration: none;
    z-index: 1;
}

.list-group-item-action:active {
    background-color: var(--temna);
    color: var(--svetla);
}

/* ── Active ────────────────────────────────────────────────────────── */
.list-group-item.active {
    background-color: var(--temna);
    border-color: var(--temna);
    color: var(--svetla);
    font-weight: 600;
    z-index: 2;
}

.list-group-item.active a,
.list-group-item.active .list-group-item-text {
    color: var(--svetla);
}

/* ── Disabled ──────────────────────────────────────────────────────── */
.list-group-item.disabled,
.list-group-item:disabled {
    background-color: var(--svetlosiva);
    color: var(--siva);
    pointer-events: none;
}

/* ── Flush (no outer borders) ──────────────────────────────────────── */
.list-group-flush > .list-group-item {
    border-right: none;
    border-left: none;
    border-radius: 0 !important;
}

.list-group-flush > .list-group-item:first-child {
    border-top: none;
}

.list-group-flush > .list-group-item:last-child {
    border-bottom: none;
}

/* ── Numbered ──────────────────────────────────────────────────────── */
.list-group-numbered > .list-group-item::before {
    color: var(--temnosiva);
    font-weight: 600;
}

/* ── Horizontal ────────────────────────────────────────────────────── */
.list-group-horizontal > .list-group-item {
    border-bottom: 1px solid var(--svetlosiva);
    border-right: 1px solid var(--svetlosiva);
}

.list-group-horizontal > .list-group-item:first-child {
    border-left: 1px solid var(--svetlosiva);
    border-radius: 0 !important;
}

.list-group-horizontal > .list-group-item:last-child {
    border-radius: 0 !important;
}

/* ── Colour variants ───────────────────────────────────────────────── */
.list-group-item-primary {
    background-color: var(--svetlosiva);
    color: var(--temna);
    border-color: var(--siva);
}

.list-group-item-secondary {
    background-color: var(--sekundarna);
    color: var(--temnosiva);
    border-color: var(--svetlosiva);
}

.list-group-item-success {
    background-color: var(--sveteluspeh);
    color: var(--temna);
    border-color: var(--uspeh);
}

.list-group-item-danger {
    background-color: var(--svetlanapaka);
    color: var(--temna);
    border-color: var(--napaka);
}

.list-group-item-warning {
    background-color: var(--svetloopozorilo);
    color: var(--temna);
    border-color: var(--opozorilo);
}

.list-group-item-info {
    background-color: var(--svetleinformacije);
    color: var(--temna);
    border-color: var(--info);
}

.list-group-item-light {
    background-color: var(--svetla);
    color: var(--temna);
    border-color: var(--svetlosiva);
}

.list-group-item-dark {
    background-color: var(--temnosiva);
    color: var(--svetla);
    border-color: var(--temna);
}

/* action hover for colour variants */
a.list-group-item-primary:hover,
button.list-group-item-primary:hover  { background-color: var(--siva);            color: var(--temna); }
a.list-group-item-success:hover,
button.list-group-item-success:hover  { background-color: var(--uspeh);           color: var(--svetla); }
a.list-group-item-danger:hover,
button.list-group-item-danger:hover   { background-color: var(--napaka);          color: var(--svetla); }
a.list-group-item-warning:hover,
button.list-group-item-warning:hover  { background-color: var(--opozorilo);       color: var(--svetla); }
a.list-group-item-info:hover,
button.list-group-item-info:hover     { background-color: var(--info);            color: var(--svetla); }
a.list-group-item-dark:hover,
button.list-group-item-dark:hover     { background-color: var(--temna);           color: var(--svetla); }

/* ── Checkbox / radio items ────────────────────────────────────────── */
.list-group-item label {
    font-family: 'nuk-sans-alt', Arial, sans-serif;
    font-size: calc(var(--2e) * 0.875);
    font-weight: 300;
    color: var(--temna);
    cursor: pointer;
}

.list-group-item .form-check-input:checked {
    background-color: var(--temna);
    border-color: var(--temna);
}

.list-group-item .form-check-input:checked + .form-check-label {
    font-weight: 600;
}

/* ── Helper text inside items ──────────────────────────────────────── */
.list-group-item .list-group-item-text {
    color: var(--siva);
    font-size: calc(var(--2e) * 0.8125);
    margin-bottom: 0;
}

.list-group-item .list-group-item-heading {
    color: var(--temna);
    font-weight: 600;
    margin-bottom: calc(var(--e) * .5);
}