/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* Bootstrap Colors */
:root {
    --bs-primary: #182857 !important;
    --bs-primary-rgb: 18, 28, 57 !important;
    
    --bs-danger: #C71F1F !important;
    --bs-danger-rgb: 199, 31, 63 !important;
    
    --bs-secondary: #595959 !important;
    --bs-secondary-rgb: 59, 59, 59 !important;
    
    --bs-black: #242424 !important;
    --bs-black-rgb: 24, 24, 24 !important;
}

.btn-primary {
    --bs-btn-bg: #182857 !important;
    --bs-btn-border-color: #182857 !important;
    
    --bs-btn-bg-rgb: 18, 28, 57 !important;
    --bs-btn-border-color-rgb:18, 28, 57 !important;
    
    --bs-btn-hover-bg: #081847 !important;
    --bs-btn-hover-border-color: #081847 !important;
    
    --bs-btn-hover-bg-rgb: 8, 18, 47 !important;
    --bs-btn-hover-border-color-rgb:8, 18, 47 !important;
    
    --bs-btn-active-bg: #000837 !important;
    --bs-btn-active-border-color: #000837 !important;
    
    --bs-btn-active-bg-rgb: 0, 8, 37 !important;
    --bs-btn-active-border-color-rgb:0, 8, 37 !important;
}

/* Teacher Styles */
.teacher-select {
    position: relative;
}

.teacher-select button[data-role="removeTeacher"] {
    position: absolute;
    top: 0px;
    right: 11px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.password-input {
    position: relative;
}

.password-input button[data-role="viewPassword"] {
    position: absolute;
    top: 0px;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.form-select {
    padding-right: 1rem !important;
    padding-left: 2.5rem !important;
    background-position: left 0.75rem center !important;
    text-overflow: ellipsis;
}


/* Navbar Styles */
.navbar-nav .nav-link {
    color: #FFFFFF !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.8) !important;
}

.nav-link.current-page {
    text-decoration: underline;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border: none;
}


/* Font Styles */
body {
    font-family: 'Calibri', 'Funnel Sans', sans-serif
}

.title-font {
    font-family: 'PT Serif', serif
}


/* Google Translate */
#google_translate_element{
    display: none;
}


/* General Styles */
html, body {
    margin: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto; /* Allows scrolling only when needed */
}

.form-control {
    background-color: #EEEEEE;
}

/* Responsive helper classes */
.responsive-spacing {
  padding: 1rem;
}

@media (min-width: 992px) {
  .responsive-spacing {
    padding: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .responsive-spacing {
    padding: 2rem;
  }
}

/* Increase container width on very large screens */
@media (min-width: 1600px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1540px;
  }
}

/* Make sure modals have sufficient padding on larger screens */
@media (min-width: 992px) {
  .modal-body {
    padding: 1.5rem;
  }
  
  .modal-header, .modal-footer {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 1200px) {
  .modal-body {
    padding: 2rem;
  }
  
  .modal-header, .modal-footer {
    padding: 1.25rem 2rem;
  }
}

/* Adjust conference table cell padding on larger screens */
@media (min-width: 992px) {
  .table td, .table th {
    padding: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .table td, .table th {
    padding: 1rem;
  }
}

/* Mobile schedule table styles */
@media (max-width: 767.98px) {  /* sm and below */
    .mobile-day-table h4 {
        color: #182857;
        border-bottom: 2px solid #182857;
        padding-bottom: 8px;
    }
    
    .mobile-day-table .table {
        table-layout: fixed;
    }
    
    .mobile-day-table .table td {
        vertical-align: middle;
        height: 50px;
        word-break: break-word;
    }
    
    .mobile-day-table .bg-success {
        font-weight: bold;
    }
    
    #mobileDateSelector {
        font-weight: bold;
        border-width: 2px;
    }
    
    /* Make sure the date dropdown is not too small */
    #mobileDateSelector option {
        padding: 8px;
    }
}

@media (max-width: 767.98px) {
    main.container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .table-responsive {
        margin-bottom: 1.5rem;
    }
}

/* Admin schedule page responsive styles */
.controls-container {
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .controls-container select {
        font-size: 1rem;
        height: calc(2.5rem + 2px);
    }
    
    .controls-container .btn {
        height: 44px;
        font-size: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Make sure optgroups are readable */
    .controls-container select optgroup {
        font-weight: bold;
        font-style: normal;
        padding: 5px 0;
    }
    
    .controls-container select option {
        padding: 8px 4px;
    }
    
    /* Adjust spacing for blackout requests on mobile */
    #blackoutRequestsContainer {
        margin-top: 1.5rem;
        padding: 1rem;
    }
    
    #blackoutRequestsContainer h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Make buttons more tappable on mobile */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
    }
    
    /* Ensure modal buttons are properly sized */
    .modal-footer .btn {
        flex: 1;
        margin: 0 5px;
    }
}