/* 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; }

/* ── Activity log (audited) — data table, expandable field diffs with image thumbnails ─────────────────────── */
/* Custom select chrome: arrow with breathing room (was flush right) + dark native option menu (color-scheme). */
select.admin-input {
  -webkit-appearance: none; appearance: none; color-scheme: dark; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Date fields use Flatpickr (see filter_controller.js + flatpickr.css) — a real cross-browser date picker, so no
   native <input type=date> styling is needed here. Flatpickr's altInput inherits the .admin-input chrome. */
/* Flatpickr month/year header: the theme's 135% blows up the native month <select> — so its dropdown opens at a
   huge font. Bring it back to the admin's normal 14px (matches the other selects). The `.flatpickr-calendar`
   prefix raises specificity so these win over flatpickr.css regardless of import order. */
.flatpickr-calendar .flatpickr-current-month { font-size: 15px; }
.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year { font-size: 14px; }

/* Filter bar */
.audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-lg); }
.audit-filter { display: flex; flex-direction: column; gap: 4px; }
.audit-filter .admin-input { min-width: 150px; }
.audit-filter--actions { display: flex; align-items: center; gap: 14px; align-self: flex-end; padding-bottom: 9px; }
.audit-clear { font-size: 13px; color: var(--admin-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.audit-clear:hover { color: var(--admin-text-primary); }

/* Table */
.audit-table { background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-lg); overflow: hidden; }
.audit-grid { display: grid; grid-template-columns: 22px 94px 116px minmax(0, 1fr) 120px 104px; align-items: center; gap: 12px; padding: 11px 16px; }
.audit-table__head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--admin-text-secondary); border-bottom: 1px solid var(--admin-border); }
.audit-row { border-top: 1px solid var(--admin-border); }
.audit-row:first-of-type { border-top: 0; }
.audit-row > summary { list-style: none; cursor: pointer; }
.audit-row > summary::-webkit-details-marker { display: none; }
.audit-row > summary:hover { background: rgba(255, 255, 255, 0.05); }
.audit-row[open] > summary { background: rgba(255, 255, 255, 0.03); }
.audit-chevron { width: 11px; height: 11px; color: var(--admin-text-secondary); transition: transform 0.15s ease; transform-origin: center; }
.audit-row[open] .audit-chevron { transform: rotate(90deg); }
.audit-cell-muted { font-size: 13px; color: var(--admin-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-change { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
/* The record title is a LINK → its clickable area is bounded to the text (inline-block, fit-content), so clicking
   empty row space toggles the diff and only the title itself opens the record. */
.audit-change__record { display: inline-block; max-width: 100%; font-size: 13px; color: var(--admin-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.audit-change__record:hover { text-decoration: underline; }
.audit-change__fields { display: inline-block; max-width: 100%; font-size: 12px; color: var(--admin-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-action { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.audit-action--create  { background: rgba(52, 199, 89, 0.15); color: #34c759; }
.audit-action--update  { background: rgba(90, 120, 255, 0.15); color: #7b9ad0; }
.audit-action--destroy { background: rgba(255, 80, 80, 0.15); color: #ff6b6b; }
.audit-user { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--admin-surface-brand); color: var(--admin-accent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Expanded diff (indented under the Change column) */
.audit-row__detail { padding: 2px 16px 16px 44px; display: flex; flex-direction: column; cursor: pointer; }
.audit-field { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; margin-top: 10px; border-top: 1px dashed var(--admin-border); }
.audit-field:first-child { border-top: 0; margin-top: 0; padding-top: 6px; }
.audit-field__name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--admin-text-secondary); }
.audit-field__vals { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--admin-text-primary); }
.audit-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.audit-side span { word-break: break-word; }
.audit-arrow { color: var(--admin-text-secondary); flex-shrink: 0; }
.audit-thumb { width: 200px; height: 132px; object-fit: cover; border-radius: 8px; border: 1px solid var(--admin-border); background: #1c1c1c; }
.audit-empty { color: var(--admin-text-secondary); }
.audit-comment { font-size: 12px; color: var(--admin-text-secondary); font-style: italic; padding-top: 10px; }