/* ============================================================
   GanttPWA — Styles (SDMyers Design System)
   ============================================================ */

/* ── SDMyers Design Tokens ─────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-VariableFont-wdth-wght.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Italic-VariableFont-wdth-wght.ttf') format('truetype');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --sdm-aubergine:        #7B2682;
  --sdm-aubergine-50:     #F8F0F9;
  --sdm-aubergine-100:    #EFD9F1;
  --sdm-aubergine-200:    #DCB1E0;
  --sdm-aubergine-400:    #A254AC;
  --sdm-aubergine-500:    #7B2682;
  --sdm-aubergine-600:    #681F6E;
  --sdm-aubergine-700:    #531858;

  --sdm-amber:            #F49A17;
  --sdm-amber-50:         #FEF6E8;
  --sdm-amber-400:        #F49A17;
  --sdm-amber-500:        #D9850A;

  --sdm-khaki:            #B0A67A;
  --sdm-khaki-300:        #CCC4A2;

  /* ---------- NEUTRALS ---------- */
  --sdm-ink-900:          #1F2025;
  --sdm-ink-800:          #2D2E36;
  --sdm-ink-700:          #3D3E48;
  --sdm-ink-600:          #52535E;
  --sdm-ink-500:          #6B6D78;

  --sdm-gray-400:         #9698A2;
  --sdm-gray-300:         #BCBEC6;
  --sdm-gray-200:         #D8D9DF;
  --sdm-gray-150:         #E6E7EB;
  --sdm-gray-100:         #F1F2F4;
  --sdm-gray-50:          #F8F9FA;
  --sdm-white:            #FFFFFF;

  /* ---------- STATUS ---------- */
  --sdm-red:              #A90C14;
  --sdm-red-50:           #FBEAEB;
  --sdm-red-100:          #F4C7C9;
  --sdm-red-600:          #8A0A11;
  --sdm-green:            #3F8A2F;
  --sdm-green-50:         #ECF5E9;
  --sdm-green-600:        #327025;
  --sdm-blue:             #2B6CB0;
  --sdm-blue-50:          #EAF1F8;

  /* ---------- SEMANTIC ALIASES ---------- */
  --color-brand:          var(--sdm-aubergine-500);
  --color-brand-hover:    var(--sdm-aubergine-600);
  --color-brand-active:   var(--sdm-aubergine-700);
  --color-brand-subtle:   var(--sdm-aubergine-50);
  --color-brand-border:   var(--sdm-aubergine-200);
  --color-accent:         var(--sdm-amber-400);
  --color-accent-hover:   var(--sdm-amber-500);
  --color-accent-subtle:  var(--sdm-amber-50);

  --text-strong:          var(--sdm-ink-900);
  --text-body:            var(--sdm-ink-600);
  --text-muted:           var(--sdm-gray-400);
  --text-on-brand:        var(--sdm-white);
  --text-on-accent:       var(--sdm-ink-900);
  --text-link:            var(--sdm-aubergine-500);

  --surface-page:         var(--sdm-gray-50);
  --surface-card:         var(--sdm-white);
  --surface-sunken:       var(--sdm-gray-100);
  --surface-inverse:      var(--sdm-ink-900);

  --border-subtle:        var(--sdm-gray-150);
  --border-default:       var(--sdm-gray-200);
  --border-strong:        var(--sdm-gray-300);
  --border-focus:         var(--sdm-aubergine-400);

  --status-healthy:       var(--sdm-green);
  --status-healthy-bg:    var(--sdm-green-50);
  --status-caution:       var(--sdm-amber-400);
  --status-caution-bg:    var(--sdm-amber-50);
  --status-critical:      var(--sdm-red);
  --status-critical-bg:   var(--sdm-red-50);
  --status-info:          var(--sdm-blue);
  --status-info-bg:       var(--sdm-blue-50);

  --focus-ring:           0 0 0 3px color-mix(in srgb, var(--sdm-aubergine-400) 40%, transparent);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --text-h4:      1.25rem;
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.6875rem;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---------- SPACING ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- RADII ---------- */
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs:    0 1px 2px rgba(31,32,37,0.06);
  --shadow-sm:    0 1px 3px rgba(31,32,37,0.08), 0 1px 2px rgba(31,32,37,0.04);
  --shadow-md:    0 4px 12px rgba(31,32,37,0.08), 0 1px 3px rgba(31,32,37,0.05);
  --shadow-lg:    0 12px 28px rgba(31,32,37,0.12), 0 2px 6px rgba(31,32,37,0.06);
  --shadow-brand: 0 8px 24px color-mix(in srgb, var(--sdm-aubergine-500) 22%, transparent);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;

  /* ---------- LEGACY VARIABLE MAP (keeps JS/HTML references working) ---------- */
  --bg:          var(--surface-page);
  --bg2:         var(--surface-card);
  --bg3:         var(--surface-sunken);
  --border:      var(--border-default);
  --accent:      var(--color-brand);
  --accent2:     var(--color-brand-hover);
  --danger:      var(--status-critical);
  --success:     var(--status-healthy);
  --warning:     var(--status-caution);
  --text:        var(--text-body);
  --radius:      var(--radius-md);
  --shadow:      var(--shadow-md);

  /* ---------- LAYOUT ---------- */
  --sidebar-w:  220px;
  --toolbar-h:  46px;
  --topbar-h:   48px;
}

