/* LibraHub responsive and visual consistency hardening */
:root {
  --ui-text-xs: 12px;
  --ui-text-sm: 14px;
  --ui-text-base: 16px;
  --ui-touch: 44px;
  --ui-radius: 14px;
  --ui-line: #e2e8f0;
}

html { -webkit-text-size-adjust: 100%; }
body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }

/* Never hide broken layout; keep page width stable while components manage overflow. */
body:not(.sidebar-open) { overflow-x: clip !important; }

/* Readability baseline for operational UI. */
small, .small, .text-small, .muted, .panel-sub, .stat-note, .subtitle,
.form-text, .help-text, .hint, .queue-meta, .seat-zone, .seat-label,
.management-nav-sublabel, .management-nav-label {
  line-height: 1.45;
}

button, [role="button"], .btn, .btnx, .ho-btn, .scan-btn, .ui-button,
.topbar-icon-btn, .menu-btn, .dark-btn, input[type="submit"], input[type="button"] {
  min-height: var(--ui-touch);
  touch-action: manipulation;
}

button, .btn, .btnx, .ho-btn, .scan-btn, .ui-button { white-space: normal; }

input, select, textarea {
  max-width: 100%;
  min-height: 44px;
}

textarea { min-height: 96px; resize: vertical; }

/* Tables remain usable on narrow viewports without clipping actions. */
.responsive-table, .table-responsive, .receipt-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

 table {
  max-width: 100%;
}

td, th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Long names, plans and labels must wrap instead of colliding. */
.topbar-title, .page-title, .card-title, .student-name, .tenant-name,
.sidebar-brand, .brand-copy, .status-badge, .badge, label {
  overflow-wrap: anywhere;
}

/* Focus visibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .38) !important;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  body { font-size: 14px; }

  /* Management shell */
  .topbar {
    min-height: 62px !important;
    height: auto !important;
    padding: 9px 12px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .topbar-left { min-width: 0 !important; flex: 1 1 auto !important; }
  .topbar-right { flex: 0 0 auto !important; gap: 6px !important; }
  .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;
  }
  .topbar-title i { flex: 0 0 auto; }
  .topbar-icon-btn, .menu-btn, .dark-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  .topbar .tenant-name, .topbar .library-name, .topbar-subtitle { display: none !important; }

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

  /* Inputs use 16px to prevent iOS zoom. */
  input, select, textarea { font-size: 16px !important; }

  /* Operational labels must remain readable. */
  .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;
  }

  /* Generic tables scroll rather than disappear. */
  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; }

  /* Add Student scanner and action layout. */
  .doc-scanner-top { align-items: stretch !important; }
  .scan-actions { gap: 10px !important; }
  .scan-actions > * { min-width: 0; }
  .doc-scanner-top .badge, .doc-scanner-top [class*="badge"] {
    white-space: normal !important;
  }

  /* Seat map: stable two-column cards on normal phones. */
  .seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .seat { min-width: 0 !important; min-height: 112px !important; padding: 11px !important; }
  .seat-features { max-height: none !important; }
  .seat.recommended::before { right: -15px !important; top: 9px !important; font-size:11px !important; }
  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 10px !important;
  }
  .stat { min-width: 0 !important; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Receipt becomes a stacked mobile statement. */
  .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;
  }

  /* Super admin / owner shells */
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-sidebar { position: fixed !important; }
  .admin-content, .admin-main { min-width: 0 !important; }

  /* Cards and grids should not force desktop widths. */
  [class*="grid"], [class*="columns"] { min-width: 0; }
  .card, .panel, .section-card { max-width: 100%; }
}

@media (max-width: 480px) {
  .topbar { padding-inline: 8px !important; }
  .topbar-right > :not(:first-child):not(:last-child) { display: none; }

  .scan-actions { grid-template-columns: 1fr !important; display: grid !important; }
  .doc-scanner-top { flex-direction: column !important; }
  .scan-actions .scan-btn, .scan-actions button, .scan-actions label { width: 100% !important; }

  .seat-grid { grid-template-columns: 1fr !important; }
  .seat { min-height: 102px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }

  .two, .filter-grid, .form-row, .field-row { grid-template-columns: 1fr !important; }
  .hero-actions, .top-actions { width: 100%; }
  .hero-actions > *, .top-actions > * { flex: 1 1 100%; justify-content: center; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .receipt-table { min-width: 640px !important; }
}
@media (max-width: 768px) {
  .receipt-table td:first-child::before { content: "Description"; }
  .receipt-table td:last-child::before { content: "Amount"; }
}

/* Admin Dashboard: keep every quick-action glyph visible. */
.management-role .quick-actions .qa-10 > i {
  background: linear-gradient(135deg, #64748b, #334155);
  color: #fff;
}