/* ============================================================
   COMPONENTS.CSS — Buttons, Cards, Panels, Scroll Containers
   ============================================================ */

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

.btn-add {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: white;
}
.btn-add:hover { box-shadow: 0 5px 15px rgba(16,185,129,0.4); }

.btn-remove {
  background: linear-gradient(135deg, var(--color-danger-light) 0%, var(--color-danger) 100%);
  color: white;
}
.btn-remove:hover { box-shadow: 0 5px 15px rgba(239,68,68,0.4); }.btn-clear-all {
  background: linear-gradient(135deg, var(--color-danger-light) 0%, var(--color-danger) 100%);
  color: white;
  padding: 14px 28px;
  font-size: 1.15em;
}
.btn-clear-all:hover { box-shadow: 0 5px 15px rgba(239,68,68,0.4); }/* ── Section header tools (Additional Information) ───────────
   Rename / Clear / Bullets / Numbering are icon-only buttons that
   share one size and shape. Rename and the two list buttons sit on
   a quiet neutral surface; Clear is soft red — recognisable as the
   destructive action without shouting from every section header. */
.btn-rename {
  background: #eef2f8;
  color: #475569;
  border: 1.5px solid #dbe3ee;
  padding: 8px 10px;
  min-width: 42px;
  min-height: 38px;
  border-radius: 12px;
  justify-content: center;
  gap: 0;
}
.btn-rename svg { display: block; width: 18px; height: 18px; }
.btn-rename:hover {
  background: #e2e8f2;
  box-shadow: 0 5px 15px rgba(71,85,105,0.22);
}
.btn-rename:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-clear-section {
  background: #fdeeee;
  color: #dc2626;
  border: 1.5px solid #f9d2d2;
  padding: 8px 10px;
  min-width: 42px;
  min-height: 38px;
  border-radius: 12px;
  justify-content: center;
  gap: 0;
}
.btn-clear-section svg { display: block; width: 18px; height: 18px; }
.btn-clear-section:hover {
  background: #fbdede;
  box-shadow: 0 5px 15px rgba(220,38,38,0.20);
}
.btn-clear-section:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

/* ── List-format icon buttons (bullets / numbering) ──────────
   Icon-only, neutral surface so they read as text tools rather
   than destructive/primary actions. Parity with DACUM Live Pro. */
.btn-list-format {
  background: #eef2f8;
  color: #475569;
  border: 1.5px solid #dbe3ee;
  padding: 8px 10px;
  min-width: 42px;
  min-height: 38px;
  border-radius: 12px;
  justify-content: center;
  gap: 0;
}
.btn-list-format svg { display: block; width: 18px; height: 18px; }
.btn-list-format:hover {
  background: #e2e8f2;
  box-shadow: 0 5px 15px rgba(71,85,105,0.22);
}
.btn-list-format:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Logo buttons (Chart Info → Produced For / Produced By) ───
   Add Logo wears the same colour as the toolbar's Export Project
   button (.tb-btn--primary → var(--brand-primary-btn)), so it follows
   the active theme with no per-theme override. Remove Logo is the
   soft-red icon-only button used for Clear section: quiet until
   needed, and it only appears once a logo has been loaded. */
.logo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-add-image {
  background: var(--brand-primary-btn);
  color: #ffffff;
  border: 1px solid var(--brand-primary-btn);
  border-radius: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 0.95em;
  font-weight: 500;
  white-space: nowrap;
}
.btn-add-image:hover {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-primary-btn) 35%, transparent);
}
.btn-add-image:focus-visible {
  outline: 2px solid var(--brand-primary-deep);
  outline-offset: 2px;
}

.btn-remove-image {
  background: #fdeeee;
  color: #dc2626;
  border: 1.5px solid #f9d2d2;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.btn-remove-image svg { display: block; width: 18px; height: 18px; }
.btn-remove-image:hover {
  background: #fbdede;
  box-shadow: 0 5px 15px rgba(220,38,38,0.20);
}
.btn-remove-image:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}/* Remove section button (custom sections) */
.btn-remove-section {
  background: linear-gradient(135deg, var(--color-danger-light) 0%, var(--color-danger) 100%);
  color: white;
  padding: 8px 16px;
  font-size: 0.95em;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-remove-section:hover { box-shadow: 0 5px 15px rgba(239,68,68,0.4); }

/* ══════════════════════════════════════════════════════════════
   STATUS BANNER
   ══════════════════════════════════════════════════════════════ */
.status {
  padding: 15px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
  font-size: 1.05em;
  font-weight: 600;
  text-align: center;
}
.status.success {
  background: #d1fae5;
  color: #065f46;
  border: 2px solid var(--color-success);
}
.status.error {
  background: #fee2e2;
  color: #991b1b;
  border: 2px solid var(--color-danger-light);
}/* ══════════════════════════════════════════════════════════════
   IMAGE UPLOAD
   ══════════════════════════════════════════════════════════════ */
.image-upload-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}
.image-preview {
  width: 95px;
  height: 95px;
  border: 2px dashed #ccc;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-light);
}
.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.image-preview.has-image {
  border: 2px solid var(--color-success);
  background: white;
}
.image-preview-placeholder {
  color: var(--text-faint);
  font-size: 0.9em;
}

/* ══════════════════════════════════════════════════════════════
   DUTY & TASK TABLE VIEW
   ══════════════════════════════════════════════════════════════ */
.duty-row, .ks-row, .behavior-row {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 6%, white) 0%, color-mix(in srgb, var(--brand-primary) 14%, white) 100%);
  border: 2px solid color-mix(in srgb, var(--brand-primary) 45%, white);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.duty-header, .ks-header, .behavior-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.duty-header-actions {
  display: flex;
  gap: 10px;
}
.task-list, .ks-list, .behavior-list { margin-left: 20px; }
.task-item, .ks-item, .behavior-item {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}
.task-label, .ks-label, .behavior-label {
  width: 90px;
  color: #666;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1.05em;
}

/* ══════════════════════════════════════════════════════════════
   SECTION CONTAINERS (Additional Info)
   ══════════════════════════════════════════════════════════════ */
.section-container {
  background: linear-gradient(135deg, var(--surface-light) 0%, #f3f4f6 100%);
  border: 2px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-header-editable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.section-header-editable h3 { margin: 0; padding: 8px 12px; border-radius: 6px; transition: background 0.3s; }
.section-header-editable h3[contenteditable="true"] {
  background: var(--surface-white);
  border: 2px solid var(--color-accent);
  outline: none;
  cursor: text;
}
.section-header-actions {
  display: flex;
  gap: 10px;
}/* ══════════════════════════════════════════════════════════════
   SNAPSHOT PANEL
   ══════════════════════════════════════════════════════════════ */
#snapshotPanel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 9998;
  background: var(--surface-dark);
  border: 1px solid var(--surface-dark-mid);
  border-radius: var(--radius-md);
  padding: 14px;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
#snapshotPanel h4 {
  color: #94a3b8;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.snap-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  background: #0f172a;
  margin-bottom: 6px;
  gap: 8px;
}
.snap-item-label { color: #cbd5e1; font-size: 0.85em; flex: 1; }
.snap-item-time  { color: var(--color-slate-light); font-size: 0.72em; }
.snap-restore-btn {
  background: var(--color-sky);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 0.78em;
  cursor: pointer;
  font-weight: 600;
}
.snap-restore-btn:hover { background: var(--color-sky-dark); transform: none; box-shadow: none; }
.snap-empty {
  color: var(--color-slate);
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
  padding: 10px;
}/* ══════════════════════════════════════════════════════════════
   CARD VIEW
   ══════════════════════════════════════════════════════════════ */
.cv-duties-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Duty row (horizontal scroll container) ─────────────────── */
.cv-duty-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: #f8fafc;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Smooth hidden scrollbar */
.cv-duty-row::-webkit-scrollbar { height: 5px; }
.cv-duty-row::-webkit-scrollbar-track { background: color-mix(in srgb, var(--brand-primary) 12%, white); border-radius: 4px; }
.cv-duty-row::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-primary) 55%, white); border-radius: 4px; }
.cv-duty-row { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand-primary) 55%, white) color-mix(in srgb, var(--brand-primary) 12%, white); }