/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-family: var(--font-sans); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
::selection { background: var(--sdm-aubergine-100); color: var(--sdm-aubergine-700); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Login ──────────────────────────────────────────────────── */

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--sdm-ink-900);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--sdm-aubergine-700) 25%, var(--sdm-ink-900)) 0%, var(--sdm-ink-900) 60%);
}

.login-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-12);
  width: 380px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.login-logo svg { flex-shrink: 0; }

.login-logo h1 {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}

.login-logo p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.login-card label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: 6px;
  margin-top: var(--space-4);
}

.login-card input[type=text],
.login-card input[type=password] {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  padding: 10px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.login-card input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.login-error {
  color: var(--status-critical);
  font-size: var(--text-xs);
  margin-top: 8px;
  min-height: 1em;
}

.login-submit {
  margin-top: var(--space-6);
  width: 100%;
  padding: 11px;
  background: var(--color-brand);
  color: var(--text-on-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.login-submit:hover {
  background: var(--color-brand-hover);
  box-shadow: var(--shadow-brand);
}

.login-submit:active {
  transform: translateY(0.5px) scale(0.99);
}

.login-submit:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── App shell ──────────────────────────────────────────────── */

#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Top bar — aubergine brand header */
#top-bar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 var(--space-4);
  background: var(--sdm-ink-900);
  border-bottom: 1px solid var(--sdm-ink-800);
  gap: var(--space-3);
  flex-shrink: 0;
}

#top-bar .logo-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  color: var(--sdm-white);
  margin-right: 8px;
  letter-spacing: 0.01em;
}

#top-bar .logo-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#project-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--sdm-gray-300);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

#project-title:hover {
  background: var(--sdm-ink-800);
  color: var(--sdm-white);
}

.top-spacer { flex: 1; }

#logout-btn {
  background: none;
  border: 1px solid var(--sdm-ink-700);
  color: var(--sdm-gray-400);
  padding: 5px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

#logout-btn:hover {
  color: var(--sdm-white);
  border-color: var(--sdm-gray-400);
}

#logout-btn:active {
  transform: translateY(0.5px) scale(0.99);
}

/* Toolbar */
#toolbar {
  display: flex;
  align-items: center;
  height: var(--toolbar-h);
  padding: 0 12px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  border-right: 1px solid var(--border-subtle);
}

.toolbar-group:last-child { border-right: none; }

.toolbar-group .group-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-right: 4px;
  white-space: nowrap;
}

/* Base button */
.btn {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn:active {
  transform: translateY(0.5px) scale(0.99);
}

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

.btn.active {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  color: var(--color-brand);
}

.btn.dirty {
  border-color: var(--status-caution);
  color: var(--color-accent-hover);
}

/* Primary action button */
.btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-on-brand);
  font-weight: var(--fw-semibold);
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}

/* Icon-only button */
.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1;
  font-family: var(--font-sans);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.btn-icon:hover {
  color: var(--text-strong);
  background: var(--surface-sunken);
}

.btn-icon:active {
  transform: translateY(0.5px) scale(0.94);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* SDMyers icon set — lucide-style 2px line icons, sized for dense UI */
.icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-critical { color: var(--status-critical); }

/* ── Main body ──────────────────────────────────────────────── */

#main-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar (dark charcoal per SDMyers design system) ──────── */

#sidebar {
  width: var(--sidebar-w);
  background: var(--sdm-ink-900);
  border-right: 1px solid var(--sdm-ink-800);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sdm-ink-800);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--sdm-ink-500);
}

#sidebar-header .btn-icon {
  color: var(--sdm-ink-500);
}

#sidebar-header .btn-icon:hover {
  color: var(--sdm-white);
  background: var(--sdm-ink-800);
}

#project-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 1px 6px;
  gap: 6px;
  transition: background var(--dur-fast) var(--ease-standard);
}

.project-item:hover { background: var(--sdm-ink-800); }

.project-item.active {
  background: var(--sdm-aubergine-700);
}

