/* app/assets/stylesheets/admin_theme.css
   ─────────────────────────────────────────────────────────────────────────────
   DEFAULT THEME: Dark minimal (black/white)
   To restyle: update the values below. All admin ERB components use these vars.
   ─────────────────────────────────────────────────────────────────────────────
*/

:root {
  /* ── Fonts ─────────────────────────────────────────────────────────────── */
  --admin-font-sans:    "Inter", system-ui, sans-serif;
  --admin-font-display: "Inter", system-ui, sans-serif;
  --admin-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --admin-text-primary:   #18181A;      /* Main text */
  --admin-text-secondary: #18181A99;   /* Subdued text (60% opacity) */
  --admin-text-muted:     #A0A0B8;     /* Column labels, counts, hints */
  --admin-text-danger:    #B83232;     /* Error messages, delete hover */

  /* ── Backgrounds ───────────────────────────────────────────────────────── */
  --admin-bg:             #FFFFFF;     /* Page background */
  --admin-surface:        #FAFAFA;     /* Table row hover, subtle panels */
  --admin-surface-brand:  #F2F2FA;    /* Icon backgrounds, empty states */
  --admin-sidebar-bg:     #FFFFFF;    /* Sidebar (can differ from page bg) */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --admin-border:         rgba(0, 0, 0, 0.07);   /* Layout dividers */
  --admin-border-input:   rgba(0, 0, 0, 0.12);   /* Form inputs */
  --admin-border-row:     rgba(0, 0, 0, 0.05);   /* Table rows */

  /* ── Accent (primary actions, active nav, submit buttons) ──────────────── */
  --admin-accent:         #18181A;    /* Button bg, active nav, focus ring */
  --admin-accent-hover:   #333333;   /* Button hover */
  --admin-accent-text:    #FFFFFF;   /* Text on accent background */

  /* ── Danger ────────────────────────────────────────────────────────────── */
  --admin-danger-bg:      rgba(184, 50, 50, 0.06);

  /* ── Sizing ─────────────────────────────────────────────────────────────── */
  --admin-sidebar-width:  200px;
  --admin-topbar-height:  52px;
  --admin-radius-sm:      6px;        /* Buttons, badges */
  --admin-radius-md:      8px;        /* Inputs, cards */
  --admin-radius-lg:      12px;       /* Modals, panels */

  /* ── Logo ──────────────────────────────────────────────────────────────── */
  --admin-logo-bg:        #18181A;    /* Logo mark background */
  --admin-logo-text:      #FFFFFF;   /* Logo mark text */
  --admin-logo-label:     #18181A;   /* "CMS" label next to logo mark */
}

/* ── Semantic component classes ─────────────────────────────────────────────
   Define once here. Use in ERB as semantic class names.
   Override in project CSS by redefining these classes after this file.
   ─────────────────────────────────────────────────────────────────────────── */

/* Buttons */
.admin-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-accent-text);
  background: var(--admin-accent);
  border-radius: var(--admin-radius-sm);
  transition: background 0.15s;
  cursor: pointer;
  border: none;
}
.admin-btn-primary:hover { background: var(--admin-accent-hover); }

.admin-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-secondary);
  background: transparent;
  border-radius: var(--admin-radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  cursor: pointer;
}
.admin-btn-ghost:hover {
  color: var(--admin-text-primary);
  background: rgba(0,0,0,0.04);
}

/* Ghost button that turns danger-red on hover — used for inline "Remove" actions */
.admin-btn-ghost-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-muted);
  background: transparent;
  border-radius: var(--admin-radius-sm);
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.admin-btn-ghost-danger:hover {
  color: var(--admin-text-danger);
  background: var(--admin-danger-bg);
}

/* Form inputs */
.admin-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--admin-text-primary);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-input);
  border-radius: var(--admin-radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--admin-font-sans);
}
.admin-input:focus {
  border-color: color-mix(in srgb, var(--admin-accent) 30%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 8%, transparent);
}
.admin-input::placeholder { color: var(--admin-text-muted); }

.admin-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-primary);
}

.admin-hint {
  font-size: 12px;
  color: var(--admin-text-muted);
}

/* Nav links */
.admin-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--admin-radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.admin-nav-link:hover {
  color: var(--admin-text-primary);
  background: rgba(0,0,0,0.04);
}
.admin-nav-link.active {
  color: var(--admin-text-primary);
  background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
}