/* ── Duty card (sticky blue column) ────────────────────────── */
.cv-duty-card {
  background: color-mix(in srgb, var(--brand-primary) 28%, white);
  border: 2px solid color-mix(in srgb, var(--brand-primary) 55%, white);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 10px 12px 12px 12px;
  min-width: 150px;
  width: 150px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.92em;
  color: color-mix(in srgb, var(--brand-primary) 65%, black);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  box-shadow: 2px 0 8px color-mix(in srgb, var(--brand-primary) 10%, transparent);
  line-height: 1.3;
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Top row: index label + delete */
.cv-duty-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cv-duty-index-label {
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  text-transform: uppercase;
}

.cv-duty-text {
  outline: none;
  cursor: text;
  width: 100%;
  min-height: 24px;
  border-radius: 6px;
  padding: 3px 5px;
  transition: background 0.2s;
  word-break: break-word;
  font-size: 1.15em;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand-primary) 65%, black);
}
.cv-duty-text:focus { background: rgba(255,255,255,0.7); }
.cv-duty-text:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--brand-primary) 70%, white);
  font-style: italic;
  font-weight: 400;
}

/* ── Circular delete buttons ────────────────────────────────── */
.cv-delete-duty, .cv-delete-task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.cv-delete-duty:hover, .cv-delete-task:hover {
  background: var(--color-danger);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(185,28,28,0.3);
}

/* ── Tasks wrapper (scrollable horizontal row) ──────────────── */
.cv-tasks-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;          /* Never wrap to second line */
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
  overflow-x: visible;        /* Parent cv-duty-row handles scrolling */
}

/* ── Task card ──────────────────────────────────────────────── */
.cv-task-card {
  background: color-mix(in srgb, var(--brand-accent) 22%, white);
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  min-width: 130px;
  width: 150px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-accent) 20%, transparent);
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.cv-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand-accent) 35%, transparent);
}

.cv-task-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cv-task-label {
  font-size: 0.70em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-dark);
}

.cv-task-text {
  font-size: 0.90em;
  color: color-mix(in srgb, var(--brand-accent-dark) 65%, black);
  line-height: 1.35;
  outline: none;
  min-height: 22px;
  cursor: text;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.2s;
  word-break: break-word;
}
.cv-task-text:focus { background: color-mix(in srgb, var(--brand-accent) 45%, white); }
.cv-task-text:empty::before {
  content: attr(data-placeholder);
  color: var(--brand-accent-dark);
  font-style: italic;
}

/* ── Add Task inline button ─────────────────────────────────── */
.cv-add-task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(16,185,129,0.2);
}
.cv-add-task:hover {
  background: var(--color-success-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

/* ── Add Duty card view button ──────────────────────────────── */
.cv-add-duty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  margin-top: 4px;
}
.cv-add-duty:hover {
  background: linear-gradient(135deg, var(--color-success-dark) 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(16,185,129,0.4);
}

/* ── Empty state note ───────────────────────────────────────── */
.cv-empty-note {
  color: var(--brand-accent-dark);
  font-style: italic;
  font-size: 0.9em;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--brand-accent) 22%, white);
  border: 2px dashed var(--brand-accent);
  border-radius: 10px;
  align-self: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Add Section button (Additional Info tab) ───────────────── */
.btn-add-section-main {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: white;
  padding: 12px 24px;
  font-size: 1.05em;
}
.btn-add-section-main:hover { box-shadow: 0 5px 15px rgba(16,185,129,0.4); }

/* ================================================================
   SIDEBAR — Project Management Layer
   ================================================================ */

/* ── Layout: body override so appWrapper handles padding ────────
   components.css loads after base.css; this rule wins by cascade. */
body {
  padding: 0;
}

#appWrapper {
  margin-left: 260px;
  min-height: 100vh;
  padding: 20px;
  padding-top: 72px;               /* 56px toolbar + 16px breathing room */
  box-sizing: border-box;
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop mini sidebar: appWrapper indented by mini width (handled in layout.css) */
body.sb-sidebar-closed #appWrapper {
  margin-left: 60px;
}

/* ── Sidebar panel ────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background: #13192a;
  border-right: 1px solid #1e2a40;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
  /* Width transition handles desktop mini mode */
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: "collapsed" = mini (60px) — handled by body.sb-sidebar-closed
   in the inline <style> block. No translateX on desktop. */
#sidebar.sb-collapsed {
  /* Legacy class — no longer used for desktop; kept for safety */
}

/* ── Section labels ────────────────────────────────────────────── */
.sb-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 6px;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b4a6b;
  flex-shrink: 0;
  /* Smooth hide in mini mode */
  transition: opacity 0.2s, height 0.2s, padding 0.2s;
  white-space: nowrap;
  overflow: hidden;
}

.sb-section-label--projects {
  border-top: 1px solid #1a2438;
  margin-top: 4px;
  padding-top: 12px;
}

/* ── Navigation items ──────────────────────────────────────────── */
.sb-nav {
  padding: 4px 8px 8px;
  flex-shrink: 0;
}

.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}

.sb-nav-item:hover {
  background: #1a2440;
}

.sb-nav-item.sb-nav-active {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  border-left-color: var(--brand-primary);
}

.sb-nav-icon {
  font-size: 1.1em;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}

.sb-nav-label {
  font-size: 0.875em;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.15s, opacity 0.2s, width 0.2s;
  white-space: nowrap;
  overflow: hidden;
}

.sb-nav-item:hover .sb-nav-label {
  color: #e2e8f0;
}

.sb-nav-item.sb-nav-active .sb-nav-label {
  color: color-mix(in srgb, var(--brand-primary) 60%, white);
  font-weight: 700;
}

/* ── Old toggle tab — superseded by in-sidebar collapse btn ──── */
#sidebarToggleBtn { display: none !important; }.sb-new-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
.sb-new-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

/* ── Search input ────────────────────────────────────────────── */
.sb-search {
  padding: 9px 10px;
  border-bottom: 1px solid #1a2438;
  flex-shrink: 0;
}

/* Override global input[type="text"] styles for the sidebar input.
   #sidebar gives us extra specificity over the base rule. */
#sidebar input[type="text"] {
  padding: 7px 10px;
  border: 1px solid #1e2a40;
  border-radius: 8px;
  background: #0d1320;
  color: #64748b;
  font-size: 0.80em;
  font-weight: 400;
  margin-bottom: 0;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}

