/* Shared cards, grids, tables and widgets */
.card,
.standard-action-tile,
.standard-table-toolbar,
.standard-stat-card,
.page-header,
.auth-card,
.modal-panel,
.scope-card,
.user-card,
.filters-card,
.report-card,
.iframe-modal-card,
.data-card,
.form-card,
.scan-panel,
.installer-sidebar,
.installer-main {
  border-radius: var(--app-radius) !important;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: #fff;
  box-shadow: var(--app-shadow);
}
.page-header.card,
.filter-panel-card,
.table-card-modern,
.form-section-card,
.inventory-section-card,
.dashboard-section-card,
.quick-scan-card,
.quick-form-card,
.admin-status-card,
.quick-metrics-card,
.quick-links-card {
  background: #fff;
  border-radius: 1.35rem;
}
.page-header.card {
  margin-bottom: 1.5rem;
}
.page-header .card-body,
.standard-table-toolbar .card-body,
.standard-action-tile .card-body,
.standard-stat-card .card-body {
  padding: 1.5rem 1.6rem;
}
.page-header.compact .card-body {
  padding: 1.25rem 1.5rem;
}
.page-header-copy h1,
.page-header-copy .h2 {
  font-weight: 700;
  font-size: clamp(2rem, 2vw, 2.6rem);
  letter-spacing: -.02em;
}
.page-header-copy p,
.section-head p {
  color: var(--app-muted) !important;
  max-width: 70ch;
}
.page-header-actions,
.section-head-actions {
  flex-shrink: 0;
}
.dashboard-section-card .card-body,
.inventory-section-card .card-body,
.filter-panel-card .card-body,
.table-card-modern .card-body,
.form-section-card .card-body,
.quick-metrics-card .card-body,
.stat-card-v2 .card-body,
.inventory-toolbar .card-body {
  padding: 1.35rem 1.5rem;
}
.stats-grid,
.summary-strip,
.grid-two,
.form-grid,
.inline-form-grid,
.filters-grid,
.settings-grid,
.scope-grid,
.info-grid,
.card-grid,
.action-grid,
.scope-cards,
.report-grid,
.user-grid,
.system-grid,
.help-grid {
  display: grid;
  gap: 1rem;
}
.stats-grid,
.summary-strip,
.grid-two,
.form-grid,
.info-grid,
.card-grid,
.action-grid,
.scope-cards,
.report-grid,
.user-grid,
.system-grid,
.help-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.stats-grid > * {
  grid-column: span 3;
}
.summary-strip > * {
  grid-column: span 3;
}
.grid-two > *,
.form-grid > *,
.info-grid > *,
.card-grid > *,
.action-grid > *,
.scope-cards > *,
.report-grid > *,
.user-grid > *,
.system-grid > *,
.help-grid > * {
  grid-column: span 6;
}
.form-grid.single-column > * {
  grid-column: span 12;
}
.stats-grid,
.summary-strip,
.grid-two {
  align-items: stretch;
}
.stats-grid > *,
.summary-strip > *,
.grid-two > * {
  min-width: 0;
}
.stat-card .label {
  display: block;
}
.summary-chip strong {
  font-size: 1.75rem;
}
.metric-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(37,99,235,.12);
  background: linear-gradient(135deg, #0d6efd 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(37,99,235,.22);
}
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -35% auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.metric-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
}
.metric-card-icon,
.stat-card-v2-icon {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex: 0 0 auto;
}
.metric-card-icon {
  width: 3.25rem;
  height: 3.25rem;
  background: rgba(255,255,255,.14);
}
.metric-card-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  color: rgba(255,255,255,.78);
  font-weight: 700;
}
.metric-card-value {
  font-size: clamp(1.9rem, 2vw, 2.45rem);
  line-height: 1.05;
  font-weight: 800;
  margin-top: .25rem;
}
.metric-card-meta {
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  margin-top: .2rem;
}
.glance-card,
.metric-tile,
.quick-metrics-card,
.stat-card-v2,
.metric-card {
  height: 100%;
}
.glance-card {
  border-radius: 1.1rem;
  border: 1px solid rgba(219,228,240,.96);
  background: rgba(255,255,255,.82);
  padding: 1rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.glance-label {
  display: flex;
  align-items: center;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
  font-weight: 700;
}
.glance-value {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  margin-top: .5rem;
  color: #0f172a;
}
.metric-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
  min-height: 112px;
  padding: 1rem 1.05rem;
  border: 1px solid var(--app-line);
  border-radius: 1rem;
  background: #fff;
}
.metric-tile-icon {
  color: var(--app-primary);
  font-size: 1.05rem;
}
.metric-tile-label {
  color: #475569;
  font-weight: 600;
}
.metric-tile-value {
  font-size: 1.45rem;
  line-height: 1;
}
.table-wrap,
.modern-table-wrap {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}
.modern-table-wrap,
[data-page="articles"] .articles-table-wrap {
  border-top: 1px solid rgba(226,232,240,.75);
}
.table-wrap .table,
.table-wrap .responsive-table,
.table-card-modern .table,
.dashboard-section-card .table,
.form-section-card .table {
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  padding: .95rem 1rem;
}
.table-wrap .table thead th,
.responsive-table thead th,
.table thead th {
  background: #f8fafc;
  color: #475569;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .03em;
  border-bottom-width: 1px;
}
.table-hover tbody tr:hover,
.table-hover tbody tr:hover > * {
  background: rgba(13,110,253,.035);
}
.responsive-table {
  width: 100%;
}
.responsive-table td[data-label] strong {
  color: #0f172a;
}
.results-summary-card {
  min-width: 10rem;
  padding: .95rem 1rem;
  border-radius: 1rem;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  text-align: right;
}
.results-summary-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
}
.results-summary-value {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--app-primary);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--app-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-actions,
.auth-actions,
.page-tools,
.users-toolbar,
.standard-toolbar,
.quick-scan-card .scanner-actions,
.quick-scan-card .button-group,
.selection-toolbar,
.scanner-controls,
.scan-login-page .scan-login-actions,
.compact-toolbar .toolbar-actions,
[data-page="articles"] .articles-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.users-toolbar,
.standard-toolbar,
.page-tools {
  justify-content: space-between;
  margin-bottom: 1rem;
}
.users-toolbar .button,
.standard-toolbar .button,
.page-tools .button {
  min-height: 44px;
}
.tabs,
.inventory-tabs,
.system-tab-nav,
.auth-tabs,
.secondary-tabs {
  width: fit-content;
  max-width: 100%;
}
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .35rem;
  border-radius: 999px;
  background: #eef3f8;
}
.inventory-tabs {
  padding: .35rem;
  border-radius: 999px;
  background: rgba(226,232,240,.92);
}
.tab-link,
.inventory-tabs .nav-link,
.system-tab-nav .nav-link,
.secondary-tabs .tab-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: .65rem .95rem;
  font-weight: 600;
  color: #526072;
}
.secondary-tabs .tab-link {
  padding: .62rem 1rem;
}
.tab-link.active,
.inventory-tabs .nav-link.active {
  background: #fff;
  color: var(--app-primary);
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.system-tab-nav .nav-link {
  background: #e9eff7;
  color: #334155;
  padding: .8rem 1.15rem;
}
.system-tab-nav .nav-link.active {
  background: var(--app-primary);
  color: #fff;
  box-shadow: 0 .8rem 1.4rem rgba(13,110,253,.2);
}
.inventory-inline-form,
.inventory-rule-form,
.quality-inline-form {
  min-width: min(420px, 100%);
}
.table-row-alert {
  background: rgba(245, 158, 11, .06);
}
.modern-hint-list .list-group-item,
.task-glance-list .list-group-item {
  background: transparent;
  border-color: rgba(219,228,240,.8);
}
.modern-hint-list .list-group-item:first-child {
  padding-top: 0;
}
.modern-hint-list .list-group-item:last-child {
  padding-bottom: 0;
}
.code-pill,
.admin-status-card code,
.cronjob-code,
pre,
.barcode-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.code-pill {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  font-size: .92rem;
  line-height: 1.5;
  word-break: break-all;
}
.quick-receive-layout,
.dashboard-layout .row,
.inventory-layout .row,
.system-layout .row,
.articles-layout .row,
.reports-layout .row,
.help-layout .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}
.quick-receive-layout {
  gap: 1.5rem;
  align-items: stretch;
}
.quick-scan-card,
.quick-form-card,
.scan-login-page .scan-panel,
.scan-login-page .scan-help-card {
  min-height: 100%;
  height: 100%;
}
.quick-scan-card .scanner-panel,
.scanner-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(170px, 22vh, 250px);
  height: clamp(170px, 22vh, 250px);
  overflow: hidden;
}
.quick-scan-card .scanner-panel {
  border: 1px dashed #d7e3f0;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%);
}
.scanner-frame {
  border: 1px solid #dbe4f0;
  border-radius: 1rem;
  background: #0f172a;
}
.scanner-video,
[data-scanner-video],
[data-scan-login-video],
.scanner-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
  background: #0f172a;
}
.scanner-placeholder {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1rem;
  max-width: 34rem;
  color: #334155;
}
.scanner-placeholder p {
  margin: .45rem 0 0;
}
.scanner-frame .scanner-placeholder {
  color: #e2e8f0;
}
.scanner-frame .scanner-placeholder p {
  color: #cbd5e1;
}
.scan-login-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}
.scan-login-status {
  font-weight: 600;
  color: #1e40af;
}
.camera-only-note {
  color: var(--app-muted);
  font-size: .9rem;
}
.meta-list {
  display: grid;
  gap: .9rem;
}
.meta-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #e8eef6;
}
.meta-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.meta-list dt {
  color: var(--app-muted);
}
.meta-list dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.simple-list,
.check-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .5rem;
}
.check-list {
  list-style: none;
  padding-left: 0;
}
.check-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.filter-bar input[type="search"],
.filter-bar input[type="text"] {
  flex: 1 1 260px;
}
.callout {
  border: 1px solid #dbe4f0;
  border-radius: .95rem;
  padding: .8rem .95rem;
  background: #f8fbff;
}
.callout-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.callout-warning {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.checkbox-row,
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.checkbox-row input,
.checkbox-inline input {
  width: 1rem;
  height: 1rem;
}
.field-error {
  color: #b42318;
  font-weight: 600;
  font-size: .9rem;
}
.label-block {
  display: block;
  font-weight: 700;
  margin-bottom: .5rem;
}
.action-button,
[data-page="articles"] .articles-action-button,
[data-page="articles"] .articles-status-badge,
[data-page="articles"] .articles-filter-links .btn {
  white-space: nowrap;
}
.action-button,
[data-page="articles"] .articles-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.actions-cell {
  min-width: 140px;
}
.checkbox-cell {
  width: 2.5rem;
}
.compact-toolbar {
  align-items: center;
}
.compact-toolbar .toolbar-copy {
  color: var(--app-muted);
}
.faq-list {
  gap: .75rem;
}
.faq-item {
  border-radius: 1rem;
  overflow: hidden;
}
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.1rem;
  font-weight: 600;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-answer {
  padding: 0 1.1rem 1rem;
  color: #475569;
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}
.faq-toggle {
  transition: transform .16s ease;
  font-weight: 700;
}
@media (min-width: 768px) {
  .responsive-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }
  .responsive-table thead th {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--app-line);
    background: #f8fbff;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #475569;
    font-weight: 700;
  }
  .responsive-table tbody td {
    padding: .88rem 1rem;
    border-bottom: 1px solid #e9eff7;
    vertical-align: top;
  }
  .responsive-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .responsive-table tbody tr:hover td {
    background: rgba(13, 110, 253, 0.03);
  }
}
@media (max-width: 1399.98px) {
  .stats-grid > *,
  .summary-strip > * {
    grid-column: span 6;
  }
}
@media (max-width: 1199.98px) {
  .page-header-copy .h2,
  .page-header-copy h1 {
    font-size: 1.9rem;
  }
}
@media (max-width: 991.98px) {
  .grid-two > *,
  .form-grid > *,
  .info-grid > *,
  .card-grid > *,
  .action-grid > *,
  .scope-cards > *,
  .report-grid > *,
  .user-grid > *,
  .system-grid > *,
  .help-grid > *,
  .stats-grid > *,
  .summary-strip > *,
  .reports-layout .stats-grid > *,
  .help-layout .grid-two > *,
  .system-layout .grid-two > * {
    grid-column: span 12;
  }
  .page-header .card-body,
  .filter-panel-card .card-body,
  .table-card-modern .card-body,
  .form-section-card .card-body,
  .quick-metrics-card .card-body,
  .dashboard-section-card .card-body,
  .inventory-section-card .card-body {
    padding: 1.1rem;
  }
  .inventory-tabs {
    width: 100%;
    border-radius: 1rem;
  }
}
@media (max-width: 767.98px) {
  .page-header-actions,
  .section-head-actions,
  .form-actions {
    width: 100%;
  }
  .page-header-actions > *,
  .section-head-actions > *,
  .form-actions > * {
    width: 100%;
  }
  .tabs {
    display: grid;
    width: 100%;
    border-radius: 1rem;
  }
  .tab-link {
    justify-content: center;
  }
  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }
  .responsive-table tr {
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 1rem;
    margin-bottom: .85rem;
    overflow: hidden;
    box-shadow: var(--app-shadow);
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #eef2f7;
    text-align: right;
  }
  .responsive-table td:last-child {
    border-bottom: 0;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #334155;
    text-align: left;
  }
  .system-tab-nav {
    flex-direction: column;
  }
  .system-tab-nav .nav-link,
  .results-summary-card {
    width: 100%;
  }
  .results-summary-card {
    text-align: left;
  }
}