/* ============================================================
   cgit — Terminal Dark Theme (matches emmett1.my)
   Dark, monospace, minimal. Same palette as emmett1.my
   ============================================================ */

/* --- Design Tokens (from emmett1.my) --- */
:root {
  --bg:             #1e1e1e;
  --surface:        #252525;
  --surface-alt:    #2a2a2a;
  --border:         #393939;
  --border-light:   #333333;
  --text:           #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted:     #888888;
  --link:           #4ea1ff;
  --link-hover:     #7ab8ff;
  --accent:         #ffcc66;
  --accent-bg:      #2a2518;
  --header-bg:      #1a1a1a;
  --header-text:    #e0e0e0;
  --header-link:    #4ea1ff;
  --header-link-hover: #7ab8ff;
  --added:          #8bc34a;
  --added-bg:       #1e2a1a;
  --deleted:        #ef5350;
  --deleted-bg:     #2a1a1a;
  --hunk-bg:        #2a2a2a;
  --hunk-fg:        #b0b0b0;
  --shadow:         0 1px 3px rgba(0,0,0,0.25);
  --radius:         4px;
  --font-sans:      monospace;
  --font-mono:      monospace;
}

/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.12s ease;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* --- Wrapper --- */
#cgit {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* ============================================================
   HEADER TABLE
   ============================================================ */
table#header {
  width: 100%;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  border-collapse: collapse;
}

table#header td {
  padding: 8px 16px;
  color: var(--header-text);
  vertical-align: middle;
}

table#header td.logo {
  width: 56px;
  padding: 10px 14px;
  vertical-align: middle;
}

table#header td.logo img {
  width: 28px;
  height: 28px;
  filter: brightness(0.9);
}

table#header td.main {
  font-size: 14px;
}

table#header td.main a {
  color: var(--header-link);
}

table#header td.main a:first-child {
  color: var(--header-text);
  opacity: 0.65;
}

table#header td.main a:first-child:hover {
  opacity: 1;
  text-decoration: none;
}

table#header td.main a:hover {
  color: var(--header-link-hover);
  text-decoration: none;
}

table#header td.sub {
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 0;
}

table#header td.form {
  text-align: right;
  white-space: nowrap;
}

table#header td.form form {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

table#header select,
table#header input[type="search"],
table#header input[type="text"] {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

table#header select {
  cursor: pointer;
}

table#header select option {
  color: var(--text);
  background: var(--surface);
}

table#header input[type="search"]:focus,
table#header input[type="text"]:focus {
  border-color: var(--link);
}

table#header input[type="submit"] {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

table#header input[type="submit"]:hover {
  background: #333;
  border-color: #555;
}

/* ============================================================
   TABS NAVIGATION
   ============================================================ */
table.tabs {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-collapse: collapse;
}

table.tabs td {
  padding: 0;
  vertical-align: middle;
}

table.tabs td:first-child {
  padding: 0 4px;
}

table.tabs a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

table.tabs a:hover {
  color: var(--text);
  background: var(--surface-alt);
  text-decoration: none;
}

table.tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

table.tabs td.form {
  text-align: right;
  padding: 4px 8px;
}

