/* =========================
   GetHug - style.css (DROP-IN)
   ========================= */

/* ========== Base Layout ========== */
* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  background-color: #1e1e2f;
  color: #eee;
  margin: 0;
  padding: 20px;
  max-width: 1200px;
  margin-inline: auto;
}

/* ========== Headings ========== */
h1, h2, h3 {
  color: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #2e2e3a;
  padding-bottom: 4px;
}

/* ========== Buttons & Links ========== */
.button,
button,
input[type="submit"] {
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  line-height: 1.4;
  height: auto;
  text-decoration: none;
  vertical-align: middle;

  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.button:hover, button:hover, input[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.button:active, button:active, input[type="submit"]:active {
  transform: translateY(0px);
  filter: brightness(0.98);
}

.button-green { background-color: #4CAF50; color: #000; }
.button-green:hover { background-color: #43a047; }

.button-blue { background-color: #2196F3; color: #001018; }
.button-blue:hover { background-color: #1e88e5; }

.button-red { background-color: #f44336; color: #120000; }
.button-red:hover { background-color: #e53935; }

.button-grey {
  background: rgba(255,255,255,0.08);
  color: #d8dcea;
  border: 1px solid #465066;
  box-shadow: none;
}

.button-grey:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.button-yellow { background-color: #fbc02d; color: #000; }
.button-yellow:hover { background-color: #f9a825; }

/* Better disabled button feel */
button:disabled,
.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
  transform: none;
}

.button-purple { background-color: #8b5cf6; color: #000; }
.button-purple:hover { background-color: #7c3aed; }

.topbar--secondary-dashboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar--secondary-dashboard .quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1 1 320px;
}

.topbar-actions--dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 420px;
}

.topbar-actions--dashboard .button {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .topbar--secondary-dashboard {
    align-items: stretch;
  }

  .topbar--secondary-dashboard .quick-stats,
  .topbar-actions--dashboard {
    width: 100%;
    flex: 1 1 100%;
  }

  .topbar-actions--dashboard {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .topbar-actions--dashboard .button {
    flex: 1 1 calc(50% - 6px);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .topbar-actions--dashboard .button {
    flex: 1 1 100%;
  }
}

/* ========== Forms ========== */
input[type="text"] {
  padding: 10px 12px;
  width: 100%;
  max-width: 380px;
  margin-right: 10px;
  border: 1px solid #2e2e3a;
  border-radius: 10px;
  background-color: #2a2a3c;
  color: #fff;
  outline: none;
}
input[type="text"]:focus{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(33,150,243,0.18);
}

/* ========== Script Lists ========== */
ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li {
  background: #2a2a3c;
  border: 1px solid #2e2e3a;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 10px;
  color: #eee;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
li:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
li hr {
  margin-top: 10px;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #2e2e3a;
}

form.inline {
  display: inline-block;
  margin: 0;
}

/* ========== Utilities ========== */
.text-sm { font-size: 0.9rem; }
.text-muted { color: #aaa; }
.mt-2 { margin-top: 8px; }

/* ========== Tabs ========== */
.tabs {
  margin-top: 30px;
  margin-bottom: 15px;
}
.tab-button {
  background-color: #33394d;
  color: #eee;
  border: 1px solid #2e2e3a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 16px;
  margin-right: 6px;
  cursor: pointer;
  font-weight: 600;
}
.tab-button.active {
  background-color: #2196F3;
  color: #fff;
}
.tab-content {
  border: 1px solid #2e2e3a;
  border-top: none;
  padding: 15px;
  background-color: #2a2a3c;
  border-radius: 0 0 12px 12px;
  color: #eee;
}

/* ========== Modal Styles ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.modal-content {
  background: #2a2a3c;
  padding: 18px 22px;
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  color: #eee;
  border: 1px solid #2e2e3a;
}

/* ========== Code Block ========== */
.code-block {
  background: #1e1e2f;
  border: 1px solid #2e2e3a;
  padding: 12px;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  max-height: 420px;
  overflow: auto;
  color: #eee;
  font-size: 13px;
  line-height: 1.45;
}

/* ========== Scrollable Sections ========== */
.scrollable-section {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #2e2e3a;
  margin-bottom: 20px;
  border-radius: 12px;
  background: #2a2a3c;
  color: #eee;
}

.scrollable-section::-webkit-scrollbar { width: 8px; }
.scrollable-section::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 4px;
}

/* ===================== Dashboard UI Enhancements ===================== */

/* Sticky topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(30,30,47,0.92);
  backdrop-filter: blur(8px);

  border: 1px solid #2e2e3a;
  border-radius: 16px;

  padding: 16px 18px;
  margin: 12px 0 18px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;

  min-height: 78px;

  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.topbar:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.10);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  flex:0 0 auto;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
}

.brand-name{
  font-size:24px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.15px;
}

.brand-page{
  font-size:11px;
  color:#8f98aa;
  text-transform:uppercase;
  letter-spacing:0.10em;
}

.topbar-account{
  min-width:0;
}

.topbar-subline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:13px;
  color:#b8bfd0;
}

.topbar-welcome{
  color:#fff;
  font-weight:600;
}

.topbar-meta{
  color:#b8bfd0;
}

.topbar-meta--warn{
  color:#ffcf66;
}

.topbar-sep{
  color:#4e5568;
}

.button-outline{
  background: transparent;
  color: #d8dcea;
  border: 1px solid #465066;
  box-shadow: none;
}

.button-outline:hover{
  background:rgba(255,255,255,0.05);
  color:#fff;
}

.topbar-h1{
  font-size:18px;
  font-weight:700;
  color:#fff;
  line-height:1;
}

.topbar-sub{
  font-size:12px;
  color:#aaa;
  margin-top:4px;

  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Mini pills */
.mini-pills{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left:0;
  vertical-align:middle;
}
.mini-pill{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:#1e1e2f;
  border:1px solid #2e2e3a;
  color:#cfcfe6;
  white-space:nowrap;
}

/* IMPORTANT: flex so 5 buttons wrap cleanly (no weird grid stacking) */
.topbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  max-width: 520px;
}

/* Real dashboard logo size */
.topbar .topbar-logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  opacity: 1;
  flex: 0 0 auto;
}

/* ===================== Script card polish ===================== */
.script-card{
  background:#2a2a3c;
  border:1px solid #2e2e3a;
  border-radius:12px;
  padding:14px;
  margin-bottom:10px;
}

.script-card strong{
  font-size: 1.05rem;
  color: #fff;
}
.script-card em{ opacity: 0.7; }

.script-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.script-actions .button,
.script-actions button{
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* ===== Dashboard header split (Row 1 fixed, Row 2 normal) ===== */

.topbar--primary{
  position: sticky;
  top: 0;
  z-index: 60;
}

.topbar--secondary{
  position: relative;    /* not sticky */
  top: auto;
  z-index: 10;
}

/* Row 1 actions: only 2 buttons -> tighter */
.topbar-actions--primary{
  max-width: none;
  gap: 10px;
}

/* Row 2 stats + actions layout */
.topbar--secondary{
  margin-top: 10px;
}

.quick-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#aaa;
}

.topbar-actions--secondary{
  max-width: none;
  gap: 10px;
}

/* Make the two rows visually connected but distinct */
.topbar--primary{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.topbar--secondary{
  background: rgba(42,42,60,0.55);
  border: 1px solid #2e2e3a;
  backdrop-filter: blur(6px);
}

/* Optional: slightly smaller height for row 2 */
.topbar--secondary{
  min-height: 64px;
}

/* Responsive: stack row 2 nicely on small widths */
@media (max-width: 760px){
  .topbar{
    grid-template-columns: 1fr;
  }
  .topbar-actions{
    justify-content: flex-start;
  }
}

.mini-pill--email{
  opacity: 0.9;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== Generated Files table ===================== */
.gf-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;            /* vertical breathing between rows */
}

.gf-table thead th{
  text-align:left;
  padding: 10px 14px;
  color:#eaeaf5;
  font-weight:700;
  border-bottom: 1px solid #2e2e3a;
}

.gf-table tbody td{
  padding: 12px 14px;
  vertical-align: middle;
}

/* Add more spacing between columns (without breaking layout) */
.gf-col-date{ width: 180px; white-space: nowrap; }
.gf-col-script{ width: 45%; }
.gf-col-file{ width: 220px; }
.gf-col-size{ width: 90px; white-space: nowrap; }

/* Force Actions to the far right and keep buttons aligned nicely */
.gf-col-actions{
  width: 320px;
  text-align: right;                 /* pushes buttons to the far right */
  white-space: nowrap;
}

.gf-col-actions .button,
.gf-col-actions button{
  margin-left: 8px;                  /* spacing between action buttons */
}

/* ===== Section headers (title + Hide button) ===== */
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2e2e3a;
}

/* Remove border-bottom from h3 directly so section-title controls it */
h3.section-title{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}

/* Smaller, cleaner toggle button */
.section-toggle{
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: #1e1e2f;
  border: 1px solid #2e2e3a;
  color: #cfcfe6;
  line-height: 1.2;
  height: auto;
  transform: none;          /* prevents “jump” on hover */
}

.section-toggle:hover{
  filter: brightness(1.08);
  transform: none;
}

.section-toggle:active{
  filter: brightness(0.98);
  transform: none;
}

.legal-footer {
  margin: 36px auto 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  max-width: 1200px;
}

.legal-footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-footer__links a {
  color: #94a3b8;
  text-decoration: none;
}

.legal-footer__links a:hover,
.legal-footer__links a:focus {
  text-decoration: underline;
}

.legal-footer__sep {
  opacity: 0.7;
}

.legal-footer__copy {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

#upgradeModal a,
#upgradeModal a:visited {
  color: #ffffff;
  text-decoration: underline;
}

#upgradeModal a:hover,
#upgradeModal a:focus {
  color: #ffffff;
  opacity: 0.85;
}
/* ===================== Dashboard quick filters ===================== */
.dashboard-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.dashboard-filter-input {
  width: min(360px, 100%);
  max-width: 360px;
  margin-right: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #3a3a4d;
  background: #151522;
  color: #f5f5f5;
  font-size: 0.95rem;
}

.dashboard-filter-input::placeholder {
  color: #a8a8b8;
}

.dashboard-filter-empty {
  display: none;
  margin: 8px 0;
  color: #aaa;
  font-size: 0.9rem;
}

.recipe-preview-img {
  width: 118px;
  height: 88px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  flex: 0 0 auto;
}

.recipe-preview-placeholder {
  width: 118px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1f2f;
  color: #aaa;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.25);
  font-size: 0.82rem;
  flex: 0 0 auto;
}

.recipe-card-with-preview {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}