/* =========================================================
App Header
========================================================= */
.app-header {
  width: 100%;
  min-width: 0;
}

.app-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.app-brand-name {
  position: relative;
  margin-left: 10px;
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

.beta-superscript {
  position: absolute;
  left: 100%;
  top: -0.45em;
  margin-left: 3px;
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  opacity: 0.65;
}

/* Smaller screens */
@media (max-width: 700px) {
  .app-brand-name {
    font-size: 0.95rem;
  }

  .beta-superscript {
    top: -0.4em;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .app-brand-name {
    display: none;
  }
}

.organization-menu {
  min-width: 0;
  max-width: 260px;
}

.user-name-short {
  display: none;
}
/* * Tablet / small desktop */

@media (max-width: 600px) {
  .organization-menu {
    max-width: 180px;
  }

  .user-menu {
    max-width: 150px;
  }

  .user-name-full, .organization-name {
    display: none;
  }

  .user-name-short {
    display: inline;
  }
}
/* * Mobile */

@media (max-width: 600px) {
  .app-name {
    font-size: 1rem;
    margin-left: 8px;
  }

  .organization-menu {
    max-width: 120px;
    overflow: hidden;
  }

    .organization-menu .mud-button-label {
      max-width: 85px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  .user-menu {
    max-width: none;
  }

  .email-confirm-button {
    margin: 0 2px;
  }
}
/* * Very small phones */

@media (max-width: 400px) {
  .app-name {
    display: none;
  }

  .organization-menu {
    max-width: 90px;
  }

    .organization-menu .mud-button-label {
      max-width: 55px;
    }

  .user-name-short {
    display: none;
  }
}

/* =========================================================
Search and filters
========================================================= */
.mobile-member-controls {
  width: 100%;
}


.mobile-filter {
  width: 125px;
  flex-shrink: 0;
}

.mobile-member-card {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

  .mobile-member-card:active {
    opacity: 0.75;
  }



/* =========================================================
Back to top
========================================================= */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
  }
}



/* =========================================================
         Mobile Accounts
 ========================================================= */

.mobile-account-controls {
  width: 100%;
}

.mobile-account-filter {
  width: 105px;
  flex-shrink: 0;
}


.mobile-account-card {
  cursor: default;
  width: 100%;
}


.mobile-account-members {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*.account-summary-card {
  min-height: 90px;
}*/

@media (max-width: 600px) {

  .account-summary-card {
    padding: 8px 14px !important;
  }

    .account-summary-card .mud-typography-h5 {
      font-size: 1.15rem;
      line-height: 1.2;
    }

    .account-summary-card .mud-typography-caption {
      font-size: 0.7rem;
      line-height: 1.1;
    }
}


/* =========================================================
         Mobile Ledger
 ========================================================= */
.mobile-ledger-card {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

  .mobile-ledger-card:nth-child(even) {
    background-color: var(--mud-palette-table-striped);
  }

  .mobile-ledger-card:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .mobile-ledger-card:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

/* =========================================================
         Mobile Attendance
 ========================================================= */

.mobile-attendance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--mud-palette-divider);
  min-height: 60px;
}

  .mobile-attendance-row:nth-child(even) {
    background-color: var(--mud-palette-table-striped);
  }

  .mobile-attendance-row:last-child {
    border-bottom: 1px solid var(--mud-palette-divider);
  }

.attendance-fab-menu .mud-fab-menu-item {
  text-wrap: nowrap;
}

@media (max-width: 600px) {
  .no-header-grid .mud-table-toolbar {
    height: auto;
    min-height: 0;
    padding: 3px 2px 0px 2px;
  }
}

/* Tighten container padding on phones */
/*@media (max-width: 600px) {
  .mud-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mud-paper.pa-4, .mud-paper.pa-6, .mud-paper.pa-8 {
    padding: 12px !important;
  }

  .mud-card-content, .mud-dialog-content {
    padding: 8px !important;
  }*/

/* Drawers used as side panels should be full-width on phones */
/*.mud-drawer {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }*/

/* Dialogs: use nearly full width instead of fixed MaxWidth.* */
/*.mud-dialog {
    max-width: 96vw !important;
    margin: 8px !important;
  }*/

/* Popovers anchored to calendar cells (SessionOccurrenceDialog) shouldn't force 300px */
/*.mud-popover-paper {
    max-width: 92vw !important;
  }*/

/* Toolbars: stack instead of forcing min-width search fields off-screen */
/*.mud-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 8px;
  }*/

/* DataGrid: allow horizontal scroll instead of squashing columns */
/*.mud-table-container {
    overflow-x: auto !important;
  }

  .mud-data-grid {
    min-width: 640px;
  }*/
/* scrolls within the container above */

/* App bar title / org menu: hide the long tagline, keep it tappable */
/*.mud-appbar .mud-typography-h5 {
    display: none;
  }
}*/