/* Fonts */
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Nerd-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Nerd-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Nerd-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

:root {
  --font-main: "JetBrainsMono Nerd Font", Menlo, DejaVu Sans Mono, monospace;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  font-family: var(--font-main);
  color: var(--fg);
  background-color: var(--bg);
  font-size: 1rem;
  line-height: 1.54;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: none;
  color: var(--accent);
  transition: color 0.2s;
  &:hover {
    text-decoration: underline;
    color: var(--secondary);
  }
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-height: 100vh;
}

@media (max-width: 900px) {
  .container {
    border: none;
    max-width: 100%;
  }
}

@media (max-width: 684px) {
  .container {
    padding: 20px;
  }

  body {
    font-size: 1rem;
  }
}

/* Navigation Styling */
.menu {
  margin-top: 15px;
}

.menu-inner {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-inner li {
  flex: 0 0 auto;
}

.menu-inner li:not(:last-child) {
  margin-right: 20px;
}

.menu-inner li a {
  font-weight: bold;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  &:hover {
    color: var(--secondary);
  }
}

/* Header */
.header {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 2rem;
  width: 100%;
}

.header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Bars */
.header-logo {
  display: flex;
  flex: 1;
  align-items: center;
}

.header-logo::after {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  margin: 0px 0px 0px 10px;
  background: linear-gradient(
    90deg,
    var(--accent) 0% 12%,
    transparent 12% 50%,
    var(--secondary) 50% 62%,
    transparent 62%
  );
  background-position: left center;
  background-repeat: repeat-x;
  background-size: 40px 100%;
}

/* Button */
.header-logo a {
  flex: 0 0 auto;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--bg);
  background-color: var(--accent);
  padding: 5px 10px;
  border-radius: 3px;

  &:hover {
    color: var(--secondary);
    text-decoration: none;
  }

  &:focus {
    outline: dotted 2px var(--fg);
  }
}

@media (max-width: 684px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-logo {
    width: 100%;
    margin-bottom: 15px;
  }

  .header-logo::after {
    margin: 0px 15px 0px 10px;
  }

  .menu-inner {
    flex-direction: column;
    width: 100%;
  }

  .menu-inner li {
    margin-right: 0;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--bg-hover);
  }
}

/* Repo Header */
#repo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.repo-title h1 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.2;
}

.repo-title .desc {
  font-size: 0.9em;
  margin-top: 0.2rem;
  color: var(--fg-dim);
}

#repo-header .url {
  font-family: var(--font-main);
  background-color: var(--bg-code);
  padding: 0.5em 0.8em;
  border-radius: 3px;
  font-size: 0.9em;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
}

@media (max-width: 684px) {
  #repo-header .url {
    overflow-x: auto;
  }
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 800px;
}

@media (max-width: 684px) {
  table {
    display: block;
    overflow-x: auto;
    width: 100%;
    min-width: 0;
  }
}

td,
th {
  padding: 0.25em 0.5em;
  text-align: left;
  border: 1px solid var(--bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td:empty {
  border: none;
  background: transparent !important;
}

tbody:not(#blob tbody) tr:hover td {
  background-color: var(--bg-hover);
}

th {
  font-weight: bold;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

/* --- Page-specific sizing --- */

/* Index Page */
#index td:nth-child(1) {
  /* Name */
  width: 7em;
  font-weight: bold;
}
#index td:nth-child(2) {
  /* Description */
  width: auto;
}
#index td:nth-child(3) {
  /* Owner */
  width: 5em;
  text-align: center;
}
#index td:nth-child(4) {
  /* Last Commit */
  width: 11em;
}

/* Log Page */
#log td:nth-child(1) {
  /* Date */
  width: 11em;
}
#log td:nth-child(2) {
  /* Message */
  width: auto;
}
#log td:nth-child(3) {
  /* Author */
  width: 6em;
}
#log td:nth-child(4) {
  /* Files */
  width: 5em;
  text-align: right;
}
#log td:nth-child(5),
#log td:nth-child(6) {
  /* +/- */
  width: 4em;
  text-align: right;
  text-overflow: clip;
}

/* Files Page */
#files td:nth-child(1) {
  /* Mode */
  width: 8em;
}
#files td:nth-child(2) {
  /* Name */
  width: auto;
}
#files td:nth-child(3) {
  /* Size */
  width: 6em;
  text-align: right;
}

/* Refs Page */
#branches td:nth-child(1),
#tags td:nth-child(1) {
  /* Name */
  width: auto;
}
#branches td:nth-child(2),
#tags td:nth-child(2) {
  /* Date */
  width: 11em;
}
#branches td:nth-child(3),
#tags td:nth-child(3) {
  /* Author */
  width: 10em;
}

/* Diffstat Table */
#diffstat td:nth-child(1) {
  /* Status */
  width: 2em;
  text-align: center;
  padding: 0.25em 0;
}
#diffstat td:nth-child(2) {
  /* Filename */
  width: auto;
}
#diffstat td:nth-child(3) {
  /* Separator */
  width: 2em;
  text-align: center;
  color: var(--fg-dim);
}
#diffstat td:nth-child(4) {
  /* Changes */
  width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#diffstat td:nth-child(5) {
  /* +/- */
  width: auto;
  color: var(--fg-dim);
}

