/* Import Montserrat font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Bootstrap color overrides for Questa brand */
:root {
  /* Questa brand green */
  --bs-primary: #6fac3a;
  --bs-link-color: #6fac3a;
  --bs-link-hover-color: #4a7227;
  --bs-primary-rgb: 111,172,58;
  
  /* Contrast green for improved accessibility */
  --questa-green-contrast: #4c7628;
  
  /* Custom light gray background - #EFF6F7 */
  --bs-light: #EFF6F7;
  --bs-light-rgb: 239,246,247;
  
  /* Update related Bootstrap utilities that use light color */
  --bs-light-bg-subtle: #EFF6F7;
  --bs-light-border-subtle: #d9e5e6;
  --bs-light-text-emphasis: #5a6c6e;
  
  /* Table striping and hover colors */
  --bs-table-striped-bg: #EFF6F7;
  --bs-table-hover-bg: rgba(239, 246, 247, 0.7);
  --bs-table-accent-bg: #f1fdfe;
  
  /* Secondary/gray colors for consistency */
  --bs-secondary-bg: #EFF6F7;
  --bs-secondary-bg-subtle: #EFF6F7;
  
  /* Border colors */
  --bs-border-color: #d9e5e6;
  --bs-border-color-translucent: rgba(239, 246, 247, 0.5);
  
  /* Gray scale overrides to use our custom light gray */
  --bs-gray-100: #EFF6F7;
  --bs-gray-200: #e3eced;
  
  /* Font family */
  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Apply Montserrat globally */
body {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Remove any default margins that create gaps */
main {
  margin: 0;
  padding: 0;
}

main > * {
  margin-top: 0;
}

/* Global H1 styling */
h1 {
  color: #086375;
}

/* Content width container - limits content to 1000px on most pages */
.content-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Full-width override for specific pages like search results */
.content-full-width {
  max-width: none !important;
}

/* Global input max-width */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea,
.form-control {
  max-width: 300px;
}

/* Unified save button styles for About You flow */
.save-btn {
  background: #B2D235;
  border-color: #B2D235;
  color: #1d4b5c;
  min-width: 270px;
  padding: .875rem;
}

.save-btn:hover:not([disabled]) {
  background: #a3c02f;
  border-color: #a3c02f;
}

.save-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Force table striped rows to use exact sidebar color */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #EFF6F7 !important;
  --bs-table-bg-type: #EFF6F7;
}

/* Subtle hover for table rows */
.table-striped.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > * {
  background-color: #f1fdfe !important;
}

/* Pagination styling - use teal for active page */
.pagination .page-item.active .page-link {
  background-color: #086375;
  border-color: #086375;
  color: #fff;
}

.pagination .page-link {
  color: #495057;
}

.pagination .page-link:hover {
  color: #495057;
  background-color: #e8f5e0;
  border-color: #dee2e6;
}

.pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(8, 99, 117, 0.25);
}

/* Table header styling - use teal background */

.table thead,
.table-dark {
  background-color: #086375 !important;
  border-color: #086375 !important;
  color: #fff !important;
}

