/* ═══════════════════════════════════════════════════════════════════
   FOC App — Shared Stylesheet
   Path: static/css/foc-app.css
═══════════════════════════════════════════════════════════════════ */

/* ── Typography helpers ─────────────────────────────────────────── */
.foc-fs          { font-size: 0.85rem; }
.foc-td          { font-size: 0.78rem; color: var(--text-primary); }
.foc-td-muted    { font-size: 0.76rem; color: var(--text-secondary); }
.foc-td-strong   { font-size: 0.76rem; color: var(--text-primary); font-weight: 600; }
.foc-label-strong{ font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.foc-label-muted { font-size: 0.76rem; color: var(--text-secondary); }
.text-purple     { color: #6f42c1 !important; }

/* ── Card ───────────────────────────────────────────────────────── */
.foc-card {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 10px;
  padding      : 14px;
}

/* ── Code chip ──────────────────────────────────────────────────── */
.foc-code {
  font-size    : 0.72rem;
  padding      : 1px 5px;
  border-radius: 3px;
}

/* ── Table headers ──────────────────────────────────────────────── */
.foc-th {
  font-size  : 0.75rem !important;
  white-space: nowrap;
  color      : var(--text-secondary) !important;
  background : var(--bg-secondary)   !important;
}

/* ── Table body cells — always readable ─────────────────────────── */
#reportTable tbody td {
  font-size: 0.78rem;
  color    : var(--text-primary) !important;
}
#reportTable tbody td.foc-td-muted {
  color: var(--text-secondary) !important;
}

/* ── Summary cards ──────────────────────────────────────────────── */
.foc-sum-num { font-size: 1.2rem; line-height: 1.2; font-weight: 700; }
.foc-sum-lbl { font-size: 0.7rem;  margin-top: 2px;  color: var(--text-secondary); }
.foc-sum-sub { font-size: 0.68rem; margin-top: 1px; }