/* Flash */
.admin-flash-notice {
  padding: 10px 24px;
  font-size: 13px;
  color: #1a4731;
  background: #d1fae5;
  border-bottom: 1px solid #a7f3d0;
}
.admin-flash-alert {
  padding: 10px 24px;
  font-size: 13px;
  color: var(--admin-text-danger);
  background: var(--admin-danger-bg);
  border-bottom: 1px solid rgba(184, 50, 50, 0.15);
}

/* Error block (form validation) */
.admin-errors {
  padding: 12px 16px;
  border-radius: var(--admin-radius-md);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  font-size: 13px;
  color: var(--admin-text-danger);
}

/* Lead status chips (Module 03_crm) */
.admin-status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-status-new       { background: #FEF3C7; color: #92400E; }  /* yellow */
.admin-status-contacted { background: #DBEAFE; color: #1E40AF; }  /* blue */
.admin-status-qualified { background: #D1FAE5; color: #065F46; }  /* green */
.admin-status-converted { background: #C7D2FE; color: #3730A3; }  /* indigo */
.admin-status-archived  { background: #E5E7EB; color: #4B5563; }  /* gray */

/* Filter tags (Module 03_crm) */
.admin-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid var(--admin-border);
  font-size: 12px;
  transition: all 150ms;
}
.admin-tag:hover { border-color: var(--admin-text-primary); }
.admin-tag.active { background: var(--admin-text-primary); color: var(--admin-bg); border-color: var(--admin-text-primary); }

/* Image dropzone (Module 07_media_storage — drag & drop upload UI) */
.image-dropzone {
  position: relative;
  min-height: 180px;
  border: 2px dashed var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-dropzone:hover {
  border-color: var(--admin-text-primary);
  background: var(--admin-surface-hover, var(--admin-surface));
}

.image-dropzone.dragover {
  border-color: var(--admin-accent, var(--admin-text-primary));
  border-style: solid;
  background: var(--admin-surface-brand, var(--admin-surface));
}

.image-dropzone.has-image .dropzone-empty {
  display: none;
}

.image-dropzone:not(.has-image) .dropzone-preview {
  display: none;
}

/* Empty state */
.dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  pointer-events: none;
}

.dropzone-icon {
  font-size: 32px;
  opacity: 0.6;
}

.dropzone-text {
  font-size: 14px;
  color: var(--admin-text-primary);
  font-weight: 500;
}

.dropzone-hint {
  font-size: 12px;
  color: var(--admin-text-secondary);
}

/* Filled state */
.dropzone-preview {
  position: relative;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone-preview-img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
}

.dropzone-filename {
  font-size: 12px;
  color: var(--admin-text-secondary);
  word-break: break-all;
  text-align: center;
}

/* Meta pills row under the preview — weight + pixel dimensions, side by side. */
.dropzone-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Weight / dimensions pill — small mono badge under the preview ("2.4 MB", "1920 × 1080 px"). */
.dropzone-filesize {
  align-self: center;
  font-family: var(--admin-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--admin-text-muted);
  background: var(--admin-surface-brand);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  padding: 3px 8px;
}
.dropzone-filesize[hidden] { display: none; }

.dropzone-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 150ms;
  padding: 0;
}

.dropzone-remove:hover {
  background: rgba(0, 0, 0, 1);
}

.dropzone-remove svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* URL input (hidden when image present, shown on toggle) */
.dropzone-url-input {
  display: none;
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: var(--admin-surface);
  color: var(--admin-text-primary);
  margin-top: 4px;
}

.dropzone-url-input.visible {
  display: block;
}

.dropzone-url-toggle {
  font-size: 11px;
  color: var(--admin-text-secondary);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  align-self: flex-start;
}

.dropzone-url-toggle:hover {
  color: var(--admin-text-primary);
}

/* Styleguide (Module 01_styleguide) */
.styleguide-section-entry {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.styleguide-preview {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--admin-border);
  background: var(--admin-bg);
}

.styleguide-empty-note {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--admin-text-secondary);
}

.styleguide-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 13px;
}

.styleguide-token-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--admin-border);
}

/* ── Trix (ActionText) editor in admin forms — matches .admin-input chrome.
   Higher specificity than actiontext.css's bare `trix-editor` rule via the class. */
