/* ============================================================
   MATSPELL — COMPONENTS
   Buttons, Cards, Badges, Forms, Modals, Drawers, etc.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  height: 36px;
  padding: 0 var(--space-4);
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Legacy btn classes support (mapping backend btn color defaults) */
.btn {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn.secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn.secondary:hover:not(:disabled) {
  background: var(--color-bg-muted);
}

.btn.danger {
  background: var(--color-red);
  color: var(--color-text-inverse);
  border-color: var(--color-red);
}
.btn.danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

/* Icon Buttons & size overrides */
.btn.sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn.lg { height: 44px; padding: 0 var(--space-6); font-size: var(--text-base); }
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: var(--color-text-secondary);
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.icon-btn.btn-sm {
  width: 28px;
  height: 28px;
}

/* ══════════════════════════════════════════════════════════
   BADGES / CHIPS
   ══════════════════════════════════════════════════════════ */

.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  white-space: nowrap;
  line-height: 1.4;
  background: var(--color-grey-bg);
  color: var(--color-grey);
}

/* Status maps */
.badge-draft, .badge-new, .badge-active, [class*="badge-"][class*="draft"], .badge.draft { background: var(--color-grey-bg); color: var(--color-grey); }
.badge-submitted, .badge-pending, .badge-in_progress, .badge.submitted, .badge.pending, .badge.in_progress { background: var(--color-blue-bg); color: var(--color-blue); }
.badge-in-review, .badge-in_review, .badge-acknowledged, .badge-verification_needed, .badge.in-review, .badge.in_review, .badge.acknowledged, .badge.verification_needed { background: var(--color-orange-bg); color: var(--color-orange); }
.badge-reverted, .badge.reverted { background: var(--color-red-bg); color: var(--color-red); }
.badge-approved, .badge.approved { background: var(--color-primary-light); color: var(--color-primary); }
.badge-published, .badge.published { background: var(--color-green-bg); color: var(--color-green); }
.badge-archived, .badge.archived { background: var(--color-grey-bg); color: var(--color-text-muted); }
.badge-failed, .badge.failed { background: var(--color-red-bg); color: var(--color-red); }

/* Purpose types */
.badge-money, .badge-Money, .badge.money, .badge.Money { background: var(--color-purple-bg); color: var(--color-purple); }
.badge-informational, .badge-Informational, .badge.informational, .badge.Informational { background: var(--color-blue-bg); color: var(--color-blue); }
.badge-brand, .badge-Brand, .badge.brand, .badge.Brand { background: var(--color-green-bg); color: var(--color-green); }

/* Priorities */
.badge-urgent, .badge-critical, .badge-Urgent, .badge.urgent, .badge.critical, .badge.Urgent { background: var(--color-red-bg); color: var(--color-red); font-weight: var(--font-weight-semibold); }
.badge-high, .badge-High, .badge.high, .badge.High { background: var(--color-orange-bg); color: var(--color-orange); }
.badge-low, .badge-Low, .badge.low, .badge.Low { background: var(--color-blue-bg); color: var(--color-blue); }

/* SLA */
.badge-sla-ok { background: var(--color-green-bg); color: var(--color-green); }
.badge-sla-approaching { background: var(--color-yellow-bg); color: var(--color-yellow); }
.badge-sla-breached { background: var(--color-red-bg); color: var(--color-red); font-weight: var(--font-weight-bold); }

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.card-hover {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-hover:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* Today Strip alert indicators */
.card-urgent { border-left: 4px solid var(--color-red); padding-left: calc(var(--space-4) - 4px); }
.card-focus  { border-left: 4px solid var(--color-orange); padding-left: calc(var(--space-4) - 4px); }
.card-watch  { border-left: 4px solid var(--color-yellow); padding-left: calc(var(--space-4) - 4px); }

.card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.card-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-action {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
}
.card-action:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════ */

.field {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.field label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select {
  height: 36px;
}
textarea {
  min-height: 96px;
  resize: vertical;
}

.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 92, 56, 0.12);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input { display: none; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background 0.2s ease;
}
.toggle input:checked ~ .toggle-track { background: var(--color-primary); }
.toggle-thumb {
  position: absolute;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-xs);
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }

