:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #182033;
  --muted: #647084;
  --line: #d9e0ea;
  --blue: #1f5fbf;
  --deep: #0c1f3f;
  --green: #137a45;
  --amber: #a05a00;
  --red: #a7271c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tic-logo {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  background: var(--deep);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .5px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
}

p,
#lastUpdated {
  color: var(--muted);
}

.app-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 24px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.tab-button {
  min-height: 42px;
  border-color: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
}

.tab-button.active {
  border-color: var(--line);
  border-bottom-color: var(--blue);
  background: var(--bg);
  color: var(--blue);
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.module-heading {
  margin-bottom: 16px;
}

.module-heading h2 {
  font-size: 22px;
}

.placeholder-panel {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cod-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cod-tools label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.cod-tools input {
  width: 100%;
}

.file-input input {
  padding: 7px;
}

.cod-actions {
  display: flex;
  gap: 10px;
}

.cod-actions button {
  flex: 1;
}

.invoice-uploader {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.invoice-uploader label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.invoice-result {
  display: grid;
  gap: 16px;
}

.invoice-result-card {
  display: grid;
  gap: 12px;
}

.invoice-result-card.failed .result-grid {
  border-color: #f6c4bf;
  background: #fff1f0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.result-grid div {
  display: grid;
  gap: 4px;
}

.result-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.result-grid strong {
  overflow-wrap: anywhere;
}

.note-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.note-panel.compact {
  margin-top: 12px;
}

.note-panel strong {
  display: block;
  margin-bottom: 4px;
}

.placeholder-panel h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.placeholder-panel p {
  max-width: 620px;
}

.status-dot {
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(160, 90, 0, .12);
}

button,
input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
}

button {
  cursor: pointer;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.secondary {
  background: #fff;
  color: var(--blue);
  border-color: var(--line);
}

.toolbar,
.card-actions,
.section-heading,
.date-row,
.orders-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orders-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section-heading,
.date-row {
  justify-content: space-between;
}

.alert {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #bfe6ce;
  background: #eaf7ef;
  color: var(--green);
}

.alert.error {
  background: #fff1f0;
  border-color: #f6c4bf;
  color: var(--red);
}

.alert.working {
  position: relative;
  padding-left: 40px;
  background: #eef4ff;
  border-color: #b7c9f2;
  color: var(--blue);
  font-weight: 800;
}

.alert.working::before,
button.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin .8s linear infinite;
}

.alert.working::before {
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -7px;
}

button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.myntra-heading,
.myntra-top-actions,
.myntra-mode-card,
.myntra-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.myntra-heading {
  justify-content: space-between;
}

.myntra-top-actions,
.myntra-mode-card {
  flex-wrap: wrap;
}

.myntra-top-actions label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 800;
}

.myntra-mode-card {
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.myntra-mode-card label {
  color: var(--ink);
  font-weight: 800;
}

.myntra-mode-card strong {
  color: var(--ink);
}

.myntra-mode-card input {
  min-height: auto;
  margin-right: 5px;
}

.compact-heading {
  margin-top: 22px;
  margin-bottom: 10px;
}

.compact-heading h3 {
  margin: 0;
}

.myntra-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.myntra-select-all input {
  min-height: auto;
}

.myntra-upload-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.myntra-upload-totals span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.myntra-upload-totals strong {
  color: var(--ink);
}

.myntra-bulk-upload {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 420px) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #b7c9f2;
  border-radius: 8px;
  background: #f7f9ff;
}

.myntra-bulk-upload div {
  display: grid;
  gap: 4px;
}

.myntra-bulk-upload strong {
  color: var(--ink);
}

.myntra-bulk-upload span {
  color: var(--muted);
  font-size: 13px;
}

.myntra-bulk-upload input {
  width: 100%;
  background: #fff;
}

.myntra-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.myntra-upload-card {
  display: grid;
  gap: 8px;
  min-height: 170px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.myntra-upload-card.required {
  border-color: #b7c9f2;
}

.myntra-upload-card.has-file {
  border-color: #8fd0a3;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .08);
}

.myntra-upload-card strong {
  line-height: 1.25;
}

.myntra-upload-card small,
.myntra-upload-card em,
#myntraLastUpdated,
#myntraZohoSummary {
  color: var(--muted);
  font-size: 12px;
}

.myntra-upload-card.has-file em {
  color: var(--green);
  font-weight: 800;
}

.myntra-file-kind {
  width: fit-content;
  border-radius: 999px;
  padding: 2px 8px;
  background: #eef4ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.myntra-upload-card:not(.required) .myntra-file-kind {
  background: #eef2f7;
  color: var(--muted);
}

.myntra-upload-card input {
  width: 100%;
  padding: 7px;
  font-size: 12px;
}

.myntra-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
}

