/*
 * SkyHub Portal CSS Split: app-base.css
 * Source: assets/css/aop-app.css lines 1-558
 * Purpose: Base variables, reset, blank-template reset and early app shell foundation.
 * Phase: v0.12.2.9 Architecture Stabilisation Phase 2 — CSS split only.
 */

:root {
  --aop-navy: #111538;
  --aop-navy-2: #181d4a;
  --aop-ink: #14172f;
  --aop-muted: #6f7387;
  --aop-line: rgba(17, 21, 56, .10);
  --aop-bg: #f4f6fb;
  --aop-card: rgba(255,255,255,.92);
  --aop-cyan: #3cb6d3;
  --aop-cyan-dark: #2296b6;
  --aop-green: #0f9f6e;
  --aop-red: #c84d5d;
  --aop-orange: #d58a21;
  --aop-radius-sm: 12px;
  --aop-radius: 18px;
  --aop-radius-lg: 28px;
  --aop-shadow: 0 18px 55px rgba(17, 21, 56, .13);
  --aop-shadow-soft: 0 10px 30px rgba(17, 21, 56, .08);
  --aop-sidebar-width: 270px;
  --aop-sidebar-collapsed: 78px;
  --aop-topbar-height: 76px;
  --aop-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:has(.aop-app), body:has(.aop-app) {
  margin: 0 !important;
  background: var(--aop-bg) !important;
}

.aop-app, .aop-app * { box-sizing: border-box; }
.aop-app {
  min-height: 100vh;
  display: flex;
  color: var(--aop-ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(60,182,211,.13), transparent 32%),
    linear-gradient(135deg, #f7f8fc 0%, #edf1f6 100%);
  font-family: var(--aop-font);
  overflow-x: hidden;
}
.aop-app a { color: inherit; text-decoration: none; }

.aop-sidebar {
  position: sticky;
  top: 0;
  width: var(--aop-sidebar-width);
  height: 100vh;
  flex: 0 0 var(--aop-sidebar-width);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 10%, rgba(60,182,211,.20), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.11) 0 2px, transparent 3px) 0 0/28px 28px,
    linear-gradient(180deg, #14183e 0%, #111536 100%);
  color: #fff;
  transition: width .24s ease, flex-basis .24s ease, transform .24s ease;
  box-shadow: 18px 0 45px rgba(17,21,56,.18);
  z-index: 20;
}
.aop-sidebar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 28px 22px 18px;
  min-height: 108px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.aop-brand { display: grid; line-height: 1; gap: 4px; min-width: 0; }
.aop-brand-main { font-size: 30px; font-weight: 900; letter-spacing: -.06em; }
.aop-brand-sub { font-size: 12px; color: var(--aop-cyan); font-weight: 900; letter-spacing: .18em; }
.aop-icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10); color: inherit; cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.aop-icon-btn:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.aop-nav {
  flex: 1;
  overflow: auto;
  padding: 18px 14px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.aop-nav-group { margin: 0 0 12px; }
.aop-nav-group-btn {
  width: 100%; border: 0; background: transparent; color: rgba(255,255,255,.58);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900;
  cursor: pointer;
}
.aop-nav-group-btn b { opacity: .55; }
.aop-nav-group-items { display: grid; gap: 6px; }
.aop-nav-group.is-closed .aop-nav-group-items { display: none; }
.aop-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 43px; border-radius: 15px; padding: 10px 12px;
  color: rgba(255,255,255,.74); font-size: 13px; font-weight: 850; letter-spacing: .02em;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.aop-nav-item:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateX(2px); }
.aop-nav-item.is-active {
  color: #fff;
  background: rgba(255,255,255,.13);
  box-shadow: inset 4px 0 0 var(--aop-cyan), 0 9px 22px rgba(0,0,0,.12);
}
.aop-nav-icon {
  width: 28px; height: 28px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(60,182,211,.12); color: var(--aop-cyan); font-weight: 950; flex: 0 0 28px;
}
.aop-sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.aop-user-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 18px; background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.aop-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--aop-cyan), #195a80); color: #fff; font-weight: 950; flex: 0 0 auto;
}
.aop-avatar.small { width: 34px; height: 34px; font-size: 12px; }
.aop-user-meta { display: grid; min-width: 0; }
.aop-user-meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aop-user-meta small { font-size: 11px; color: rgba(255,255,255,.64); }

