:root{
  --sidebar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient */
  --sidebar-hover: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); /* Pink gradient */
  --sidebar-text: #ffffff;
  --accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Blue gradient */
  --accent-contrast: #fff;
  --main-bg: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); /* Peach gradient */
  --card-bg: rgba(255, 255, 255, 0.95);
  --shadow-color: rgba(0, 0, 0, 0.1);
}

html, body {
  height: 100%;
  background: var(--main-bg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 260px;
  /* Without this the sidebar is a flex item that shrinks. .app-main is
     `flex: 1` (shrink: 1), so on a page whose content is wider than the
     viewport - the 11-column Message Log table, for one - the browser shrinks
     the sidebar toward zero to satisfy the overflow and the navigation
     disappears, even though it is present in the DOM. Pinning the width keeps
     the nav usable and lets the page's own .table-responsive scroll instead. */
  flex: 0 0 260px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow: hidden;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}

.app-sidebar .nav {
  gap: 0.15rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.12);
  /* Bootstrap's .nav sets `flex-wrap: wrap`, and the markup carries
     `class="nav flex-column"` so flex-direction is column. Wrap in a column
     means an item that runs out of vertical room starts a NEW COLUMN beside the
     others instead of continuing downwards - which is why Logout appeared
     alongside Registration Form rather than under it, and why the nav never
     scrolled. nowrap forces the overflow into the vertical scrollbar this
     element already has. */
  flex-wrap: nowrap;
}

.app-sidebar .nav::-webkit-scrollbar {
  width: 8px;
}

.app-sidebar .nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.app-sidebar .nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.app-sidebar .nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}

.app-sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  margin: 0.1rem 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  font-size: 0.9rem;
  /* The nav is a nowrap column, so buttons must keep their natural height
     rather than being squashed to fit; the overflow is meant to become a
     scrollbar. A flex item only gets that automatic minimum while its
     overflow is visible, so this must not gain `overflow: hidden`. */
  flex-shrink: 0;
}

.app-sidebar .nav-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.app-sidebar .nav-link.active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.app-sidebar .nav-link i {
  font-size: 1.2rem;
  margin-right: 0.8rem;
  flex: 0 0 auto;
}

/* The trailing icon is decorative, so it must not claim horizontal margin:
   the sidebar is a fixed 260px and that spare 0.8rem was the margin that made
   the longest labels ("Confirmed Bookings", "Backup & Restore") wrap onto a
   second line, dragging the icon down with them. */
.app-sidebar .nav-link i:last-child {
  margin-right: 0;
  margin-left: auto;
}

/* One line per button, always. The label is the flexible part, so it absorbs
   whatever space is left and truncates rather than wrapping if the font turns
   out wider than expected. min-width:0 is required for truncation to work in
   a flex item, otherwise the text refuses to shrink below its own width. */
.app-sidebar .nav-link > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main {
  flex: 1 1 auto;
  /* min-width:0 lets the main column actually shrink inside the flex row.
     Without it a wide table sets an implicit min-content floor, which pushes
     the whole row wider than the viewport instead of scrolling within
     .table-responsive. */
  min-width: 0;
  padding: 2rem;
}

.card {
  border: none;
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card .card-body {
  padding: 1.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 25px;
  padding: 0.6rem 1.5rem;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
}

/* User profile section */
.app-sidebar .mt-auto {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar .rounded-circle {
  background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .app-sidebar {
    width: 200px;
    /* Must track the flex-basis above, or the sidebar stays 260px wide on
       small screens and squeezes the content. */
    flex: 0 0 200px;
  }
  
  .app-sidebar .nav-link {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  
  .app-sidebar .nav-link i {
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  /* The narrow-screen sidebar is 200px, which is tighter still. Trim the
     horizontal padding and the label size so the longest labels still fit on
     one line here, rather than falling back to the ellipsis on most buttons. */
  .app-sidebar .nav-link {
    padding: 0.45rem 0.5rem;
  }
  .app-sidebar .nav-link > span {
    font-size: 0.8rem;
  }
  .app-sidebar .nav-link i {
    margin-right: 0.45rem;
  }
}

/* --- Mobile app (≤768px): comfortable touch targets --------------------- */
@media (max-width: 768px) {
  /* 16px inputs stop iOS from zooming the page on focus. */
  .form-control,
  .form-select {
    font-size: 1rem;
  }

  /* Scorecard: bigger score fields and tap-friendly save/clear buttons. */
  .sc-score {
    min-width: 56px;
    min-height: 44px;
    font-size: 1.05rem;
    text-align: center;
  }
  .sc-mark-form .btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Smoother horizontal scrolling for wide tables on phones. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .app-main .card .card-body {
    padding: 1rem;
  }

  /* Full-width cards on phones: no side gutters, edge-to-edge surfaces.
     Pages wrap their content in container-fluid (often with p-4), so the
     gutters have to be cancelled with !important to beat Bootstrap's own
     utility. Content keeps its 1rem inset inside each card. */
  .app-main .container-fluid,
  .app-main .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .app-main .card {
    border-radius: 0;
  }
}