/* Tag input (T04 fix) */
.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 44px;
  background: var(--color-bg);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tag-input-container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 92, 56, 0.12);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  padding: 0;
  display: flex;
  font-size: 12px;
  opacity: 0.6;
}
.tag-chip-remove:hover { opacity: 1; }
.tag-input-field {
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: transparent;
  min-width: 120px;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════════════════════ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
}
.avatar-sm  { width: 24px; height: 24px; font-size: 9px; }
.avatar-md  { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar-lg  { width: 40px; height: 40px; font-size: var(--text-sm); }

.avatar-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar-stack > * {
  margin-left: -8px;
  border: 2px solid var(--color-bg) !important;
}
.avatar-stack > *:first-child { margin-left: 0; }

/* ══════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════ */

.progress-bar {
  width: 100%;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  height: 8px;
}
.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.4s ease;
}
.progress-fill.behind  { background: var(--color-yellow); }
.progress-fill.at-risk { background: var(--color-red); }

/* ══════════════════════════════════════════════════════════
   MODALS AND DRAWERS (Adapted for vanilla layout compatibility)
   ══════════════════════════════════════════════════════════ */

/* Modal Backdrop overlay */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  animation: modal-fade-in 0.2s ease-out;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Inner Modal Card */
.modal > form,
.modal-content {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: modal-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-slide-up { from { transform: translateY(8px) scale(0.98); } to { transform: translateY(0) scale(1); } }

/* Drawer inside .modal (right panel slider) */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 640px;
  max-width: 95vw;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  overflow-y: auto;
  gap: var(--space-4);
  animation: drawer-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Shared inner structures */
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.muted { color: var(--color-text-secondary); font-size: var(--text-xs); }

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
}
.tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.tab:hover { color: var(--color-text); }
.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ══════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════ */

.table-wrap {
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
th {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
tbody tr:hover {
  background: var(--color-primary-light);
}
tbody tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   LOADING STATES (T05 fix)
   ══════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-subtle) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  z-index: 9999;
  animation: page-load 1.5s ease-in-out infinite;
}
@keyframes page-load {
  0%   { width: 0%; opacity: 1; }
  70%  { width: 85%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.empty-state-icon {
  font-size: 36px;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}
.empty-state-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.empty-state-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 360px;
}

/* ══════════════════════════════════════════════════════════
   TODAY STRIP & DASHBOARD GRID
   ══════════════════════════════════════════════════════════ */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.strip-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.strip-col-urgent  { background: var(--color-red-bg);    color: var(--color-red);    border: 1px solid var(--color-red-border); }
.strip-col-focus   { background: var(--color-orange-bg); color: var(--color-orange); border: 1px solid var(--color-orange-border); }
.strip-col-watch   { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); }

.strip-col-count {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}
.strip-col-urgent  .strip-col-count { background: var(--color-red);    color: white; }
.strip-col-focus   .strip-col-count { background: var(--color-orange); color: white; }
.strip-col-watch   .strip-col-count { background: var(--color-yellow); color: white; }

.strip-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ══════════════════════════════════════════════════════════
   PIPELINE KANBAN
   ══════════════════════════════════════════════════════════ */

.kanban {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  align-items: flex-start;
}

.kanban-column {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.kanban-column > h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.job-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  margin-top: var(--space-3);
}
.job-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  border-color: var(--color-primary);
}

/* Priority left border */
.job-card.priority-urgent { border-left: 3px solid var(--color-red); }
.job-card.priority-high   { border-left: 3px solid var(--color-orange); }
.job-card.priority-low    { border-left: 3px solid var(--color-blue); }

.placeholder-mark {
  background: var(--color-yellow-bg);
  padding: 0 2px;
  border: 1px solid var(--color-yellow-border);
  border-radius: var(--radius-sm);
}