/* Code Blocks */
pre {
  font-family: var(--font-main);
  padding: 0.8em;
  overflow: auto;
  background-color: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
}

/* Diff (File View) */
.i {
  color: var(--diff-add);
  &:hover {
    color: var(--diff-add);
  }
}
.d {
  color: var(--diff-del);
  &:hover {
    color: var(--diff-del);
  }
}
.h {
  color: var(--diff-mod);
  &:hover {
    color: var(--diff-mod);
  }
}
pre span.i,
pre span.d,
pre span.h {
  font-weight: bold;
}

/* Status (Log View) */
.A {
  color: var(--diff-add);
  font-weight: bold;
}
.D {
  color: var(--diff-del);
  font-weight: bold;
}
.M {
  color: var(--diff-mod);
  font-weight: bold;
}
.R {
  font-weight: bold;
}

/* Blob View */
#blob a {
  color: var(--fg-dim);
  &:hover {
    color: var(--fg);
    text-decoration: none;
  }
}

/* Metadata */
.desc {
  color: var(--fg-dim);
  display: block;
  margin-top: 0.2rem;
}

/* Commits Remaining */
#log-msg {
  text-align: center;
  padding: 1em 0.5em;
  font-weight: bold;
  color: var(--fg-dim);
  border-top: 1px solid var(--border-subtle);
}

/* --- Syntax Highlighting --- */

#blob table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-main);
  background-color: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  margin-top: 0;
  display: table;
  table-layout: fixed;
}

@media (max-width: 684px) {
  #blob table {
    display: block;
    overflow-x: auto;
  }
}

#blob td {
  padding: 0 0.5em;
  vertical-align: top;
  line-height: 1.5;
  border: none;
}

/* Line Numbers */
#blob td.linenos {
  width: 4em;
  text-align: right;
  border-right: 1px solid var(--border-subtle);
  background-color: var(--bg-hover);
  color: var(--fg-dim);
  user-select: none;
  white-space: nowrap;
}

#blob .highlight span[id^="line-"] {
  display: block;
  width: 100%;
  &:hover {
    background-color: var(--bg-hover);
  }
}

/* Code Content */
#blob td.code {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
  padding-left: 1em;
}

#blob td.linenos pre,
#blob td.code pre {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  font-family: inherit;
}

/* --- Syntax Colors --- */
.highlight {
  color: var(--fg);
}

/* Comments */
.highlight .c,
.highlight .ch,
.highlight .cm,
.highlight .cp,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: var(--fg-dim);
  font-style: italic;
}

/* Keywords */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--accent-alpha-70);
  font-weight: bold;
}

/* Strings */
.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .s1,
.highlight .ss {
  color: var(--fg);
}

/* Numbers */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo {
  color: var(--accent-alpha-70);
}

/* Types / Classes / Namespaces */
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ne,
.highlight .nl {
  color: var(--secondary);
  font-weight: bold;
}

/* Variables */
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: var(--secondary);
}

/* Functions */
.highlight .nf,
.highlight .fm {
  color: var(--secondary);
}

/* Tags */
.highlight .nt {
  color: var(--accent-alpha-70);
}

/* Attributes */
.highlight .na {
  color: var(--secondary);
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: var(--accent-alpha-70);
}

/* Diffs */
.highlight .gd {
  color: var(--diff-del);
}
.highlight .gi {
  color: var(--diff-add);
}

/* -- Markdown render -- */
#content h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.2em;
  font-style: oblique;
}

/* GFM Alerts*/
.admonition {
  margin: 1.5em 0;
  padding: 12px;
  border-left: 3px solid var(--secondary);
  background-color: var(--secondary-alpha-20);
  border-radius: 0 3px 3px 0;
  page-break-inside: avoid;
  font-family: var(--font-main);
}

.admonition .admonition-title {
  margin: 0 0 8px 0;
  color: var(--accent);
  align-items: center;
  display: flex;
  font-size: 0.95em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admonition > p:last-child {
  margin-bottom: 0;
}

.admonition .admonition-title::before {
  margin-right: 8px;
  font-size: 1.2em;
}

.admonition.note .admonition-title::before {
  content: "ℹ";
}

.admonition.tip .admonition-title::before {
  content: "";
}

.admonition.important .admonition-title::before {
  content: "!";
}

.admonition.warning .admonition-title::before {
  content: "";
}

.admonition.danger .admonition-title::before {
  content: "";
}

:root {
  --bg: #221f29;
  --fg: whitesmoke;
  --fg-dim: #888888;
  --border: rgba(255,255,255,0.1);
  --border-subtle: rgba(255, 255, 255, 0.05);

  /* Theme Colors */
  --accent: #ff6266;
  --accent-alpha-70: rgba(255, 98, 102, 0.7);
  --secondary: #23b0ff;
  --secondary-alpha-20: rgba(35, 176, 255, 0.2);
  --secondary-alpha-70: rgba(35, 176, 255, 0.7);
  --bg-hover: rgba(255, 255, 255, 0.03);
  --bg-code: rgba(0, 0, 0, 0.2);
  --diff-add: #23b0ff;
  --diff-del: #ff6266;
  --diff-mod: #e59c19;
}