/**
 * Automation Rules Panel Styles
 * ============================================
 * Modernized 2026-07-07 to the app's canonical design language:
 * - Uses --space-* / --radius-* / --shadow-* / --primary-* tokens
 *   (defined in style.css :root) instead of ad-hoc px + fallbacks.
 * - Teal primary palette, gradient header accent, soft elevation.
 * - Every "pill" (keyword tag, count badge, action chip) carries an
 *   explicit line-height:1 so the glyph never drags the text baseline
 *   off-centre — this was the reported mis-alignment.
 *
 * SELECTOR CONTRACT: automation-rules-panel.js renders against these exact
 * class names (.keyword-tag, .automation-rule-card, .template-card,
 * .rule-toggle-slider, etc). Restyle freely; do not rename.
 * ============================================ */

/* ============================================
   PANEL CONTAINER
   ============================================ */

.automation-rules-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 92%;
  max-width: 540px;
  max-height: 86vh;
  background: var(--surface-primary, #ffffff);
  border-radius: var(--radius-2xl, 24px);
  box-shadow: var(--shadow-2xl, 0 25px 50px rgba(0, 0, 0, 0.15));
  z-index: var(--z-modal-elevated, 3500);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.automation-rules-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: var(--z-modal, 3400);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ============================================
   HEADER
   ============================================ */

.automation-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  background: linear-gradient(135deg, var(--primary-50, #f0fdfa) 0%, rgba(255, 255, 255, 0) 70%);
}

.automation-rules-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-800, #1e293b);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  line-height: 1.2;
}

.automation-rules-header h2 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
}

.automation-rules-close {
  flex-shrink: 0;
  background: var(--slate-100, #f1f5f9);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  color: var(--slate-500, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 0.9rem;
  line-height: 1;
}

.automation-rules-close:hover {
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-700, #334155);
}

/* Scope note (2026-07-12): rules are GLOBAL — one list applied to every group's
   events; per-group tightening lives in each board's own privacy limits, not
   here. This one muted line makes that model explicit so users don't hunt for a
   per-group toggle that (by design) doesn't exist. Full-width band between the
   header and the scrollable content, matching the header's horizontal padding. */
.automation-scope-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin: 0;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--slate-500, #64748b);
  background: var(--slate-50, #f8fafc);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.automation-scope-note i {
  margin-top: 2px;
  color: var(--primary-500, #14b8a6);
  flex-shrink: 0;
}
body.dark-mode .automation-scope-note {
  color: var(--slate-400, #94a3b8);
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: var(--slate-700, #334155);
}

/* ============================================
   CONTENT
   ============================================ */

.automation-rules-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 20px) var(--space-6, 24px);
}

/* Global Automation Toggle */
.automation-global-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.07) 0%, rgba(6, 182, 212, 0.03) 100%);
  border: 1px solid var(--primary-200, #99f6e4);
  border-radius: var(--radius-lg, 16px);
  margin-bottom: var(--space-4, 16px);
}

.automation-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.automation-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
  line-height: 1.3;
}