#sidebar input[type="text"]::placeholder { color: #2d3a56; }

#sidebar input[type="text"]:focus {
  border-color: #3b82f6;
  color: #cbd5e1;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
  outline: none;
}

/* ── Project list (scrollable) ───────────────────────────────── */
.sb-project-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 7px 8px;
  scrollbar-width: thin;
  scrollbar-color: #1e2a40 transparent;
}
.sb-project-list::-webkit-scrollbar       { width: 4px; }
.sb-project-list::-webkit-scrollbar-track { background: transparent; }
.sb-project-list::-webkit-scrollbar-thumb { background: #1e2a40; border-radius: 4px; }

/* ── Empty state ─────────────────────────────────────────────── */
.sb-empty {
  color: #2d3a56;
  font-size: 0.80em;
  text-align: center;
  padding: 24px 10px;
  font-style: italic;
}

/* ── Project card ────────────────────────────────────────────── */
.sb-project-card {
  display: flex;
  align-items: stretch;
  border-radius: 9px;
  margin-bottom: 4px;
  background: #161e30;
  border: 1px solid #1a2438;
  cursor: default;
  transition: background 0.16s, border-color 0.16s;
  overflow: hidden;
}

.sb-project-card:hover {
  background: #1a2440;
  border-color: #243250;
}

/* Active project — blue left border accent */
.sb-project-card.sb-active {
  background: #162040;
  border-color: var(--brand-primary);
  border-left-width: 3px;
}

/* Card body (clickable) */
.sb-card-body {
  flex: 1;
  padding: 9px 8px 9px 10px;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.sb-card-name {
  color: #ffffff;       /* was #94a3b8 — raised to full white for contrast */
  font-size: 0.840em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.3;
  transition: color 0.15s;
}

.sb-project-card:hover     .sb-card-name { color: #e2e8f0; }   /* was #b0c0d8 */
.sb-project-card.sb-active .sb-card-name { color: color-mix(in srgb, var(--brand-primary) 55%, white); }   /* brand accent */

.sb-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-meta-item {
  font-size: 0.70em;
  color: #cbd5e1;       /* was #2d3a56 — nearly invisible on dark bg; raised to legible slate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-project-card.sb-active .sb-meta-item { color: #94a3b8; }  /* was #374e72 — more readable on active blue border */

/* ── Card actions (rename / delete) ─────────────────────────────
   v4.2.0 — visibility is now decided by the INPUT DEVICE, not by a
   blanket hover rule.

   The old code was:  opacity:0  →  opacity:1 on .sb-project-card:hover
   A touch screen never fires :hover, so on phones and in the installed
   PWA these two buttons were permanently invisible — the user could
   neither rename nor delete a project. Below, hover-reveal is kept for
   mice (it keeps the sidebar calm) and the buttons are shown
   permanently wherever hover does not exist. */
.sb-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px 0 3px;
  opacity: 1;                 /* visible by default — see the hover query below */
  transition: opacity 0.18s;
}

/* Mirror the asymmetric padding in Arabic (actions sit on the left) */
html[dir="rtl"] .sb-card-actions { padding: 0 3px 0 7px; }

/* ── Devices WITH a real pointer (mouse / trackpad) ───────────── */
@media (hover: hover) and (pointer: fine) {
  .sb-card-actions { opacity: 0; }
  .sb-project-card:hover .sb-card-actions { opacity: 1; }

  /* Keyboard users tab to these buttons too. Without this, focus can
     land on a fully transparent control — a real accessibility bug,
     not a cosmetic one. */
  .sb-card-actions:focus-within { opacity: 1; }

  /* Keep the actions of the ACTIVE project visible at all times: it is
     the card the user is most likely to rename, and it stops the
     sidebar from feeling empty when nothing is hovered. */
  .sb-project-card.sb-active .sb-card-actions { opacity: 1; }
}

/* ── Touch devices: always visible, and big enough to tap ─────── */
/* 22px is well under the ~44px comfortable touch target, so the two
   buttons grow here only. Desktop sizing is untouched. */
@media (hover: none), (pointer: coarse) {
  .sb-card-actions { opacity: 1; gap: 6px; padding: 0 6px; }

  .sb-rename-btn,
  .sb-delete-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    opacity: 1;               /* no resting fade — nothing sharpens it on touch */
  }
  .sb-rename-btn { font-size: 15px; }
  .sb-delete-btn { font-size: 18px; }

  /* :hover sticks after a tap on touch; suppress the grow so a tapped
     button does not stay enlarged. */
  .sb-rename-btn:hover,
  .sb-delete-btn:hover { transform: none; }
}

/* Visible focus ring for keyboard navigation (all devices) */
.sb-rename-btn:focus-visible,
.sb-delete-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  opacity: 1;
}

/* Rename button — neutral blue-grey, matches sidebar palette */
.sb-rename-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 4px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s,
              color 0.15s, transform 0.12s;
}
.sb-rename-btn:hover {
  opacity: 1;
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.15);
  border-color: #94a3b8;
  transform: scale(1.1);
  box-shadow: none;
}

.sb-delete-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.35);  /* soft red border at rest */
  border-radius: 4px;
  color: #f87171;           /* visible red — was #374e72 (near-invisible) */
  font-size: 16px;           /* was 13px */
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;             /* slightly transparent at rest, sharpens on hover */
  transition: opacity 0.15s, background 0.15s, border-color 0.15s,
              color 0.15s, transform 0.12s;
}
.sb-delete-btn:hover {
  opacity: 1;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);   /* subtle red wash */
  border-color: #ef4444;
  transform: scale(1.1);
  box-shadow: none;
}

/* ── Footer ──────────────────────────────────────────────────── */
.sb-footer {
  padding: 8px 12px;
  border-top: 1px solid #1a2438;
  flex-shrink: 0;
}

#sbProjectCount {
  font-size: 0.68em;
  color: #1e2a40;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}/* ================================================================
   DESIGN SYSTEM UTILITY BUTTONS (v2)
   Composable classes: <button class="btn btn-primary">…</button>
   These coexist with the existing named-button classes above.
   Specificity: (0,2,0) = two classes, beats (0,1,0) single class.
   ================================================================ */

/* ── Base — shared geometry & behaviour ─────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Primary — high-emphasis, filled blue ───────────────────── */
.btn.btn-primary {
  background: var(--brand-primary-btn);
  color: #fff;
  border: none;
}
.btn.btn-primary:hover:not(:disabled) {
  background: var(--brand-primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary-btn) 45%, transparent);
}
.btn.btn-primary:active:not(:disabled) {
  background: color-mix(in srgb, var(--brand-primary-deep) 85%, black);
  transform: translateY(0);
}

/* ── Secondary — medium-emphasis, outlined ──────────────────── */
.btn.btn-secondary {
  background: transparent;
  border: 1px solid #334155;
  color: #cbd5e1;
}
.btn.btn-secondary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #475569;
  transform: translateY(-1px);
}
.btn.btn-secondary:active:not(:disabled) {
  background: #0f172a;
  transform: translateY(0);
}

/* ── Danger — destructive actions, filled red ───────────────── */
.btn.btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
}
.btn.btn-danger:hover:not(:disabled) {
  background: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45);
}
.btn.btn-danger:active:not(:disabled) {
  background: #7f1d1d;
  transform: translateY(0);
}

