/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* app/assets/stylesheets/application.css */

/* ============================================================
   Brand variables. Defaults below match the original navy/blue
   scheme. The application layout injects a <style> block that
   re-declares any of these on schools with a custom palette
   (see School#branding_palette_with_defaults and the
   `branding` partial in app/views/layouts/).
   ============================================================ */
:root {
  --brand-header:         #003366;
  --brand-header-dim:     #002244;
  --brand-header-deeper:  #001a36;
  --brand-primary:        #4a90e2;
  --brand-primary-strong: #357abd;
  --brand-primary-soft:   #f0f7ff;
  --brand-on-primary:     #ffffff;
  --brand-link:           #1e40af;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 1rem;
}

nav {
  justify-content: flex-end;
  display: flex;
  font-size: 0.875em;
  gap: 0.5rem;
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem;
}

nav a {
  display: inline-block;
}

main {
  max-width: 1024px;
  margin: 0 auto;
}

.alert,
.error {
  color: red;
}

.notice {
  color: green;
}

section.school {
  display: flex;
  gap: 1rem;
  flex-direction: row;
}

section.school img {
  border-radius: 8px;
  flex-basis: 50%;
  max-width: 50%;
}

.students-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.students-section h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #333;
  font-size: 1.5rem;
}

.student-search-container {
  position: relative;
  margin-bottom: 2rem;
}

.student-search-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

#student-search {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

#student-search:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0.25rem;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

.search-result-item {
  padding: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: #f5f5f5;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.search-result-item label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  margin: 0;
  font-weight: normal;
}

.search-result-item label strong {
  color: #333;
  font-size: 1rem;
}

.student-email {
  color: #666;
  font-size: 0.875rem;
}

.no-results,
.search-error {
  padding: 1rem;
  text-align: center;
  color: #666;
}

.search-error {
  color: #d32f2f;
}

.selected-students-container {
  margin-top: 2rem;
}

.selected-students-container h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.25rem;
}

.selected-students-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.selected-students-list .no-selection {
  padding: 1rem;
  text-align: center;
  color: #999;
  font-style: italic;
}

.selected-student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.selected-student-item .student-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.selected-student-item strong {
  color: #333;
  font-size: 1rem;
}

.remove-student {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.remove-student:hover {
  background: #d32f2f;
}

.reason-selection-container {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
}

.reason-selection-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
  font-size: 1rem;
}

#detention-reason {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#detention-reason:focus {
  outline: none;
  border-color: var(--brand-primary);
}

#detention-reason:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  color: #999;
}

.comments-container {
  margin-top: 1.5rem;
}

.comments-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
  font-size: 1rem;
}

#detention-comments {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#detention-comments:focus {
  outline: none;
  border-color: var(--brand-primary);
}

#detention-comments::placeholder {
  color: #999;
}

.details-container {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
}

.details-container h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.25rem;
}

.details-row {
  display: flex;
  gap: 1rem;
}

.details-field {
  flex: 1;
}

.details-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
  font-size: 1rem;
}

#detention-type,
#cover-teacher,
#room,
#detention-date,
#detention-subject,
#detention-time,
#detention-end,
#detention-duration {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#detention-type:focus,
#cover-teacher:focus,
#room:focus,
#detention-date:focus,
#detention-subject:focus,
#detention-time:focus,
#detention-end:focus,
#detention-duration:focus {
  outline: none;
  border-color: var(--brand-primary);
}

#detention-type:disabled,
#cover-teacher:disabled,
#room:disabled,
#detention-time:disabled,
#detention-duration:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  color: #999;
}

