:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #1a1a26;
  --bg-input: #22222e;
  --bg-hover: #2a2a3a;
  --text-primary: #f0f0f5;
  --text-secondary: #9898a8;
  --text-muted: #5a5a6e;
  --accent: #7c6cf0;
  --accent-hover: #9489f5;
  --accent-glow: rgba(124,108,240,0.15);
  --danger: #e74c5e;
  --success: #2ed573;
  --warning: #ffa502;
  --border: #2a2a3a;
  --border-light: #33334a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: all 0.2s ease;
}
[data-theme="light"] {
  --bg-primary: #f5f5fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0f0f5;
  --bg-hover: #e8e8f0;
  --text-primary: #1a1a2e;
  --text-secondary: #5a5a70;
  --text-muted: #9898a8;
  --border: #e0e0ea;
  --border-light: #d0d0da;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }

/* Native <input type="date|time|datetime-local|month|week"> picker
   icons in WebKit / Chromium render as a dark glyph. Fine in light
   mode, nearly invisible on our dark input background. Invert the
   glyph by default (dark theme) so the little calendar / clock icon
   is legible; revert to normal for the light theme. Same treatment
   for the search-input clear "x" and the number-input spinners. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }

/* LANDING PAGE */
.landing-container {
  flex:1; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg-primary);
  background-image: radial-gradient(ellipse at 20% 50%, rgba(124,108,240,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(253,121,168,0.06) 0%, transparent 50%);
}
.landing-box {
  width: 100%; max-width: 440px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 3rem 2.5rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.landing-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #fd79a8, var(--accent));
}
.landing-logo { text-align: center; margin-bottom: 2rem; }
.landing-logo img { height: 56px; margin-bottom: 0.75rem; display: block; margin-inline: auto; }
.landing-logo h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--accent), #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.landing-logo p { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

.tab-bar { display: flex; gap: 4px; background: var(--bg-input); border-radius: 10px; padding: 4px; margin-bottom: 1.5rem; }
.tab-bar button {
  flex: 1; padding: 0.6rem; border: none; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: var(--transition);
}
.tab-bar button.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(124,108,240,0.3); }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; font-family: var(--font);
  transition: var(--transition); outline: none;
  max-width: 100%; /* Prevent overflow on narrow screens (iframes, embedded webviews) */
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group textarea { resize: vertical; min-height: 80px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition);
  font-family: var(--font);
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #9489f5); color: #fff; width: 100%; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,108,240,0.35); }
.btn-secondary { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.btn-icon:hover { color: var(--accent); border-color: var(--accent); }

.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; }
.alert-success { background: rgba(46,213,115,0.1); border: 1px solid rgba(46,213,115,0.3); color: var(--success); }
.alert-error { background: rgba(231,76,94,0.1); border: 1px solid rgba(231,76,94,0.3); color: var(--danger); }
.alert-warning { background: rgba(255,165,2,0.1); border: 1px solid rgba(255,165,2,0.3); color: var(--warning); }