.myntra-subtab {
  min-height: 36px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.myntra-subtab.active {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

.myntra-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.myntra-metric {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.myntra-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.myntra-metric strong {
  color: var(--ink);
  font-size: 22px;
}

.myntra-metric small {
  color: var(--muted);
}

.myntra-metric.good strong { color: var(--green); }
.myntra-metric.bad strong { color: var(--red); }
.myntra-metric.warn strong { color: var(--amber); }
.myntra-metric.info strong { color: var(--blue); }
.myntra-metric.purple strong { color: #6f3cc3; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.myntra-view {
  display: none;
}

.myntra-view.active {
  display: block;
}

.myntra-grid {
  display: grid;
  gap: 16px;
}

.myntra-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.myntra-card {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.myntra-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.myntra-card-head {
  justify-content: space-between;
}

.myntra-bars,
.myntra-progress-list,
.myntra-recon,
.myntra-flow,
.myntra-file-summary,
.myntra-cost-rows,
.myntra-saved-months,
.myntra-zoho-summary {
  display: grid;
  gap: 10px;
}

.myntra-zoho-summary {
  margin-bottom: 16px;
}

.myntra-zoho-summary table tr:nth-last-child(-n+2) {
  background: #f7f9ff;
}

.myntra-bar-row {
  display: grid;
  grid-template-columns: 130px minmax(120px, 1fr) 110px;
  align-items: center;
  gap: 10px;
}

.myntra-bar-row span,
.myntra-bar-row em,
.myntra-recon-row,
.myntra-file-row,
.saved-month {
  font-size: 13px;
}

.myntra-bar-row em {
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.myntra-bar-track,
.myntra-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f7;
}

.myntra-bar-track strong,
.myntra-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.myntra-progress div:first-child,
.myntra-recon-row,
.myntra-file-row,
.saved-month {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

button.saved-month {
  width: 100%;
  min-height: auto;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.saved-month:hover,
button.saved-month.active {
  color: var(--blue);
  background: #f7f9ff;
}

button.saved-month.active {
  padding-inline: 8px;
  border-bottom-color: #b7c9f2;
}

.myntra-progress strong {
  color: var(--muted);
}

.myntra-file-row.has-warning span {
  color: var(--amber);
  font-weight: 800;
  text-align: right;
}

.myntra-progress-track .danger { background: var(--red); }
.myntra-progress-track .warn { background: var(--amber); }
.myntra-progress-track .good { background: var(--green); }

.myntra-flow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.myntra-flow-row:last-child {
  border-bottom: 0;
}

.myntra-flow-row p {
  font-size: 12px;
}

.myntra-flow-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.myntra-flow-icon.credit { background: #fff7e6; color: var(--amber); }
.myntra-flow-icon.skip { background: #eef2f7; color: var(--muted); }
.myntra-flow-icon.review { background: #fff1f0; color: var(--red); }

.myntra-recon-row,
.myntra-file-row,
.saved-month {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.myntra-recon-row:last-child,
.myntra-file-row:last-child,
.saved-month:last-child {
  border-bottom: 0;
}

.myntra-cost-row {
  display: grid;
  grid-template-columns: 1fr 120px 90px;
  gap: 8px;
}

.myntra-cost-row input {
  width: 100%;
}

.flat {
  margin-top: 0;
}

.pos-text {
  color: var(--green);
  font-weight: 900;
}

.neg-text {
  color: var(--red);
  font-weight: 900;
}

.sku-chip,
.decision-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}

.sku-chip.keep,
.decision-pill.invoice {
  background: #eaf7ef;
  color: var(--green);
}

.sku-chip.monitor {
  background: #eef4ff;
  color: var(--blue);
}

.sku-chip.review,
.decision-pill.credit {
  background: #fff7e6;
  color: var(--amber);
}

.sku-chip.remove,
.decision-pill.review {
  background: #fff1f0;
  color: var(--red);
}

.decision-pill.skip {
  background: #eef2f7;
  color: var(--muted);
}

.date-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.date-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(31, 95, 191, .12);
}

.date-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  color: var(--muted);
}

.stats strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--green);
}

.card-actions {
  margin-top: 12px;
}

.card-actions button {
  flex: 1;
}

.orders-section {
  padding-top: 2px;
}

.table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.select-col {
  width: 44px;
  text-align: center;
}

.select-col input {
  min-height: auto;
  width: 16px;
  height: 16px;
  padding: 0;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
}

.pending {
  background: #fff7e6;
  color: var(--amber);
}

.synced {
  background: #eaf7ef;
  color: var(--green);
}

.failed {
  background: #fff1f0;
  color: var(--red);
}

.skipped {
  background: #eef2f7;
  color: var(--muted);
}

.empty {
  color: var(--muted);
  text-align: center;
}

.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1f3f 0%, #1f5fbf 62%, #137a45 100%);
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 60px rgba(5, 18, 42, .28);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: var(--deep);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.login-brand p {
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
}

.login-brand h1 {
  font-size: 28px;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.login-form input {
  width: 100%;
  min-height: 46px;
  background: #fff;
}

.login-form button {
  min-height: 46px;
  margin-top: 4px;
}

.login-alert {
  padding: 10px 12px;
  border: 1px solid #f6c4bf;
  border-radius: 6px;
  background: #fff1f0;
  color: var(--red);
}

@media (max-width: 720px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-tabs {
    overflow-x: auto;
    padding-inline: 16px;
  }

  .tab-button {
    flex: 0 0 auto;
  }

  .toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
  }

  .toolbar input,
  .toolbar button {
    flex: 1 1 140px;
  }

  .cod-tools {
    grid-template-columns: 1fr;
  }

  .invoice-uploader {
    grid-template-columns: 1fr;
  }

  .myntra-heading,
  .myntra-grid.two {
    grid-template-columns: 1fr;
  }

  .myntra-heading,
  .myntra-top-actions,
  .myntra-mode-card,
  .myntra-bulk-upload {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .myntra-upload-grid,
  .myntra-metrics {
    grid-template-columns: 1fr;
  }

  .myntra-bar-row,
  .myntra-cost-row {
    grid-template-columns: 1fr;
  }

  main {
    padding: 16px;
  }
}