.save-button-container {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.btn-save {
  background-color: #4caf50;
  color: white;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-save:hover {
  background-color: #45a049;
}

.btn-save:active {
  background-color: #3d8b40;
}

.btn-save:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Red "Set Detention" treatment for the detention create/edit buttons.
   Uses .btn.btn-set-detention specificity to beat the generic .btn rule. */
.btn.btn-set-detention {
  background-color: #e53935;
  color: white;
  border-color: #e53935;
}

.btn.btn-set-detention:hover {
  background-color: #d32f2f;
}

.btn.btn-set-detention:active {
  background-color: #c62828;
}

.set-detention-note {
  margin-top: 0.5rem;
  font-style: italic;
  color: #777;
  font-size: 0.9rem;
}

.detentions-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.detentions-container h1 {
  margin-bottom: 1.5rem;
  color: #333;
}

.detentions-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.detentions-table thead {
  background-color: var(--brand-primary);
  color: white;
}

.detentions-table th {
  padding: 1rem;
  text-align: left;
  font-weight: bold;
  font-size: 0.95rem;
}

.detentions-table td {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.detentions-table tbody tr:hover {
  background-color: #f9f9f9;
}

.detentions-table tbody tr:last-child td {
  border-bottom: none;
}

.no-comments {
  color: #999;
  font-style: italic;
}

.no-detentions {
  text-align: center;
  padding: 3rem;
  background: #f9f9f9;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.no-detentions p {
  margin: 1rem 0;
  color: #666;
  font-size: 1.1rem;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #e0e0e0;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: var(--brand-primary-strong);
}

.detention-form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.detention-form-container h1 {
  margin-bottom: 1.5rem;
  color: #333;
}

.detention-form-container .students-section {
  margin-top: 0;
}

.actions-cell {
  white-space: nowrap;
}

.btn-action {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid;
  transition: all 0.2s;
  margin-right: 0.5rem;
}

.btn-edit {
  background-color: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.btn-edit:hover {
  background-color: var(--brand-primary-strong);
}

.btn-delete {
  background-color: #f44336;
  color: white;
  border-color: #f44336;
}

.btn-delete:hover {
  background-color: #d32f2f;
}

.edit-detention-form {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  max-width: 800px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: Arial, Helvetica, sans-serif;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-primary);
}

textarea.form-control {
  resize: vertical;
}

.student-info-display {
  padding: 0.75rem;
  background: white;
  border: 2px solid #ddd;
  border-radius: 4px;
}

.student-info-display strong {
  color: #333;
  font-size: 1rem;
}

.form-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
  display: flex;
  gap: 1rem;
}

.audit-logs-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.audit-logs-container h1 {
  margin-bottom: 1.5rem;
  color: #333;
}

.audit-logs-info {
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #2196f3;
}

.audit-logs-info p {
  margin: 0;
  color: #1565c0;
}

.audit-logs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.audit-logs-table thead {
  background-color: #424242;
  color: white;
}

.audit-logs-table th {
  padding: 1rem;
  text-align: left;
  font-weight: bold;
  font-size: 0.95rem;
}

.audit-logs-table td {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.audit-logs-table tbody tr:hover {
  background-color: #f9f9f9;
}

.audit-logs-table tbody tr:last-child td {
  border-bottom: none;
}

.audit-logs-table .timestamp {
  white-space: nowrap;
  color: #666;
  font-size: 0.9rem;
}

.action-cell {
  white-space: nowrap;
}

.action-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: capitalize;
}

.action-badge.detention_created {
  background-color: #4caf50;
  color: white;
}

.action-badge.detention_updated {
  background-color: #ff9800;
  color: white;
}

.action-badge.detention_deleted {
  background-color: #f44336;
  color: white;
}

.action-badge.detention_type_created {
  background-color: #0d9488;
  color: white;
}

.action-badge.detention_type_updated {
  background-color: #7c3aed;
  color: white;
}

.action-badge.detention_type_deleted {
  background-color: #92400e;
  color: white;
}

.user-email {
  color: #666;
  font-size: 0.875rem;
}

.comments-cell {
  max-width: 300px;
}

.no-data {
  color: #999;
  font-style: italic;
}

.no-audit-logs {
  text-align: center;
  padding: 3rem;
  background: #f9f9f9;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.no-audit-logs p {
  margin: 1rem 0;
  color: #666;
  font-size: 1.1rem;
}

.view-navigation {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.view-navigation .btn {
  font-weight: 500;
  transition: all 0.2s;
}

.view-navigation .btn-active {
  background-color: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
  font-weight: bold;
}

.view-navigation .btn-active:hover {
  background-color: var(--brand-primary-strong);
}

.filter-options {
  margin-bottom: 1.5rem;
}

.filter-options form {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-options label {
  font-weight: bold;
  color: #555;
  margin: 0;
}

.filter-options .form-select {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  min-width: 200px;
}

.filter-options .form-select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.student-vtg {
  font-size: 0.9em;
  color: #666;
}

.toggle-container {
  margin-bottom: 1.5rem;
}

.toggle-buttons {
  display: inline-flex;
  gap: 0;
  border: 2px solid var(--brand-primary);
  border-radius: 4px;
  overflow: hidden;
}

.toggle-btn {
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  border: none;
  transition: all 0.2s;
  background-color: white;
  color: var(--brand-primary);
  font-weight: 500;
}

.toggle-btn:hover {
  background-color: var(--brand-primary-soft);
}

.toggle-btn.toggle-active {
  background-color: var(--brand-primary);
  color: white;
  font-weight: bold;
}

.toggle-btn.toggle-active:hover {
  background-color: var(--brand-primary-strong);
}

.toggle-btn:not(:first-child) {
  border-left: 1px solid var(--brand-primary);
}

.charts-section {
  margin-bottom: 3rem;
}

.charts-section h2 {
  margin-bottom: 1.5rem;
  color: #333;
  font-size: 1.5rem;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.chart-container {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
  margin-bottom: 1rem;
  color: #555;
  font-size: 1.1rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    padding: 1rem;
  }
}

/* Login Page Styles */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--brand-header) 0%, var(--brand-header-deeper) 100%);
  padding: 1rem;
}

.login-page ~ nav,
body:has(.login-page) nav {
  display: none;
}

.login-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 3rem;
  width: 100%;
  max-width: 450px;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}