/* ── Ghost — low-emphasis, no border ────────────────────────── */
.btn.btn-ghost {
  background: transparent;
  border: none;
  color: #94a3b8;
}
.btn.btn-ghost:hover:not(:disabled) {
  background: #1e293b;
  color: #cbd5e1;
}
.btn.btn-ghost:active:not(:disabled) {
  background: #0f172a;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — TASK ROW GEOMETRY (≤ 600px)
   ⚠️ DO NOT DELETE — introduced in v4.4.1, lost during the v4.5.0
   edits, restored in v4.5.1. Without this block the task text
   field collapses to a few characters wide on a portrait phone.
   ──────────────────────────────────────────────────────────────
   On a portrait phone the task row runs out of room: the label
   (90px), the ⠿ grip, the 12px gaps, the 20px list indent and a
   full-size 🗑️ button (12px 24px padding) consume almost the whole
   viewport, leaving the text field a few characters wide.

   Two changes fix it:
     1. Every fixed element shrinks — the grip becomes a narrow
        column, the label sizes to its own text ("A1:"), the trash
        becomes a square icon button, the indent is dropped.
     2. The input gets  min-width: 0. Without it a flex item may
        not shrink below its intrinsic width, which for <input> is
        its default character size — this is what actually pins the
        field at its old width no matter how much space is freed
        elsewhere.

   Desktop layout is untouched: everything here is inside the
   ≤600px query, and the same rules apply to the K&S and Behaviour
   rows, which share the identical structure.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Indent removed — logical properties so RTL mirrors correctly */
  .task-list, .ks-list, .behavior-list {
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: 0;
  }

  .task-item, .ks-item, .behavior-item {
    gap: 6px;
    margin-bottom: 10px;
    min-width: 0;
  }

  /* ── Grip: narrow column, still a comfortable drag target ── */
  .task-drag-handle {
    width: 16px;
    min-width: 16px;
    padding: 0;
    font-size: 15px;
    text-align: center;
  }

  /* ── Label: sized by its own text ("A1:"), not a fixed 90px ─ */
  .task-label, .ks-label, .behavior-label {
    width: auto;
    min-width: 26px;
    font-size: 0.9em;
    white-space: nowrap;
  }

  /* ── The input takes every pixel the row can give it ──────── */
  .task-item  input[type="text"],
  .ks-item    input[type="text"],
  .behavior-item input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;              /* the line that makes the rest work */
    width: auto;
    padding: 10px 10px;
    margin-bottom: 0;
    font-size: 0.95em;
  }

  /* ── Trash: square icon button, 38px — above the 36px touch
        minimum, and roughly a third of its former width ──────── */
  .task-item  .btn-remove,
  .ks-item    .btn-remove,
  .behavior-item .btn-remove {
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 1em;
    border-radius: 10px;
  }

  /* Tapped buttons keep :hover on touch — suppress the lift so a
     tapped row does not stay visually raised. */
  .task-item .btn-remove:hover,
  .ks-item .btn-remove:hover,
  .behavior-item .btn-remove:hover {
    transform: none;
  }
}

/* ── Very narrow phones (≤ 380px): one more notch ───────────── */
@media (max-width: 380px) {
  .task-item, .ks-item, .behavior-item { gap: 4px; }

  .task-label, .ks-label, .behavior-label {
    min-width: 22px;
    font-size: 0.85em;
  }

  .task-item  input[type="text"],
  .ks-item    input[type="text"],
  .behavior-item input[type="text"] { padding: 9px 8px; }

  .task-item  .btn-remove,
  .ks-item    .btn-remove,
  .behavior-item .btn-remove {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
}

/* ════════════════════════════════════════════════════════════
   UPDATE NOTIFICATION BAR — RESPONSIVE LAYOUT   (v4.5.4)
   DO NOT DELETE — restores single-line buttons on phones/PWA
   ------------------------------------------------------------
   The bar (#updateBanner) is built inside update-notifier.js with
   INLINE styles, and inline styles beat a stylesheet. Every rule
   below that must win therefore carries !important. Nothing in
   update-notifier.js needs to change.

   BUG: on a narrow viewport (PWA on a phone) the label of the
   primary button — "Update now" / "تحديث الآن" — broke onto two
   lines, because the button had flex-shrink:0 but no
   white-space:nowrap. The bar also inherited a smaller root
   font-size inside the PWA shell than in a browser tab, which is
   why the same bar looked correct on the desktop.

   BEHAVIOUR
     ≥ 561px : one single row, identical to the desktop version.
     ≤ 560px : icon + message on line 1, the two buttons on line 2.
               The buttons themselves never wrap.
     ≤ 360px : "Update now" takes the full width of line 2.
   ════════════════════════════════════════════════════════════ */

/* ── 1. The bar itself ─────────────────────────────────────── */
#updateBanner {
  box-sizing: border-box !important;

  /* Breathing room on small screens + iOS home-indicator safe area */
  max-width: calc(100vw - 16px) !important;
  width: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;

  /* Absolute size instead of the inline .92em: the installed PWA
     can inherit a smaller root font-size than the browser tab. */
  font-size: 14px !important;
  line-height: 1.35 !important;

  flex-wrap: nowrap;          /* single row by default */
  align-items: center !important;
}

/* ── 2. Buttons must never break a word ────────────────────── */
#updateBanner [data-ub="now"],
#updateBanner [data-ub="later"],
#updateBanner button {
  white-space: nowrap !important;      /* ← the actual fix */
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  min-height: 36px;                    /* comfortable touch target */
}

/* Only the message is allowed to wrap. */
#updateBanner [data-ub="msg"] {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

#updateBanner [data-ub="icon"] { flex-shrink: 0 !important; }

/* ── 3. Phones / PWA portrait — two clean lines ────────────── */
@media (max-width: 560px) {
  #updateBanner {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;        /* replaces translateX(-50%) */
    max-width: none !important;
    width: auto !important;
    border-radius: 12px !important;
  }

  /* Line 1 — icon + message */
  #updateBanner [data-ub="msg"] {
    flex: 1 1 calc(100% - 32px) !important;
  }

  /* Line 2 — buttons, pushed to the end of the reading direction
     (right in LTR, left in RTL — the bar carries dir="rtl"). */
  #updateBanner [data-ub="now"] {
    flex: 0 1 auto !important;
    margin-inline-start: auto !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
  }

  #updateBanner [data-ub="later"] {
    flex: 0 0 auto !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}

/* ── 4. Very narrow phones (≤ 360px) — full-width primary ──── */
@media (max-width: 360px) {
  #updateBanner [data-ub="now"] {
    flex: 1 1 auto !important;
    margin-inline-start: 0 !important;
    text-align: center !important;
  }
}