.project-item .proj-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--sdm-gray-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-item.active .proj-name { color: var(--sdm-white); }

.project-item .del-proj {
  opacity: 0;
  font-size: 1rem;
  color: var(--sdm-red);
  padding: 0 3px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.project-item:hover .del-proj { opacity: 1; }

/* ── Gantt area ─────────────────────────────────────────────── */

#gantt-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: var(--surface-page);
}

#gantt_here {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* ── Empty state ────────────────────────────────────────────── */

#empty-state {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

#empty-state h2 {
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

#empty-state p { font-size: var(--text-sm); }

/* ── Loading overlay ────────────────────────────────────────── */

#loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(248, 249, 250, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-size: var(--text-sm);
  color: var(--text-muted);
  backdrop-filter: blur(2px);
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-default);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 12px;
}

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

/* ── Toast ──────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  padding: 9px 20px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  border-color: var(--status-healthy);
  color: var(--sdm-green-600);
  background: var(--status-healthy-bg);
}

.toast.error {
  border-color: var(--status-critical);
  color: var(--sdm-red-600);
  background: var(--status-critical-bg);
}

.toast.warning {
  border-color: var(--status-caution);
  color: var(--sdm-amber-500);
  background: var(--status-caution-bg);
}

/* ── Modals ──────────────────────────────────────────────────── */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 32, 37, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-backdrop.open { display: flex; }

.modal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) 28px;
  min-width: 380px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-card h2 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}

.modal-close:hover {
  color: var(--text-strong);
  background: var(--surface-sunken);
}

/* Form fields */
.form-row { margin-bottom: 14px; }

.form-row label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: 5px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  padding: 9px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Resource modal */
.resource-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.resource-row .res-name  { flex: 2; }
.resource-row .res-type  { flex: 1; }
.resource-row .res-rate  {
  width: 70px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.empty-msg {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: 12px 0;
}

/* Task resource dialog */
.trd-task-name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  margin-bottom: 14px;
  color: var(--color-brand);
}

.trd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.trd-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: var(--fw-regular);
}

.trd-rows {
  max-height: 240px;
  overflow-y: auto;
}

.trd-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.trd-add-row .trd-new-name {
  flex: 1;
  padding: 6px 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card);
  color: var(--text-body);
}

.trd-add-row .trd-new-name:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.trd-add-row .trd-add-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ── Resize handle ──────────────────────────────────────────── */

#split-handle {
  width: 4px;
  background: var(--border-subtle);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-standard);
}

#split-handle:hover { background: var(--color-brand); }

/* ── dhtmlxGantt theme overrides ─────────────────────────────── */

.gantt_container {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
  font-family: var(--font-sans) !important;
  border-color: var(--border-subtle) !important;
}

/* Header / scale rows */
.gantt_grid_head_cell,
.gantt_scale_cell,
.gantt_scale_line {
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
  font-size: 0.75rem !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.01em !important;
}

/* Row stripes — subtle on white */
.gantt_row,
.gantt_task_row {
  border-color: var(--border-subtle) !important;
}

.gantt_row:nth-child(even) { background: var(--sdm-gray-50) !important; }
.gantt_row:nth-child(odd)  { background: var(--surface-card) !important; }
.gantt_row.odd             { background: var(--surface-card) !important; }
.gantt_row.even            { background: var(--sdm-gray-50) !important; }

.gantt_row:hover,
.gantt_task_row:hover      { background: var(--sdm-aubergine-50) !important; }

.gantt_row.gantt_selected,
.gantt_task_row.gantt_selected { background: var(--color-brand-subtle) !important; }

/* Grid cells */
.gantt_cell,
.gantt_tree_icon {
  color: var(--text-body) !important;
  border-color: var(--border-subtle) !important;
}

/* Measured/tabular columns (Start, Days, %) — mono + tabular figures per
   SDMyers type system. Column order matches g.config.columns in
   gantt-setup.js: wbs, text, start_date, duration, progress, ... */
.gantt_row > .gantt_cell:nth-child(3),
.gantt_row > .gantt_cell:nth-child(4),
.gantt_row > .gantt_cell:nth-child(5) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

.gantt_task_content { color: var(--text-on-brand) !important; }

/* Task bars — aubergine primary */
.gantt_task_line {
  background: var(--color-brand) !important;
  border-color: var(--sdm-aubergine-600) !important;
  border-radius: var(--radius-sm) !important;
}

.gantt_task_line .gantt_task_content {
  color: var(--text-on-brand) !important;
  font-size: 0.73rem !important;
  font-weight: var(--fw-medium) !important;
}