.login-header h1 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.75rem;
  font-weight: bold;
}

.login-header p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

.alert-message {
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  color: #c33;
  font-size: 0.95rem;
}

.notice-message {
  background-color: #efe;
  border: 1px solid #cfc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  color: #3c3;
  font-size: 0.95rem;
}

.login-form {
  margin-bottom: 1.5rem;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 600;
  font-size: 0.95rem;
}

.login-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
}

.login-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.login-input::placeholder {
  color: #999;
}

.login-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--brand-on-primary);
  background: linear-gradient(180deg, var(--brand-header) 0%, var(--brand-header-deeper) 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-header-deeper) 35%, transparent);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-header-deeper) 45%, transparent);
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-header-deeper) 30%, transparent);
}

.login-footer {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.forgot-password-link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.forgot-password-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .login-container {
    padding: 2rem 1.5rem;
  }
  
  .login-logo {
    max-width: 200px;
  }
  
  .login-header h1 {
    font-size: 1.5rem;
  }
}

/* ======================================================================
   Dashboard navigation. Two layouts share the same markup hooks
   (#wrapperHeader, #nav, .nav-dropdown-menu). body.menu-top renders the
   classic horizontal bar; body.menu-left the vertical sidebar. Left-hand
   menu is a Next Gen UI option (see schools.menu_position). Rules common to
   both layouts are unscoped; rules that differ are scoped by the body class.
   ====================================================================== */

/* Sortable.js drag preview row */
.sortable-ghost {
  opacity: 0.4;
  background: #e0e7ff !important;
}

/* ---- Shared menu chrome ---- */
#wrapperHeader #nav {
  background-color: var(--brand-header-dim);
  padding: 0;
}

#wrapperHeader #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#wrapperHeader #nav li {
  margin: 0;
  padding: 0;
}

#wrapperHeader #nav h2 {
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
}

#wrapperHeader #nav a,
#wrapperHeader #nav button {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--brand-on-primary);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.75rem;
  transition: background-color 0.2s;
}

#wrapperHeader #nav a:hover {
  background-color: var(--brand-header);
}

/* Legacy look: top-level menu labels render in all-caps. Scoped to
   direct-child <h2> links so it skips dropdown sub-items and the user-name
   menu (both stay title case). Next Gen UI opts out below. */
#wrapperHeader #nav > ul > li:not(.user-menu-dropdown) > h2 a {
  text-transform: uppercase;
}

