:root {
  --osa-ink: #0d2a45;
  --osa-muted: #587087;
  --osa-line: #dbe4e8;
  --osa-accent: #087f7b;
  --osa-accent-dark: #066662;
  --osa-accent-soft: #eaf7f6;
  --osa-danger: #9f2929;
  --osa-warning: #855b0a;
  --osa-shadow: 0 14px 34px rgba(15,42,69,.07);
  --row: 32px;
  --sku: 210px;
}

.hidden { display: none !important; }

.osa-content {
  width: min(calc(100% - 56px), var(--home-content-max));
  margin: 0 auto;
  padding-bottom: 90px;
}

.osa-route-head { padding-bottom: 20px; }

.safe-back-button,
.btn-primary,
.btn-secondary {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.safe-back-button {
  min-height: 34px;
  margin-bottom: 14px;
  border: 1px solid var(--osa-line);
  background: #fff;
  color: var(--osa-ink);
}

.osa-loading,
.osa-state,
.osa-panel {
  border: 1px solid var(--osa-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--osa-shadow);
}

.osa-loading,
.osa-state {
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 22px 30px;
  color: var(--osa-muted);
  font-size: 13px;
}

.osa-state {
  display: block;
  max-width: 620px;
}

.osa-state h2 { margin: 0 0 8px; color: var(--osa-ink); }
.osa-state p { color: var(--osa-muted); font-size: 11px; }
.osa-state a { color: var(--osa-accent); font-size: 10px; font-weight: 800; }

.osa-panel { padding: 22px; }

.osa-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.osa-panel-head h2 {
  margin: 0;
  color: var(--osa-ink);
  font-size: 20px;
}

.osa-panel-head p {
  margin: 5px 0 0;
  color: var(--osa-muted);
  font-size: 11px;
}

.osa-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--osa-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.osa-filter-grid {
  display: grid;
  grid-template-columns: 170px minmax(300px, 1.5fr) minmax(220px, .8fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--osa-line);
  border-radius: 12px;
  background: #f9fbfb;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label {
  color: var(--osa-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--osa-line);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--osa-ink);
  font: inherit;
  font-size: 11px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(8,127,123,.5);
  box-shadow: 0 0 0 3px rgba(8,127,123,.09);
}

.store-search-wrap { position: relative; }

.store-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--osa-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(13,42,69,.15);
}

.store-search-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid #edf1f3;
  cursor: pointer;
}

.store-search-item:hover,
.store-search-item.active { background: var(--osa-accent-soft); }
.store-search-item.disabled { opacity: .55; pointer-events: none; }
.store-search-name { color: var(--osa-ink); font-size: 10px; font-weight: 800; }
.store-search-meta { margin-top: 3px; color: var(--osa-muted); font-size: 9px; }
.store-state-badge { color: var(--osa-accent); font-size: 8px; font-weight: 800; }

.selected-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.selected-chip {
  padding: 5px 8px;
  border: 1px solid #cbd8df;
  border-radius: 999px;
  background: #fff;
  color: var(--osa-ink);
  font-size: 9px;
  font-weight: 750;
}

.principal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  align-items: center;
}

.principal-tab {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--osa-line);
  border-radius: 8px;
  background: #fff;
  color: var(--osa-ink);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.principal-tab.active {
  border-color: var(--osa-accent);
  background: var(--osa-accent);
  color: #fff;
}

.principal-tab.completed { opacity: .7; }

.settings-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #cfe5e3;
  border-radius: 11px;
  background: #f5fbfa;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 12px;
  align-items: end;
}

.settings-title { margin: 0; color: var(--osa-accent-dark); font-size: 11px; font-weight: 850; }
.settings-note { margin: 4px 0 0; color: var(--osa-muted); font-size: 9px; }

.osa-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 0 2px;
}

.muted { color: var(--osa-muted); font-size: 10px; line-height: 1.5; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.pill-success { background: #eaf8f1; color: #17643f; }
.pill-warning { background: #fff6df; color: var(--osa-warning); }

.osa-inline-loading {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--osa-line);
  border-radius: 11px;
  background: #f9fbfb;
}

.osa-inline-loading span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--osa-accent);
  animation: osaPulse 1s infinite alternate;
}

.osa-inline-loading p { margin: 0; color: var(--osa-muted); font-size: 11px; }
@keyframes osaPulse { to { opacity: .25; transform: scale(.72); } }

.quality-panel,
.empty-state {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.5;
}