/* Milestone — amber accent */
.gantt_task_line.gantt_milestone {
  background: var(--color-accent) !important;
  border-color: var(--sdm-amber-500) !important;
}

/* Critical path — red */
.critical-task .gantt_task_line {
  background: var(--status-critical) !important;
  border-color: var(--sdm-red-600) !important;
}

/* Project summary bar */
.gantt_task_line.project-task {
  background: var(--sdm-ink-700) !important;
  border-color: var(--sdm-ink-600) !important;
}

/* Dependency links */
.gantt_link_line,
.gantt_link_arrow { stroke: var(--sdm-aubergine-400) !important; }
.gantt_link_line path { stroke: var(--sdm-aubergine-400) !important; }

/* Tooltip */
.gantt_tooltip {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-body) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 0.82rem !important;
  font-family: var(--font-sans) !important;
  padding: 8px 12px !important;
}

/* Weekend shading */
.gantt-weekend { background: rgba(150, 152, 162, 0.07) !important; }

/* Add button */
.gantt_add { color: var(--color-brand) !important; }

/* Scale backgrounds */
.gantt_grid_scale { background: var(--surface-sunken) !important; border-color: var(--border-subtle) !important; }
.gantt_task_scale { background: var(--surface-sunken) !important; border-color: var(--border-subtle) !important; }

/* Scrollbars — dhtmlxGantt renders these as native-overflow strips, so on
   systems with overlay/auto-hide scrollbars (macOS, many Linux/Chrome
   setups) they're invisible until actively scrolling. Force a classic,
   always-visible, styled scrollbar so the horizontal one at the bottom of
   the timeline is always there to grab. */
.gantt_ver_scroll,
.gantt_hor_scroll {
  background: var(--surface-sunken) !important;
  scrollbar-width: auto;               /* Firefox: don't thin/auto-hide */
  scrollbar-color: var(--sdm-aubergine-400) var(--surface-sunken);
}

.gantt_hor_scroll::-webkit-scrollbar { height: 14px; }
.gantt_ver_scroll::-webkit-scrollbar { width: 14px; }

.gantt_hor_scroll::-webkit-scrollbar-track,
.gantt_ver_scroll::-webkit-scrollbar-track {
  background: var(--surface-sunken);
}

.gantt_hor_scroll::-webkit-scrollbar-thumb,
.gantt_ver_scroll::-webkit-scrollbar-thumb {
  background: var(--sdm-aubergine-400);
  border-radius: 7px;
  border: 3px solid var(--surface-sunken);
}

.gantt_hor_scroll::-webkit-scrollbar-thumb:hover,
.gantt_ver_scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sdm-aubergine-500);
}

/* Baseline bars */
.baseline-bar {
  position: absolute;
  height: 6px;
  background: rgba(176, 166, 122, 0.55);
  border: 1px solid var(--sdm-khaki);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Task edit lightbox — custom sections (Milestone, Predecessors, Resources) ─ */

.gantt-lb-milestone {
  padding: 4px 0;
}

.milestone-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.milestone-switch .lb-milestone-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.milestone-switch-track {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--sdm-gray-300);
  transition: background var(--dur-base) var(--ease-standard);
}

.milestone-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: left var(--dur-base) var(--ease-out, var(--ease-standard));
}

.milestone-switch .lb-milestone-checkbox:checked + .milestone-switch-track {
  background: var(--color-accent-hover);
}

.milestone-switch .lb-milestone-checkbox:checked + .milestone-switch-track .milestone-switch-thumb {
  left: 20px;
}

.milestone-switch .lb-milestone-checkbox:focus-visible + .milestone-switch-track {
  box-shadow: var(--focus-ring);
}

.milestone-switch-label {
  font-size: var(--text-sm);
  color: var(--text-body);
}

.gantt-lb-predecessors {
  padding: 4px 0;
}

.gantt-lb-predecessors .lb-pred-input {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  padding: 8px 10px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.gantt-lb-notes {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.notes-tab {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
}

.notes-tab.active {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  color: var(--color-brand);
}

.lb-notes-input {
  flex: 1;
  width: 100%;
  resize: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  padding: 8px 10px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.lb-notes-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.lb-notes-preview {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: var(--text-sm);
  color: var(--text-body);
  background: var(--surface-sunken);
}

.lb-notes-preview ul {
  margin: 4px 0;
  padding-left: 20px;
}

/* Small "has notes" indicator appended after the task name in the grid. */
.task-notes-icon {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  vertical-align: -1px;
}

.gantt-lb-predecessors .lb-pred-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.gantt-lb-resources {
  height: 100%;
  overflow-y: auto;
  padding: 2px 0;
}

.gantt-lb-resources .trd-rows .trd-row:first-child {
  padding-top: 0;
}