#wrapperHeader #nav .nav-dropdown {
  position: relative;
}

#wrapperHeader #nav .nav-dropdown-toggle {
  cursor: pointer;
}

#wrapperHeader #nav .nav-dropdown-menu {
  display: none;
  list-style: none;
  margin: 0;
  z-index: 1000;
}

#wrapperHeader #nav .nav-dropdown-menu li {
  width: 100%;
}

#wrapperHeader #nav .nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: normal;
  font-size: 0.78rem;
}

#wrapperHeader #nav .nav-dropdown-menu .nav-dropdown-subitem a {
  padding-left: 1.75rem;
  color: #b8c5d6;
}

/* ======================================================================
   TOP MENU (body.menu-top) — classic horizontal bar with the logo banner
   above it and absolutely-positioned flyout dropdowns.
   ====================================================================== */
body.menu-top #wrapperHeader {
  width: 100%;
  background-color: var(--brand-header);
  margin-bottom: 1rem;
}

body.menu-top #wrapperHeader table.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

body.menu-top #wrapperHeader .header {
  padding: 0;
}

body.menu-top #wrapperHeader #logo {
  padding: 1rem;
  text-align: center;
}

body.menu-top #wrapperHeader #logo a {
  display: inline-block;
}

body.menu-top #wrapperHeader #logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Direct-child only: the nested .nav-dropdown-menu <ul>s must keep the
   shared `display: none` until revealed, so this must not match them. */
body.menu-top #wrapperHeader #nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Hover (desktop) + focus-within (keyboard) reveal the flyout submenu. */
body.menu-top #wrapperHeader #nav .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--brand-header-dim);
  padding: 0.25rem 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  border-top: 1px solid var(--brand-header);
}

body.menu-top #wrapperHeader #nav .nav-dropdown:hover > .nav-dropdown-menu,
body.menu-top #wrapperHeader #nav .nav-dropdown:focus-within > .nav-dropdown-menu {
  display: block;
}

body.menu-top #wrapperHeader #nav .nav-dropdown-menu a {
  white-space: nowrap;
}

@media (max-width: 768px) {
  body.menu-top #wrapperHeader #nav > ul {
    flex-direction: column;
    align-items: stretch;
  }
  body.menu-top #wrapperHeader #nav li {
    width: 100%;
  }
  body.menu-top #wrapperHeader #nav li[style*="margin-left:auto"] {
    margin-left: 0 !important;
  }
  /* On narrow screens, drop the absolute-positioned submenus inline,
     collapsed until the user taps the toggle. */
  body.menu-top #wrapperHeader #nav .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border-top: none;
    background-color: var(--brand-header-deeper);
    padding-left: 0.5rem;
  }
  body.menu-top #wrapperHeader #nav .nav-dropdown:not(.is-open) > .nav-dropdown-menu {
    display: none;
  }
  body.menu-top #wrapperHeader #nav .nav-dropdown.is-open > .nav-dropdown-menu {
    display: block;
  }
  body.menu-top #wrapperHeader #nav .nav-dropdown:hover > .nav-dropdown-menu,
  body.menu-top #wrapperHeader #nav .nav-dropdown:focus-within > .nav-dropdown-menu {
    display: none;
  }
  body.menu-top #wrapperHeader #nav .nav-dropdown.is-open:hover > .nav-dropdown-menu,
  body.menu-top #wrapperHeader #nav .nav-dropdown.is-open:focus-within > .nav-dropdown-menu {
    display: block;
  }
}

/* ======================================================================
   LEFT MENU (body.menu-left) — full-height left bar holding the User block
   (top) and a static "My Apps" / "Dashboards" menu (below). The logo header
   band and main content stack in the column to the bar's right. Markup:
   #appShell > [ #sidebar | #contentColumn > (#appHeader + main) ].
   ====================================================================== */

/* Fill the viewport so the left bar runs the full height even when the
   content is short. */
body.menu-left {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.menu-left #appShell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* ---- Left vertical bar ---- */
body.menu-left #sidebar {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  background-color: var(--brand-header-dim);
  color: var(--brand-on-primary);
  display: flex;
  flex-direction: column;
}