/* ── 5. Landscape phones — keep one compact row ────────────── */
@media (max-height: 430px) and (orientation: landscape) {
  #updateBanner {
    flex-wrap: nowrap !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 14px !important;
  }
  #updateBanner [data-ub="msg"] { flex: 1 1 auto !important; }
  #updateBanner [data-ub="now"] { margin-inline-start: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   TAB: DUTIES & TASKS — تناسق بصري للأزرار  (v4.9.0)
   ──────────────────────────────────────────────────────────────
   المشكلة التي يعالجها هذا القسم:
   كان التبويب يعرض ثلاثة ألوان صارخة في آن واحد — أخضر متدرّج
   للإضافة، وأحمر ممتلئ للحذف، وأحمر أفتح للمسح — بأحجام متفاوتة
   تصل إلى 14px حشواً رأسياً. النتيجة أن زر "حذف الواجب" يجذب
   العين أكثر من حقل إدخال المهمة نفسه.

   المبدأ المطبَّق: شدّة اللون تتبع تكرار الاستخدام لا خطورته.
     • الإضافة  — الإجراء الأكثر تكراراً → لون العلامة التجارية
                  (نفس أزرار الشريط العلوي، فتتوحّد اللغة البصرية)
     • الحذف    — نادر ومدمّر → خلفية هادئة وحدّ رقيق، يتلوّن
                  عند التحويم فقط. مرئي حين يُطلب، صامت وقتها.

   هذا القسم في نهاية الملف عمداً: يجب أن يأتي بعد التعريفات
   الأصلية ليتغلّب عليها دون رفع الانتقائية بمحدّدات معقّدة.
   ══════════════════════════════════════════════════════════════ */

/* ── مقاس موحّد لكل أزرار التبويب ─────────────────────────────
   الأزرار كانت تتراوح بين 8px و14px حشواً. التوحيد وحده يقلّل
   التشتّت أكثر من أي تغيير لوني. */
.btn-add,
.btn-add-section-main,
.cv-add-duty,
.duty-header-actions .btn-remove,
.duty-header-actions .btn-clear-section,
.section-header-actions .btn-remove-section {
  padding: 8px 16px !important;
  font-size: 0.9em !important;
  border-radius: 9px !important;
  font-weight: 600;
  gap: 6px;
}

/* ── أزرار الإضافة: لون العلامة التجارية بدل الأخضر ──────────
   لون مصمت لا متدرّج: التدرّج يضيف وزناً بصرياً بلا معنى، وأزرار
   الشريط العلوي مصمتة أصلاً — فالتوحيد يجعلهما يقرآن كعائلة
   واحدة. */
.btn-add,
.btn-add-section-main,
.cv-add-duty,
.cv-add-task {
  background: var(--brand-primary-btn) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary-btn) !important;
}

.btn-add:hover,
.btn-add-section-main:hover,
.cv-add-duty:hover,
.cv-add-task:hover {
  background: var(--brand-primary-deep) !important;
  border-color: var(--brand-primary-deep) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-primary-btn) 32%, transparent) !important;
}

/* ── أزرار الحذف: نمط "مسح" الهادئ ────────────────────────────
   يرث .btn-clear-section مظهره: خلفية وردية باهتة، نصّ أحمر،
   حدّ رقيق. يمتلئ باللون عند التحويم فقط — فيبقى واضحاً لمن
   يقصده، وغير جاذب لمن لا يقصده. */
.duty-header-actions .btn-remove,
.section-header-actions .btn-remove-section,
.task-item .btn-remove,
.cv-delete-task,
.cv-delete-duty {
  background: #fdeeee !important;
  color: #dc2626 !important;
  border: 1.5px solid #f9d2d2 !important;
  box-shadow: none !important;
}

.duty-header-actions .btn-remove:hover,
.section-header-actions .btn-remove-section:hover,
.task-item .btn-remove:hover,
.cv-delete-task:hover,
.cv-delete-duty:hover {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25) !important;
}

/* أزرار سلة المهملات المربّعة تحتفظ بمقاسها — تغييره يكسر
   محاذاتها مع حقل الإدخال المجاور. اللون وحده هو ما يتغيّر. */
.task-item .btn-remove {
  padding: 0 !important;
  border-radius: 10px !important;
}

/* ── عرض البطاقات: أزرار الحذف الدائرية ──────────────────────
   دائرية ومصغّرة، فتحتاج ضبطاً مستقلاً للحدّ حتى لا يبتلع
   الأيقونة. */
.cv-delete-task,
.cv-delete-duty {
  border-width: 1px !important;
}

/* ── حالة التركيز: تبقى ظاهرة في كل الحالات ──────────────────
   لأن أزرار الحذف صارت هادئة، فمؤشّر التركيز يصير أهمّ لا أقلّ
   أهمية — هو ما يخبر مستخدم لوحة المفاتيح بموقعه. */
.btn-add:focus-visible,
.btn-add-section-main:focus-visible,
.cv-add-duty:focus-visible,
.cv-add-task:focus-visible {
  outline: 2px solid var(--brand-primary-deep);
  outline-offset: 2px;
}
.duty-header-actions .btn-remove:focus-visible,
.task-item .btn-remove:focus-visible,
.cv-delete-task:focus-visible,
.cv-delete-duty:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* ================================================================
   WORD EXPORT SETTINGS  (v4.10.0)
   Sidebar button + modal. Scoped entirely to the .sb-settings-*
   and .ws-* prefixes — nothing above this block is touched.
   ================================================================ */

/* ── Sidebar entry ───────────────────────────────────────────── */
.sb-settings-row {
  padding: 0 8px 8px;
  flex-shrink: 0;
}

.sb-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s;
}
.sb-settings-item:hover { background: #1a2440; }
.sb-settings-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.sb-settings-icon {
  font-size: 1.1em;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}

.sb-settings-label {
  font-size: 0.875em;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
}

/* Mini sidebar: the icon stays, the label collapses — same
   treatment the nav items get in the inline block in index.html. */
body.sb-sidebar-closed .sb-settings-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}
body.sb-sidebar-closed .sb-settings-item {
  justify-content: center;
  padding: 11px 0;
}
body.sb-sidebar-closed .sb-settings-icon { width: auto; font-size: 1.3em; }

/* ── Modal ───────────────────────────────────────────────────── */
.ws-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 3000;
}

.ws-panel {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1e293b);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.ws-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}
.ws-title { font-size: 1.02em; font-weight: 700; }
.ws-x {
  border: none;
  background: transparent;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 6px;
  border-radius: 6px;
}
.ws-x:hover { opacity: 1; background: rgba(148, 163, 184, 0.18); }

.ws-body {
  padding: 16px 18px;
  overflow-y: auto;
}

.ws-note {
  margin: 0 0 14px;
  font-size: 0.8em;
  line-height: 1.6;
  opacity: 0.72;
}

.ws-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ws-label { font-size: 0.86em; font-weight: 600; }

.ws-select {
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--input-bg, #fff);
  color: inherit;
  font-size: 0.86em;
  cursor: pointer;
}

.ws-group { margin-top: 16px; }

.ws-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ws-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.ws-swatch:hover { transform: scale(1.08); }
.ws-swatch--on {
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #6366f1) 40%, transparent);
}
.ws-swatch:focus-visible {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 2px;
}

.ws-hint {
  margin: 8px 0 0;
  font-size: 0.76em;
  line-height: 1.5;
  opacity: 0.65;
}

.ws-preview {
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 10px;
  background: #fff;
  color: #000;
}
.ws-preview-title   { font-weight: 700; margin-bottom: 6px; }
.ws-preview-heading { font-weight: 700; margin-bottom: 8px; }
.ws-preview-th      { font-weight: 700; padding: 5px 8px; border-radius: 4px; margin-bottom: 6px; }
.ws-preview-body    { line-height: 1.5; }

.ws-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}
.ws-foot-spacer { flex: 1; }

