html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

:root {
    --primary: #2d6a4f; /* Deep green */
    --accent: #ffb703; /* Warm yellow */
    --background: #f8f9fa; /* Light gray */
    --surface: #ffffff; /* Card background */
    --danger: #e63946; /* Error red */
    --text-main: #22223b; /* Main text */
    --text-muted: #6c757d; /* Muted text */
}

body, .login-bg {
    background: var(--background) !important;
}

.login-card {
    background: var(--surface);
    border-radius: 1rem;
}

.brand-title {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    transition: background 0.2s;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: #40916c;
        border-color: #40916c;
    }

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

    .text-accent:hover {
        color: #ff9900 !important;
    }

.form-label {
    color: var(--text-main);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(45, 106, 79, 0.15);
}

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

/* Utility for other components */
.card {
    border-radius: 1rem;
}

#dynamicModal .modal-body {
    padding: 1.5rem;
}

#dynamicModal .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

#dynamicModal .btn-close {
    display: block;
    float: right;
    font-size: 1.5rem;
    opacity: 1;
    background: none;
    border: none;
}
#dynamicModal {
    z-index: 1058;
}

/* Level 2 modal and backdrop */
#dynamicModal2 .modal-body {
    padding: 1.5rem;
}

#dynamicModal2 .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

#dynamicModal2 .btn-close {
    display: block;
    float: right;
    font-size: 1.5rem;
    opacity: 1;
    background: none;
    border: none;
}
#dynamicModal2 {
    z-index: 1060;
}

.modal-backdrop.level2-backdrop {
    z-index: 1059;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 60px;
    display: inline-block;
}


.toast.text-bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.toast.text-bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.toast.text-bg-info {
    background-color: #0dcaf0 !important;
    color: #fff !important;
}

.toast.text-bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Menu card hover animation */
.menu-card,
.add-menu-card {
    transition: box-shadow 0.35s cubic-bezier(.22,1,.36,1), transform 0.32s cubic-bezier(.22,1,.36,1) !important;
}

    .menu-card:hover,
    .add-menu-card:hover {
        box-shadow: 0 8px 32px 0 rgba(45, 106, 79, 0.18), 0 1.5px 6px 0 rgba(0,0,0,0.08);
        transform: translateY(-6px) scale(1.03);
        z-index: 2;
    }

/* Category card hover animation */
.category-card,
.add-category-card {
    transition: box-shadow 0.35s cubic-bezier(.22,1,.36,1), transform 0.32s cubic-bezier(.22,1,.36,1) !important;
}

    .category-card:hover,
    .add-category-card:hover {
        box-shadow: 0 8px 32px 0 rgba(45, 106, 79, 0.18), 0 1.5px 6px 0 rgba(0,0,0,0.08);
        transform: translateY(-6px) scale(1.03);
        z-index: 2;
    }

/* Item card hover animation */
.item-card,
.add-item-card {
    transition: box-shadow 0.35s cubic-bezier(.22,1,.36,1), transform 0.32s cubic-bezier(.22,1,.36,1) !important;
}

    .item-card:hover,
    .add-item-card:hover {
        box-shadow: 0 8px 32px 0 rgba(45, 106, 79, 0.18), 0 1.5px 6px 0 rgba(0,0,0,0.08);
        transform: translateY(-6px) scale(1.03);
        z-index: 2;
    }


.icon-selector-svg.selected {
    background: #eaf4ff;
}

.icon-selector-svg:hover {
    border-color: #007bff;
}


/* Select2 – make it feel like Bootstrap */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: .25rem .375rem;
    min-height: calc(2.3rem + 2px);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    margin-top: -5px;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e9f2ff;
    border: 0;
    color: #0d6efd;
    border-radius: .25rem;
    padding: .15rem .5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 10px;
    padding-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #0d6efd;
    margin-right: .25rem;
    border-right: 0;
}

.select2-container--default .select2-selection--multiple {
    height: 0;
}