/* TRADLYT - extras styles. Load AFTER your layout css. */

/* Panels created by tradlyt-extras.js */
#analytics:not(.active), #settings:not(.active) { display: none; }
#analytics.active, #settings.active { display: block; }

/* Smaller search so the date picker fits */
.top-search { flex: 0 1 130px; max-width: 130px; }

/* Date range picker: Sep 1, 2026 – Sep 30, 2026 */
.dr-wrap { position: relative; }
.dr-btn {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
  color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
}
.dr-btn svg:first-child { color: var(--primary-light); }
.dr-btn:hover { border-color: var(--border-light); }
.dr-menu {
  position: absolute; top: 48px; left: 0; z-index: 80; width: 290px;
  display: grid; gap: 12px; padding: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.dr-menu[hidden] { display: none; }
.dr-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dr-presets button {
  padding: 8px; font-size: 12px; color: var(--text-soft); cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
}
.dr-presets button:hover { border-color: var(--primary); color: var(--text); }
.dr-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dr-custom label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.dr-custom input {
  height: 38px; padding: 0 8px; font-size: 12px; color: var(--text); color-scheme: dark;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
}
[data-theme="light"] .dr-custom input { color-scheme: light; }
@media (max-width: 900px) {
  .date-range { order: 5; flex-basis: 100%; }
  .dr-wrap, .dr-btn { width: 100%; }
  .dr-btn { justify-content: space-between; }
  .dr-menu { width: 100%; }
}

/* Analytics */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.an-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; }
.seg button { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-soft); background: none; border: 0; border-radius: 7px; cursor: pointer; }
.seg button.on { color: #fff; background: var(--primary); }
.an-nav { display: flex; align-items: center; gap: 12px; }
.an-nav strong { min-width: 200px; text-align: center; font-size: 14px; }
.an-nav button { width: 34px; height: 34px; font-size: 18px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.an-nav button:disabled { opacity: .35; cursor: default; }
.pill { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 99px; background: var(--bg-soft); color: var(--text-soft); }
.pill.ok { background: rgba(34,197,94,.15); color: var(--green); }
.pill.bad { background: rgba(239,68,68,.15); color: #f87171; }
.breach-list { list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--text-soft); }
.breach-list li { display: flex; gap: 12px; padding: 9px 12px; background: rgba(239,68,68,.08); border-radius: 8px; }
.breach-list span { flex: 0 0 110px; color: var(--text-muted); font-weight: 600; }
.verdict .rules li em { margin-left: 6px; }
.hint { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } .an-nav strong { min-width: 0; } }

/* Settings */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.btn.danger { color: #fff; background: #dc2626; border: 1px solid #dc2626; }
.btn.danger:hover { background: #b91c1c; }
.msg { font-size: 12px; font-weight: 600; }
.msg.ok { color: var(--green); }
.msg.err { color: #f87171; }
.settings-grid select { width: 100%; height: 42px; padding: 0 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; }

/* Hide the login-page cloud note */
.auth-footer { display: none; }