.ws-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.86em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
}
.ws-btn--ghost {
  background: transparent;
  border-color: var(--border-color, #cbd5e1);
  color: inherit;
}
.ws-btn--ghost:hover { background: rgba(148, 163, 184, 0.15); }
.ws-btn--primary {
  background: var(--brand-primary-btn, #4f46e5);
  color: #fff;
}
.ws-btn--primary:hover { opacity: 0.9; }

@media (max-width: 520px) {
  .ws-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .ws-select { width: 100%; }
}

/* ── Export settings modal: grouped sections (v4.11.0) ───────── */
.ws-section { margin-bottom: 20px; }
.ws-section:last-child { margin-bottom: 0; }

.ws-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.ws-badges { display: inline-flex; gap: 4px; margin-inline-start: auto; }

.ws-badge {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1.5;
}
.ws-badge--word { color: #2563eb; }
.ws-badge--pdf  { color: #b91c1c; }

.ws-hint--why {
  margin-top: 10px;
  padding-inline-start: 8px;
  border-inline-start: 2px solid var(--border-color, #cbd5e1);
  opacity: 0.75;
}

.ws-preview { position: relative; margin-top: 12px; }

.ws-preview-tag {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.ws-preview-banner {
  font-weight: 700;
  text-align: center;
  padding: 5px 8px;
  border-radius: 3px;
  margin-bottom: 4px;
  font-size: 0.95em;
}

/* ================================================================
   CARD COLOURS + CARD HEIGHT — Duties & Tasks tab   (v4.12.0)
   ----------------------------------------------------------------
   1. COLOUR TOKENS
      Every duty/task card is painted from five tokens. Their :root
      defaults point at the active theme's --brand-* tokens, so an
      untouched install renders EXACTLY as before this block existed
      (same colour-mix() recipes, same percentages).

      The Settings modal (word-settings.js → applyCardColors) writes
      a user pick as an INLINE style on <html>. Inline beats both
      :root and html[data-theme=…], which is what makes the pick hold
      "regardless of the theme": cycling themes still recolours the
      rest of the interface, the cards keep the user's colour. Picking
      "Theme colour" removes the inline properties and hands the cards
      back to the theme.

   2. CASCADE
      Card View / Table View rules above are single-class selectors in
      this same file, so re-declaring them here (later in the file,
      equal specificity) wins without !important. Wall View rules live
      in the <style> block of index.html, which loads AFTER this file,
      so they are prefixed with .wv-container to outweigh them — no
      edit to index.html was needed. Drag-and-drop indicators keep
      their !important borders and are untouched.

   3. HEIGHT (+5%)
      Card View task card: natural single-line height measured at
      67.4px (8+8 padding, 2+2 border, 20px top row, 4px gap, 23.4px
      text line) → 71px (+5.3%, v4.12.0) → 75px (a further +5%, v4.12.1,
      Card View only — requested for small laptop screens).
      v4.12.2: Card View cards a further +10% in BOTH directions —
      task card height 75px → 83px, task card width 150px → 165px
      (min-width 130px → 143px), duty card width 150px → 165px.
      Wall View and Table View are untouched.
      v4.12.3: a clearly visible step — task card 180 × 100px minimum,
      duty card 180px wide (≈ +20% width, +48% height over the
      original 150 × 67px). min-width equals width so a card never
      shrinks back when the row is crowded.
      Wall View task card: min-height 82px → 86px (+4.9%).
      Duty cards in both views stretch to the height of their row,
      so they grow with the task cards automatically. Taller cards
      (multi-line text) are unaffected — this lifts the baseline.
   ================================================================ */

:root {
  --card-duty:      var(--brand-primary);
  --card-duty-deep: var(--brand-primary-deep);
  --card-task:      var(--brand-accent);
  --card-task-dark: var(--brand-accent-dark);
  --card-task-ink:  var(--brand-primary-deep);   /* Wall View task label */
}

/* ── Card View ─────────────────────────────────────────────────── */
.cv-duty-row::-webkit-scrollbar-track { background: color-mix(in srgb, var(--card-duty) 12%, white); }
.cv-duty-row::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--card-duty) 55%, white); }
.cv-duty-row {
  scrollbar-color: color-mix(in srgb, var(--card-duty) 55%, white) color-mix(in srgb, var(--card-duty) 12%, white);
}

.cv-duty-card {
  background: color-mix(in srgb, var(--card-duty) 28%, white);
  border-color: color-mix(in srgb, var(--card-duty) 55%, white);
  color: color-mix(in srgb, var(--card-duty) 65%, black);
}
.cv-duty-card { width: 180px; min-width: 180px; }    /* v4.12.3 (was 150px) */
.cv-duty-index-label { color: var(--card-duty); }
.cv-duty-text        { color: color-mix(in srgb, var(--card-duty) 65%, black); }
.cv-duty-text:empty::before { color: color-mix(in srgb, var(--card-duty) 70%, white); }

.cv-task-card {
  min-height: 100px;                                  /* v4.12.3 — see note 3 */
  width: 180px;                                       /* v4.12.3 (was 150px) */
  min-width: 180px;                                   /* v4.12.3 (was 130px) */
  background: color-mix(in srgb, var(--card-task) 22%, white);
  border-color: var(--card-task);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--card-task) 20%, transparent);
}
.cv-task-card:hover {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--card-task) 35%, transparent);
}
.cv-task-label { color: var(--card-task-dark); }
.cv-task-text  { color: color-mix(in srgb, var(--card-task-dark) 65%, black); }
.cv-task-text:focus { background: color-mix(in srgb, var(--card-task) 45%, white); }
.cv-task-text:empty::before { color: var(--card-task-dark); }

.cv-empty-note {
  color: var(--card-task-dark);
  background: color-mix(in srgb, var(--card-task) 22%, white);
  border-color: var(--card-task);
}

/* ── Table View: the duty block follows the duty colour ────────── */
/* .ks-row / .behavior-row share the original rule and are left alone. */
.duty-row {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--card-duty) 6%, white) 0%,
              color-mix(in srgb, var(--card-duty) 14%, white) 100%);
  border-color: color-mix(in srgb, var(--card-duty) 45%, white);
}

/* ── Wall View (prefixed to outrank index.html <style>) ────────── */
.wv-container .wv-duty-card {
  background: linear-gradient(160deg, var(--card-duty-deep) 0%, var(--card-duty) 100%);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--card-duty-deep) 28%, transparent);
}
.wv-container .wv-task-card {
  min-height: 86px;                                   /* +5% — see note 3 */
  background: color-mix(in srgb, var(--card-task) 10%, white);
  border-color: color-mix(in srgb, var(--card-task) 55%, white);
}
.wv-container .wv-task-label { color: var(--card-task-ink); }