/* ---- Column to the right: header band on top, content below ---- */
body.menu-left #contentColumn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Logo header — spans the content column only (right of the bar). Fixed
   height with the logo centred horizontally and vertically. */
body.menu-left #appHeader {
  background-color: var(--brand-header);
  height: 180px;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.menu-left #appHeader a {
  display: inline-flex;
}

body.menu-left #appHeader img {
  display: block;
  max-height: 132px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* width:100% so the column-flex auto margins centre rather than shrink the
   content to its intrinsic width (which would collapse grids like the Setup
   page to a single column). Capped + centred by the global `main` max-width. */
body.menu-left #contentColumn > main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  /* Horizontal gutter so content never butts against the sidebar. Without it
     the only left gap is the max-width:1200 centring, which collapses to 0
     once the content column is narrower than 1200px (≈ viewport < 1492px).
     box-sizing:border-box is required (no global border-box reset) so the
     padding doesn't push width:100% into horizontal overflow. */
  box-sizing: border-box;
  padding-inline: 2rem;
}

/* ---- User block (top of the bar) ---- */
/* Min-height matches #appHeader (the content-column logo band) so the block's
   bottom border lines up with the header's bottom edge. Use min-height (not a
   fixed height) so that when the Notifications quick-link is present the block
   grows to fit it -- a hard height clipped the link's hit area and let
   #sidebarMenu overlay it, making it unclickable. */
body.menu-left #sidebarUser {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 180px;
  box-sizing: border-box;
  padding: 6px 0 8px;
  display: flex;
  flex-direction: column;
}

/* SchoolDashboard app icon, centred above the user dropdown. The icon carries
   its own dark gradient + rounded corners, so it sits straight on the bar. */
body.menu-left #sidebarLogo {
  padding: 14px 16px 8px;
  text-align: center;
}

body.menu-left #sidebarLogo .sidebar-logo-link {
  display: inline-block;
  line-height: 0;
}

body.menu-left #sidebarLogo .sidebar-logo-img {
  display: block;
  width: 80px;
  height: 80px;
}

body.menu-left #sidebarUser ul,
body.menu-left .sidebar-userlinks {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.menu-left #sidebarUser .user-name-display {
  display: block;
  color: var(--brand-on-primary);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 12px 16px 8px;
  cursor: pointer;
}

body.menu-left #sidebarUser .user-role {
  opacity: 0.85;
  font-size: 0.8em;
  font-weight: normal;
}

/* User dropdown (Customise / Setup / School Settings / Log out). Hidden
   until hover (desktop), focus-within (keyboard), or the nav-dropdown
   Stimulus controller's .is-open class (touch tap). Overlays the elements
   below (absolute) rather than pushing them down. */
body.menu-left #sidebar .nav-dropdown {
  position: relative;
}

body.menu-left #sidebar .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1500;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  background-color: var(--brand-header-deeper);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.32);
}

body.menu-left #sidebar .nav-dropdown:hover > .nav-dropdown-menu,
body.menu-left #sidebar .nav-dropdown:focus-within > .nav-dropdown-menu,
body.menu-left #sidebar .nav-dropdown.is-open > .nav-dropdown-menu {
  display: block;
}

body.menu-left #sidebar .nav-dropdown-menu a,
body.menu-left #sidebar .nav-dropdown-menu button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 16px 8px 24px;
  color: #cdd8e8;
  font: inherit;
  font-size: 0.85rem;
  font-weight: normal;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

body.menu-left #sidebar .nav-dropdown-menu a:hover,
body.menu-left #sidebar .nav-dropdown-menu button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Warnings / Help quick-links, sat with the user block. */
body.menu-left .sidebar-userlinks a {
  display: block;
  padding: 6px 16px;
  color: #cdd8e8;
  text-decoration: none;
  font-size: 0.8rem;
}

body.menu-left .sidebar-userlinks a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

body.menu-left .sidebar-userlinks a.has-warnings {
  color: #fbbf24;
  font-weight: 600;
}