trix-editor.admin-trix-editor {
  width: 100%;
  min-height: 400px;
  padding: 12px 16px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-input);
  border-radius: var(--admin-radius-md);
  font-family: var(--admin-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--admin-text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
trix-editor.admin-trix-editor:focus {
  border-color: color-mix(in srgb, var(--admin-accent) 30%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 8%, transparent);
}

trix-toolbar { margin-bottom: 8px; }

/* Content typography inside the admin editor (preview while writing — not the public render) */
trix-editor.admin-trix-editor h2 { font-size: 24px; font-weight: 700; margin: 16px 0 8px; }
trix-editor.admin-trix-editor h3 { font-size: 20px; font-weight: 700; margin: 14px 0 7px; }
trix-editor.admin-trix-editor h4 { font-size: 17px; font-weight: 600; margin: 12px 0 6px; }
trix-editor.admin-trix-editor p { margin: 0 0 12px; }
trix-editor.admin-trix-editor ul,
trix-editor.admin-trix-editor ol { margin: 0 0 12px; padding-left: 24px; }
trix-editor.admin-trix-editor blockquote { border-left: 3px solid var(--admin-border-input); padding-left: 12px; color: var(--admin-text-secondary); font-style: italic; margin: 12px 0; }
trix-editor.admin-trix-editor a { color: #2563eb; text-decoration: underline; }
trix-editor.admin-trix-editor img { max-width: 100%; height: auto; margin: 12px 0; border-radius: 4px; }

/* Text heading buttons (H1/H2/H3) injected by trix_setup_controller — replaces the default
   SVG-icon heading button so all three levels read as text labels. */
trix-toolbar .trix-button--heading-text {
  font-family: var(--admin-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  background-image: none !important; /* kill the default heading-1 SVG icon */
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm);
  padding: 4px 8px;
  min-width: 32px;
  width: auto !important;   /* default heading button is icon-sized */
  height: auto !important;
  color: var(--admin-text-primary);
  text-indent: 0 !important; /* default Trix hides label behind the icon via text-indent: -9999px */
  overflow: visible !important;
}
trix-toolbar .trix-button--heading-text:hover { background-color: var(--admin-surface); }
trix-toolbar .trix-button--heading-text.trix-active {
  background-color: var(--admin-surface-brand);
  border-color: var(--admin-border-input);
}

/* Sticky toolbar — stays pinned to the top of the editor while scrolling long articles.
   Trix renders <trix-toolbar> and <trix-editor> as siblings; the form wraps them in
   .admin-trix-wrapper so the toolbar can stick relative to it (scroll container = admin main). */
/* No overflow here — overflow:hidden/auto on the wrapper makes it the sticky containing block and
   breaks the toolbar's sticky. Buttons fit in one line because unused ones are hidden (below). */
.admin-trix-wrapper { position: relative; max-width: 100%; }
.admin-trix-wrapper trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-input);
  border-bottom: none;
  border-radius: var(--admin-radius-md) var(--admin-radius-md) 0 0;
  padding: 8px;
  margin-bottom: 0 !important; /* overrides the default trix-toolbar margin */
}
.admin-trix-wrapper trix-editor.admin-trix-editor {
  border-top: none;
  border-radius: 0 0 var(--admin-radius-md) var(--admin-radius-md);
}

/* Keep the toolbar on ONE line so sticky holds. NO overflow-x here — it would create a scroll
   context and break sticky. The remaining buttons fit on one line (unused ones hidden below). */
.admin-trix-wrapper trix-toolbar { flex-wrap: nowrap !important; white-space: nowrap; }
.admin-trix-wrapper trix-toolbar .trix-button-row { display: flex; flex-wrap: nowrap !important; gap: 2px; }
.admin-trix-wrapper trix-toolbar .trix-button-group { display: flex; flex-shrink: 0; flex-wrap: nowrap; gap: 2px; }

/* Compact buttons so all groups fit on one line */
.admin-trix-wrapper trix-toolbar .trix-button { padding: 4px 6px; min-width: 28px; height: 28px; }
.admin-trix-wrapper trix-toolbar .trix-button--heading-text { min-width: 30px; height: 28px !important; padding: 2px 6px; } /* !important beats the global height:auto */

/* Hide unused Trix toolbar buttons so everything fits one line (no horizontal scroll needed).
   Hidden: strikethrough, code, indent/outdent. Undo/redo (history group) are kept. */
.admin-trix-wrapper trix-toolbar [data-trix-attribute="strike"],
.admin-trix-wrapper trix-toolbar [data-trix-attribute="code"],
.admin-trix-wrapper trix-toolbar [data-trix-action="decreaseNestingLevel"],
.admin-trix-wrapper trix-toolbar [data-trix-action="increaseNestingLevel"] {
  display: none !important;
}

/* Drag-to-reorder (Projects / Articles admin lists) — grip handle + dragged-row state. */
.drag-handle { cursor: grab; line-height: 1; font-size: 15px; letter-spacing: -2px; opacity: 0.4; }
.drag-handle:active { cursor: grabbing; }
.group:hover .drag-handle { opacity: 0.75; }
.is-dragging { opacity: 0.4; }