.table thead th {
  background-color: #086375 !important;
  border-color: #086375 !important;
  color: #fff !important;
  overflow: hidden;
  font-weight: 400;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table thead th:first-of-type {
  border-radius: 8px 0 0 0;
}

.table thead th:last-of-type {
  border-radius: 0 8px 0 0;
}

.table td {
  padding: 10px 1em;
}

.table thead a {
  color: #fff !important;
}

.table thead a:hover {
  color: #e0e0e0 !important;
}

/* Action buttons styling - applies to small outline buttons in tables */
.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-danger,
.btn-sm.btn-outline-secondary,
.btn-sm.btn-outline-warning,
.btn-sm.btn-outline-info {
  background-color: #d9e6e9;
  border-color: #EFF6F7;
  color: #5E9EAA;
  transition: all 0.2s ease-in-out;
}

.btn-sm.btn-outline-primary i,
.btn-sm.btn-outline-danger i,
.btn-sm.btn-outline-secondary i,
.btn-sm.btn-outline-warning i,
.btn-sm.btn-outline-info i {
  color: #5E9EAA;
}

/* Hover states - white background with action-specific colors */
.btn-sm.btn-outline-primary:hover {
  background-color: white !important;
  border-color: #6fac3a !important;
  color: #6fac3a !important;
}

.btn-sm.btn-outline-primary:hover i {
  color: #6fac3a;
}

.btn-sm.btn-outline-danger:hover {
  background-color: white !important;
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}

.btn-sm.btn-outline-danger:hover i {
  color: #dc3545;
}

.btn-sm.btn-outline-secondary:hover {
  background-color: white !important;
  border-color: #6fac3a !important;
  color: #6fac3a !important;
}

.btn-sm.btn-outline-secondary:hover i {
  color: #6fac3a;
}

.btn-sm.btn-outline-warning:hover {
  background-color: white !important;
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}

.btn-sm.btn-outline-warning:hover i {
  color: #ffc107;
}

.btn-sm.btn-outline-info:hover {
  background-color: white !important;
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
}

.btn-sm.btn-outline-info:hover i {
  color: #0dcaf0;
}

/* Focus states for accessibility */
.btn-sm.btn-outline-primary:focus,
.btn-sm.btn-outline-danger:focus,
.btn-sm.btn-outline-secondary:focus,
.btn-sm.btn-outline-warning:focus,
.btn-sm.btn-outline-info:focus {
  background-color: #CEE0E4;
  box-shadow: 0 0 0 0.2rem rgba(94, 158, 170, 0.25);
}

/* Buttons */
.btn-primary {
  --bs-btn-color:#fff;
  --bs-btn-bg:#4c7628;
  --bs-btn-border-color:#4c7628;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#639c35;
  --bs-btn-hover-border-color:#5b8f32;
  --bs-btn-focus-shadow-rgb:76,118,40;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#5b8f32;
  --bs-btn-active-border-color:#53832e;
  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg:#4c7628;
  --bs-btn-disabled-border-color:#4c7628;
  background-color:#4c7628;
  border-color:#4c7628;
}

.btn-outline-primary {
  --bs-btn-color:#6fac3a;
  --bs-btn-border-color:#6fac3a;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#6fac3a;
  --bs-btn-hover-border-color:#6fac3a;
  --bs-btn-focus-shadow-rgb:111,172,58;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#5b8f32;
  --bs-btn-active-border-color:#5b8f32;
  --bs-btn-disabled-color:#6fac3a;
  --bs-btn-disabled-bg:transparent;
  --bs-btn-disabled-border-color:#6fac3a;
}

.btn-secondary {
    --bs-btn-color:#fff;
    --bs-btn-bg:#086375;
    --bs-btn-border-color:#086375;
    --bs-btn-hover-color:#032f38;
    --bs-btn-hover-bg:#065160;
    --bs-btn-hover-border-color:#054a56;
    --bs-btn-focus-shadow-rgb:8,99,117;
    --bs-btn-active-color:#032f38;
    --bs-btn-active-bg:#054a56;
    --bs-btn-active-border-color:#04424d;
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:#086375;
    --bs-btn-disabled-border-color:#086375;
    background-color:#086375;
    border-color:#086375;
    color:#fff;
}

.btn-outline-secondary {
    --bs-btn-color:#2E2E2E;
    --bs-btn-border-color:#DDDDDD;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#086375;
    --bs-btn-hover-border-color:#086375;
    --bs-btn-focus-shadow-rgb:8,99,117;
    --bs-btn-active-color:#032f38;
    --bs-btn-active-bg:#065160;
    --bs-btn-active-border-color:#054a56;
    --bs-btn-disabled-color:#086375;
    --bs-btn-disabled-bg:transparent;
    --bs-btn-disabled-border-color:#086375;
}

/* ============================================= */
/* Responsive Design */
/* ============================================= */

/* Profile Avatar & Dropdown */
.profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 20px;
}

.profile-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.profile-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #4c7628;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
}

.profile-dropdown:hover .profile-avatar,
.profile-link:focus .profile-avatar {
    background-color: #5b8f32;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
}

.profile-dropdown:hover .profile-menu,
.profile-link:focus + .profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-menu-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #0d2d56;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.profile-menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.profile-menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.profile-menu-item:hover {
    background-color: #f5f5f5;
    color: #6fac3a;
}

.profile-menu-item i {
    font-size: 1rem;
}

/* Header icon buttons */
header .btn-outline-secondary:hover {
    background-color: transparent !important;
    border-color: #6fac3a !important;
    color: #6fac3a !important;
}

header .btn-outline-secondary:hover i {
    color: #6fac3a !important;
}

@media (max-width: 767.98px) {
  /* Swap header logo on mobile */
  .header-logo-full {
    display: none !important;
  }
  
  .header-logo-mobile {
    margin: 5px 0;
    display: block !important;
  }
  
  /* Hide button text on mobile, show icon only */
  .btn-text-mobile-hide {
    display: none !important;
  }
}
@media (min-width: 768px) {
    /* Swap header logo on mobile */
    .header-logo-full {
        display: block !important;
    }

    .header-logo-mobile {
        display: none !important;
    }

    /* Hide button text on mobile, show icon only */
    .btn-text-mobile-hide {
        display: block !important;
    }
}


/* Table responsive container - prevent horizontal overflow */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  max-width: 100%;
}

/* Ensure tables don't break layout */
.table-responsive table {
  min-width: 100%;
  /*width: max-content;*/
}

