/*
 * =============================================================================
 *  Project:   Social Publisher
 *  Location:  /assets/css/app.css
 *  File:      app.css
 *  Function:  Modern theme layer over Bootstrap 5 — violet brand palette,
 *             Inter typography, soft shadows, rounded surfaces, editor and
 *             Dropzone polish. Retints Bootstrap component variables.
 *  Version:   1.1.0
 *  Build:     2026.08.01.0210
 * -----------------------------------------------------------------------------
 *  Changelog:
 *    1.1.0  2026-08-01  Modern violet palette, Inter font, Dropzone styling,
 *                       UX polish (navbar blur, cards, channel headers).
 *    1.0.0  2026-08-01  Initial version.
 * =============================================================================
 */

/* ---- Brand palette ------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --brand:        #6d28d9;
  --brand-600:    #6d28d9;
  --brand-700:    #5b21b6;
  --brand-800:    #4c1d95;
  --brand-glow:   rgba(109, 40, 217, .18);

  --bs-primary: #6d28d9;
  --bs-primary-rgb: 109, 40, 217;
  --bs-primary-text-emphasis: #4c1d95;
  --bs-primary-bg-subtle: #f3eefe;
  --bs-primary-border-subtle: #dcccfb;

  --bs-link-color: #6d28d9;
  --bs-link-color-rgb: 109, 40, 217;
  --bs-link-hover-color: #5b21b6;

  --bs-body-bg: #f5f5fa;
  --bs-body-color: #1f2430;
  --bs-border-color: #ececf3;
  --bs-secondary-color: #6b7280;

  --sp-radius: 16px;
  --sp-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
}

/* ---- Typography ---------------------------------------------------------- */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}
h1, h2, h3, .navbar-brand { letter-spacing: -0.02em; }

/* ---- Primary component retint -------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  box-shadow: 0 6px 16px -8px var(--brand-glow);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-700);
}
.text-primary { color: var(--brand) !important; }
.bg-primary,
.text-bg-primary,
.badge.text-bg-primary { background-color: var(--brand) !important; color: #fff !important; }
.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }
.text-primary-emphasis { color: var(--brand-800) !important; }
.btn-primary-subtle { background: var(--bs-primary-bg-subtle); color: var(--brand); border: 0; }
.btn-primary-subtle:hover { background: #e9defc; color: var(--brand-800); }

a { text-decoration: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #b79cf0;
  box-shadow: 0 0 0 .2rem var(--brand-glow);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---- Surfaces ------------------------------------------------------------ */
.card {
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}
.card-header { border-radius: var(--sp-radius) var(--sp-radius) 0 0 !important; }
.border-dashed { border-style: dashed !important; }
.rounded-3 { border-radius: 12px !important; }

/* ---- Navbar -------------------------------------------------------------- */
.navbar {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(16,24,40,.06);
}
.navbar-brand .badge {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  box-shadow: 0 6px 16px -8px var(--brand-glow);
}
.navbar .nav-link.active { color: var(--brand) !important; }

/* ---- Channel section headers -------------------------------------------- */
#channelSections .card-header {
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
}
textarea.form-control { resize: vertical; }
[data-counter] { font-variant-numeric: tabular-nums; }

/* AI accent button */
#btnGenAll {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border: 0;
  box-shadow: 0 8px 18px -10px var(--brand-glow);
}
#btnGenAll:hover { filter: brightness(1.05); }

/* ---- Dropzone ------------------------------------------------------------ */
.media-dropzone.dropzone {
  border: 2px dashed #d7d3e6;
  border-radius: 14px;
  background: #fafaff;
  min-height: 132px;
  padding: 18px;
  transition: border-color .15s, background .15s;
}
.media-dropzone.dropzone:hover,
.media-dropzone.dropzone.dz-drag-hover {
  border-color: var(--brand);
  background: var(--bs-primary-bg-subtle);
}
.media-dropzone .dz-message { color: #6b7280; margin: 1.2rem 0; }
.media-dropzone .dz-preview .dz-image { border-radius: 12px; }
.media-dropzone .dz-preview .dz-remove {
  color: #b91c1c; font-size: 12px; margin-top: 6px; text-decoration: none;
}
.media-dropzone .dz-preview .dz-success-mark svg circle,
.media-dropzone .dz-preview .dz-error-mark svg circle { display: none; }

/* ---- Crop / preview modals ---------------------------------------------- */
#cropImg { max-width: 100%; }
#cropModal .modal-body { border-radius: 0; }

/* ---- Misc ---------------------------------------------------------------- */
.toast { border-radius: 12px; }
.table > :not(caption) > * > * { padding-block: .8rem; }
@media (min-width: 992px) { .sticky-lg-top { z-index: 1; } }