/* ---- Static menu (below the user block) ---- */
/* Reset the global `nav { display:flex; max-width; margin:auto; padding }`
   so the sections stack vertically inside the fixed-width bar. */
body.menu-left #sidebarMenu {
  display: block;
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 10px 0;
  gap: 0;
}

body.menu-left #sidebarMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.menu-left .sidebar-home a {
  display: block;
  padding: 8px 16px;
  color: var(--brand-on-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

body.menu-left .sidebar-section {
  margin-top: 14px;
}

body.menu-left .sidebar-section-title {
  margin: 0;
  padding: 4px 16px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

body.menu-left #sidebarMenu li a {
  display: block;
  padding: 8px 16px 8px 24px;
  color: var(--brand-on-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

body.menu-left #sidebarMenu li a:hover,
body.menu-left .sidebar-home a:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

/* Narrow screens: the bar drops above the content as a full-width band. */
@media (max-width: 768px) {
  body.menu-left #appShell {
    flex-direction: column;
  }
  body.menu-left #sidebar {
    flex-basis: auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  body.menu-left #appHeader img {
    height: 64px;
  }
}

/* System message bars -- superadmin-broadcast banner to every
   authenticated user. Sticky top, one bar per live SystemMessage,
   stacked newest-on-top. Persist on screen for the lifetime of the
   page; the superadmin retires a message via /system_messages to
   stop it from appearing on subsequent page loads. Three severity
   colour variants. */
.system-messages-stack {
  position: sticky;
  top: 0;
  z-index: 1900;
  display: flex;
  flex-direction: column;
}

.system-message-bar {
  padding: 8px 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.system-message-bar__p { margin: 0; }

.system-message--info     { background: #16a34a; color: white; }
.system-message--warning  { background: #f59e0b; color: #422006; }
.system-message--critical { background: #b91c1c; color: white; font-weight: 600; }

/* Impersonation banner -- visible whenever a superadmin has
   impersonated a school admin (cookies.encrypted[:impersonator_user_id]
   is set). Sticky at the top of the viewport so it survives scrolling
   and is always one click from "Return". Orange to contrast the
   purple/blue dashboard chrome. */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #ea580c;
  color: white;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.impersonation-banner__text {
  flex: 1;
}

.impersonation-banner__sub {
  opacity: 0.9;
}

.impersonation-banner__return {
  background: rgba(0, 0, 0, 0.25);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.impersonation-banner__return:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* User menu dropdown -- username acts as the toggle for a
   right-anchored submenu containing Admin (superadmin only) and
   Log out. */
#wrapperHeader .user-menu-dropdown {
  padding: 0.5rem 1rem;
}

#wrapperHeader .user-menu-dropdown .user-name-display {
  color: var(--brand-on-primary);
  font-weight: bold;
  font-size: 1.25rem;
  text-decoration: none;
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
}

#wrapperHeader #nav .nav-dropdown-menu--right {
  left: auto;
  right: 0;
}

#wrapperHeader .user-menu-logout {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-align: left;
  width: 100%;
}

#wrapperHeader .user-menu-logout:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

#wrapperHeader .logout-link {
  background: none;
  border: none;
  color: white;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-weight: normal;
}

#wrapperHeader .logout-link:hover {
  opacity: 0.8;
}

/* ============================================================
   UI uplift (ui_updates branch)
   ------------------------------------------------------------
   Generalises the visual language of /teachers/new_detention
   into reusable element + utility styles so every page reads
   as part of the same product. Existing higher-specificity
   rules (".students-section h2", "#detention-reason", ...) win
   over these defaults, so the Create Detention page is
   unchanged. Pages that opt in by wrapping in `.page-container`
   + `.card-section` and using `.form-group` / `.field-row` /
   `.data-table` get the same treatment.
   ============================================================ */

body {
  background: #fafafa;
  color: #1f2937;
}

main {
  max-width: 1200px;
}

