:root {
  --primaryHex: 10, 76, 111;
  
  /* Extended color system matching main application */
  --primaryColour: rgb(10, 76, 111);
  --primaryAlpha: rgba(10, 76, 111, 0.3);
  --primaryMedAlpha: rgba(10, 76, 111, 0.5);
  --primaryLightAlpha: rgba(10, 76, 111, 0.1);
  --primaryVeryLightAlpha: rgba(10, 76, 111, 0.02);
  --primarySelected: rgb(8, 61, 89);
  --primary70: rgb(7, 53, 78);
  
  /* Additional semantic colors */
  --success: #42be65;
  --warning: #f1c21b;
  --error: #da1e28;
  --info: #0f62fe;
  
  /* Neutral colors */
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;
  
  /* Text colors */
  --text-primary: #161616;
  --text-secondary: #525252;
  --text-tertiary: #a8a8a8;
}

.welcome-page .logo {
  width: 64px;
}

.icon-banner {
  width: 32px;
}

.body-container {
  margin-top: 0; /* Remove top margin for login page */
  padding-bottom: 0; /* Remove bottom padding for login page */
  height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
}

.welcome-page li {
  list-style: none;
  padding: 4px;
}

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0;
}

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}
.grants-page .card .card-title {
  font-size: 120%;
  font-weight: bold;
}
.grants-page .card .card-title img {
  width: 100px;
  height: 100px;
}
.grants-page .card label {
  font-weight: bold;
}

.center-flex {
  min-height: 100dvh; /* Use dynamic viewport height for mobile browsers */
  height: 100vh; /* Fallback for older browsers */
  justify-content: center;
  display: flex;
  padding: 1rem 1rem 2rem 0.5rem; /* Reduced top/bottom padding */
  align-items: center;
  box-sizing: border-box;
}

/* ==========================================================================
   Modern Login Container - Glassmorphism Design
   ========================================================================== */

.login {
  width: 600px;
  max-width: 90vw;
  max-height: 90vh; /* Prevent login card from being too tall */
  overflow-y: auto; /* Allow scrolling within card if needed */
}

.outline {
  /* Modern glassmorphism card foundation */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  backdrop-filter: blur(10px);
  border-radius: 1.25rem;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.outline:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bx--text-input-wrapper {
  width: 100% !important;
}

/* ==========================================================================
   Modern Button System - Matching Main Application
   ========================================================================== */

/* Global button base styling */
.bx--btn {
    border-radius: 0.75rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* Primary button styling - matching main application exactly */
.bx--btn--primary {
    background: linear-gradient(135deg, var(--primaryColour) 0%, var(--primaryMedAlpha) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--primaryMedAlpha) !important;
}

.bx--btn--primary:hover {
    background: linear-gradient(135deg, var(--primaryColour) 0%, var(--primary70) 100%) !important;
    background-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px var(--primaryAlpha) !important;
    border: none !important;
}

.bx--btn--primary:focus {
    background: linear-gradient(135deg, var(--primaryColour) 0%, var(--primary70) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 6px 16px var(--primaryAlpha), 0 0 0 3px var(--primaryLightAlpha) !important;
}

.bx--btn--primary:active {
    background: linear-gradient(135deg, var(--primaryColour) 0%, var(--primary70) 100%) !important;
    background-color: transparent !important;
    border: none !important;
}

/* Secondary button styling - matching main application card footer style */
.bx--btn--secondary {
  background: linear-gradient(135deg, var(--gray-70) 0%, var(--gray-50) 100%) !important;
      /* background: linear-gradient(135deg, #525252 0%, #6f6f6f 100%) !important; */
    background-color: transparent !important;
    border: none !important;
    /* color: rgba(0, 0, 0, 0.7) !important; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.bx--btn--secondary:hover {
    /* background: linear-gradient(135deg, #525252 0%, #6f6f6f 100%) !important; */
    background: linear-gradient(135deg, var(--gray-80) 0%, var(--gray-60) 100%) !important;

    background-color: transparent !important;
    border: none !important;
    transform: translateY(-1px) !important;
    /* color: rgba(0, 0, 0, 0.7) !important; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.bx--btn--secondary:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px var(--primaryLightAlpha) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

.bx--btn--secondary:active {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* ==========================================================================
   Modern Form Input Styling
   ========================================================================== */

.bx--text-input:focus, 
.bx--text-area:focus, 
.bx--text-area:active, 
.bx--text-area:focus.bx--text-area:active, 
.bx--list-box__field:focus, 
.bx--date-picker__input:focus {
  outline: none !important;
  border-bottom: 3px solid var(--primaryColour) !important;
  border-left: 1px solid var(--primaryColour) !important;
  background: linear-gradient(135deg, var(--primaryLightAlpha) 0%, var(--primaryVeryLightAlpha) 100%) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

.bx--text-input {
  transition: all 0.2s ease !important;
  height: 3rem !important; /* 50% increase from default 2rem */
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.bx--label {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

/* Form content area styling */
.login .bx--tile {
  background: transparent !important;
  border: none !important;
}

/* Checkbox styling improvements */
.form-check {
  margin: 1rem 0;
}

.form-check-label {
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 0.5rem;
}

/* ==========================================================================
   Modern Card Header System - Matching Main Application
   ========================================================================== */

.card-header {
  background: linear-gradient(135deg, var(--primaryColour) 0%, var(--primaryMedAlpha) 100%);
  border-bottom: 1px solid var(--primaryMedAlpha);
  border-radius: 1rem 1rem 0rem 0rem;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Glass effect overlay */
.card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

.card-header > .bx--tile {
  border-radius: 1rem 1rem 0rem 0rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.card-header h1,
.card-header h2 {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Modern Login Footer - Matching Main Application
   ========================================================================== */

.login-button-footer {
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0 0 1.25rem 1.25rem;
  padding: 1rem 1.5rem;
}

.login-button-footer > .bx--tile {
  border-radius: 0rem 0rem 1.25rem 1.25rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.login-button-footer .bx--btn {
  margin-right: 0.75rem;
}

body {
  background-image: url("/images/hibiscus3.png");
  background-repeat: no-repeat;
}

/*.text-input-formatter {
    padding-bottom: 1rem;
}*/