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 #ffffff, 0 0 0 0.25rem #f5a301;
}

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

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
    color: #0a1e34;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

.logo a {
    display: block;
    width: 92px;
    height: 43px;
    background-image: url(../images/logo-white.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s ease-in-out;
    transition-delay: .4s;
    font-size: 0;
}

/* Header */
header, .site-header {
  background-color: #0a1e34;
  color: #ffffff;
  border-bottom: 4px solid #f5a301;
  padding: 1rem 0;
}

.navbar {
    background-color: #0a1e34;
    color: #ffffff;
    padding: 1rem 0;
}

header a, .navbar a, .site-header a {
  color: #f5a301;
  text-decoration: none;
  font-weight: 600;
}

header a:hover, .navbar a:hover, .site-header a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Footer */
footer, .site-footer {
  background-color: #0a1e34;
  color: #ffffff;
  border-top: 4px solid #f5a301;
  padding: 1rem 0;
  text-align: center;
}

/* Buttons */
.btn, button, input[type="submit"] {
  background-color: #f5a301;
  color: #0a1e34;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.btn:hover, button:hover, input[type="submit"]:hover {
  background-color: #0a1e34;
  color: #f5a301;
  border: 1px solid #f5a301;
}

/* Forms */
.form-control, input, select, textarea {
  border: 1px solid #9c9b98;
  border-radius: 4px;
  padding: 0.5rem;
  background-color: #ffffff;
  color: #0a1e34;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: #f5a301;
  outline: none;
  box-shadow: 0 0 0 0.2rem #f5a30133;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #0a1e34;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Links */
a {
  color: #0a1e34;
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: #f5a301;
}

/* Cards / Panels */
.card, .panel, .content-box {
  background-color: #ffffff;
  border: 1px solid #9c9b98;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0a1e3422;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Utility classes */
.bg-primary {
  background-color: #0a1e34 !important;
  color: #ffffff !important;
}

.bg-accent {
  background-color: #f5a301 !important;
  color: #0a1e34 !important;
}

.text-muted {
  color: #9c9b98 !important;
}

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

.text-primary {
  color: #0a1e34 !important;
}

/* Welcoming banner */
.banner, .welcome-banner {
    background: #0a1e34;
    color: #ffffff;
    padding: 2rem 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 4px 16px #0a1e3422;
}

/* Make Select2 single select match Bootstrap .form-control height */
.select2-container--default .select2-selection--single {
    height: 43px; /* Bootstrap 5 default input height */
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px; /* Adjust as needed for vertical alignment */
        padding-left: 0;
        padding-right: 0;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px; /* slightly less than container for alignment */
        right: 6px;
    }

/* yellow */
.status-pending {
    background-color: #fff3cd !important;
    color: #856404 !important;
    box-shadow: none !important;
}
/* blue */
.status-processing {
    background-color: #cce5ff !important;
    color: #004085 !important;
    box-shadow: none !important;
}
/* green */
.status-approved {
    background-color: #d4edda !important;
    color: #155724 !important;
    box-shadow: none !important;
}
/* red */
.status-rejected {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    box-shadow: none !important;
}
/* gray */
.status-cancelled {
    background-color: #e2e3e5 !important;
    color: #383d41 !important;
    box-shadow: none !important;
}
/* green */
.status-active {
    background-color: #d4edda !important;
    color: #155724 !important;
    box-shadow: none !important;
}
/* gray */
.status-inactive {
    background-color: #e2e3e5 !important; 
    color: #383d41 !important;
    box-shadow: none !important;
}
/* yellow */
.status-expired {
    background-color: #fff3cd !important; 
    color: #856404 !important;
    box-shadow: none !important;
}

/* Notification bell badge positioning */
#notificationBell {
    position: relative;
}

    #notificationBell .badge {
        position: absolute;
        top: -6px;
        right: -6px;
        font-size: 0.75em;
        min-width: 1.2em;
        height: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
/* Ensure notification dropdown items have dark text on hover */
#notificationList .dropdown-item,
#notificationList .dropdown-item:hover,
#notificationList .dropdown-item:focus {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

/* Hide Bootstrap dropdown arrow for culture selector */
.no-caret.dropdown-toggle::after {
    display: none !important;
}

/* RTL override for Bootstrap  */
html[dir="rtl"] .modal-header .btn-close {
    margin: -.5rem auto -.5rem -.5rem !important;
}
html[dir="rtl"] .dropdown-menu {
    text-align: right !important;
}

/* RTL override datatables styles*/
html[dir="rtl"] div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
}
html[dir="rtl"] div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: flex-start;
    margin-right: auto;
    margin-left: 0;
}