.quality-danger { border: 1px solid #efc4c4; background: #fff5f5; color: var(--osa-danger); }
.quality-warning { border: 1px solid #ead6a4; background: #fff8e8; color: var(--osa-warning); }
.empty-state { border: 1px solid var(--osa-line); background: #f7f9fa; color: var(--osa-muted); }

.swipe-hint {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid #cfe1ec;
  border-radius: 9px;
  background: #f4f9fc;
  color: #476579;
  font-size: 9px;
}

.table-wrap {
  width: 100%;
  max-height: calc(100vh - 300px);
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--osa-line);
  border-radius: 11px;
  background: #fff;
}

table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border-right: 1px solid #edf1f3;
  border-bottom: 1px solid #edf1f3;
  color: var(--osa-ink);
  font-size: 9px;
}

th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f5f8f9;
  color: #36536a;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.sticky-col { position: sticky; left: 0; z-index: 4; width: var(--row); min-width: var(--row); background: #fff; }
.sticky-col-2 { position: sticky; left: var(--row); z-index: 4; width: var(--sku); min-width: var(--sku); background: #fff; }
thead .sticky-col,
thead .sticky-col-2 { z-index: 7; background: #f5f8f9; }

.sku-cell { font-weight: 800; line-height: 1.35; }

.os-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #dc4040;
}

.days-os-pill,
.osa-days-pill {
  display: inline-flex;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaf8f1;
  color: #17643f;
  font-size: 9px;
  font-weight: 850;
}

.days-os-pill.has-os,
.osa-days-pill.has-os {
  background: #fff0f0;
  color: var(--osa-danger);
}

.remarks-text,
.osa-card-remarks {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--osa-line);
  border-radius: 8px;
  background: #fff;
  color: var(--osa-ink);
  font-size: 10px;
}

.summary-box {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--osa-line);
  border-radius: 12px;
  background: #fff;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.summary-item {
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--osa-line);
  border-radius: 10px;
  background: #f8fafb;
}

.summary-item .label {
  color: var(--osa-muted);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.summary-item .value {
  margin-top: 7px;
  color: var(--osa-ink) !important;
  font-size: 20px;
  font-weight: 850;
}

.summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn-primary {
  border: 1px solid var(--osa-accent);
  background: var(--osa-accent);
  color: #fff;
}

.btn-secondary {
  border: 1px solid var(--osa-line);
  background: #fff;
  color: var(--osa-ink);
}

.btn-danger {
  border-color: #efc4c4;
  background: #fff5f5;
  color: var(--osa-danger);
}

#osaMobileCards { display: none; }

#stickySubmitBar {
  position: fixed;
  left: var(--home-sidebar-width, 248px);
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  padding: 9px 18px;
  border-top: 1px solid var(--osa-line);
  background: rgba(255,255,255,.98);
  box-shadow: 0 -8px 24px rgba(15,42,69,.08);
}

#stickySubmitBar.show { display: block; }

.sticky-bar-inner {
  width: min(100%, var(--home-content-max));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sticky-bar-stats,
.sticky-bar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.sticky-stat {
  padding: 5px 8px;
  border: 1px solid var(--osa-line);
  border-radius: 8px;
  background: #f8fafb;
  color: var(--osa-ink);
  font-size: 8px;
  font-weight: 750;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 78px;
  z-index: 200;
  max-width: 360px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--osa-ink);
  color: #fff;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .18s ease;
}

.toast.show { opacity: 1; transform: translateY(0); }

.osa-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f7f8;
}

.osa-modal-head,
.osa-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-color: var(--osa-line);
  background: #fff;
}

.osa-modal-head { justify-content: space-between; border-bottom: 1px solid var(--osa-line); }
.osa-modal-foot { border-top: 1px solid var(--osa-line); }

.osa-modal-title { color: var(--osa-ink); font-size: 14px; font-weight: 850; }
.osa-modal-sku,
.osa-modal-count { color: var(--osa-muted); font-size: 10px; }

.osa-modal-close {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--osa-line);
  border-radius: 9px;
  background: #fff;
  color: var(--osa-ink);
}