.aop-app.is-sidebar-collapsed .aop-sidebar {
  width: var(--aop-sidebar-collapsed);
  flex-basis: var(--aop-sidebar-collapsed);
}
.aop-app.is-sidebar-collapsed .aop-brand, .aop-app.is-sidebar-collapsed .aop-nav-group-btn span,
.aop-app.is-sidebar-collapsed .aop-nav-label, .aop-app.is-sidebar-collapsed .aop-user-meta { display: none; }
.aop-app.is-sidebar-collapsed .aop-sidebar-head { justify-content: center; padding-inline: 12px; }
.aop-app.is-sidebar-collapsed .aop-nav { padding-inline: 12px; }
.aop-app.is-sidebar-collapsed .aop-nav-item { justify-content: center; padding: 10px; }
.aop-app.is-sidebar-collapsed .aop-nav-item.is-active { box-shadow: inset 0 -3px 0 var(--aop-cyan); }
.aop-app.is-sidebar-collapsed .aop-nav-group-btn { justify-content: center; }
.aop-app.is-sidebar-collapsed .aop-nav-group-btn b { display: none; }
.aop-app.is-sidebar-collapsed .aop-user-card { justify-content: center; padding: 8px; }

.aop-main {
  flex: 1; min-width: 0; padding: 22px 26px 46px;
}
.aop-topbar {
  height: var(--aop-topbar-height);
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px 12px 18px;
  position: sticky; top: 0; z-index: 18;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.84);
  backdrop-filter: blur(18px);
  border-radius: 0 0 24px 24px;
  box-shadow: var(--aop-shadow-soft);
}
.aop-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 170px; }
.aop-mobile-menu { display: none; background: var(--aop-navy); color: #fff; }
.aop-breadcrumb { display: grid; line-height: 1.2; }
.aop-breadcrumb span { font-size: 11px; color: var(--aop-muted); text-transform: uppercase; font-weight: 900; letter-spacing: .16em; }
.aop-breadcrumb strong { font-size: 16px; color: var(--aop-ink); }
.aop-command {
  position: relative; flex: 1; max-width: 560px; margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  height: 44px; border: 1px solid var(--aop-line); border-radius: 15px; background: #fff; padding: 0 14px;
}
.aop-command span { color: var(--aop-navy); font-size: 22px; }
.aop-command input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--aop-ink); }
.aop-command-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--aop-line); border-radius: 16px;
  box-shadow: var(--aop-shadow); overflow: hidden; display: none; z-index: 40;
}
.aop-command-results.is-open { display: block; }
.aop-command-result { width: 100%; border: 0; background: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; }
.aop-command-result:hover { background: #f5f8fb; }
.aop-command-result small { color: var(--aop-muted); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; font-weight: 900; }
.aop-topbar-actions { display: flex; align-items: center; gap: 10px; }
.aop-bell {
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--aop-line);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.aop-bell span {
  position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--aop-red); color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 950;
}
.aop-account-pill { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--aop-line); border-radius: 999px; padding: 6px 11px 6px 6px; }
.aop-account-pill span:last-child { display: grid; line-height: 1.1; }
.aop-account-pill small { color: var(--aop-red); font-size: 10px; font-weight: 900; }
.aop-account-pill strong { max-width: 130px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aop-content { padding: 24px 8px 0; transition: opacity .12s ease; }
.aop-content.is-loading { opacity: .55; pointer-events: none; }
.aop-hero {
  min-height: 124px; border-radius: 24px; padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  color: #fff; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 94% 50%, rgba(60,182,211,.48), transparent 30%),
    linear-gradient(135deg, var(--aop-navy) 0%, #1a1f50 54%, #095a75 100%);
  box-shadow: var(--aop-shadow-soft);
}
.aop-hero:before {
  content: ''; position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.40), transparent 22%), radial-gradient(circle at 12% 88%, rgba(60,182,211,.28), transparent 20%);
}
.aop-hero > * { position: relative; z-index: 1; }
.aop-eyebrow { display: block; font-size: 11px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 6px; }
.aop-hero h1 { margin: 0; color: #fff; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.06em; line-height: 1.02; }
.aop-hero p { margin: 10px 0 0; max-width: 720px; color: rgba(255,255,255,.78); font-size: 14px; }
.aop-hero-badge { min-width: 150px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.12); border-radius: 18px; padding: 16px 18px; display: grid; gap: 6px; }
.aop-hero-badge span { font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.65); }
.aop-hero-badge strong { font-size: 20px; color: #fff; }

.aop-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.aop-stat-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aop-stat {
  min-height: 112px; border-radius: 20px; padding: 18px;
  background: var(--aop-card); border: 1px solid rgba(255,255,255,.85); box-shadow: var(--aop-shadow-soft);
  display: grid; align-content: center; gap: 7px;
}
.aop-stat span { font-size: 11px; font-weight: 950; color: var(--aop-muted); letter-spacing: .12em; text-transform: uppercase; }
.aop-stat strong { font-size: 26px; line-height: 1; letter-spacing: -.04em; color: var(--aop-navy); }
.aop-stat small { color: var(--aop-muted); font-size: 12px; }
.aop-stat.tone-blue { background: linear-gradient(135deg, rgba(60,182,211,.18), rgba(255,255,255,.92)); }
.aop-stat.tone-good strong { color: var(--aop-green); }
.aop-stat.tone-danger strong { color: var(--aop-red); }
.aop-stat.tone-warn strong { color: var(--aop-orange); }

.aop-two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 16px; margin-top: 16px; }
.aop-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.aop-panel {
  background: var(--aop-card); border: 1px solid rgba(255,255,255,.86); border-radius: 22px; box-shadow: var(--aop-shadow-soft); padding: 18px;
}
.aop-panel h2 { margin: 0 0 12px; color: var(--aop-ink); font-size: 20px; letter-spacing: -.04em; }
.aop-panel h3 { margin: 18px 0 8px; font-size: 14px; }
.aop-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aop-panel-head h2 { margin: 0; }
.aop-panel-head a, .aop-panel-head span { color: var(--aop-cyan-dark); font-size: 13px; font-weight: 850; }