/* ---- Typography defaults (only when not overridden) ---- */
main h1 {
  font-size: 1.75rem;
  color: #1f2937;
  margin: 1.25rem 0 0.5rem;
  font-weight: 700;
}
main h2 {
  font-size: 1.35rem;
  color: #1f2937;
  margin: 1.5rem 0 0.75rem;
  font-weight: 700;
}
main h3 {
  font-size: 1.1rem;
  color: #374151;
  margin: 1rem 0 0.5rem;
  font-weight: 700;
}
main p { line-height: 1.55; color: #374151; }
main a { color: var(--brand-link); }
main a:hover { color: var(--brand-header); }

/* ---- Layout primitives ---- */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 1rem 0 0.5rem;
}
.page-header h1 { margin: 0; }
.page-header .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.page-subtitle {
  color: #6b7280;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.card-section {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 1.5rem;
}
.card-section > h2:first-child,
.card-section > h3:first-child {
  margin-top: 0;
}
.card-section + .card-section { margin-top: 1.5rem; }

.card-divider {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
}

/* ---- Field rows + form polish ---- */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.field-row > .field { flex: 1 1 200px; min-width: 0; }

.field, .form-group { margin-bottom: 1rem; }
.field > label, .form-group > label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: #555;
  font-size: 0.95rem;
}

/* Element-level input/select/textarea polish. Scoped to <main>
   so it doesn't clobber the top nav. */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="search"],
main input[type="tel"],
main input[type="url"],
main input[type="date"],
main input[type="time"],
main input[type="datetime-local"],
main select,
main textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  color: #1f2937;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  max-width: 100%;
}
main textarea { resize: vertical; min-height: 4rem; line-height: 1.45; }
main select { cursor: pointer; }

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="password"]:focus,
main input[type="number"]:focus,
main input[type="search"]:focus,
main input[type="tel"]:focus,
main input[type="url"]:focus,
main input[type="date"]:focus,
main input[type="time"]:focus,
main input[type="datetime-local"]:focus,
main select:focus,
main textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
main input:disabled,
main select:disabled,
main textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Checkbox + radio: keep their native size, just align nicely. */
main input[type="checkbox"],
main input[type="radio"] { transform: translateY(1px); margin-right: 0.4rem; }

/* File input — give it a card-like edge. */
main input[type="file"] {
  font-family: inherit;
  padding: 0.4rem;
  border: 2px dashed #ddd;
  border-radius: 4px;
  background: white;
  max-width: 100%;
}