/* ── Filter controls ─────────────────────────────────────────────── */
.foc-filter {
  font-size   : 0.78rem  !important;
  max-width   : 170px;
  background  : var(--bg-secondary)   !important;
  color       : var(--text-primary)   !important;
  border-color: var(--border-color)   !important;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.foc-badge {
  font-size    : 0.69rem;
  border-radius: 4px;
  padding      : 2px 7px;
  display      : inline-block;
  line-height  : 1.6;
  word-break   : break-word;
  max-width    : 340px;
}
.cl-ok     { background: #d1e7dd; color: #0a3622; border: 1px solid #a3cfbb; }
.cl-short  { background: #fff3cd; color: #4a3700; border: 1px solid #ffda6a; }
.cl-excess { background: #cff4fc; color: #023f52; border: 1px solid #9eeaf9; }
.viol-badge {
  background : #f8d7da;
  color      : #3b0a0f;
  border     : 1px solid #f1aeb5;
  font-weight: 600;
}

/* ── Row tints ───────────────────────────────────────────────────── */
.row-violation-tint { background: rgba(220, 53,  69, 0.05) !important; }
.row-reverse-tint   { background: rgba(111, 66, 193, 0.05) !important; }

/* ── Sort headers ────────────────────────────────────────────────── */
.foc-sortable {
  cursor     : pointer;
  user-select: none;
  transition : background 0.15s;
}
.foc-sortable:hover { background: var(--border-color) !important; }
.foc-sortable.sort-asc  .sort-icon::after { content: ' ▲'; color: #0d6efd; font-size: 0.65rem; }
.foc-sortable.sort-desc .sort-icon::after { content: ' ▼'; color: #0d6efd; font-size: 0.65rem; }
.foc-sortable:not(.sort-asc):not(.sort-desc) .sort-icon { opacity: 0.35; }
.sort-icon { font-size: 0.68rem; margin-left: 2px; }

/* ── Pagination ──────────────────────────────────────────────────── */
.pg-btn {
  font-size    : 0.74rem;
  padding      : 3px 8px;
  border-radius: 4px;
  cursor       : pointer;
  border       : 1px solid var(--border-color);
  background   : var(--bg-secondary);
  color        : var(--text-primary);
  transition   : background 0.15s;
}
.pg-btn:hover   { background: var(--border-color); }
.pg-btn.active  { background: #0d6efd; color: #fff !important; border-color: #0d6efd; font-weight: 600; }
.pg-btn:disabled{ opacity: 0.4; cursor: default; }

/* ── Upload card ─────────────────────────────────────────────────── */
.foc-upload-title    { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.foc-upload-subtitle { font-size: 0.78rem; color: var(--text-secondary); }
.foc-upload-help     { font-size: 0.74rem; color: var(--text-secondary); }
.foc-upload-grid     { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 10px; }
.foc-upload-action   { min-width: 140px; }
.foc-file-info       { font-size: 0.76rem; }

/* ── Collapse panel ──────────────────────────────────────────────── */
.foc-collapse-toggle {
  width           : 100%;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  background      : none;
  border          : none;
  padding         : 4px 0;
  cursor          : pointer;
  color           : var(--text-primary);
}
.foc-collapse-inner  { padding-top: 10px; }
.foc-collapse-arrow  { font-size: 0.85rem; color: var(--text-secondary); transition: transform 0.2s; }
.foc-collapse-toggle[aria-expanded="true"] .foc-collapse-arrow { transform: rotate(180deg); }
.foc-card-chip {
  font-size    : 0.78rem;
  font-weight  : 600;
  color        : var(--text-primary);
  background   : var(--border-color);
  padding      : 2px 10px;
  border-radius: 20px;
}

/* ── Loader steps ────────────────────────────────────────────────── */
.loader-step        { transition: color 0.3s, font-weight 0.3s; }
.loader-step.active { color: #0d6efd !important; font-weight: 700; }
.loader-step.done   { color: #198754 !important; }

/* ── Index page cards ────────────────────────────────────────────── */
.foc-index-card {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 12px;
  padding      : 20px;
  transition   : box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  display      : block;
  color        : var(--text-primary);
}
.foc-index-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transform : translateY(-2px);
  color     : var(--text-primary);
}
.foc-index-icon  { font-size: 2rem; margin-bottom: 8px; }
.foc-index-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.foc-index-desc  { font-size: 0.78rem; color: var(--text-secondary); }

/* ── Form / Calculator ───────────────────────────────────────────── */
.foc-form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.foc-input {
  font-size   : 0.82rem;
  background  : var(--bg-secondary) !important;
  color       : var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.foc-input:focus { box-shadow: 0 0 0 2px rgba(13,110,253,0.25) !important; }
.foc-result-box {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 8px;
  padding      : 12px 16px;
  font-size    : 0.82rem;
}
.foc-result-num {
  font-size  : 1.5rem;
  font-weight: 700;
  color      : #0d6efd;
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME overrides
════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) .foc-code          { background: #e8f0fe; color: #1a56db; }
:root:not([data-theme="dark"]) .foc-filter option { background: #fff;    color: #333;    }
:root:not([data-theme="dark"]) .app-table td      { color: #212529; }

/* ════════════════════════════════════════════════════════════════════
   DARK THEME overrides
════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #reportTable tbody td              { color: #e0e0e0    !important; }
[data-theme="dark"] #reportTable tbody td.foc-td-muted { color: #a0a0a0    !important; }
[data-theme="dark"] #reportTable thead th              { color: #b0b0b0    !important; background: #2d2d2d !important; }
[data-theme="dark"] .foc-code                          { background: rgba(99,179,237,.15); color: #90cdf4; }
[data-theme="dark"] .foc-filter option                 { background: #2d2d2d; color: #e0e0e0; }
[data-theme="dark"] .row-violation-tint                { background: rgba(220, 53,  69, 0.10) !important; }
[data-theme="dark"] .row-reverse-tint                  { background: rgba(111, 66, 193, 0.10) !important; }
[data-theme="dark"] .pg-btn                            { background: #2d2d2d; color: #e0e0e0; }
[data-theme="dark"] .pg-btn:hover                      { background: #444; }
[data-theme="dark"] .foc-sortable:hover                { background: #3a3a3a !important; }
[data-theme="dark"] .cl-ok     { background: #0a3622; color: #a3cfbb; border-color: #155724; }
[data-theme="dark"] .cl-short  { background: #4a3700; color: #ffda6a; border-color: #664d03; }
[data-theme="dark"] .cl-excess { background: #023f52; color: #9eeaf9; border-color: #055160; }
[data-theme="dark"] .viol-badge{ background: #3b0a0f; color: #f1aeb5; border-color: #842029; }
[data-theme="dark"] .foc-index-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.45); }
[data-theme="dark"] .foc-input { background: #2d2d2d !important; color: #e0e0e0 !important; border-color: #444 !important; }


/* ── Live clock pill ── */
.foc-clock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-secondary); background: var(--bg-hover);
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 3px 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.foc-clock-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  animation: clockPulse 1s ease-in-out infinite; flex-shrink: 0;
}
@keyframes clockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

@media (max-width: 768px) {
  #productTable { table-layout: auto; }
  #productTable th:nth-child(2), #productTable td:nth-child(2) { width: auto; }
  #orderTotalBar { border-radius: 0; margin: 6px 0; }
}