.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; font-family: var(--font); padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* DASHBOARD LAYOUT */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform 0.3s ease;
}
.sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; }
.sidebar-header img { height: 36px; border-radius: 8px; }
.sidebar-header h2 { font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar-nav { flex: 1; padding: 1rem 0.75rem; overflow-y: auto; }
.sidebar-nav .nav-section { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 1rem 0.75rem 0.4rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition);
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.nav-item .icon { width: 20px; text-align: center; font-size: 1.05rem; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.sidebar-footer .user-info { display: flex; align-items: center; gap: 0.75rem; }
.sidebar-footer .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.sidebar-footer .user-name { font-weight: 600; font-size: 0.85rem; }
.sidebar-footer .user-role { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

.main-content { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: 60px; background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-left h1 { font-size: 1.15rem; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; }

.page-content { flex: 1; padding: 1.5rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.page-header h2 { font-size: 1.3rem; font-weight: 700; }

.app-footer {
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem; text-align: center; font-size: 0.75rem; color: var(--text-muted); line-height: 1.8;
}
.app-footer strong { color: var(--text-secondary); }

/* CARDS & TABLES */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-title { font-size: 1rem; font-weight: 700; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.stat-card .stat-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; padding: 0.75rem; background: var(--bg-input); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table .actions { display: flex; gap: 0.4rem; }

.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.badge-success { background: rgba(46,213,115,0.15); color: var(--success); }
.badge-warning { background: rgba(255,165,2,0.15); color: var(--warning); }
.badge-danger { background: rgba(231,76,94,0.15); color: var(--danger); }
.badge-info { background: var(--accent-glow); color: var(--accent); }
.badge-secondary { background: rgba(160,160,160,0.15); color: var(--text-secondary); }
.badge-purple { background: rgba(162,155,254,0.15); color: #a29bfe; }

/* MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; /* Allows footer to sit at bottom even on tall content */
}
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; }
/* Red square with white X — universal modal close. Previously a
   subtle × in muted grey which was hard to find in the busy
   Share-to-Social header; the red square gives it a clear "close"
   affordance across every modal. */
.modal-close {
  background: #dc3545;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  min-width: 2rem;
  transition: background 0.15s, transform 0.1s;
}
.modal-close:hover { background: #a71d2a; }
.modal-close:active { transform: scale(0.94); }
.modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.modal-body { padding: 1.5rem; flex: 1; overflow-y: auto; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }

/* Inputs and dropdowns inside modals must never burst out of their container */
.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state p { font-size: 0.9rem; }

.search-bar { display: flex; gap: 0.5rem; }
.search-bar input { flex: 1; padding: 0.6rem 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem; outline: none; }
.search-bar input:focus { border-color: var(--accent); }

.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100000; display: flex; flex-direction: column; gap: 0.5rem; max-width: calc(100vw - 2rem); }
.toast { padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; animation: slideIn 0.3s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.3); word-wrap: break-word; }
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }
.toast-warning { background: #cd8b08; color: #fff; }
.toast-info { background: var(--accent, #7c6cf0); color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .data-table { font-size: 0.75rem; }
  .data-table th, .data-table td { padding: 0.5rem; }
  .page-content { padding: 1rem; }

  /* CRUD form rows stack on tablet+ — works for both .field-row (1fr 1fr) and .field-row-3 (1fr 1fr 1fr).
     The inline rules in dashboard.html already collapse these at 768px, but we add the
     same rule here so it also applies to ANY HTML page that uses these classes
     (quote.html, future Electron/Capacitor wrappers etc.). */
  .field-row, .field-row-3 { grid-template-columns: 1fr !important; }

  /* Modals: take more of the viewport, snap header/footer, ensure inputs don't overflow */
  .modal-overlay { padding: 0.5rem; align-items: flex-start; padding-top: 1rem; }
  .modal { max-width: 100%; max-height: calc(100vh - 2rem); border-radius: 12px; }
  .modal-header { padding: 1rem 1rem; }
  .modal-header h3 { font-size: 1rem; }
  .modal-body { padding: 1rem; }
  .modal-footer { padding: 0.75rem 1rem; }
  .modal-footer .btn { flex: 1; min-width: 0; } /* Buttons share the row instead of overflowing */

  /* Toast: take most of the screen width on small viewports */
  .toast-container { left: 1rem; right: 1rem; top: 0.5rem; align-items: stretch; }
  .toast { text-align: center; }

  /* Topbar tighter on tablet */
  .topbar { padding: 0 1rem; }
  .topbar-left h1 { font-size: 1rem; }
}

/* Phone */
/* ── Social calendar — live activity styling ────────────────────────
   The calendar was 100% static. We make three things visible:
   1. Chips pulse based on status (pending = soft green, firing =
      strong yellow, just-fired = 8s green/red flash with scale-up).
   2. The day cell containing a row that just fired glows for ~6 s,
      so you notice it from across the screen — chips are tiny.
   3. A sticky "live activity strip" at the top of the calendar
      shows the next fire countdown + last fire result + a "● live"
      dot. The dot pulses red while anything is `firing`.
*/
@keyframes sc-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); }
  50%      { box-shadow: 0 0 0 4px rgba(0,184,148,0.4); }
}
@keyframes sc-pulse-firing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,203,110,0); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(253,203,110,0.7); transform: scale(1.06); }
}
@keyframes sc-flash-done {
  0%   { background: #00b894 !important; box-shadow: 0 0 0 0 rgba(0,184,148,0); transform: scale(1); }
  10%  { background: #00b894 !important; box-shadow: 0 0 24px 10px rgba(0,184,148,0.95); transform: scale(1.18); }
  50%  { background: #00b894 !important; box-shadow: 0 0 12px 4px rgba(0,184,148,0.5); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); transform: scale(1); }
}
@keyframes sc-flash-error {
  0%   { background: #d63031 !important; box-shadow: 0 0 0 0 rgba(214,48,49,0); transform: scale(1); }
  10%  { background: #d63031 !important; box-shadow: 0 0 24px 10px rgba(214,48,49,0.95); transform: scale(1.18); }
  50%  { background: #d63031 !important; box-shadow: 0 0 12px 4px rgba(214,48,49,0.5); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(214,48,49,0); transform: scale(1); }
}
@keyframes sc-day-flash {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(0,184,148,0); }
  50%      { box-shadow: inset 0 0 0 4px rgba(0,184,148,0.65); }
}
@keyframes sc-day-flash-err {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(214,48,49,0); }
  50%      { box-shadow: inset 0 0 0 4px rgba(214,48,49,0.65); }
}
@keyframes sc-live-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
@keyframes sc-banner-in {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

.sc-chip[data-status="pending"]     { animation: sc-pulse-soft 2.4s ease-in-out infinite; }
.sc-chip[data-status="firing"]      { animation: sc-pulse-firing 0.7s ease-in-out infinite; }
.sc-chip.sc-just-fired-done         { animation: sc-flash-done 1.4s ease-in-out 6; }
.sc-chip.sc-just-fired-failed       { animation: sc-flash-error 1.4s ease-in-out 6; }
.sc-day.sc-day-flash-done           { animation: sc-day-flash 1.4s ease-in-out 4; }
.sc-day.sc-day-flash-fail           { animation: sc-day-flash-err 1.4s ease-in-out 4; }

.sc-live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #00b894; animation: sc-live-dot 1.4s ease-in-out infinite;
}
.sc-live-dot.firing { background: #fdcb6e; animation-duration: 0.6s; }
.sc-strip {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0.8rem; margin-bottom: 0.8rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,184,148,0.06), rgba(0,184,148,0.02));
  font-size: 0.85rem;
}
.sc-strip strong { color: var(--text-primary); }
.sc-strip .sep { color: var(--text-muted); margin: 0 0.2rem; }
.sc-strip .countdown { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }

/* Big floating "just published" banner — drops in from the top of
   the calendar page when a poll cycle detects a transition. Fades
   out after 8 s. Multiple bannerlets stack. */
.sc-fire-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 9999; min-width: 280px; max-width: 90vw;
  padding: 0.7rem 1.1rem; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  color: #fff; font-size: 0.92rem; font-weight: 600;
  animation: sc-banner-in 0.35s ease-out;
}
.sc-fire-banner.done   { background: linear-gradient(135deg,#00b894,#019874); }
.sc-fire-banner.failed { background: linear-gradient(135deg,#d63031,#a02020); }

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .landing-box { padding: 2rem 1.5rem; }

  /* Modals go full-screen on phones — easier to read and to type into */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%; max-height: 100vh; height: 100vh;
    border-radius: 0; border-left: none; border-right: none;
  }
  .modal-body { padding: 0.875rem; }

  /* All form inputs get 16px font to suppress iOS Safari & Android WebView autozoom on focus.
     Keeps Windows .exe (Electron) and Android .apk wrappers usable too. */
  input, select, textarea { font-size: 16px !important; }

  /* Cards have less padding so content gets more horizontal room */
  .card { padding: 1rem; }
}