/* ---- Data tables ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.data-table thead {
  background: #f3f4f6;
  color: #1f2937;
}
.data-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: top;
  color: #1f2937;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafafa; }
.data-table caption,
.data-table .table-empty {
  padding: 1rem;
  color: #6b7280;
  font-style: italic;
  text-align: center;
}

/* Status pills used in table cells. */
.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.pill-green  { background: #dcfce7; color: #166534; }
.pill-blue   { background: #dbeafe; color: var(--brand-link); }
.pill-amber  { background: #fef3c7; color: #92400e; }
.pill-red    { background: #fee2e2; color: #991b1b; }
.pill-grey   { background: #f1f5f9; color: #475569; }

/* ---- Buttons (extending the existing .btn family) ---- */
.btn { font-family: inherit; font-size: 0.95rem; cursor: pointer; }
.btn-primary { font-weight: 600; }
.btn-secondary {
  background: white;
  color: #1f2937;
  border-color: #cbd5e1;
}
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger {
  background: #f44336;
  color: white;
  border-color: #f44336;
  font-weight: 600;
}
.btn-danger:hover { background: #d32f2f; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0; }

/* ---- Flash messages ---- */
.notice-message, .alert-message {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
}
.notice-message {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}
.alert-message {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* ---- Callouts (used for info / warning panels in admin) ---- */
.callout {
  padding: 0.9rem 1rem;
  border-radius: 6px;
  border-left: 4px solid #94a3b8;
  background: #f8fafc;
  color: #1f2937;
  margin: 1rem 0;
}
.callout-info    { background: #e3f2fd; border-left-color: #2196f3; color: #1565c0; }
.callout-warning { background: #fef3c7; border-left-color: #f59e0b; color: #92400e; }
.callout-danger  { background: #fee2e2; border-left-color: #dc2626; color: #991b1b; }
.callout-success { background: #dcfce7; border-left-color: #16a34a; color: #166534; }

/* ---- Small utility helpers ---- */
.muted { color: #6b7280; }
.small { font-size: 0.85rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.spacer-sm { height: 0.5rem; }
.spacer    { height: 1rem; }
.spacer-lg { height: 2rem; }

/* Compact filter card (used on admin index pages) */
.filter-card {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.filter-card .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-end;
}
.filter-card .field { margin-bottom: 0; flex: 0 1 auto; }
.filter-card .field > label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.2rem;
}
.filter-card input,
.filter-card select { padding: 0.4rem 0.55rem; font-size: 0.9rem; }

/* ───────────────────────────────────────────────────────────────
   Next Gen UI — opt-in restyle of the top navigation. Activated
   per-school via schools.next_gen_ui; applied by adding class
   "ngui" to <body>. Goal: larger type, more breathing room,
   rounded corners, softer shadows — without rebuilding the
   menu markup.
   ─────────────────────────────────────────────────────────── */
/* Keep the school's deep-blue header band in Next Gen UI (same as the
   legacy view) and float the rounded nav on top of it. The nav's gradient
   and drop shadow still lift it off the band so it reads as a pill, while
   the full-width blue surround is preserved. */
/* Rounded header band to match the Next Gen UI chrome. overflow: hidden
   clips the logo image to the rounded corners. (Left menu only — the top
   menu has no #schoolHeader.) */
body.ngui.menu-left #schoolHeader {
  border-radius: 14px;
  overflow: hidden;
}
body.ngui #wrapperHeader {
  background-color: var(--brand-header);
  width: auto;
  margin: 12px 12px 0;
  border-radius: 14px;
}
body.ngui #wrapperHeader #nav {
  background: linear-gradient(180deg, var(--brand-header) 0%, var(--brand-header-dim) 100%);
  border-radius: 14px;
  margin: 14px 12px 10px;
  padding: 4px 6px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
body.ngui #wrapperHeader #nav h2 {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
body.ngui #wrapperHeader #nav a,
body.ngui #wrapperHeader #nav button {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  transition: background-color .15s, transform .15s;
}
/* Drop the legacy all-caps treatment in Next Gen UI so menu labels read
   in title case, matching the rest of the dashboard (e.g. School Settings). */
body.ngui #wrapperHeader #nav > ul > li:not(.user-menu-dropdown) > h2 a {
  text-transform: none;
  letter-spacing: normal;
}
body.ngui #wrapperHeader #nav a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
body.ngui #wrapperHeader #nav .nav-dropdown-menu {
  border-radius: 12px;
  padding: 0.4rem;
  background-color: var(--brand-header);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.32);
  border-top: 0;
  min-width: 240px;
  margin-top: 4px;
}
/* Left menu: the dropdown is inline in the sidebar (not a floating flyout),
   so take the column width rather than forcing a 240px min that would
   overflow it, and drop the drop-shadow that only made sense for an
   absolutely-positioned menu. */
body.ngui.menu-left #wrapperHeader #nav .nav-dropdown-menu {
  box-shadow: none;
  min-width: 0;
}
/* Top menu: the rounded flyout floats below the nav with a small visual gap,
   plus the nav's own bottom padding. That empty band isn't a hover target,
   so bridge it with a transparent strip that's part of the menu, keeping
   :hover continuous from toggle to items. */
body.ngui.menu-top #wrapperHeader #nav .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
body.ngui #wrapperHeader #nav .nav-dropdown-menu a {
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}
body.ngui #wrapperHeader #nav .nav-dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Impersonation banner also gets the rounded treatment so it
   matches the new menu chrome. */
body.ngui .impersonation-banner {
  border-radius: 12px;
  margin: 8px 12px 0;
}

@media (max-width: 768px) {
  body.ngui #wrapperHeader #nav {
    margin: 6px 8px;
    border-radius: 12px;
  }
  body.ngui #wrapperHeader #nav a,
  body.ngui #wrapperHeader #nav button {
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }
  body.ngui #wrapperHeader #nav .nav-dropdown-menu {
    margin-top: 2px;
    border-radius: 10px;
  }
}