@media (max-width: 991.98px) {
  .table-responsive {
    margin-bottom: 1rem;
  }
  
  /* Make sure action buttons stay together */
  .table td.text-nowrap {
    white-space: nowrap;
  }
}

/* ============================================= */
/* Corner Tooltip (Toast-style) */
/* ============================================= */

.tip {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 320px;
  background: #086375;
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;
  z-index: 9999;
}

.tip.show {
  opacity: 1;
  transform: translateY(0);
}

/* Help icon styling */
label[data-tip] .bi-question-circle {
  cursor: help;
  transition: color 0.2s ease;
  color: #A4B7BB;
}

label[data-tip] .bi-question-circle:hover,
label[data-tip].active .bi-question-circle {
  color: #086375;
}

/* Ensure the span wrapper allows pointer events */
label[data-tip] span {
  display: inline-flex;
  align-items: center;
}

/* Hide tooltip icons on mobile - tooltips will be shown in modals instead */
@media (max-width: 767.98px) {
  label[data-tip] .bi-question-circle {
    display: none;
  }
}

/* ============================================= */
/* Global Scrollbar Styling (brand color) */
/* ============================================= */
/* Firefox */
html {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #6fac3a #EFF6F7; /* thumb track */
}

/* WebKit-based browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #EFF6F7;
}

::-webkit-scrollbar-thumb {
  background-color: #6fac3a;
  border-radius: 6px;
  border: 2px solid #EFF6F7; /* creates space effect */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #5b8f32; /* darker on hover */
}

/* Smaller scrollbars inside elements that already have limited space */
textarea::-webkit-scrollbar,
.pre-scrollable::-webkit-scrollbar {
  width: 8px;
}

/* Keycloak registration page accessibility fixes */
span[data-kc-msg="requiredFields"],
.kc-required-fields,
#kc-form-options span {
  color: #495057 !important;
}

/* Visually hidden utility (Bootstrap 5 compatible) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keycloak login button color contrast fix */
#kc-login,
.kcButtonPrimaryClass,
.pf-c-button.pf-m-primary {
  background-color: #4c7628 !important;
  border-color: #4c7628 !important;
  color: #fff !important;
}

#kc-login:hover,
.kcButtonPrimaryClass:hover,
.pf-c-button.pf-m-primary:hover {
  background-color: #5b8f32 !important;
  border-color: #5b8f32 !important;
}

/* Global toast styles (unscoped copy for dynamic JS toasts) */
.toast-wrapper { position: fixed; z-index:1080; max-width:420px; font-family:inherit; box-shadow:0 6px 18px -4px rgba(0,0,0,.18); border-radius:999px; overflow:hidden; color:#062345; background:#C6DE62; }
.toast-inner { display:flex; align-items:center; gap:.85rem; padding:.65rem 1.35rem .65rem .75rem; line-height:1.25; position:relative; }
.toast-icon { flex:0 0 46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:#0b4b7c; box-shadow:0 0 0 4px rgba(255,255,255,.45); }
.toast-content { flex:1 1 auto; font-size:1.05rem; font-weight:600; color:#062345; }
.toast-pos-top-left { top:1rem; left:1rem; }
.toast-pos-top-center { top:1rem; left:50%; transform:translateX(-50%); }
.toast-pos-top-right { top:1rem; right:1rem; }
.toast-pos-bottom-left { bottom:1rem; left:1rem; }
.toast-pos-bottom-center { bottom:1rem; left:50%; transform:translateX(-50%); }
.toast-pos-bottom-right { bottom:1rem; right:1rem; }
.toast-success { background:#C6DE62; }
.toast-warning { background:#FFE08A; }
.toast-error { background:#FFB4AE; }
.toast-enter { opacity:0; }
.toast-leave { opacity:1; }
@keyframes toast-slide-in-left { from { transform:translateX(-120%); opacity:0 } to { transform:translateX(0); opacity:1 } }
@keyframes toast-slide-out-left { from { transform:translateX(0); opacity:1 } to { transform:translateX(-120%); opacity:0 } }
@keyframes toast-slide-in-right { from { transform:translateX(120%); opacity:0 } to { transform:translateX(0); opacity:1 } }
@keyframes toast-slide-out-right { from { transform:translateX(0); opacity:1 } to { transform:translateX(120%); opacity:0 } }
.from-left.toast-enter { animation:toast-slide-in-left .35s ease-out forwards; }
.from-left.toast-leave { animation:toast-slide-out-left .3s ease-in forwards; }
.from-right.toast-enter { animation:toast-slide-in-right .35s ease-out forwards; }
.from-right.toast-leave { animation:toast-slide-out-right .3s ease-in forwards; }
@media (max-width:600px){ .toast-wrapper { max-width:92%; } }