.aop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; background: rgba(255,255,255,.70); border: 1px solid rgba(255,255,255,.82); border-radius: 18px; padding: 12px; box-shadow: var(--aop-shadow-soft); }
.aop-filter-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aop-filter-tabs button { border: 1px solid var(--aop-line); background: #fff; border-radius: 999px; padding: 9px 13px; color: var(--aop-muted); font-size: 12px; font-weight: 850; cursor: pointer; }
.aop-filter-tabs button.is-active { background: var(--aop-navy); color: #fff; border-color: var(--aop-navy); }
.aop-inline-search { height: 42px; border: 1px solid var(--aop-line); background: #fff; border-radius: 12px; padding: 0 12px; min-width: 260px; flex: 1; font: inherit; }

.aop-btn { border: 0; border-radius: 13px; padding: 11px 16px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.aop-btn:hover { transform: translateY(-1px); }
.aop-btn-small { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.aop-btn-primary { background: linear-gradient(135deg, var(--aop-cyan), var(--aop-cyan-dark)); color: #fff; box-shadow: 0 10px 24px rgba(60,182,211,.26); }
.aop-btn-secondary { background: #edf8fb; color: var(--aop-cyan-dark); }
.aop-btn-ghost { background: #fff; border: 1px solid var(--aop-line); color: var(--aop-navy); }
.aop-btn-dark { background: var(--aop-navy); color: #fff; }

.aop-table-wrap { overflow: auto; border: 1px solid var(--aop-line); border-radius: 16px; }
.aop-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; background: #fff; }
.aop-table th { position: sticky; top: 0; background: #10162f; color: #fff; text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 14px; z-index: 1; }
.aop-table td { padding: 14px; border-bottom: 1px solid var(--aop-line); vertical-align: middle; font-size: 13px; }
.aop-table tr:last-child td { border-bottom: 0; }
.aop-table td strong { display: block; font-size: 13px; color: var(--aop-ink); }
.aop-table td small { display: block; color: var(--aop-muted); margin-top: 3px; }
.aop-table.is-compact th, .aop-table.is-compact td { padding: 11px 12px; }
.aop-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; background: #f0f2f6; color: var(--aop-muted); }
.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-empty { display: grid; gap: 5px; min-height: 110px; align-content: center; justify-items: center; color: var(--aop-muted); border: 1px dashed var(--aop-line); border-radius: 16px; }
.aop-empty strong { color: var(--aop-ink); }
.aop-action-list { display: grid; gap: 10px; }
.aop-action-list a { display: grid; gap: 4px; border: 1px solid var(--aop-line); background: #fff; border-radius: 16px; padding: 14px; }
.aop-action-list a:hover { border-color: rgba(60,182,211,.45); }
.aop-action-list strong { color: var(--aop-navy); }
.aop-action-list small { color: var(--aop-muted); }
.aop-mini-list { margin-top: 18px; }
.aop-mini-list button { width: 100%; border: 0; background: #f7f9fb; border-radius: 13px; padding: 12px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; margin-bottom: 8px; text-align: left; }
.aop-mini-list small { color: var(--aop-muted); }

.aop-form { display: grid; gap: 16px; }
.aop-form-section { background: var(--aop-card); border: 1px solid rgba(255,255,255,.88); border-radius: 22px; box-shadow: var(--aop-shadow-soft); padding: 20px; }
.aop-section-intro { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.aop-section-intro > span { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--aop-navy); color: #fff; font-weight: 950; }
.aop-section-intro h2 { margin: 0 0 3px; color: var(--aop-navy); }
.aop-section-intro p { margin: 0; color: var(--aop-muted); font-size: 13px; }
.aop-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.aop-form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.aop-form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.aop-form label { display: grid; gap: 7px; color: var(--aop-muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .09em; }
.aop-form input, .aop-form select, .aop-form textarea { width: 100%; border: 1px solid var(--aop-line); background: #fff; border-radius: 12px; padding: 12px 13px; color: var(--aop-ink); font: inherit; font-size: 13px; font-weight: 500; outline: 0; }
.aop-form textarea { resize: vertical; min-height: 96px; }
.aop-form input:focus, .aop-form select:focus, .aop-form textarea:focus { border-color: var(--aop-cyan); box-shadow: 0 0 0 4px rgba(60,182,211,.11); }
.aop-line-editor { display: grid; gap: 10px; }
.aop-line-row { display: grid; grid-template-columns: minmax(220px, 1fr) 120px minmax(220px, 1fr); gap: 12px; padding: 12px; background: #f8fafd; border-radius: 16px; border: 1px solid var(--aop-line); }
.aop-form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.aop-notification-list { display: grid; gap: 12px; margin-top: 14px; }
.aop-note { display: flex; gap: 14px; align-items: flex-start; background: var(--aop-card); border: 1px solid rgba(255,255,255,.88); border-radius: 20px; padding: 16px; box-shadow: var(--aop-shadow-soft); }
.aop-note.is-unread { border-color: rgba(60,182,211,.35); }
.aop-note-icon { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,159,110,.12); color: var(--aop-green); flex: 0 0 auto; }
.aop-note h3 { margin: 0 0 7px; color: var(--aop-navy); }
.aop-note p { margin: 0; color: var(--aop-muted); font-size: 13px; }
.aop-note .aop-eyebrow { color: var(--aop-muted); margin-bottom: 4px; }

.aop-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.aop-checklist li { padding: 11px 12px 11px 38px; border-radius: 14px; background: #f8fafd; position: relative; font-weight: 800; font-size: 13px; }
.aop-checklist li:before { content: '!'; position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(213,138,33,.14); color: var(--aop-orange); font-size: 11px; }
.aop-checklist li.done:before { content: '✓'; background: rgba(15,159,110,.12); color: var(--aop-green); }
.aop-dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; }
.aop-dl dt { color: var(--aop-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .10em; font-weight: 950; }
.aop-dl dd { margin: 0; font-weight: 800; }
.aop-drawer-list { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.aop-drawer-list li { padding: 10px 12px; background: #f7f9fb; border-radius: 12px; display: grid; gap: 4px; }
.aop-drawer-list span { color: var(--aop-muted); font-size: 12px; }
.aop-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.aop-switch { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--aop-ink) !important; margin-bottom: 10px; }
.aop-switch input { width: auto !important; }

.aop-drawer {
  position: fixed; top: 0; right: 0; width: min(520px, 92vw); height: 100vh; background: #fff; z-index: 60;
  transform: translateX(104%); transition: transform .22s ease; box-shadow: -22px 0 60px rgba(17,21,56,.22); padding: 24px;
  overflow-y: auto;
}
.aop-drawer.is-open { transform: translateX(0); }
.aop-drawer-close { position: sticky; top: 0; margin-left: auto; display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 0; border-radius: 13px; background: var(--aop-navy); color: #fff; cursor: pointer; }
.aop-drawer h2 { color: var(--aop-navy); letter-spacing: -.04em; }
.aop-drawer p { color: var(--aop-muted); }
.aop-backdrop { display: none; position: fixed; inset: 0; background: rgba(12,14,33,.38); z-index: 50; }
.aop-backdrop.is-open { display: block; }
.aop-toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 10px; }
.aop-toast { background: var(--aop-navy); color: #fff; border-radius: 14px; padding: 13px 16px; box-shadow: var(--aop-shadow); min-width: 240px; font-weight: 850; }

.aop-login-screen { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--aop-navy), #0e4d66); font-family: var(--aop-font); padding: 24px; }
.aop-login-card { width: min(440px, 100%); border-radius: 26px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 34px; text-align: center; box-shadow: var(--aop-shadow); backdrop-filter: blur(18px); }
.aop-login-logo { font-size: 42px; font-weight: 950; letter-spacing: -.06em; }
.aop-login-logo strong { color: var(--aop-cyan); }
.aop-login-logo-lockup { margin-bottom: 18px; }
.aop-login-logo-lockup .aop-login-logo { line-height: 1; }
.aop-login-logo-lockup span { display: block; margin-top: 8px; color: rgba(255,255,255,.66); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.aop-login-card p { color: rgba(255,255,255,.72); }

@media (max-width: 1220px) {
  .aop-stat-grid, .aop-stat-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aop-two-col, .aop-three-col { grid-template-columns: 1fr; }
  .aop-form-grid.three, .aop-form-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aop-account-pill { display: none; }
}
@media (max-width: 900px) {
  .aop-sidebar { position: fixed; transform: translateX(-105%); }
  .aop-app.is-mobile-sidebar-open .aop-sidebar { transform: translateX(0); }
  .aop-app.is-mobile-sidebar-open .aop-backdrop { display: block; }
  .aop-main { padding: 12px 12px 32px; }
  .aop-mobile-menu { display: inline-flex; }
  .aop-topbar { border-radius: 20px; height: auto; min-height: 68px; flex-wrap: wrap; }
  .aop-command { order: 3; max-width: none; flex-basis: 100%; }
  .aop-hero { flex-direction: column; align-items: flex-start; min-height: 0; }
  .aop-hero-badge { width: 100%; }
  .aop-form-grid, .aop-form-grid.three, .aop-form-grid.four, .aop-line-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .aop-stat-grid, .aop-stat-grid.compact { grid-template-columns: 1fr; }
  .aop-topbar-actions .aop-btn-primary { display: none; }
  .aop-hero h1 { font-size: 30px; }
  .aop-toolbar { align-items: stretch; flex-direction: column; }
  .aop-inline-search { min-width: 0; width: 100%; }
}

/* v0.1.1 blank app-template reset: keeps the prototype outside the active WP theme shell. */
body.aop-blank-template {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--aop-bg) !important;
  overflow: hidden;
}
body.aop-blank-template .aop-template-root {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body.aop-blank-template .aop-app {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}
body.aop-blank-template .aop-main,
body.aop-blank-template .aop-content {
  min-width: 0;
}

/* v0.1.1 blank app-template reset: keeps the prototype outside the active WP theme shell. */
body.aop-blank-template {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--aop-bg) !important;
  overflow: hidden;
}
body.aop-blank-template .aop-template-root {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body.aop-blank-template .aop-app {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}
body.aop-blank-template .aop-main,
body.aop-blank-template .aop-content {
  min-width: 0;
}

/* v0.1.2 Ryno CSS foundation notes: button, density, form, drawer and table standardisation. */
.aop-btn,
.aop-btn-primary,
.aop-btn-secondary,
.aop-btn-ghost,
.aop-btn-dark {
  box-shadow: none !important;
  text-decoration: none !important;
}
.aop-btn-primary,
.aop-btn-dark,
.aop-topbar .aop-btn-primary,
.aop-topbar .aop-btn-dark {
  color: #fff !important;
  text-shadow: none !important;
}
.aop-btn:hover { box-shadow: none !important; }
.aop-btn-primary:hover { background: linear-gradient(135deg, var(--aop-cyan-dark), var(--aop-cyan)); }
.aop-btn-secondary:hover,
.aop-btn-ghost:hover { background: #f2f4f7; }

.aop-hero { margin-bottom: 18px; }
.aop-hero .aop-eyebrow { color: var(--aop-cyan-dark); }
.aop-module-new-order .aop-hero,
.aop-module-statements .aop-hero { margin-bottom: 24px; }

.aop-action-board-panel {
  color: #fff;
  background:
    radial-gradient(circle at 94% 50%, rgba(60,182,211,.48), transparent 30%),
    linear-gradient(135deg, var(--aop-navy) 0%, #1a1f50 54%, #095a75 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--aop-shadow-soft);
}
.aop-action-board-panel .aop-panel-head h2,
.aop-action-board-panel .aop-mini-list h3 { color: #fff; }
.aop-action-board-panel .aop-panel-head span { color: #fff; text-shadow: none; }
.aop-action-board-panel .aop-action-list a {
  background: #fff;
  border-color: rgba(255,255,255,.92);
  color: var(--aop-ink);
}
.aop-action-board-panel .aop-action-list a:hover,
.aop-action-board-panel .aop-mini-list button:hover { background: #f2f4f7; }
@media (min-width: 901px) {
  .aop-action-board-panel .aop-action-list small { font-size: 17px; line-height: 1.35; }
}

.aop-priority-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 25px; border-radius: 999px; padding: 4px 10px;
  font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em;
  border: 0;
}
.aop-priority-chip.high { color: var(--aop-red); background: rgba(200,77,93,.12); }
.aop-priority-chip.normal { color: var(--aop-green); background: rgba(15,159,110,.12); }
.aop-priority-chip.critical { color: #fff; background: #d4112f; border: 1px solid #d4112f; animation: aopCriticalPulse 1.2s infinite; }
@keyframes aopCriticalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,17,47,.45); }
  50% { box-shadow: 0 0 0 7px rgba(212,17,47,0); }
}

.aop-order-header-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: var(--aop-shadow-soft);
  backdrop-filter: blur(16px);
}
.aop-order-header-card div { display: grid; gap: 4px; }
.aop-order-header-card strong { color: var(--aop-navy); font-size: 25px; letter-spacing: -.04em; }
.aop-order-header-card small { color: var(--aop-muted); }
.aop-order-number-label { color: var(--aop-cyan-dark); font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.aop-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 18px; align-items: start; }
.aop-order-summary-card { position: sticky; top: calc(var(--aop-topbar-height) + 24px); display: grid; gap: 14px; }
.aop-live-summary { border-radius: 22px; padding: 20px; background: #fff; border: 1px solid rgba(17,21,56,.10); box-shadow: var(--aop-shadow-soft); }
.aop-live-summary .aop-eyebrow { color: var(--aop-cyan-dark); }
.aop-live-summary h2 { margin: 5px 0 5px; color: var(--aop-navy); }
.aop-live-summary > strong { display: block; color: var(--aop-navy); font-size: 32px; letter-spacing: -.05em; margin-bottom: 14px; }
.aop-summary-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 12px 0; }
.aop-summary-dl dt { color: var(--aop-muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.aop-summary-dl dd { margin: 0; color: var(--aop-ink); font-weight: 900; text-align: right; }
.aop-commercial-note { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(60,182,211,.10); color: var(--aop-muted); font-size: 12px; line-height: 1.45; }
.aop-summary-actions { display: grid; gap: 10px; }
.aop-order-action-help {
  margin: 2px 0 0;
  color: var(--aop-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.aop-line-toolbar { margin-bottom: 12px; display: flex; justify-content: flex-end; }
.aop-line-table-wrap { overflow-x: auto; border: 1px solid var(--aop-line); border-radius: 16px; }
.aop-line-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; background: #fff; }
.aop-line-table th { background: #10162f; color: #fff; padding: 12px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
.aop-line-table td { padding: 10px; border-bottom: 1px solid var(--aop-line); vertical-align: middle; }
.aop-line-table input, .aop-line-table select { min-height: 38px; }
.aop-line-no { font-weight: 950; color: var(--aop-cyan-dark); }

.aop-money-credit { color: var(--aop-green) !important; font-weight: 900; }
.aop-money-debit { color: var(--aop-red) !important; font-weight: 900; }
.aop-money-usd { color: var(--aop-cyan-dark) !important; font-weight: 950; }
.aop-float-table tr.is-querying td { background: rgba(200,77,93,.08) !important; }

.aop-drawer { background: #fff; }
.aop-drawer-content-card,
.aop-drawer-body > .aop-drawer-content-card,
.aop-drawer-body > h2 + p + dl,
.aop-drawer-body > dl {
  background: #f7f8fb;
  border: 1px solid #e3e7ee;
  border-radius: 18px;
  padding: 16px;
}
.aop-drawer .aop-table th { background: #10162f; color: #fff; }
.aop-drawer .aop-table td { background: #fff; }

.aop-product-thumb {
  width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 950; background: linear-gradient(135deg, var(--aop-cyan), var(--aop-navy));
}
.aop-product-hero-row { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.aop-product-image-large { width: 300px; height: 300px; border-radius: 24px; display: grid; place-items: center; color: #fff; font-size: 84px; font-weight: 950; background: linear-gradient(135deg, var(--aop-cyan), var(--aop-navy)); }
.aop-product-note { margin-top: 16px; color: var(--aop-red); font-weight: 850; background: rgba(200,77,93,.08); border-radius: 14px; padding: 12px; }
.aop-reserved-control-box { margin-top: 14px; display: grid; gap: 4px; background: #fff; border: 1px dashed rgba(17,21,56,.22); border-radius: 14px; padding: 13px; color: var(--aop-muted); }
.aop-reserved-control-box strong { color: var(--aop-navy); }

.aop-four-col { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.aop-profile-dl dd { font-size: 14px; overflow-wrap: anywhere; }
.aop-profile-photo { width: 112px; height: 112px; border-radius: 32px; margin: 8px 0 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--aop-cyan), var(--aop-navy)); color: #fff; }
.aop-profile-photo span { font-size: 32px; font-weight: 950; }
.aop-preference-label { display: grid; gap: 7px; margin-top: 12px; color: var(--aop-muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .09em; }
.aop-preference-label select { width: 100%; border: 1px solid var(--aop-line); background: #fff; border-radius: 12px; padding: 12px 13px; color: var(--aop-ink); font: inherit; font-size: 13px; font-weight: 500; }

@media (max-width: 1220px) {
  .aop-order-layout { grid-template-columns: 1fr; }
  .aop-order-summary-card { position: static; }
  .aop-four-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .aop-product-hero-row { grid-template-columns: 150px 1fr; }
  .aop-product-image-large { width: 150px; height: 150px; border-radius: 20px; font-size: 48px; }
  .aop-profile-dl dd { font-size: 13px; }
}
@media (max-width: 620px) {
  .aop-four-col { grid-template-columns: 1fr; }
  .aop-product-hero-row { grid-template-columns: 1fr; }
}


/* v0.12.7 — Branded SkyHub app login route */
.aop-login-screen-v2 { align-items: stretch; }
.aop-login-shell { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 22px; align-items: stretch; }
.aop-login-brand-panel { border-radius: 30px; padding: clamp(30px, 5vw, 58px); color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); box-shadow: var(--aop-shadow); backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; text-align: left; }
.aop-login-kicker { color: var(--aop-cyan); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 850; margin-bottom: 16px; }
.aop-login-brand-panel h1 { margin: 0 0 18px; max-width: 680px; font-size: clamp(30px, 4.15vw, 52px); line-height: 1.02; letter-spacing: -.055em; font-weight: 820; }
.aop-login-brand-panel p { max-width: 600px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.65; }
.aop-login-feature-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.aop-login-feature-grid span { border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); padding: 9px 13px; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 800; }
.aop-login-screen-v2 .aop-login-logo { font-size: clamp(30px, 3.2vw, 42px); }
.aop-login-screen-v2 .aop-login-card { width: 100%; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.aop-login-form { display: grid; gap: 14px; margin-top: 20px; }
.aop-login-form label { display: grid; gap: 7px; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-align: left; }
.aop-login-form input[type="text"], .aop-login-form input[type="password"] { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.12); color: #fff; padding: 14px 15px; font: inherit; outline: none; }
.aop-login-form input[type="text"]:focus, .aop-login-form input[type="password"]:focus { border-color: rgba(103,232,249,.72); box-shadow: 0 0 0 4px rgba(103,232,249,.12); }
.aop-login-form input:-webkit-autofill { -webkit-text-fill-color: #111827; }
.aop-login-remember { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; color: rgba(255,255,255,.72) !important; font-size: 13px !important; }
.aop-login-remember input { width: 16px; height: 16px; }
.aop-login-message { border-radius: 15px; padding: 11px 13px; margin-top: 16px; font-size: 13px; font-weight: 750; }
.aop-login-message.is-info { background: rgba(103,232,249,.14); border: 1px solid rgba(103,232,249,.24); color: rgba(255,255,255,.92); }
.aop-login-message.is-warning { background: rgba(251,191,36,.16); border: 1px solid rgba(251,191,36,.32); color: #fff7ed; }
.aop-login-help { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.6) !important; }
@media (max-width: 860px) {
  .aop-login-shell { grid-template-columns: 1fr; }
  .aop-login-brand-panel { min-height: auto; }
}
/* v0.21.2.1 — Sidebar Section Heading Wrap Hotfix
 * Keep customer-facing sidebar section headings on one line while preserving
 * the existing collapsed-sidebar behaviour and menu routing.
 */
.aop-nav-group-btn {
  gap: 8px;
}

.aop-nav-group-btn span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size: 10.5px;
  letter-spacing: .105em;
}

.aop-nav-group-btn b {
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .aop-nav-group-btn span {
    font-size: 10px;
    letter-spacing: .085em;
  }
}

/* v0.23.1.1 — persistent customer float query state */
.aop-float-table tr.has-active-query td,
.aop-float-table tr.is-querying td {
  background: rgba(200, 77, 93, .10) !important;
  border-bottom-color: rgba(180, 35, 24, .22) !important;
}
.aop-float-table tr.has-active-query td:first-child,
.aop-float-table tr.is-querying td:first-child {
  box-shadow: inset 4px 0 0 rgba(180, 35, 24, .85);
}
.aop-float-query-note {
  display: block;
  margin-top: 3px;
  color: #9f2c35;
  font-size: 10px;
  font-weight: 800;
}
.aop-chip.query-open {
  margin-top: 4px;
  background: rgba(180, 35, 24, .12) !important;
  color: #9f2c35 !important;
  border-color: rgba(180, 35, 24, .26) !important;
}

/* v0.23.1.2 — Float query action controls */
.aop-note-actions .aop-inline-action-form{display:inline-flex;margin:0;}
.aop-note-context-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;color:#607089;font-size:12px;}
.aop-statement-viewer-toolbar .aop-released-statement-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.aop-statement-viewer-toolbar .aop-released-statement-actions .aop-btn{white-space:nowrap;}
@media print{.aop-float-statement-standalone{padding:0!important;background:#fff!important}.aop-statement-viewer-shell.is-print-route{padding:0!important;background:#fff!important}.aop-statement-viewer-toolbar{display:none!important}}

/* v0.23.2.8.7 — Portal logo / CI stability */
.aop-brand.aop-brand-has-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  width: min(164px, 100%);
  text-decoration: none;
}
.aop-sidebar-brand-logo {
  display: block;
  width: 100%;
  max-width: 154px;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.aop-brand-fallback {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.055em;
  color: #fff;
}
.aop-login-logo-lockup-image {
  display: grid;
  gap: 12px;
  align-items: start;
  justify-items: start;
}
.aop-login-brand-logo {
  display: block;
  width: min(240px, 100%);
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.24));
}
.aop-login-logo-lockup-image .aop-brand-fallback {
  font-size: clamp(34px, 4vw, 48px);
}
.aop-app.is-sidebar-collapsed .aop-brand.aop-brand-has-logo {
  display: none;
}
@media (max-width: 720px) {
  .aop-login-logo-lockup-image,
  .aop-login-brand-logo {
    justify-items: center;
    object-position: center center;
    margin-inline: auto;
  }
}

/* v0.23.2.8.7.2 — Login Page CI Polish Hotfix
 * Tighten the SkyHub login composition without touching authentication logic.
 */
.aop-login-screen-v2 {
  padding: clamp(22px, 3vw, 34px);
}
.aop-login-screen-v2 .aop-login-shell {
  width: min(1120px, 100%);
  gap: clamp(18px, 2vw, 26px);
}
.aop-login-screen-v2 .aop-login-brand-panel {
  justify-content: center;
  min-height: 500px;
  padding: clamp(34px, 4.5vw, 56px);
}
.aop-login-screen-v2 .aop-login-brand-panel h1 {
  font-weight: 600;
  font-size: clamp(32px, 3.75vw, 50px);
  line-height: 1.08;
  letter-spacing: -.05em;
  max-width: 650px;
}
.aop-login-screen-v2 .aop-login-brand-panel p {
  margin-top: 26px;
}
.aop-login-screen-v2 .aop-login-feature-grid {
  margin-top: 30px;
}
.aop-login-screen-v2 .aop-login-card {
  justify-content: center;
  padding: clamp(30px, 3.5vw, 44px);
}
.aop-login-screen-v2 .aop-login-logo-lockup {
  margin-bottom: 18px;
}
.aop-login-screen-v2 .aop-login-logo-lockup-image {
  gap: 8px;
}
.aop-login-screen-v2 .aop-login-logo-lockup-image span {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .78;
}
.aop-login-screen-v2 .aop-login-brand-logo {
  width: min(190px, 100%);
  max-height: 72px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.20));
}
.aop-login-screen-v2 .aop-login-card > p:first-of-type {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.45;
}
.aop-login-screen-v2 .aop-login-message {
  margin-top: 14px;
  padding: 10px 12px;
}
.aop-login-screen-v2 .aop-login-form {
  margin-top: 18px;
  gap: 13px;
}
.aop-login-screen-v2 .aop-login-help {
  margin-top: 16px;
}


/* v0.23.2.8.7.3 — Login Route Guard + Final CI Alignment Hotfix */
.aop-login-screen-v2 .aop-login-brand-logo {
  width: min(212px, 100%);
  max-height: 82px;
}
.aop-login-screen-v2 .aop-login-logo-lockup-image span {
  display: inline-block;
  max-width: 212px;
  font-size: 8.5px;
  letter-spacing: .13em;
  line-height: 1.35;
  white-space: nowrap;
}
.aop-login-screen-v2 .aop-login-form input[type="text"],
.aop-login-screen-v2 .aop-login-form input[type="password"],
.aop-login-screen-v2 .aop-login-form .aop-btn {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.aop-login-screen-v2 .aop-login-form .aop-btn {
  display: block;
  min-height: 43px;
}