/* ccs_table_html, the scripts table card.
 *
 * The form root is .ccs-table-card, so .ccs-table-card and
 * .ccs-table-card.visible stay BARE: they are the card's show/hide, driven by
 * showTable/hideTable in ccs_table.mjs. Every other rule is scoped
 * :where(.ccs-table-card), which adds no specificity.
 *
 * [data-theme="dark"] comes FIRST because data-theme sits on <html>, outside
 * this root.
 *
 * .ccs-empty-state carries display: none so the designer canvas hides it; the
 * module writes style.display inline on both arms of render().
 */

/* ========================================
   CCS TABLE - Scripts Data Table
   ======================================== */
.ccs-table-card {
  display: none;
}

.ccs-table-card.visible {
  display: block;
}

/* ANVIL-RESET TWIN, the same case as ccs_search_bar_html.css (full note
   there): the card's .px-card padding and border restated at (0,3,0) over
   theme.css's .px-anvil-reset .anvil-component reset. No media query
   overrides this card's padding, so this is the only twin. */
.px-anvil-reset .ccs-table-card.px-anvil-reset {
  padding: 20px !important;
  border: 1px solid var(--px-border) !important;
}

:where(.ccs-table-card) .ccs-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

:where(.ccs-table-card) .ccs-table-title {
  font-family: var(--px-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--px-text-secondary);
}

:where(.ccs-table-card) .ccs-table-count {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-muted);
}

:where(.ccs-table-card) .ccs-table-scroll {
  overflow-x: auto;
}

:where(.ccs-table-card) .ccs-table {
  font-size: 13px;
  table-layout: fixed;
  width: 100%;
}

:where(.ccs-table-card) .ccs-table th {
  font-size: 11px;
  white-space: nowrap;
  padding: 8px 4px;
}

:where(.ccs-table-card) .ccs-table td {
  vertical-align: top;
  padding: 6px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.ccs-table-card) .ccs-table tbody tr.unprescribed {
  background: rgba(255, 237, 204, 0.5);
}

:where(.ccs-table-card) .ccs-table tbody tr.unprescribed:hover {
  background: rgba(255, 237, 204, 0.7);
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-table tbody tr.unprescribed {
  background: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-table tbody tr.unprescribed:hover {
  background: rgba(251, 191, 36, 0.25);
}

:where(.ccs-table-card) .ccs-table tbody tr.hidden-row {
  display: none;
}

/* Column widths */
:where(.ccs-table-card) .ccs-col-patient { width: 13%; }
:where(.ccs-table-card) .ccs-col-dob { width: 8%; }
:where(.ccs-table-card) .ccs-col-rx-date { width: 8%; }
:where(.ccs-table-card) .ccs-col-item { width: 20%; }
:where(.ccs-table-card) .ccs-col-instructions { width: 18%; }
:where(.ccs-table-card) .ccs-col-status { width: 9%; }
:where(.ccs-table-card) .ccs-col-potential { width: 13%; }
:where(.ccs-table-card) .ccs-col-action { width: 8%; text-align: center; }

/* Status badges */
:where(.ccs-table-card) .ccs-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

:where(.ccs-table-card) .ccs-wholesaler-warning {
  margin-left: 4px;
  color: #d97706;
  font-size: 12px;
}

/* Local-dispense returns sit flush with the cell edge so the timestamp
   sub-line below aligns visually with the rest of the column. */
:where(.ccs-table-card) .ccs-status-badge.ccs-status-returned-for-local-dispense {
  padding-left: 0;
  padding-right: 0;
  font-size: 9px;
}
:where(.ccs-table-card) .ccs-returned-time {
  display: block;
  font-size: 9px;
  color: #6b7280;
  margin-top: 2px;
  padding-left: 0;
}

:where(.ccs-table-card) .ccs-status-no-prescription {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

:where(.ccs-table-card) .ccs-status-prescribed {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

:where(.ccs-table-card) .ccs-status-processing {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

:where(.ccs-table-card) .ccs-status-bagged {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

:where(.ccs-table-card) .ccs-status-dispatched {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

:where(.ccs-table-card) .ccs-status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

:where(.ccs-table-card) .ccs-status-owing-cancelled {
  background: rgba(156, 163, 175, 0.15);
  color: #6b7280;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-no-prescription {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-prescribed {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-processing {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-bagged {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-dispatched {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-status-owing-cancelled {
  background: rgba(156, 163, 175, 0.25);
  color: #d1d5db;
}

/* Action buttons */
:where(.ccs-table-card) .ccs-action-btn {
  font-family: var(--px-font);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

:where(.ccs-table-card) .ccs-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.ccs-table-card) .ccs-action-interim {
  background: var(--accent-subtle);
  color: var(--accent);
}

:where(.ccs-table-card) .ccs-action-interim:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

:where(.ccs-table-card) .ccs-action-skip-cycle {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

:where(.ccs-table-card) .ccs-action-skip-cycle:hover:not(:disabled) {
  border-color: #d97706;
  background: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-skip-cycle {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-skip-cycle:hover:not(:disabled) {
  border-color: #fcd34d;
  background: rgba(245, 158, 11, 0.32);
}

:where(.ccs-table-card) .ccs-action-stopped {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

:where(.ccs-table-card) .ccs-action-stopped:hover:not(:disabled) {
  border-color: #dc2626;
  background: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-stopped {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-stopped:hover:not(:disabled) {
  border-color: #fca5a5;
  background: rgba(239, 68, 68, 0.32);
}

:where(.ccs-table-card) .ccs-action-disabled {
  background: var(--px-bg-elevated);
  color: var(--px-text-muted);
  cursor: default;
}

:where(.ccs-table-card) .ccs-action-monthly {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

:where(.ccs-table-card) .ccs-action-monthly:hover:not(:disabled) {
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-monthly {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-monthly:hover:not(:disabled) {
  border-color: #4ade80;
  background: rgba(34, 197, 94, 0.3);
}

:where(.ccs-table-card) .ccs-action-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

:where(.ccs-table-card) .ccs-action-sent-spoke {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

[data-theme="dark"] :where(.ccs-table-card) .ccs-action-sent-spoke {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Empty state */
:where(.ccs-table-card) .ccs-empty-state {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--px-text-muted);
}

:where(.ccs-table-card) .ccs-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

:where(.ccs-table-card) .ccs-empty-text {
  font-size: 15px;
}

/* ========================================
   RESPONSIVE - Mobile Card Layout
   ======================================== */
@media (max-width: 768px) {
  :where(.ccs-table-card) .ccs-table tr.unprescribed {
    border-left: 3px solid #f59e0b;
  }

  :where(.ccs-table-card) .ccs-table td.ccs-col-action {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--px-border-subtle);
  }

  :where(.ccs-table-card) .ccs-table td.ccs-col-action::before {
    display: none;
  }

  :where(.ccs-table-card) .ccs-action-btn {
    width: 100%;
    padding: 10px;
    font-size: 13px;
  }
}