/* ── Settings modal: card-colour section + mini preview ────────── */
.ws-section--cards {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--border-color, #cbd5e1);
}
.ws-hint--lead { margin: 0 0 4px; }
.ws-badge--ui  { color: #0d9488; }

.ws-swatch-sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 2px;
  background: var(--border-color, #cbd5e1);
}

/* "Theme colour" chip: diagonal split — the live theme token on one
   half, white on the other — so it reads as "automatic" rather than
   as a ninth fixed colour. */
.ws-swatch--theme {
  background: linear-gradient(135deg, var(--ws-theme-chip, #6366f1) 0 50%, #ffffff 50% 100%);
}

.ws-cc-preview {
  position: relative;
  margin-top: 14px;
  padding: 10px 12px 12px;
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 10px;
  background: #f8fafc;
  color: #1e293b;
}
.ws-cc-tag {
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 2px 0 6px;
}
.ws-cc-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 9px;
  overflow: hidden;
}
.ws-cc-row:last-child { margin-bottom: 0; }
.ws-cc-row--card { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ws-cc-row--wall { background: #eef2f7; }

/* Card View miniature */
.ws-cc-duty {
  flex: 0 0 92px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pv-duty) 28%, white);
  border: 1.5px solid color-mix(in srgb, var(--pv-duty) 55%, white);
}
.ws-cc-duty-label {
  font-size: 0.58em; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pv-duty);
}
.ws-cc-duty-text {
  font-size: 0.72em; font-weight: 700; line-height: 1.3;
  color: color-mix(in srgb, var(--pv-duty) 65%, black);
}
.ws-cc-task {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pv-task) 22%, white);
  border: 1.5px solid var(--pv-task);
}
.ws-cc-task-label {
  font-size: 0.58em; font-weight: 700; letter-spacing: 0.06em;
  color: var(--pv-task-dark);
}
.ws-cc-task-text {
  font-size: 0.7em; line-height: 1.3;
  color: color-mix(in srgb, var(--pv-task-dark) 65%, black);
}

/* Wall View miniature */
.ws-cc-wduty {
  flex: 0 0 100px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(160deg, var(--pv-duty-deep) 0%, var(--pv-duty) 100%);
}
.ws-cc-wduty-label {
  font-size: 0.56em; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.8;
}
.ws-cc-wduty-text { font-size: 0.72em; font-weight: 700; line-height: 1.3; }
.ws-cc-wtask {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--pv-task) 10%, white);
  border: 1.5px solid color-mix(in srgb, var(--pv-task) 55%, white);
}
.ws-cc-wtask-label { font-size: 0.58em; font-weight: 800; color: var(--pv-task-ink); }
.ws-cc-wtask-text  { font-size: 0.7em; line-height: 1.3; color: #334155; }

/* Card identifiers stay LTR inside Arabic, as on the real cards. */
html[dir="rtl"] .ws-cc-task-label,
html[dir="rtl"] .ws-cc-wtask-label,
html[dir="rtl"] .ws-cc-duty-label,
html[dir="rtl"] .ws-cc-wduty-label {
  unicode-bidi: isolate;
}

/* ================================================================
   LANGUAGE SWITCH — no animated reflow   (v4.12.3)
   ----------------------------------------------------------------
   Switching language flips <html dir>. Several layout properties
   are animated for the sidebar open/close — #appWrapper margin-left,
   .top-toolbar left, #sidebar width, and on phones the drawer's
   transform — and a direction flip changes exactly those properties.
   The result was the page visibly sliding and shaking for ~0.3s:
   margin-left animated from 260px to 0 while margin-right snapped
   to 260px (content squeezed, then expanded), and on phones the
   closed drawer flew across the screen from -100% to +100%.

   i18n.js adds .i18n-switching to <html> for the duration of the
   flip (two animation frames), so the new layout is applied in one
   step. Sidebar open/close animations are untouched otherwise.
   ================================================================ */
html.i18n-switching *,
html.i18n-switching *::before,
html.i18n-switching *::after {
  transition: none !important;
  animation: none !important;
}

/* ================================================================
   LANGUAGE DROPDOWN — custom menu   (v4.12.4)
   ----------------------------------------------------------------
   Replaces the native <select id="langSelect"> in the toolbar (see
   i18n.js for why). The native element stays in the DOM, hidden.
   The button never moves on hover: the shared .tb-btn:hover lift
   was one of the two causes of the shaking popup.
   ================================================================ */
#langSelect.lang-native-hidden { display: none !important; }

.lang-dd { position: relative; display: inline-flex; flex-shrink: 0; }

.lang-dd-btn {
  gap: 8px;
  min-width: 108px;
  justify-content: space-between;
}
/* Two classes + !important: must beat .tb-btn:hover wherever the
   stylesheets happen to load (layout.css / index.html <style>). */
.lang-dd .lang-dd-btn,
.lang-dd .lang-dd-btn:hover,
.lang-dd .lang-dd-btn:active { transform: none !important; }
.lang-dd--open .lang-dd-btn {
  background: #e5e7eb;
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #6366f1) 22%, transparent);
}
.lang-dd-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 2px;
}
.lang-dd-short { display: none; }
.lang-dd-chev  { flex-shrink: 0; opacity: 0.6; transition: transform 0.15s ease; }
.lang-dd--open .lang-dd-chev { transform: rotate(180deg); }

.lang-dd-menu {
  position: fixed;
  z-index: 2500;                 /* above toolbar (999) and sidebar (1000) */
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  font-size: 0.9rem;
  box-sizing: border-box;
}
.lang-dd-menu[hidden] { display: none; }

