/* ========================================================================
   UI-8 — Final system-wide polish
   Accessibility, interaction consistency, responsive shell, density and
   graceful handling of long content across Admin + Employee portals.
   ======================================================================== */

:root {
  --content-max: 1440px;
  --control-height: 42px;
  --touch-target: 44px;
  --ring-offset: 2px;
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
  overflow-x: hidden;
}

/* Keyboard accessibility */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 3000;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--text-strong);
  color: var(--surface) !important;
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

button, a, input, select, textarea { touch-action: manipulation; }
button, .btn, .button, .primary, .secondary, .icon-button, .icon-action { min-height: var(--touch-target); }
.icon-button { min-width: var(--touch-target); }

/* Consistent disabled state */
button:disabled, .btn:disabled, .button:disabled, .primary:disabled, .secondary:disabled,
input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
}

/* Consistent surface hierarchy */
.table-card, .toolbar-card, .module-card, .ui6-module, .integration-card, .people-table-card {
  overflow: hidden;
}

.table-scroll, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .ui6-table th, .table th { white-space: nowrap; }
.data-table td, .ui6-table td, .table td { overflow-wrap: anywhere; }

/* Better form rhythm */
.form-grid > label,
.form-grid > .full,
.modal-body label { min-width: 0; }
.form-grid label > span:first-child,
.modal-body label > span:first-child { line-height: 1.35; }
.form-actions { margin-top: 4px; }

/* Page chrome */
.admin-topbar { min-height: 72px; }
.admin-topbar .topbar-left { min-width: 0; }
.admin-topbar .topbar-left > div { min-width: 0; }
.admin-topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-header, .page-intro, .module-page, .people-page, .access-page, .audit-page, .lifecycle-page {
  width: min(var(--content-max), 100%);
}

/* Sidebar polish */
.sidebar { overscroll-behavior: contain; }
.sidebar-link { min-height: 42px; }
.sidebar-link:focus-visible, .nav-group-toggle:focus-visible, .sidebar-collapse:focus-visible {
  outline: 0;
  box-shadow: inset var(--focus-ring);
}
.nav-group-toggle { min-height: 36px; }
.sidebar-bottom .sidebar-link { min-height: 42px; }

/* Keep mobile shell from scrolling behind open navigation */
body.sidebar-open { overflow: hidden; }
@media (min-width: 851px) {
  body.sidebar-open { overflow: auto; }
}

/* Modal quality */
body.modal-open { overflow: hidden; }
.modal { overscroll-behavior: contain; }
.modal-card { width: min(720px, 100%); max-height: min(820px, calc(100vh - 40px)); overflow: hidden; }
.modal-body { overflow-y: auto; overscroll-behavior: contain; }
.modal-header { flex-shrink: 0; }
.modal-footer { flex-shrink: 0; }

/* Toast accessibility + consistency */
.toast { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

/* Status/utility text should never break layouts */
.status-badge, .badge, .pill, .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Better long-name handling in common list rows */
.person-cell, .employee-cell, .dashboard-list-main, .notification-main, .application-card,
.asset-card, .integration-card, .role-row { min-width: 0; }

/* Improve table action density without shrinking touch targets */
.actions-cell { vertical-align: middle; }
.actions-cell .inline-actions { flex-wrap: nowrap; }

/* Empty/loading/error states */
.loading-row, .employee-loading { position: relative; }
.loading-row::before, .employee-loading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--tenant-secondary, var(--primary-2));
  border-radius: 50%;
  animation: glee-spin .7s linear infinite;
}
@keyframes glee-spin { to { transform: rotate(360deg); } }

/* Prevent accidental horizontal overflow from wide cards/forms */
.card, .panel, .toolbar-card, .table-card, .module-card, .integration-card,
.auth-card, .modal-card { min-width: 0; }

/* Dense admin pages get predictable content gutters */
@media (min-width: 851px) {
  .module-page > .module-toolbar,
  .module-page > .toolbar-card { margin-inline: 32px; }
}

@media (max-width: 850px) {
  .admin-topbar { min-height: 64px; }
  .admin-topbar { padding-inline: 20px; }
  .topbar-left h1 { max-width: 55vw; }
  .topbar-actions .topbar-date { display: none; }
  .page-header, .page-intro { gap: 14px; }
  .page-header .inline-actions, .page-intro .inline-actions { width: 100%; }
  .page-header .inline-actions > *, .page-intro .inline-actions > * { flex: 1 1 auto; }
  .actions-cell .inline-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 24px, 1120px); }
  .admin-topbar { padding: 12px 16px; }
  .topbar-left { gap: 8px; }
  .topbar-left h1 { font-size: 20px; max-width: 58vw; }
  .eyebrow { font-size: 9px; }
  .topbar-actions { gap: 5px; }
  .notification-bell, .avatar-button, .icon-button { width: 40px; height: 40px; min-width: 40px; }
  .page-header, .page-intro { padding-inline: 16px; }
  .panel, .card { padding: 18px; }
  .modal-card { max-height: calc(100vh - 20px); border-radius: 14px; }
  .modal { padding: 10px; }
  .form-actions > * { min-width: 0; }
  .actions-cell .inline-actions { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .topbar-left h1 { max-width: 52vw; }
  .notification-bell span { top: -3px; right: -3px; }
  .panel, .card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-row::before, .employee-loading::before { animation: none; }
}