/*
 * Global mobile hardening.
 * Loaded only at 768px and below, before role-specific owner/student/staff layers.
 */
body {
  font-size: 14px;
}

/* Generic management topbar. Owner premium topbar has its own role-specific rules. */
.management-surface .topbar:not(.owner-topbar-dark) {
  min-height: 62px !important;
  height: auto !important;
  padding: 9px 12px !important;
  gap: 8px !important;
  flex-direction: row !important;
  align-items: center !important;
}

.management-surface .topbar:not(.owner-topbar-dark) .topbar-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.management-surface .topbar:not(.owner-topbar-dark) .topbar-right {
  flex: 0 0 auto !important;
  gap: 6px !important;
}

.management-surface .topbar:not(.owner-topbar-dark) .topbar-title {
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.management-surface .topbar:not(.owner-topbar-dark) .topbar-title i {
  flex: 0 0 auto;
}

.management-surface .topbar:not(.owner-topbar-dark) :is(.topbar-icon-btn, .menu-btn, .dark-btn) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}

.management-surface .topbar:not(.owner-topbar-dark) :is(.tenant-name, .library-name, .topbar-subtitle) {
  display: none !important;
}

.content,
.main-content,
.page-content,
.admin-main,
.owner-main {
  min-width: 0 !important;
  max-width: 100% !important;
}

input,
select,
textarea {
  font-size: 16px !important;
}

.management-nav-label {
  font-size: 11px !important;
}

.management-nav-sublabel,
.eyebrow,
.stat-head,
.queue-meta,
.seat-label,
.seat-zone,
.hint,
.panel-sub,
.form-text,
.help-text {
  font-size: 12px !important;
}

.queue-btn,
.filter,
.seat-feature,
.status-badge,
.badge {
  font-size: 11px !important;
}

table:not(.no-responsive-table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table:not(.no-responsive-table) thead,
table:not(.no-responsive-table) tbody,
table:not(.no-responsive-table) tr {
  min-width: max-content;
}

th,
td {
  min-width: 112px;
}

th:last-child,
td:last-child {
  min-width: 132px;
}

.management-surface .doc-scanner-top {
  align-items: stretch !important;
}

.management-surface .scan-actions {
  gap: 10px !important;
}

.management-surface .scan-actions > * {
  min-width: 0;
}

.management-surface .doc-scanner-top .badge,
.management-surface .doc-scanner-top [class*="badge"] {
  white-space: normal !important;
}

.management-surface .seat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.management-surface .seat {
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 11px !important;
}

.management-surface .seat-features {
  max-height: none !important;
}

.management-surface .seat.recommended::before {
  right: -15px !important;
  top: 9px !important;
  font-size: 11px !important;
}

.management-surface .stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: visible !important;
  gap: 10px !important;
}

.management-surface .stat {
  min-width: 0 !important;
}

.management-surface .stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.receipt-table {
  min-width: 0 !important;
  display: table !important;
}

.receipt-table thead {
  display: none !important;
}

.receipt-table tbody,
.receipt-table tr,
.receipt-table td {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
}

.receipt-table tr {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-line);
}

.receipt-table td {
  display: flex !important;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0 !important;
  border: 0 !important;
  text-align: right !important;
}

.receipt-table td::before {
  content: attr(data-label);
  color: #64748b;
  font-weight: 800;
  text-align: left;
}

.receipt-table td:first-child::before {
  content: "Description";
}

.receipt-table td:last-child::before {
  content: "Amount";
}

.management-surface .admin-shell {
  grid-template-columns: 1fr !important;
}

.management-surface .admin-sidebar {
  position: fixed !important;
}

.management-surface .admin-content,
.management-surface .admin-main {
  min-width: 0 !important;
}

[class*="grid"],
[class*="columns"] {
  min-width: 0;
}

.card,
.panel,
.section-card {
  max-width: 100%;
}

.management-surface .sidebar-header .sidebar-brand-logo,
.management-surface .sidebar-header img.sidebar-brand-logo {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
}

.library-logo,
.sid-library-logo {
  width: 66px !important;
  height: 66px !important;
  max-width: 66px !important;
}

.mpwa-brand .mpwa-mark:has(img) {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}

@media (max-width: 480px) {
  .management-surface .topbar:not(.owner-topbar-dark) {
    padding-inline: 8px !important;
  }

  .management-surface .topbar:not(.owner-topbar-dark) .topbar-right > :not(:first-child):not(:last-child) {
    display: none;
  }

  .management-surface .scan-actions {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  .management-surface .doc-scanner-top {
    flex-direction: column !important;
  }

  .management-surface .scan-actions .scan-btn,
  .management-surface .scan-actions button,
  .management-surface .scan-actions label {
    width: 100% !important;
  }

  .management-surface .seat-grid {
    grid-template-columns: 1fr !important;
  }

  .management-surface .seat {
    min-height: 102px !important;
  }

  .management-surface .stats {
    grid-template-columns: 1fr 1fr !important;
  }

  .management-surface .two,
  .management-surface .filter-grid,
  .management-surface .form-row,
  .management-surface .field-row {
    grid-template-columns: 1fr !important;
  }

  .management-surface .hero-actions,
  .management-surface .top-actions {
    width: 100%;
  }

  .management-surface .hero-actions > *,
  .management-surface .top-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }

  .page,
  .wrap,
  .content,
  .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}