/*
 * SkyHub Portal CSS Split: app-components.css
 * Source: assets/css/aop-app.css lines 810-1118
 * Purpose: Generic components, chips, drawers, native portal data context and common detail-card behaviour.
 * Phase: v0.12.2.9 Architecture Stabilisation Phase 2 — CSS split only.
 */

/* v0.1.4 narrow trouble-area polish pass: screenshots-only fixes. */
html:has(.aop-app), body:has(.aop-app),
body.aop-blank-template {
  margin: 0 !important;
  padding: 0 !important;
}
body.aop-blank-template .aop-template-root,
body.aop-blank-template .aop-app {
  height: 100vh;
  min-height: 100vh;
}
.aop-main {
  padding-top: 0 !important;
}
.aop-topbar {
  margin-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.aop-content {
  padding-top: 24px;
}

/* Sidebar icon language: consistent icon badge treatment with aircraft icon moved to registry. */
.aop-nav-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
  background: rgba(60,182,211,.16);
  color: var(--aop-cyan);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.aop-nav-item.is-active .aop-nav-icon {
  background: rgba(60,182,211,.24);
}

/* Refined status / priority / transaction chips. */
.aop-chip,
.aop-priority-chip,
.aop-status-pill,
.aop-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  border: 0;
  padding: 5px 10px;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.aop-chip.submitted,
.aop-chip.approved,
.aop-chip.credit {
  background: rgba(15,159,110,.12);
  color: var(--aop-green);
}
.aop-chip.draft,
.aop-chip.pending {
  background: rgba(213,138,33,.13);
  color: var(--aop-orange);
}
.aop-chip.debit,
.aop-chip.rejected {
  background: rgba(200,77,93,.12);
  color: var(--aop-red);
}
.aop-priority-chip.low {
  color: var(--aop-cyan-dark);
  background: rgba(60,182,211,.12);
}
.aop-priority-chip.normal {
  color: var(--aop-green);
  background: rgba(15,159,110,.12);
}
.aop-priority-chip.high {
  color: var(--aop-red);
  background: rgba(200,77,93,.12);
}
.aop-priority-chip.critical {
  color: #fff;
  background: var(--aop-red);
  border: 0;
  animation: aopCriticalPulse 1.35s ease-in-out infinite;
}
.aop-table .aop-btn-small,
.aop-table .aop-query-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 12px;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 750;
}

/* New Order flow headings and line editor repair. */
.aop-section-intro h2 {
  margin: 0 0 4px;
  color: var(--aop-navy);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}
.aop-line-table-wrap {
  overflow-x: auto !important;
}
.aop-line-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.aop-line-table .aop-line-row {
  display: table-row !important;
}
.aop-line-table th,
.aop-line-table td {
  display: table-cell;
  padding: 7px 6px;
  vertical-align: middle;
  font-size: 12px;
}
.aop-line-table th:nth-child(1), .aop-line-table td:nth-child(1) { width: 34px; }
.aop-line-table th:nth-child(2), .aop-line-table td:nth-child(2) { width: 17%; }
.aop-line-table th:nth-child(3), .aop-line-table td:nth-child(3) { width: 22%; }
.aop-line-table th:nth-child(4), .aop-line-table td:nth-child(4) { width: 7%; }
.aop-line-table th:nth-child(5), .aop-line-table td:nth-child(5) { width: 8%; }
.aop-line-table th:nth-child(6), .aop-line-table td:nth-child(6) { width: 10%; }
.aop-line-table th:nth-child(7), .aop-line-table td:nth-child(7) { width: 10%; }
.aop-line-table th:nth-child(8), .aop-line-table td:nth-child(8) { width: 14%; }
.aop-line-table th:nth-child(9), .aop-line-table td:nth-child(9) { width: 46px; text-align: center; }
.aop-line-table input,
.aop-line-table select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.aop-line-no {
  background: transparent !important;
  border-radius: 0 !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1;
  text-align: center;
}
@media (max-width: 900px) {
  .aop-line-table {
    min-width: 920px;
  }
}

/* Product drawer text hierarchy. */
.aop-drawer .aop-eyebrow,
.aop-drawer .aop-drawer-kicker,
.aop-product-detail .aop-eyebrow,
.aop-product-detail .aop-product-kicker {
  color: var(--aop-cyan-dark) !important;
  font-weight: 800;
  letter-spacing: .16em;
}
.aop-product-detail h2,
.aop-product-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--aop-navy);
  margin: 4px 0 5px;
}
.aop-product-detail p,
.aop-product-description {
  font-size: 15px;
  line-height: 1.4;
  color: var(--aop-muted);
}
.aop-product-detail .aop-dl dd {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--aop-ink);
}
.aop-product-detail .aop-dl dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--aop-muted);
}

/* Standard drawer cards for generic records and query forms. */
.aop-drawer-content-card,
.aop-record-detail,
.aop-query-drawer {
  background: #f7f8fb;
  border: 1px solid #e3e7ee;
  border-radius: 18px;
  padding: 16px;
}
.aop-record-detail .aop-drawer-kicker {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 11px;
}
.aop-drawer-record-title,
.aop-query-drawer h2,
.aop-drawer-form-title {
  color: var(--aop-navy);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 10px;
}
.aop-drawer-record-description {
  color: var(--aop-muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 18px;
}
.aop-drawer-record-card {
  background: #fff;
  border: 1px solid var(--aop-line);
  border-radius: 16px;
  padding: 14px;
}
.aop-drawer-record-card dd {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.aop-drawer-actions .aop-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 750;
}

/* Shipping & Customs spacing and form action alignment. */
.aop-module-shipping .aop-quick-shipping-panel {
  margin-top: 30px;
  padding: 24px;
  border-radius: 24px;
}
.aop-module-shipping .aop-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.aop-module-shipping .aop-form-actions .aop-btn-primary {
  width: auto;
  min-width: 180px;
  max-width: 260px;
}
@media (max-width: 700px) {
  .aop-module-shipping .aop-form-actions .aop-btn-primary {
    width: 100%;
    max-width: none;
  }
}

/* v0.2.10 Native portal data context */
.aop-data-context-card {
    margin: -10px 0 24px;
    padding: 14px 18px;
    border: 1px solid rgba(10, 50, 92, 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,248,255,0.74));
    box-shadow: 0 14px 34px rgba(9, 30, 66, 0.08);
    display: grid;
    gap: 4px;
}
.aop-data-context-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(11, 89, 155, 0.09);
    color: #0f4f85;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.aop-data-context-card strong {
    color: #10223d;
    font-size: 15px;
}
.aop-data-context-card small {
    color: #617086;
    font-size: 13px;
    line-height: 1.45;
}


/* v0.23.2.8.6 — Staff master-data quick view drawer polish */
.aop-staff-master-view{display:grid;gap:14px;}
.aop-record-view-hero{display:flex;align-items:flex-start;gap:14px;margin-bottom:2px;}
.aop-record-view-hero .aop-logo-preview-card,.aop-record-view-hero .aop-product-thumb{flex:0 0 auto;}
.aop-pill-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.aop-staff-master-view .aop-drawer-record-card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--aop-muted);}
.aop-staff-master-view .aop-drawer-record-card p{margin:0 0 8px;color:var(--aop-ink);line-height:1.45;white-space:pre-line;}
.aop-staff-master-view .aop-drawer-record-card p:last-child{margin-bottom:0;}
@media(max-width:680px){.aop-record-view-hero{display:grid;}.aop-staff-master-view .aop-detail-grid{grid-template-columns:1fr;}}