:root{
  --row-radius: 16px;
  --control-radius: 14px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --card-border: 1px solid rgba(148,163,184,.25);
  --card-bg: #fff;
  --card-shadow: 0 10px 20px rgba(15,23,42,.05);
  --btn-shadow: 0 8px 18px rgba(15,23,42,.08);
  --color-primary: #1d4ed8;
  --color-primary-dark: #1e40af;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-slate: #334155;
}

.card,
.panel,
.row-card,
.page-card,
.sheet{
  background:var(--card-bg);
  border:var(--card-border);
  border-radius:var(--row-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  min-width:0;
}

.card,
.panel,
.page-card,
.sheet{
  padding:16px;
}

.card-body,
.panel-body{
  padding:16px;
}

.row-card{
  padding:12px 14px;
}

.row-card.compact{
  padding:8px 10px;
}

.item-row,
.op-row,
.responsive-item-row{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
}

.item-row .item-title{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.item-row .item-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 220px;
}

.item-row .item-subtitle,
.item-row .item-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}

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

.field-group.par-field,
.field-group.qty-field{
  border:1px solid rgba(148,163,184,.25);
  border-radius:8px;
  background:rgba(255,255,255,.62);
  padding:6px 8px;
  min-height:42px;
  justify-content:center;
}

.item-row .par-field{
  flex:0 0 56px;
}

.item-row .qty-field{
  flex:0 0 104px;
}

.field-group.par-field{
  background:transparent;
  border-style:dashed;
}

.field-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#64748b;
}

.field-value,
.field-input{
  min-width:0;
  width:100%;
}

.field-input{
  border:1px solid rgba(148,163,184,.35);
  border-radius:var(--control-radius);
  background:#fff;
  padding:8px 10px;
  min-height:42px;
}

.field-input.compact{
  padding:7px 10px;
  min-height:34px;
}

.notes-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 220px;
  max-width:260px;
}

.notes-field .notes-input{
  width:100%;
  max-width:260px;
}

.notes-field .notes-input.compact{
  padding:8px 10px;
  min-height:34px;
}

.chip-group,
.button-group,
.status-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

.item-row .fill-action,
.item-row .verify-action{
  flex:0 0 auto;
}

.item-row .chip-group{
  flex:0 0 auto;
}

.item-row .status-group{
  flex:0 0 auto;
  margin-left:auto;
}

.chip-group.tight,
.button-group.tight{
  gap:4px;
}

.chip,
.shortcut-chip,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  white-space:nowrap;
}

.chip,
.shortcut-chip{
  padding:5px 9px;
  border-radius:var(--chip-radius);
  border:1px solid rgba(148,163,184,.22);
  background:#e8eef7;
  color:#1e3a8a;
  font-size:11px;
  font-weight:700;
  min-height:28px;
}

.shortcut-chip.is-active{
  background:#dbeafe;
}

.status-badge{
  padding:6px 10px;
  border-radius:var(--badge-radius);
  font-size:11px;
  font-weight:800;
  line-height:1;
  min-height:28px;
}

.status-badge.good{
  background:#dcfce7;
  color:#166534;
}

.status-badge.warn{
  background:#fef3c7;
  color:#92400e;
}

.status-badge.bad{
  background:#fee2e2;
  color:#991b1b;
}

.status-badge.neutral{
  background:#eef2ff;
  color:#3730a3;
}

button,
.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  width:100%;
  min-height:52px;
  padding:12px 16px;
  border-radius:var(--control-radius);
  font-size:16px;
  line-height:1.2;
  border:none;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  box-shadow:var(--btn-shadow);
}

button:hover,
.btn:hover,
a.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  filter:brightness(1.01);
}

button:active,
.btn:active,
a.btn:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible{
  outline:3px solid rgba(29,78,216,.18);
  outline-offset:2px;
}

.btn-primary{
  background:var(--color-primary);
  color:#fff;
}

.btn-primary:hover{
  background:var(--color-primary-dark);
}

.btn-secondary{
  background:var(--color-slate);
  color:#fff;
}

.btn-light{
  background:#e8eef7;
  color:#1e3a8a;
  border:1px solid #cdd8e6;
}

.btn-light:hover{
  background:#dbeafe;
}

.btn-success{
  background:var(--color-success);
  color:#fff;
}

.btn-warning{
  background:var(--color-warning);
  color:#fff;
}

.btn-danger{
  background:var(--color-danger);
  color:#fff;
}

.btn-pill{
  border-radius:var(--chip-radius);
  padding-inline:20px;
}

button.compact,
.btn.compact,
a.btn.compact{
  min-height:44px;
  padding:9px 12px;
  font-size:14px;
}

button.small,
.btn.small,
a.btn.small{
  min-height:40px;
  padding:8px 12px;
  font-size:12px;
}

button:disabled,
.btn:disabled,
a.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.mode-btn,
.toggle-btn,
.sheet-section-toggle,
.daily-status-badge-btn,
.shortcut-chip{
  width:auto;
  max-width:none;
}

.daily-status-badge-btn{
  min-height:44px;
  padding:8px 12px;
}

.btn-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.btn-group.tight{
  gap:6px;
}

.btn-group .btn,
.button-grid .btn,
.button-stack .btn,
.action-buttons .btn{
  min-width:0;
  flex:1 1 0;
}

.primary-action-btn{
  width:100%;
  max-width:500px;
  margin-inline:auto;
}

@media (max-width: 767px){
  button,
  .btn,
  a.btn,
  button.compact,
  .btn.compact,
  a.btn.compact{
    width:100%;
  }

  button,
  .btn,
  a.btn{
    min-height:52px;
    font-size:16px;
  }

  .card,
  .panel,
  .page-card,
  .sheet{
    padding:16px;
    border-radius:16px;
  }

  .card-body,
  .panel-body{
    padding:16px;
  }
}

@media (min-width: 768px) and (max-width: 1199px){
  button,
  .btn,
  a.btn{
    min-height:48px;
    padding:11px 15px;
  }

  button.compact,
  .btn.compact,
  a.btn.compact{
    min-height:44px;
    padding:9px 12px;
  }

  .btn-group{
    gap:8px;
  }

  .button-grid{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
  }

  .btn-group .btn,
  .button-grid .btn,
  .button-stack .btn{
    min-width:100px;
  }
}

.badge-stack{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.compact-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}

.responsive-item-row{
  display:flex;
  flex-wrap:wrap;
}

@media (min-width: 768px){
  .item-row,
  .responsive-item-row{
    grid-template-columns:minmax(220px,2fr) 56px 104px 72px 92px auto minmax(220px,1.6fr) auto;
    gap:10px 12px;
  }

  .item-row > .item-title,
  .item-row > .item-heading{
    grid-column:1;
  }

  .item-row > .par-field{
    grid-column:2;
  }

  .item-row > .qty-field{
    grid-column:3;
  }

  .item-row > .fill-action{
    grid-column:4;
  }

  .item-row > .verify-action{
    grid-column:5;
  }

  .item-row > .chip-group{
    grid-column:6;
  }

  .item-row > .notes-field{
    grid-column:7;
  }

  .item-row > .status-group{
    grid-column:8;
    justify-self:end;
  }
}

@media (min-width: 1200px){
  .item-row,
  .responsive-item-row{
    grid-template-columns:minmax(220px,2fr) 56px 104px 72px 92px auto minmax(220px,1.6fr) auto;
  }
}