/* ==========================================================================
   WorkShift – Utility & Component Supplement
   Covers all classes used in views/JS that have no matching rule in the
   core design-system files (tokens.css / base.css / components.css / etc.)
   ========================================================================== */

/* -- Spacing helpers -------------------------------------------------------- */
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }
.p-1  { padding: var(--space-1); }
.p-12 { padding: calc(var(--space-4) * 3); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pl-4 { padding-left: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }

/* Stack / gap helpers */
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }

/* -- Sizing ----------------------------------------------------------------- */
.w-1      { width: var(--space-1); }
.w-2      { width: var(--space-2); }
.h-1      { height: var(--space-1); }
.h-2      { height: var(--space-2); }
.h-full   { height: 100%; }
.min-w-0  { min-width: 0; }
.max-w-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }

/* -- Grid ------------------------------------------------------------------- */
.grid        { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:hidden      { display: none; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
}

/* -- Flexbox helpers -------------------------------------------------------- */
.items-baseline { align-items: baseline; }
.shrink-0       { flex-shrink: 0; }

/* -- Typography ------------------------------------------------------------- */
.text-2xs      { font-size: 0.625rem; line-height: 1rem; }
.text-4xl      { font-size: 2.25rem; line-height: 2.5rem; font-weight: var(--weight-bold); }
.text-left     { text-align: left; }
.font-italic   { font-style: italic; }
.font-medium   { font-weight: var(--weight-medium); }
.font-mono     { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.leading-normal { line-height: 1.5; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-3  {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-disc { list-style-type: disc; padding-left: 1.25em; }

/* -- Colours / backgrounds -------------------------------------------------- */
.bg-brand         { background-color: var(--color-brand); }
.bg-brand-light   { background-color: rgba(78,115,223,.12); }
.bg-surface       { background-color: var(--color-bg-surface); }
.bg-surface-sunken { background-color: var(--color-bg-surface-sunken); }
.bg-transparent   { background-color: transparent; }
.bg-warning       { background-color: var(--color-warning); }
.border-danger    { border-color: var(--color-danger) !important; }

/* -- Borders / radius ------------------------------------------------------- */
.border    { border: 1px solid var(--color-border); }
.border-0  { border: 0; }
.rounded   { border-radius: 4px; }
.rounded-md { border-radius: var(--radius-md, 6px); }
.rounded-lg { border-radius: var(--radius-lg, 8px); }

/* -- Shadows ---------------------------------------------------------------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.08); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.25), 0 8px 10px -6px rgba(0,0,0,.15); }

/* -- Overflow --------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }

/* -- Transitions ------------------------------------------------------------ */
.transition        { transition: all .15s ease; }
.transition-all    { transition: all .15s ease; }
.transition-colors { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.transition-shadow { transition: box-shadow .15s ease; }

/* -- Hover utilities -------------------------------------------------------- */
.hover\:text-primary:hover      { color: var(--color-text-primary); }
.hover\:text-brand:hover        { color: var(--color-brand); }
.hover\:text-success:hover      { color: var(--color-success); }
.hover\:underline:hover         { text-decoration: underline; }
.hover\:bg-surface-sunken:hover { background-color: var(--color-bg-surface-sunken); }
.hover\:border-brand:hover      { border-color: var(--color-brand); }
.hover\:shadow-md:hover         { box-shadow: 0 4px 6px -1px rgba(0,0,0,.15), 0 2px 4px -2px rgba(0,0,0,.1); }

/* -- Spinner / animation ---------------------------------------------------- */
@keyframes ws-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: ws-spin 1s linear infinite; }
.spinner {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: ws-spin .7s linear infinite;
  vertical-align: middle;
}

/* -- Badge / lozenge supplements -------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  border-radius: 999px;
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}
.badge-outline { background: transparent; border: 1px solid currentColor; }

.lozenge-brand, .lozenge-primary, .lozenge-muted, .lozenge-subtle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  border-radius: 999px;
}
.lozenge-brand   { background: rgba(78,115,223,.12); color: var(--color-brand); }
.lozenge-primary { background: rgba(78,115,223,.10); color: var(--color-brand); }
.lozenge-muted   { background: var(--color-bg-surface-sunken); color: var(--color-text-subtle); }
.lozenge-subtle  { background: var(--color-bg-surface-sunken); color: var(--color-text-subtle); }

/* -- Form supplementals ----------------------------------------------------- */
.form-checkbox   { width: 1rem; height: 1rem; accent-color: var(--color-brand); cursor: pointer; }
.form-control-sm,
.form-input-sm,
.form-select-sm  { font-size: var(--text-caption); padding: var(--space-1) var(--space-2); height: 28px; min-height: 28px; }

/* -- Segmented control ------------------------------------------------------ */
.segmented-control {
  display: inline-flex;
  background: var(--color-bg-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px; gap: 2px;
}
.segment-btn {
  padding: 4px 14px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  border: none; background: transparent;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.segment-btn.active, .segment-btn[aria-selected="true"] { background: var(--color-brand); color: #fff; }
.segment-btn:hover:not(.active):not([aria-selected="true"]) { background: var(--color-bg-surface); color: var(--color-text-primary); }

/* -- Modal supplement ------------------------------------------------------- */
.modal { display: none; position: fixed; inset: 0; z-index: 900; align-items: center; justify-content: center; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal-card {
  position: relative; z-index: 1;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
  width: min(520px, 95vw);
  padding: var(--space-5);
}
.ws-modal-custom-content, .ws-modal-match-group, .ws-modal-prompt-group { display: contents; }
.task-modal-wrapper { display: contents; }

/* -- Table supplement ------------------------------------------------------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- Task row --------------------------------------------------------------- */
.task-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background .12s;
}
.task-row:hover { background: var(--color-bg-surface-sunken); }

/* -- Stage labels ----------------------------------------------------------- */
.stage-title {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
}
.stage-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--color-bg-surface-sunken);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
}

/* -- Project-detail tabs ---------------------------------------------------- */
.project-tab-body { display: none; }
.project-tab-body.active { display: block; }
.project-summary-tab, .project-board-embed, .project-list-tab,
.project-timeline-tab, .project-time-tab, .project-files-tab,
.project-invoices-tab, .project-report-tab { display: none; }
.project-summary-tab.active, .project-board-embed.active, .project-list-tab.active,
.project-timeline-tab.active, .project-time-tab.active, .project-files-tab.active,
.project-invoices-tab.active, .project-report-tab.active { display: block; }

/* -- Portal supplements ----------------------------------------------------- */
.portal-body { background: var(--color-bg-base); min-height: 100vh; }
.portal-wrapper { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
.portal-board-wrapper { overflow-x: auto; }
.portal-tab-btn {
  padding: var(--space-2) var(--space-4);
  background: transparent; border: none;
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.portal-tab-btn.active, .portal-tab-btn[aria-selected="true"] { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.portal-tab-panel { display: none; }
.portal-tab-panel.active { display: block; }

/* -- Payment method option -------------------------------------------------- */
.payment-method-option {
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .15s, background .15s;
}
.payment-method-option.active { border-color: var(--color-brand); background: var(--color-bg-surface-sunken); }

/* -- Avatar / milestone / icon helpers -------------------------------------- */
.project-avatar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(78,115,223,.12); color: var(--color-brand);
  font-size: .875rem; font-weight: var(--weight-bold); flex-shrink: 0;
}
.milestone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,171,0,.12); color: var(--color-warning); font-size: .75rem;
}

/* -- Gantt supplementals ---------------------------------------------------- */
.gantt-loading { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--color-text-subtle); gap: var(--space-2); }
.gantt-portfolio-container { overflow-x: auto; }
.gantt-btn-today, .gantt-color-toggle {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; transition: background .12s;
}
.gantt-btn-today:hover, .gantt-color-toggle:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }

/* -- Template / settings grids ---------------------------------------------- */
.template-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.settings-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }

/* -- Button variants -------------------------------------------------------- */
.btn-category {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-surface-sunken);
  border: 1px solid var(--color-border); border-radius: 999px;
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  color: var(--color-text-subtle); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-category.active, .btn-category[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.btn-category:hover:not(.active):not([aria-pressed="true"]) { background: var(--color-bg-surface); color: var(--color-text-primary); }

/* -- Landing page ----------------------------------------------------------- */
.landing-page { font-family: var(--font-sans); }

/* -- Wizard step ------------------------------------------------------------ */
.wizard-step-content { display: none; }
.wizard-step-content.active { display: block; }

/* -- Notifications page ----------------------------------------------------- */
.notifications-page { max-width: 680px; margin: 0 auto; }

/* -- Theme toggle icon ------------------------------------------------------ */
.theme-toggle-icon { display: inline-flex; transition: transform .2s; }

/* -- Zoom (Gantt scale) ----------------------------------------------------- */
.zoom { font-size: var(--text-caption); }

/* -- Billing type state classes (JS-toggled on invoice form) ---------------- */
.hourly { /* active state applied by JS; inherits layout from parent container */ }
.fixed  { /* active state applied by JS; inherits layout from parent container */ }

/* -- Task completion state -------------------------------------------------- */
.completed .task-title,
.completed [data-field="title"] { text-decoration: line-through; color: var(--color-text-subtle); }

/* -- Generic form-control alias (maps to clay-input) ------------------------ */
.form-control {
  display: block; width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body);
  background: var(--color-bg-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition: border-color .15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(78,115,223,.18);
}