table.tabs td.form form {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

table.tabs select {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: monospace;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

table.tabs input.txt,
table.tabs input[type="search"] {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: monospace;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease;
  width: 150px;
}

table.tabs input.txt:focus,
table.tabs input[type="search"]:focus {
  border-color: var(--link);
}

table.tabs input[type="submit"] {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

table.tabs input[type="submit"]:hover {
  background: #333;
  border-color: #555;
  color: var(--text);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
div.content {
  margin-top: 16px;
}

/* ============================================================
   DATA TABLES (.list)
   ============================================================ */
table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}

table.list tr {
  transition: background 0.08s ease;
}

table.list tr:hover {
  background: var(--surface-alt);
}

/* Section headers (nohover rows) */
table.list tr.nohover {
  background: var(--surface-alt);
}

table.list tr.nohover:hover {
  background: var(--surface-alt);
}

table.list tr.nohover th {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}

table.list tr.nohover th a {
  color: var(--text-secondary);
}

table.list tr.nohover th a:hover {
  color: var(--text);
  text-decoration: none;
}

table.list td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

table.list tr:last-child td {
  border-bottom: none;
}

/* Column alignment helpers */
table.list td.right, table.list th.right {
  text-align: right;
}

table.list.nowrap td {
  white-space: nowrap;
}

/* Repo list name column */
table.list td.toplevel-repo a {
  font-weight: 700;
  font-size: 14px;
}

/* Commit graph column */
table.list td.commitgraph {
  padding: 2px 4px;
  width: 80px;
}

table.list td.commitgraph img {
  vertical-align: middle;
}

/* File size column (tree view) */
table.list td.filesize {
  text-align: right;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* SHA1 links */
td.sha1 a {
  font-size: 13px;
}

/* Mode column (diffstat) */
td.mode {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   AGE SPANS
   ============================================================ */
span.age-mins,
span.age-hours,
span.age-days,
span.age-weeks,
span.age-months,
span.age-years {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================
   COMMIT INFO TABLE
   ============================================================ */
table.commit-info {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 16px;
}

table.commit-info th {
  text-align: left;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: 1%;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

table.commit-info td {
  padding: 6px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}

table.commit-info tr:last-child th,
table.commit-info tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   COMMIT SUBJECT / MESSAGE
   ============================================================ */
div.commit-subject {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  padding: 10px 0 4px 0;
}

div.commit-msg {
  color: var(--text-secondary);
  padding-bottom: 10px;
  white-space: pre-wrap;
  font-size: 13px;
}

/* ============================================================
   DECORATIONS (branch/tag badges, HEAD marker)
   ============================================================ */
span.decoration {
  margin-left: 10px;
  display: inline-flex;
  gap: 5px;
  vertical-align: middle;
  align-items: center;
}

a.deco,
a.branch-deco,
a.tag-deco {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: opacity 0.12s ease;
}

a.deco:hover,
a.branch-deco:hover,
a.tag-deco:hover {
  text-decoration: none;
  opacity: 0.8;
}

a.deco {
  background: #3d2e1a;
  color: #ffcc66;
}

a.branch-deco {
  background: #1e2a1a;
  color: #8bc34a;
}

a.tag-deco {
  background: #1a2430;
  color: #4ea1ff;
}

/* ============================================================
   DIFFSTAT
   ============================================================ */
table.diffstat {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 8px;
}

table.diffstat td {
  padding: 6px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}

table.diffstat tr:last-child td {
  border-bottom: none;
}

table.diffstat td.graph {
  width: 100px;
}

table.diffstat td.graph table {
  border-collapse: collapse;
  height: 8px;
}

table.diffstat td.graph td.add {
  background: var(--added);
  border-radius: 2px 0 0 2px;
}

table.diffstat td.graph td.rem {
  background: var(--deleted);
}

table.diffstat td.graph td.none {
  background: var(--border-light);
  border-radius: 0 2px 2px 0;
}

table.diffstat td.upd a {
  font-size: 13px;
}

div.diffstat-header {
  padding: 8px 0 6px 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

div.diffstat-header a {
  color: var(--text);
}

div.diffstat-summary {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -1px;
  margin-bottom: 16px;
}

/* ============================================================
   DIFF VIEW
   ============================================================ */
table.diff {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.55;
}

table.diff td {
  padding: 0;
}

/* Diff file header */
div.head {
  padding: 8px 14px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

div.head a {
  color: var(--link);
}

/* Hunk header (@@ ... @@) */
div.hunk {
  padding: 4px 14px;
  background: var(--hunk-bg);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Context line */
div.ctx {
  padding: 1px 14px;
  color: var(--text);
}

/* Added line */
div.add {
  padding: 1px 14px;
  background: var(--added-bg);
  color: var(--added);
}

/* Deleted line */
div.del {
  padding: 1px 14px;
  background: var(--deleted-bg);
  color: var(--deleted);
}

/* ============================================================
   CGIT PANEL (diff options, etc.)
   ============================================================ */
div.cgit-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

div.cgit-panel b {
  font-size: 14px;
}

div.cgit-panel table {
  margin-top: 6px;
  border-collapse: collapse;
}

div.cgit-panel td.label {
  padding: 4px 8px 4px 0;
  color: var(--text-secondary);
  font-size: 13px;
}

div.cgit-panel td.ctrl select {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: monospace;
  background: var(--surface-alt);
  color: var(--text);
}

/* ============================================================
   PAGER
   ============================================================ */
ul.pager {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 20px 0;
  padding: 0;
}

ul.pager a,
ul.pager span {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--link);
  font-size: 13px;
  font-family: monospace;
  transition: background 0.12s ease, border-color 0.12s ease;
}

ul.pager a:hover {
  background: var(--surface-alt);
  border-color: var(--link);
  text-decoration: none;
}

ul.pager span {
  color: var(--text-muted);
  background: var(--surface-alt);
}

/* ============================================================
   BLOB VIEW (source code)
   ============================================================ */
table.blob {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}

table.blob td {
  padding: 0;
}

table.blob td.linenumbers {
  width: 1%;
  text-align: right;
  padding: 2px 10px 2px 14px;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-right: 1px solid var(--border-light);
  user-select: none;
  font-size: 12px;
}

table.blob td.linenumbers a {
  color: var(--text-muted);
}

table.blob td.linenumbers a:hover {
  color: var(--text);
  text-decoration: none;
}

table.blob td.lines {
  padding: 2px 14px;
  white-space: pre;
}

/* ============================================================
   SYNTAX HIGHLIGHTING
   ============================================================ */
.num { color: #ef5350; }
.str, .esc { color: #8bc34a; }
.sym { color: #ba68c8; }
.kwa, .kwb, .kwc, .kwd { color: #4ea1ff; font-weight: 700; }
.com { color: #666; font-style: italic; }
.fnc { color: #ba68c8; font-weight: 700; }

/* ============================================================
   HEADINGS INSIDE CONTENT
   ============================================================ */
div.content h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 16px 0 8px 0;
}

div.content h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 12px 0 6px 0;
}

/* ============================================================
   ABOUT / README
   ============================================================ */
div#readme, div.about {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
  overflow-x: auto;
  line-height: 1.6;
  color: var(--text);
}

div#readme code, div.about code {
  background: #333;
  color: #ffcc66;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

div#readme pre code, div.about pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
div.footer {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

div.footer a {
  color: var(--text-muted);
}

div.footer a:hover {
  color: var(--link);
}

/* ============================================================
   EMPTY / SPACER ROWS
   ============================================================ */
table.list tr.nohover td[colspan] {
  background: var(--surface-alt);
  padding: 4px 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  #cgit {
    padding: 10px;
  }

  table#header td {
    padding: 6px 8px;
  }

  table#header td.logo {
    padding: 6px 8px;
    width: 40px;
  }

  table#header td.logo img {
    width: 22px;
    height: 22px;
  }

  table#header td.form form {
    flex-wrap: wrap;
    gap: 4px;
  }

  table.tabs a {
    padding: 6px 10px;
    font-size: 12px;
  }

  table.list th,
  table.list td {
    padding: 5px 8px;
    font-size: 12px;
  }

  table.list tr.nohover th {
    padding: 7px 10px;
    font-size: 11px;
  }
}