/* LordX – Dark UI (GitHub-like) */
/* ------------------------------------------------------------ */
:root{
  --bg:#0d1117;
  --surface:#161b22;
  --surface-2:#0f141b;
  --muted:#8b949e;
  --text:#c9d1d9;

  --border:#30363d;
  --accent:#2f81f7;
  --accent-600:#1f6feb;

  --green:#2ea043;
  --red:#f85149;
  --yellow:#d29922;

  --shadow:0 1px 0 rgba(240,246,252,0.08);

  /* Progress bar brand colors (customize if you like) */
  /* YouTube-ish: #ff0033 → #ff6a00  |  Instagram-ish: #f09433 → #bc1888 */
  --progress-start: var(--accent);
  --progress-end: var(--accent-600);
}

/* Base / Typography */
/* ------------------------------------------------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-600); text-decoration:underline; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* Layout */
/* ------------------------------------------------------------ */
.container{ max-width:1100px; margin:0 auto; padding:24px; }

.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.topbar .inner{
  display:flex; align-items:center; gap:16px;
  max-width:1100px; margin:0 auto; padding:10px 16px;
}
.brand{ font-weight:700; color:#fff; text-decoration:none; margin-right:8px; }
.nav a{ color:var(--text); margin-right:12px; }
.nav a:hover{ color:#fff; }
.spacer{ flex:1; }
.hidden{ display:none !important; }

/* Cards & Sections */
/* ------------------------------------------------------------ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:18px;
}
.card + .card{ margin-top:16px; }

.section-title{
  font-weight:700;
  margin:12px 0 8px;
}

/* Tables */
/* ------------------------------------------------------------ */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.table th{
  background:var(--surface-2);
  text-align:left;
  color:#9fb1c1;
  font-weight:600;
}
.table tr:last-child td{ border-bottom:0; }
.table tr:hover td{ background:#12161d; }
.table a{ color:#9cc1ff; }

/* Buttons */
/* ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:#21262d; color:#dae0e6;
  border-radius:8px; padding:8px 12px; cursor:pointer;
  text-decoration:none;
}
.btn:hover{ background:#262b32; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary{ background:var(--accent); border-color:var(--accent); color:white; }
.btn-primary:hover{ background:var(--accent-600); }

.btn-danger{ background:#3b0d10; border-color:#722; color:#ffb3b3; }
.btn-outline{ background:transparent; }

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{
  background:#1b222c;
}

.btn-sm{ padding:4px 8px; font-size:12px; }

/* Badges / Pills */
/* ------------------------------------------------------------ */
.pill{
  display:inline-block;
  background:#0b1220;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px; color:var(--muted);
}
.badge{
  display:inline-block;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:6px;
  background:#0f141b;
  color:#b1c3d6;
  font-size:12px;
}

/* Forms */
/* ------------------------------------------------------------ */
.input,.select,textarea{
  width:100%;
  background:#0f141b;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:10px;
}
.input::placeholder, textarea::placeholder{ color:#728097; }
label{ display:block; margin:10px 0 6px; color:#a9b3bd; }

/* Alerts */
/* ------------------------------------------------------------ */
.alert{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  margin-bottom:12px;

  /* keep long SQL / stack traces inside the card */
  white-space: pre-wrap;     /* preserve newlines but wrap long lines */
  word-break: break-word;    /* break long tokens */
  overflow: auto;            /* scroll if still too big */
  max-width: 100%;
  max-height: 240px;
}
.alert-success{ background:#10261a; border-color:#2e8b57; color:#b9f0ca; }
.alert-danger{  background:#2a1313; border-color:#6a1f1f; color:#ffc1c1; }

/* Utilities */
/* ------------------------------------------------------------ */
.small{ font-size:12px; color:var(--muted); }
.muted{ color:var(--muted); }
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre; overflow:auto;
}
.row{ display:flex; gap:12px; align-items:center; }
.right{ margin-left:auto; }

/* Repo list / browser specifics */
/* ------------------------------------------------------------ */
.list-inline{ display:flex; gap:12px; flex-wrap:wrap; }

.breadcrumbs{ margin-bottom:10px; }
.breadcrumbs a{ color:#9cc1ff; }
.breadcrumbs .sep{ color:var(--muted); margin:0 6px; }

/* Editor page bits (shared so Turbo navs don’t lose styles) */
/* ------------------------------------------------------------ */
.toolbar{ display:flex; gap:10px; align-items:center; margin:10px 0; }
.toolbar .spacer{ flex:1; }
#editor{
  height:70vh;
  border:1px solid var(--border);
  border-radius:10px;
}
.status{ margin-top:8px; color:var(--muted); }

/* Turbo progress bar */
/* ------------------------------------------------------------ */
/* Turbo injects <turbo-progress-bar class="turbo-progress-bar"> */
turbo-progress-bar,
.turbo-progress-bar{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--progress-start), var(--progress-end));
  box-shadow:0 0 8px rgba(47,129,247,0.35);
  z-index:10000; /* above sticky header */
}

/* Footer / minor */
.footer{ color:var(--muted); font-size:12px; padding:16px; text-align:center; border-top:1px solid var(--border); }

/* --- DB table fixes & inline editing ------------------------------------ */

/* Treat the outer .table div as a scroll container on the DB pages */
div.table{
  overflow-x: auto !important;   /* allow horizontal scroll */
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;                    /* no extra padding, the table cells have it */
}

/* The actual <table class="table"> inside the wrapper */
div.table > table.table{
  width: max-content;            /* expand to fit all columns; scroll container handles overflow */
  min-width: 900px;              /* reasonable floor so small tables look fine */
  border-collapse: collapse;
}

/* Normal cell styling (reuse previous style but target cells explicitly) */
div.table > table.table th,
div.table > table.table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
div.table > table.table th{
  background:#0f141b;
  text-align:left;
  color:#9fb1c1;
  font-weight:600;
}

/* Code blocks in cells */
div.table > table.table td .code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space: pre;              /* keep formatting */
  max-height: 180px;             /* prevent super-tall cells */
  overflow: auto;                /* per-cell scroll for long text */
}

/* Inline editable cell */
.editable[contenteditable="true"]{
  border: 1px dashed transparent;
  border-radius: 6px;
  padding: 3px 6px;
}
.editable[contenteditable="true"]:focus{
  outline: none;
  border-color: var(--accent);
  background: #0f141b;
}

/* Small status pill shown on DB pages (already used) */
.pill.small{ font-size:12px; }

/* End of LordX stylesheet */