:root{
  --bg-start: #ffffff;
  --bg-end: #2787c7;
  --primary-dark: #0e2c4a;
  --accent-yellow: #FFD400;
  --accent-red: #E53935;
  --card-radius: 20px;
  --card-shadow: 0 4px 25px rgba(0,0,0,0.15);
  --gap: 1rem;
  --btn-min-width: 120px;
}

html,body{ height:100%; }

/* Apply the centered, decorative landing styles only to non-admin pages */
body:not(.admin-root){
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--bg-start), var(--bg-end));
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Shared button styling */
.btn-custom{
  min-width: var(--btn-min-width);
  font-weight: 600;
  border-radius: 12px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn-custom:hover,
.btn-custom:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(14,44,74,0.12);
  outline: none;
}

.btn-custom:focus-visible{
  box-shadow: 0 0 0 4px rgba(14,44,74,0.12);
}

/* Faculty button style (white background) */
.btn-faculty{
  background: #ffffff;
  color: var(--primary-dark);
  border: 1px solid rgba(14,44,74,0.08);
  box-shadow: none;
}

.btn-faculty:hover,
.btn-faculty:focus-visible{
  background: #ffffff;
  color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(14,44,74,0.08);
}

/* Set Pending button styling */
.btn-set-pending{
  background-color: #343a40; /* dark grey */
  color: #ffffff; /* white text */
  border: 1px solid rgba(0,0,0,0.12);
}
.btn-set-pending:hover,
.btn-set-pending:focus{
  background-color: #23272b; /* slightly darker on hover */
  color: #ffffff;
}
.btn-set-pending[disabled],
.btn-set-pending:disabled{
  background-color: transparent;
  color: rgba(0,0,0,0.45);
  border-color: rgba(0,0,0,0.06);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .btn-custom,
  *{ transition:none !important; animation:none !important; }
}

/* Admin pages shared styles (scoped to avoid touching public pages) */
.admin-root {
  background-color: #f8f9fa;
  font-family: 'Segoe UI', sans-serif;
}

.admin-root .navbar {
  /* Complementary gradient using the sidebar blue family */
  background: linear-gradient(90deg, rgba(11,59,111,1) 0%, rgba(6,48,88,1) 60%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(6,24,48,0.12);
}

.admin-root .navbar-brand img {
  height: 40px;
  margin-right: 10px;
}

.admin-root .navbar .navbar-brand span{ font-weight:600; color:#eef7ff }

.admin-root .navbar .navbar-text{ color: rgba(255,255,255,0.9); }
.admin-root .navbar .avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; margin-left:.5rem }

/* Avatar: circular, subtle border and shadow */
.admin-root .avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 6px rgba(2,8,23,0.35);
}

@media (max-width:576px){
  .admin-root .avatar{ width:32px; height:32px }
}

/* Main content UI polish */
.admin-root .card .card-header-like{
  display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid #eef3fb; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

.calendar-grid .cell{ transition: transform 160ms ease, box-shadow 160ms ease; }
.calendar-grid .cell:hover{ transform: translateY(-6px); box-shadow: 0 8px 20px rgba(12,24,48,0.08); }

.legend { display:flex; gap:.5rem; align-items:center }
.legend .chip{ padding:6px 10px; border-radius:999px; font-size:12px; color:#fff }
.legend .chip.submission{ background:#dc3545 }
.legend .chip.event{ background:#17a2b8 }

@media (max-width:767.98px){
  .calendar-header{ flex-direction:column; gap:.5rem }
}

/* reduce navbar height slightly on small screens to preserve space */
@media (max-width:576px){
  .admin-root .navbar{ padding-top:.4rem; padding-bottom:.4rem }
  .admin-root .navbar-brand img{ height:32px }
}

.admin-root .submenu {
  margin-left: 1rem;
  font-size: 0.9rem;
}

.admin-root .content { padding: 2rem; }

.admin-root .card { border-radius: 15px; box-shadow: 0 3px 8px rgba(0,0,0,0.1); }

.admin-root .table th { background-color: #007bff; color: white; }

.admin-root .reminders ul,
.admin-root .announcements ul { list-style-type: disc; padding-left: 20px; }

/* Keep the admin navbar fixed at top so it's always on top of the layout */
.admin-root .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* push the main container below the fixed navbar */
.admin-root .container-fluid {
  padding-top: 70px; /* accommodates navbar height */
}

/* Darker sidebar background for improved contrast */
.admin-root .sidebar {
  background-color: #0b3b6f; /* darker blue shade */
  color: #eaf4ff;
  min-height: calc(100vh - 70px);
  padding-top: 1rem;
}

.admin-root .sidebar .nav-link{
  color: rgba(234,244,255,0.92);
  border-radius: 8px;
  padding: .6rem .9rem;
}

.admin-root .sidebar .nav-link:hover{
  background-color: rgba(255,255,255,0.04);
  color: #fff;
}

.admin-root .sidebar .nav-link.active,
.admin-root .sidebar .nav-link[aria-current="page"]{
  background-color: #0b537a; /* a contrasting blue */
  color: #fff;
  font-weight: 600;
}

/* Submenu items use a distinct highlight from top-level links */
.admin-root .sidebar .submenu .nav-link:hover{
  background-color: rgba(255, 212, 0, 0.14);
  color: #fff;
}

.admin-root .sidebar .submenu .nav-link.active,
.admin-root .sidebar .submenu .nav-link[aria-current="page"]{
  background-color: #3f2f00;
  color: #ffd84d;
  font-weight: 700;
}

.admin-root .sidebar .nav-link .bi {
  color: rgba(234,244,255,0.92);
  margin-right: .6rem;
}

/* badges and small UI elements inside sidebar */
.admin-root .sidebar .badge{
  background-color: rgba(255,255,255,0.06);
  color: #eaf4ff;
}

/* Ensure collapsed sidebar (smaller widths) keeps readable contrast */
@media (max-width: 767.98px){
  .admin-root .sidebar { background-color: #162028; }
  .admin-root .sidebar .nav-link{ color: rgba(230,238,248,0.95); }
}

/* Add a subtle right divider + shadow to visually separate sidebar from main content */
.admin-root .sidebar{
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: 4px 0 12px rgba(8,16,24,0.08);
}

/* Apply the padding to the existing .content column so no markup change is needed */
.admin-root .content{
  padding-left: 1.25rem; /* small offset so content doesn't touch the divider */
}

@media (min-width: 992px){
  .admin-root .sidebar{ border-right-width: 2px; box-shadow: 6px 0 18px rgba(8,16,24,0.08); }
  .admin-root .content{ padding-left: 1.5rem; }
}

/* Active list items (faculty selection) - stronger, darker background */
.faculty-list .list-group-item.active,
.faculty-list .list-group-item.active:focus,
.faculty-list .list-group-item.active:hover{
  background-color: #07294a; /* darker blue */
  color: #fff !important;
  border-color: rgba(255,255,255,0.08);
}

.faculty-row.active{
  background-color: #07294a !important; /* darker blue */
  color: #fff !important;
}

/* Ensure table cells and inner labels inherit readable color when row is active */
.faculty-row.active td,
.faculty-row.active .label{
  color: #fff !important;
}