.automation-toggle-desc {
  font-size: 0.72rem;
  color: var(--slate-500, #64748b);
  font-weight: 500;
  line-height: 1.3;
}

.dark-mode .automation-global-toggle,
body.dark-mode .automation-global-toggle {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(6, 182, 212, 0.04) 100%);
  border-color: var(--primary-800, #115e59);
}

.dark-mode .automation-toggle-label,
body.dark-mode .automation-toggle-label {
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .automation-toggle-desc,
body.dark-mode .automation-toggle-desc {
  color: var(--slate-400, #94a3b8);
}

/* Empty State */
.automation-rules-empty {
  text-align: center;
  padding: var(--space-10, 40px) var(--space-5, 20px);
  color: var(--slate-400, #94a3b8);
}

.automation-rules-empty i {
  font-size: 2.5rem;
  margin-bottom: var(--space-4, 16px);
  color: var(--primary-300, #5eead4);
  opacity: 0.65;
}

.automation-rules-empty p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate-500, #64748b);
}

/* ============================================
   RULES LIST
   ============================================ */

.automation-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.automation-rule-card {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-4, 16px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.automation-rule-card:hover {
  border-color: var(--primary-300, #5eead4);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
}

.automation-rule-card.disabled {
  opacity: 0.55;
}

.automation-rule-card.dragging {
  opacity: 0.85;
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(0, 0, 0, 0.1));
  transform: scale(1.02);
}

/* Rule Header */
.rule-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}

.rule-drag-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: var(--slate-400, #94a3b8);
  padding: 2px;
  font-size: 0.85rem;
  line-height: 1;
}

.rule-drag-handle:active {
  cursor: grabbing;
  color: var(--slate-500, #64748b);
}

.rule-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
  font-size: 0.9rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toggle switch — shared by rule cards and the global toggle */
.rule-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.rule-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rule-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--slate-300, #cbd5e1);
  transition: background-color 0.25s ease;
  border-radius: var(--radius-full, 9999px);
}

.rule-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: transform 0.25s ease;
  border-radius: 50%;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.rule-toggle input:checked + .rule-toggle-slider {
  background-color: var(--primary-500, #14b8a6);
}

.rule-toggle input:checked + .rule-toggle-slider:before {
  transform: translateX(18px);
}

.rule-toggle input:focus-visible + .rule-toggle-slider {
  box-shadow: var(--shadow-focus, 0 0 0 2px rgba(20, 184, 166, 0.25));
}

/* Rule Body */
.rule-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding-left: 28px;
}

.rule-condition,
.rule-action {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.8rem;
  line-height: 1.4;
}

.rule-condition {
  color: var(--slate-500, #64748b);
}

.rule-action {
  color: var(--slate-600, #475569);
}

.rule-condition i,
.rule-action i {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.72rem;
}

.rule-condition i {
  color: var(--slate-400, #94a3b8);
}

.rule-action .action-hidden { color: #8b5cf6; }
.rule-action .action-busy { color: #f59e0b; }
.rule-action .action-full { color: #22c55e; }

/* DISCLOSURE WARNING on a rule that publishes titles. Amber, not red: this is
   a legitimate setting the user may well want, and red would read as an error.
   Aligned to the body's 28px text column so it stacks with the condition and
   action lines rather than floating. */
.rule-discloses {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin: var(--space-2, 8px) 0 0;
  padding-left: 28px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #b45309;
}

.rule-discloses i {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.72rem;
  margin-top: 1px;
}

/* Rule tools — Edit/Delete, folded into the header (2026-08-29). Icon-only, so
   they add no height to a row already sized by the toggle. They stay visible
   rather than appearing on hover: hover-only controls are unreachable on touch,
   which is where the height mattered most. */
.rule-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.rule-edit-btn,
.rule-delete-btn {
  background: none;
  border: none;
  /* 28px box for a 12px glyph: comfortably tappable without stretching the
     header, which is 22px tall at the toggle. */
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.rule-edit-btn i,
.rule-delete-btn i {
  font-size: 0.78rem;
  line-height: 1;
}

.rule-edit-btn {
  color: var(--slate-400, #94a3b8);
}

.rule-edit-btn:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-600, #0d9488);
}

.rule-delete-btn {
  color: var(--slate-400, #94a3b8);
}

.rule-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.rule-edit-btn:focus-visible,
.rule-delete-btn:focus-visible {
  outline: 2px solid var(--primary-500, #14b8a6);
  outline-offset: 1px;
}

body.dark-mode .rule-discloses { color: #fbbf24; }
body.dark-mode .rule-edit-btn,
body.dark-mode .rule-delete-btn { color: var(--slate-500, #64748b); }

/* ============================================
   TEMPLATES SECTION
   ============================================ */

.automation-templates {
  margin-top: var(--space-5, 20px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.automation-templates h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500, #64748b);
  margin: 0 0 var(--space-3, 12px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  line-height: 1.2;
}

.automation-templates h3 i {
  color: var(--primary-500, #14b8a6);
  font-size: 0.78rem;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3, 12px);
}

.template-card {
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.template-card:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
}

.template-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: 6px;
}

.template-card-header i {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 0.9rem;
}

.template-card-header .icon-hidden { color: #8b5cf6; }
.template-card-header .icon-busy { color: #f59e0b; }
.template-card-header .icon-full { color: #22c55e; }

.template-card-title {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--slate-700, #334155);
}

.template-card-desc {
  font-size: 0.75rem;
  color: var(--slate-500, #64748b);
  line-height: 1.4;
}

/* ============================================
   RULE BUILDER FORM
   ============================================ */

.rule-builder {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}

.rule-builder h3 {
  margin: 0 0 var(--space-4, 16px);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate-800, #1e293b);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  line-height: 1.2;
}

.rule-builder h3 i {
  color: var(--primary-500, #14b8a6);
  font-size: 0.82rem;
}

.rule-builder-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4, 16px);
}

.rule-builder-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  line-height: 1.3;
}

/* Live consequence under the visibility select (2026-08-29). Neutral while the
   rule conceals; amber the moment it would publish titles, so the shift in
   weight happens exactly when the stakes change and not before. */
.rule-visibility-consequence {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--slate-500, #64748b);
}

.rule-visibility-consequence i {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 0.72rem;
  margin-top: 1px;
}

.rule-visibility-consequence.is-disclosing {
  color: #b45309;
  font-weight: 600;
}

body.dark-mode .rule-visibility-consequence { color: var(--slate-400, #94a3b8); }
body.dark-mode .rule-visibility-consequence.is-disclosing { color: #fbbf24; }

.rule-builder-row input,
.rule-builder-row select {
  padding: 10px 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  font-size: 0.85rem;
  line-height: 1.3;
  background: var(--surface-primary, #ffffff);
  color: var(--slate-700, #334155);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rule-builder-row input:focus,
.rule-builder-row select:focus {
  outline: none;
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: var(--shadow-focus, 0 0 0 2px rgba(20, 184, 166, 0.25));
}

/* Condition Type Specific */
.condition-params {
  padding: var(--space-3, 12px);
  background: var(--surface-primary, #ffffff);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--slate-100, #f1f5f9);
}

.condition-params > label {
  display: block;
  margin-bottom: var(--space-2, 8px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate-500, #64748b);
}

.condition-params-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--slate-600, #475569);
}

/* Says what the band above actually DOES. The label "Events outside working
   hours" names the rule; this names the predicate, so the two inputs cannot be
   read backwards again (2026-08-29). */
.condition-params-hint {
  margin: var(--space-2, 8px) 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--slate-500, #64748b);
}
body.dark-mode .condition-params-hint { color: var(--slate-400, #94a3b8); }

.condition-params-row:last-child {
  margin-bottom: 0;
}

.condition-params-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.condition-params-row input[type="checkbox"] {
  accent-color: var(--primary-500, #14b8a6);
  width: 15px;
  height: 15px;
}

/* Keyword tags (the reported pill) */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--space-2, 8px);
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  min-height: 42px;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  /* Vertical padding tuned to the 1-line text height; line-height:1 keeps the
     text optically centred so the "x" glyph can't drag the baseline.
     em-based so the pill's box scales with the text under a device text-size
     setting instead of staying fixed while the glyphs inside it grow. */
  padding: 0.42em 0.5em 0.42em 0.92em;
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  color: #fff;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.keyword-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* em, NOT px (2026-08-31, user: "the pill style seems wrong" — the remove
     circle rendered ~3x oversized and burst out past the pill's rounded end).
     A device text-size / accessibility zoom scales the FONT but not fixed px
     padding, so a px button grows against a pill whose padding stays put and
     escapes it. Sizing the button in em ties it to the same font the pill
     scales with, so the two grow together and it stays inside the pill at any
     text size. flex-shrink:0 keeps it circular when the row is tight.
     font-size is set BEFORE width/height so they resolve against this
     element's own size; rem here would re-anchor to the root and defeat the
     scaling this fix is for. */
  font-size: 0.8em;
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  line-height: 1;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.keyword-tag button:hover {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.keyword-input-wrapper {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

.keyword-input-wrapper input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  font-size: 0.82rem;
  line-height: 1.3;
  background: var(--surface-primary, #ffffff);
  color: var(--slate-700, #334155);
}

.keyword-input-wrapper input:focus {
  outline: none;
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: var(--shadow-focus, 0 0 0 2px rgba(20, 184, 166, 0.25));
}

.keyword-input-wrapper button {
  flex-shrink: 0;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.keyword-input-wrapper button:hover {
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}

/* Builder Actions */
.rule-builder-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.rule-builder-cancel,
.rule-builder-save {
  padding: 10px 20px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.rule-builder-cancel {
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--slate-200, #e2e8f0);
  color: var(--slate-600, #475569);
}

.rule-builder-cancel:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--slate-300, #cbd5e1);
}

.rule-builder-save {
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  border: none;
  color: #fff;
}

.rule-builder-save:hover {
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}

/* ============================================
   FOOTER
   ============================================ */

.automation-rules-footer {
  padding: var(--space-4, 16px) var(--space-6, 24px);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3, 12px);
}

.rules-count {
  font-size: 0.8rem;
  color: var(--slate-500, #64748b);
  font-weight: 500;
  line-height: 1.3;
}

.add-rule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.add-rule-btn:hover {
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}

.add-rule-btn i {
  font-size: 0.72rem;
  line-height: 1;
}

/* ============================================
   DARK MODE
   ============================================ */

.dark-mode .automation-rules-panel,
body.dark-mode .automation-rules-panel {
  background: var(--surface-secondary, #1e293b);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.dark-mode .automation-rules-header,
body.dark-mode .automation-rules-header {
  border-bottom-color: var(--slate-700, #334155);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(30, 41, 59, 0) 70%);
}

.dark-mode .automation-rules-header h2,
body.dark-mode .automation-rules-header h2 {
  color: var(--slate-100, #f1f5f9);
}

.dark-mode .automation-rules-close,
body.dark-mode .automation-rules-close {
  background: var(--slate-700, #334155);
  color: var(--slate-400, #94a3b8);
}

.dark-mode .automation-rules-close:hover,
body.dark-mode .automation-rules-close:hover {
  background: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .automation-rule-card,
body.dark-mode .automation-rule-card {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

.dark-mode .automation-rule-card:hover,
body.dark-mode .automation-rule-card:hover {
  border-color: var(--primary-600, #0d9488);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
}

.dark-mode .rule-name,
body.dark-mode .rule-name {
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .rule-condition,
body.dark-mode .rule-condition {
  color: var(--slate-400, #94a3b8);
}

.dark-mode .rule-action,
body.dark-mode .rule-action {
  color: var(--slate-300, #cbd5e1);
}

.dark-mode .rule-builder,
body.dark-mode .rule-builder {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

.dark-mode .rule-builder h3,
body.dark-mode .rule-builder h3 {
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .rule-builder-row label,
body.dark-mode .rule-builder-row label {
  color: var(--slate-300, #cbd5e1);
}

.dark-mode .rule-builder-row input,
.dark-mode .rule-builder-row select,
.dark-mode .keyword-input-wrapper input,
body.dark-mode .rule-builder-row input,
body.dark-mode .rule-builder-row select,
body.dark-mode .keyword-input-wrapper input {
  background: var(--slate-900, #0f172a);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .condition-params,
body.dark-mode .condition-params {
  background: var(--slate-900, #0f172a);
  border-color: var(--slate-700, #334155);
}

.dark-mode .condition-params-row,
body.dark-mode .condition-params-row {
  color: var(--slate-300, #cbd5e1);
}

.dark-mode .keyword-tags,
body.dark-mode .keyword-tags {
  background: var(--slate-900, #0f172a);
  border-color: var(--slate-600, #475569);
}

.dark-mode .template-card,
body.dark-mode .template-card {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

.dark-mode .template-card:hover,
body.dark-mode .template-card:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: var(--primary-600, #0d9488);
}

.dark-mode .template-card-title,
body.dark-mode .template-card-title {
  color: var(--slate-200, #e2e8f0);
}

.dark-mode .template-card-desc,
body.dark-mode .template-card-desc {
  color: var(--slate-400, #94a3b8);
}

.dark-mode .automation-templates h3,
body.dark-mode .automation-templates h3 {
  color: var(--slate-400, #94a3b8);
}

.dark-mode .automation-templates,
body.dark-mode .automation-templates {
  border-top-color: var(--slate-700, #334155);
}

.dark-mode .automation-rules-footer,
body.dark-mode .automation-rules-footer {
  border-top-color: var(--slate-700, #334155);
}

.dark-mode .rules-count,
body.dark-mode .rules-count {
  color: var(--slate-400, #94a3b8);
}

.dark-mode .automation-rules-overlay,
body.dark-mode .automation-rules-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark-mode .rule-card-footer,
body.dark-mode .rule-card-footer {
  border-top-color: var(--slate-700, #334155);
}

.dark-mode .rule-builder-cancel,
body.dark-mode .rule-builder-cancel {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

.dark-mode .rule-builder-actions,
body.dark-mode .rule-builder-actions {
  border-top-color: var(--slate-700, #334155);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  .automation-rules-panel {
    width: 95%;
    max-height: 90vh;
    border-radius: var(--radius-xl, 20px);
  }

  .automation-rules-header,
  .automation-rules-content,
  .automation-rules-footer {
    padding-left: var(--space-4, 16px);
    padding-right: var(--space-4, 16px);
  }

  .templates-grid {
    grid-template-columns: 1fr;
  }

  .rule-card-body {
    padding-left: 0;
  }

  .rule-builder-actions {
    flex-direction: column-reverse;
  }

  .rule-builder-actions button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}