.osa-modal-body { flex: 1; overflow: auto; padding: 16px; }
.osa-modal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.osa-modal-tile {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--osa-line);
  border-radius: 10px;
  background: #fff;
}
.osa-modal-tile.checked { border-color: #eaa4a4; background: #fff0f0; }
.osa-modal-num { color: var(--osa-ink); font-size: 16px; font-weight: 850; }

@media (max-width: 899px) {
  .osa-content {
    width: min(calc(100% - 20px), var(--home-content-max));
    padding-bottom: 150px;
  }

  .osa-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .osa-store-field { grid-column: span 1; }
  .settings-row { grid-template-columns: 1fr 190px auto; }
  #stickySubmitBar { left: 0; bottom: 66px; }
}

@media (max-width: 760px) {
  :root { --row: 26px; --sku: 126px; }

  .osa-content { width: calc(100% - 12px); }
  .osa-panel { padding: 14px; border-radius: 13px; }
  .osa-panel-head { flex-direction: column; gap: 9px; }
  .osa-filter-grid { grid-template-columns: 1fr; padding: 12px; }
  .settings-row { grid-template-columns: 1fr; }
  .principal-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .principal-tab { flex: 0 0 auto; }
  .swipe-hint,
  #osaTableWrap { display: none !important; }
  #osaMobileCards { display: grid; gap: 10px; margin-top: 12px; }

  .osa-card {
    overflow: hidden;
    border: 1px solid var(--osa-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,42,69,.04);
  }

  .osa-card.has-os { border-color: #e7c3c3; }

  .osa-card-header {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 11px;
    border-bottom: 1px solid var(--osa-line);
    background: #f8fafb;
  }

  .osa-card-no { color: var(--osa-accent); font-size: 8px; font-weight: 850; }
  .osa-card-name { color: var(--osa-ink); font-size: 10px; font-weight: 850; line-height: 1.35; }
  .osa-uom-badge {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--osa-accent-soft);
    color: var(--osa-accent-dark);
    font-size: 7px;
    font-weight: 800;
  }

  .osa-day-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 5px;
    padding: 10px;
  }

  .osa-day-tile {
    min-height: 42px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid var(--osa-line);
    border-radius: 8px;
    background: #fff;
  }

  .osa-day-tile.checked { border-color: #eaa4a4; background: #fff1f1; }
  .osa-day-tile-label { color: var(--osa-muted); font-size: 7px; }
  .osa-day-tile-icon { color: var(--osa-danger); font-size: 11px; }

  .osa-pick-btn {
    margin: 10px;
    min-height: 40px;
    border: 1px solid #b7d7d4;
    border-radius: 9px;
    background: #f1faf9;
    color: var(--osa-accent-dark);
    font-size: 9px;
    font-weight: 800;
  }

  .osa-card-footer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 0 10px 10px;
  }

  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .summary-actions button:last-child { grid-column: 1 / -1; }

  .sticky-bar-inner { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .sticky-bar-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .sticky-stat { display: grid; place-items: center; text-align: center; }
  .sticky-bar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sticky-bar-actions button { width: 100%; }

  .osa-modal-grid { grid-template-columns: repeat(5,1fr); }
}

@media (max-width: 390px) {
  .osa-day-grid { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .osa-day-tile { min-height: 39px; }
}

/* FieldCore v1.1.0 — observation-based OSA */
.osa-method-note{margin:14px 0;padding:12px 14px;border:1px solid #cfe5e3;border-radius:10px;background:#f5fbfa;color:var(--osa-muted);font-size:10px;line-height:1.55}.osa-method-note strong{color:var(--osa-accent-dark)}
.osa-status-select,.osa-basis-select,.osa-days-input{min-width:120px;min-height:38px;padding:7px 9px}.osa-days-input{min-width:86px;width:86px}.osa-mobile-fields{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:8px;padding:10px 0}.osa-mobile-fields label{display:flex;flex-direction:column;gap:5px;color:var(--osa-muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.osa-mobile-fields input,.osa-mobile-fields select{min-height:40px;font-size:10px}.osa-observation-pill{display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:6px 8px;border-radius:999px;background:#eef2f4;color:var(--osa-muted);font-size:8px;font-weight:850}.osa-observation-pill.available{background:#eaf7f0;color:#27724b}.osa-observation-pill.has-os{background:#fff0f0;color:var(--osa-danger)}
@media(max-width:720px){.osa-mobile-fields{grid-template-columns:1fr 1fr}.osa-mobile-fields label:first-child{grid-column:1/-1}.osa-card-footer{align-items:center}}


/* OSA / Inventory NC visibility sync */
.osa-visibility-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 12px;border:1px solid var(--border,#dbe3ea);border-radius:12px;background:#f8fbfb;font-size:12px;color:#516477}
.osa-visibility-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#12324b;cursor:pointer}
.osa-visibility-toggle input{width:16px;height:16px;accent-color:var(--primary,#0f8d88)}
.osa-hidden-count{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#fff3d9;color:#805d00;font-weight:800}
.osa-visibility-note{flex:1;min-width:220px}
tr.osa-hidden-nc-row td{background:#fffaf0}
.osa-nc-badge{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff0cf;color:#7a5700;font-size:9px;font-weight:800;vertical-align:middle}
.osa-card.hidden-nc{border-style:dashed;background:#fffaf0}
.osa-card input:disabled,.osa-card select:disabled,.osa-table-wrap input:disabled,.osa-table-wrap select:disabled{opacity:.62;background:#f4f6f8;cursor:not-allowed}
@media(max-width:760px){.osa-visibility-note{min-width:100%;}.osa-visibility-bar{padding:9px 10px}}


/* OSA v4.0 — period/day-first, mobile-first visit workflow */
.osa-period-bar{
  margin-top:14px;padding:14px;border:1px solid #cfe5e3;border-radius:12px;background:#fbfefe;
}
.osa-period-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.osa-period-head strong{display:block;color:var(--osa-ink);font-size:12px}
.osa-day-strip{display:flex;gap:7px;overflow-x:auto;padding:3px 1px 8px;scrollbar-width:thin}
.osa-day-chip{flex:0 0 auto;min-width:62px;padding:8px 9px;border:1px solid var(--osa-line);border-radius:10px;background:#fff;color:var(--osa-ink);cursor:pointer;text-align:center}
.osa-day-chip strong{display:block;font-size:10px}.osa-day-chip small{display:block;margin-top:2px;font-size:8px;color:var(--osa-muted)}
.osa-day-chip.active{border-color:var(--osa-accent);box-shadow:0 0 0 2px rgba(8,127,123,.09)}
.osa-day-chip.visited{background:#edf9f4;border-color:#b9dfcf}.osa-day-chip.visited small{color:#26785e}
.osa-day-chip.no-observation{background:#f4f6f8;border-color:#d9e0e5}.osa-day-chip.no-observation small{color:#667889}
.osa-day-chip.completed{position:relative}.osa-day-chip.completed::after{content:"✓";position:absolute;right:5px;top:3px;font-size:8px;color:var(--osa-accent);font-weight:900}
.osa-day-status-panel{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:8px;padding:12px;border:1px solid var(--osa-line);border-radius:10px;background:#fff}
.osa-day-status-panel strong{font-size:12px;color:var(--osa-ink)}
.osa-day-status-panel p{margin:3px 0 0;color:var(--osa-muted);font-size:9px}
.osa-day-status-actions{display:flex;gap:8px}.osa-day-status-actions .is-active{border-color:var(--osa-accent);background:var(--osa-accent);color:#fff}
.osa-no-observation-state{margin-top:14px;padding:18px;border:1px dashed #c8d5dc;border-radius:12px;background:#fafcfd;text-align:center;color:var(--osa-muted);font-size:11px}
.osa-prefill-note{margin-top:10px;padding:9px 11px;border-radius:9px;background:var(--osa-accent-soft);color:var(--osa-accent-dark);font-size:9px;font-weight:750}
@media(max-width:760px){
  .osa-period-bar{padding:11px;margin-top:10px}
  .osa-period-head{align-items:flex-start}.osa-period-head strong{font-size:11px}
  .osa-day-chip{min-width:56px;padding:7px 7px}
  .osa-day-status-panel{align-items:stretch;flex-direction:column}
  .osa-day-status-actions{display:grid;grid-template-columns:1fr 1fr}
  .osa-day-status-actions button{width:100%;min-height:44px}
  .osa-filter-grid{grid-template-columns:1fr}
}


/* OSA v4.1 — simplified cut-off/date UX */
.osa-period-bar{background:#fff}
.osa-period-head{padding-bottom:8px;border-bottom:1px solid var(--osa-line)}
.osa-day-status-panel{border:2px solid #dce8e8;background:#fbfefe}
.osa-day-status-actions button{font-weight:850}
.osa-day-status-actions #btnDayVisited{border-color:#9bcfca}
.osa-day-status-actions #btnDayNoObservation{background:#f7f9fa}
.osa-day-status-actions #btnDayNoObservation.is-active{background:#667889;border-color:#667889;color:#fff}
@media(max-width:760px){
  .osa-panel{padding:14px 12px}
  .osa-panel-head p{font-size:11px;line-height:1.45}
  .osa-period-head{margin-bottom:8px}
  .osa-day-strip{margin:0 -2px;padding-bottom:10px}
  .osa-day-chip{min-width:64px;min-height:52px}
  .osa-day-chip strong{font-size:11px}.osa-day-chip small{font-size:9px}
  .osa-day-status-panel{padding:14px 12px}
  .osa-day-status-panel strong{font-size:14px}
  .osa-day-status-panel p{font-size:11px;line-height:1.45}
  .osa-day-status-actions{grid-template-columns:1fr}
  .osa-day-status-actions button{min-height:48px;font-size:12px}
  .osa-method-note{font-size:10.5px;line-height:1.6}
}