.lang-dd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 7px;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  text-align: start;
  outline: none;
  user-select: none;
}
.lang-dd-opt[lang="ar"] { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; }
.lang-dd-opt:hover,
.lang-dd-opt:focus { background: #f3f4f6; }
.lang-dd-opt--on {
  color: var(--brand-primary-deep, #4338ca);
  font-weight: 700;
  background: color-mix(in srgb, var(--brand-primary, #6366f1) 10%, white);
}
.lang-dd-opt--on::after {
  content: '✓';
  margin-inline-start: auto;
  font-size: 0.85em;
}

/* Phones / drawer mode: compact button showing the short code only —
   same breakpoint as the rest of the toolbar (index.html). */
@media (max-width: 768px),
       (pointer: coarse) and (max-height: 520px) and (max-width: 1024px) {
  .lang-dd-btn {
    min-width: 58px;
    width: auto !important;
    height: 52px !important;
    flex-direction: row !important;
    padding: 0 8px !important;
    gap: 5px !important;
  }
  .lang-dd-label { display: none; }
  .lang-dd-short { display: inline; font-weight: 700; }
  .lang-dd-opt   { padding: 11px 14px; }   /* comfortable touch target */
}

/* ================================================================
   TOOLBAR VERSION BADGE — hidden at rest   (v4.12.7)
   ----------------------------------------------------------------
   The version number now appears in the Help tab only
   (#helpVersionFooter and the copyright line). The toolbar badge is
   hidden in its resting "vX.Y.Z" state.

   It is NOT deleted from index.html: update-notifier.js turns it
   into the "⟳ Update" button when a release is waiting and the user
   has pressed "Later" on the update bar — without it that offer
   would be lost until the next reload. So it reappears only in that
   state (.tb-version--update), and self-check keeps finding the
   element it expects.
   ================================================================ */
#versionBadge:not(.tb-version--update) { display: none !important; }

/* ================================================================
   TOOLBAR FIT — progressive compaction   (v4.12.8)
   ----------------------------------------------------------------
   Levels are added by toolbar-fit.js only when the row overflows, and
   only on desktop (never in drawer / phone mode). Cumulative: level 2
   also carries tb-fit-1, and so on.
   ================================================================ */
.top-toolbar.tb-fit-1 { gap: 2px; padding-left: 10px; padding-right: 10px; }
.top-toolbar.tb-fit-1 .top-toolbar-group   { gap: 3px; }
.top-toolbar.tb-fit-1 .top-toolbar-divider { margin: 0 3px; }
.top-toolbar.tb-fit-1 .tb-btn              { padding-left: 9px; padding-right: 9px; }
.top-toolbar.tb-fit-1 .lang-dd-btn         { min-width: 96px; }

.top-toolbar.tb-fit-2 .tb-btn:not(.tb-btn--primary) .tb-label { display: none; }
.top-toolbar.tb-fit-2 .tb-btn:not(.tb-btn--primary)           { gap: 0; }
.top-toolbar.tb-fit-2 .tb-btn .tb-icon { font-size: 1.05em; line-height: 1; }

.top-toolbar.tb-fit-3 .tb-btn .tb-label { display: none; }
.top-toolbar.tb-fit-3 .tb-btn           { gap: 0; }
.top-toolbar.tb-fit-3 .lang-dd-btn      { min-width: 0; }
.top-toolbar.tb-fit-3 .lang-dd-label    { display: none; }
.top-toolbar.tb-fit-3 .lang-dd-short    { display: inline; font-weight: 700; }

.top-toolbar.tb-fit-4 {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.top-toolbar.tb-fit-4::-webkit-scrollbar { display: none; }
.top-toolbar.tb-fit-4 .top-toolbar-spacer { display: none; }

/* ================================================================
   RTL TOOLBAR — full width   (v4.12.9)
   index.html sets  html[dir="rtl"] .top-toolbar { left:auto; right:260px }.
   A fixed element with left:auto shrinks to its content, so in Arabic the
   bar stopped short of the left edge and looked cut off. Anchoring left:0
   stretches it to the window edge again (and gives toolbar-fit.js a real
   width to measure). The extra `body` outweighs the index.html rule, which
   loads after this file. The sidebar open/close now animates `right`.
   ================================================================ */
html[dir="rtl"] body .top-toolbar {
  left: 0;
  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   WORKSHOP DATES / FORMAT / VENUE — Chart Info   (v4.13.0)
   Built by workshop-info.js directly under DACUM Date.
   ================================================================ */
.wk-block { margin: -2px 0 10px; }

/* base.css makes every <label> a bold 1.1em block — the checkbox row
   needs an inline, lighter label instead. */
.wk-block label.wk-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 0.98em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.wk-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand-primary-btn, #4f46e5);
  cursor: pointer;
}

.wk-to[hidden] { display: none !important; }
.wk-to input[type="date"] { width: 100%; }

.wk-label {
  margin-bottom: 8px;
  color: var(--text-body, #333);
  font-weight: 600;
  font-size: 1.1em;
}

/* Segmented control: three radio pills in one rounded track */
.wk-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.wk-block label.wk-seg-opt {
  display: inline-flex;
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
}
.wk-seg-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.wk-seg-opt span {
  padding: 8px 18px;
  border-radius: 7px;
  color: #475569;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.wk-seg-opt:hover span { background: #e2e8f0; color: #1e293b; }
.wk-seg-opt input:checked + span {
  background: var(--brand-primary-btn, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-primary-btn, #4f46e5) 30%, transparent);
}
.wk-seg-opt input:focus-visible + span {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .wk-seg { display: flex; width: 100%; }
  .wk-block label.wk-seg-opt { flex: 1 1 0; }
  .wk-seg-opt span { flex: 1; text-align: center; padding: 9px 6px; }
}
/* Own spacing, independent of the .mb-10 utility in base.css */
.wk-block .wk-mode { margin-bottom: 14px; }

/* ================================================================
   AGREEMENT MARK 👍  (v4.15.0, compact + bottom since v4.15.1)
   A small rounded thumbs-up at the bottom of every duty and task
   card (same placement as DACUM Live Pro). During a workshop it is
   tapped to record that the panel agrees with the item. Neutral
   until tapped, then green.
   ================================================================ */
:root { --agree-color: #16a34a; --agree-color-deep: #15803d; }

/* Footer row pinned to the bottom of the card; the button sits on the
   inline-end side (flex-end flips with dir=rtl). */
.cv-card-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 6px;
}

.cv-agree-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  min-width: 26px;
  padding: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.85);
  color: #94a3b8;
  border: 1.5px solid #dbe3ee;
  box-shadow: none;
  cursor: pointer;
  gap: 0;
  font-size: 1em;
  touch-action: manipulation;          /* no double-tap-zoom delay on tablets */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.cv-agree-btn svg { display: block; width: 13px; height: 13px; }
.cv-agree-btn:hover {
  color: var(--agree-color);
  border-color: var(--agree-color);
  transform: none;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}
.cv-agree-btn:active { transform: scale(0.92); }
.cv-agree-btn:focus-visible {
  outline: 2px solid var(--agree-color-deep);
  outline-offset: 2px;
}

/* Agreed: solid green, white filled thumb */
.cv-agree-btn.is-agreed {
  background: var(--agree-color);
  color: #ffffff;
  border-color: var(--agree-color-deep);
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.4);
}
.cv-agree-btn.is-agreed svg { fill: currentColor; }
.cv-agree-btn.is-agreed:hover { background: var(--agree-color-deep); color: #ffffff; }

/* The card itself carries no agreed styling (removed in v4.15.4): the
   green button alone shows the state. */

/* No pop animation (removed in v4.15.3): adding a duty or task redraws
   the board, which replayed it on every agreed button and made them
   blink. The colour change alone shows the state. */

/* Notice shown when 👍 is tapped on an empty card (v4.16.2). Sits above
   the update banner and the iPhone home indicator; follows the page
   direction (RTL/LTR) because it inherits it. */
.dacum-notice {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4500;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 18px;
  border-radius: 12px;
  background: #1e293b;
  color: #ffffff;
  border-inline-start: 4px solid #f59e0b;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.32);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  animation: dacumNoticeIn 0.2s ease-out;
}
@keyframes dacumNoticeIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .dacum-notice { animation: none; } }
@media print { .dacum-notice { display: none; } }

/* Touch devices (tablets, phones): the visible button stays compact,
   but the tappable area grows to ~44 px with an invisible halo, so a
   finger lands on it easily and it is far from the delete x at the
   top of the card. */
@media (hover: none), (pointer: coarse) {
  .cv-agree-btn { width: 30px; height: 24px; min-width: 30px; }
  .cv-agree-btn svg { width: 15px; height: 15px; }
  .cv-agree-btn::before { content: ''; position: absolute; inset: -10px -8px; }
  .cv-agree-btn:hover { transform: none; }
}

/* ================================================================
   DUTY CARD OUTLINE FIX  (v4.15.2)
   The duty card sits flush against the edge of .cv-duty-row, which
   clips its content with a 14 px rounded corner (--radius-lg). The
   card was rounded 12 px on its physical LEFT side only, so:
     • in Arabic (card on the right) its square corners were cut off
       by the row's curve and the outline vanished at the corners;
     • in English the 12 px vs 14 px mismatch nibbled the outline too.
   The card's outer corners now use the row's own radius, on the side
   that faces the row's edge (flips with dir=rtl), so the border
   follows the clip curve exactly. The "agreed" ring is drawn inside
   the card, because a ring outside it was clipped along the row edge.
   ================================================================ */
.cv-duty-card {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
html[dir="rtl"] .cv-duty-card {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: -2px 0 8px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}