/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === Top Following Bar (Light Variant, Reinterpreted for Dark Theme) === */
.following.bar.light {
  background: var(--color-menu);
  border-bottom: 1px solid var(--color-box-body);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 100;
  padding: 6px 12px;
}

/* === Footer Fade on Hover (for Minimalist Feel) === */
footer {
  opacity: 0.5;
  transition: opacity 0.2s ease, filter 0.2s ease;
  font-size: 13px;
  color: var(--color-text-muted);
  background-color: var(--color-footer);
  padding: 1em 2em;
}

footer:hover {
  opacity: 0.9;
  filter: brightness(1.05);
}

/* === Active Menu Items in Dashboard Navigation === */
.dashboard.feeds .right.stackable.menu > .item.active,
.dashboard.issues .right.stackable.menu > .item.active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary);
  background-color: var(--color-box-body);
}

/* === Repository File Rows === */
.repository.file.list #repo-files-table tr {
  background: var(--color-box-header);
  transition: background-color 0.2s ease;
}

.repository.file.list #repo-files-table tr:hover {
  background-color: var(--color-box-body);
}

/* === Clone Panel Input Field (Read-Only URL Box) === */
.repository #clone-panel input {
  background-color: var(--color-box-body);
  color: var(--color-text-light-2);
  text-overflow: ellipsis;
  overflow: hidden;
  border: 1px solid var(--color-secondary-alpha-50);
  font-family: monospace;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
}

/* === Repository File Table Headers === */
.repository.file.list #repo-files-table thead th {
  background-color: var(--color-box-body);
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-secondary-alpha-50);
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
}


:root {
  color-scheme: dark;
  --is-dark-theme: true;

  /* Base Color Blocks */
  --black-color: #000000;
  --color-body: #0d1117;
  --color-card: #0d1117;
  --color-box-header: #0d1117;
  --color-box-body: #161b22;
  --color-active: #262c36;
  --color-menu: #010409;
  --color-navbar: #010409;
  --color-nav-bg: #010409;
  --color-footer: #0d1117;
  --color-header-wrapper: #010409;
  --color-input-background: #010409;

  /* Diff States */
  --color-diff-removed-row-bg: rgba(248, 81, 73, 0.15);
  --color-diff-added-row-bg: rgba(46, 160, 67, 0.15);
  --color-expand-button: rgba(44, 130, 255, 0.4);
  --color-diff-inactive: rgba(24, 24, 26, 0.1);

  /* === ACCESSIBLE ELECTRIC BLUE === */
  --color-primary: #2677ff;              /* Softer electric blue */
  --color-primary-dark-1: #1f66dd;
  --color-primary-dark-2: #1b5ac2;
  --color-primary-dark-3: #174fa8;
  --color-primary-dark-4: #14448f;
  --color-primary-dark-5: #103a76;

  --color-primary-light-1: #4f8dff;
  --color-primary-light-2: #6fa1ff;
  --color-primary-light-3: #92b5ff;
  --color-primary-light-4: #b4caff;
  --color-primary-light-5: #d5e0ff;
  --color-primary-light-6: #9bb9ff;

  --color-primary-light-extra: #eaf2ff;

  /* === Electric Blue Alphas === */
  --color-primary-alpha-10: rgba(38, 119, 255, 0.10);
  --color-primary-alpha-20: rgba(38, 119, 255, 0.20);
  --color-primary-alpha-30: rgba(38, 119, 255, 0.30);
  --color-primary-alpha-40: rgba(38, 119, 255, 0.40);
  --color-primary-alpha-50: rgba(38, 119, 255, 0.50);
  --color-primary-alpha-60: rgba(38, 119, 255, 0.60);
  --color-primary-alpha-70: rgba(38, 119, 255, 0.70);
  --color-primary-alpha-80: rgba(38, 119, 255, 0.80);
  --color-primary-alpha-90: rgba(38, 119, 255, 0.90);

  /* === Secondary & UI === */
  --color-secondary: #30363d;
  --color-secondary-alpha-50: rgba(33, 38, 45, 0.5);
  --color-secondary-alpha-60: rgba(22, 27, 34, 0.6);
  --color-secondary-dark-7: #9198a1;

  --color-text: #e6edf3;
  --color-text-light: #f0f6fc;
  --color-text-light-2: #c9d1d9;
  --color-text-muted: #7d8590;
  --color-input-text: #e6edf3;

  --color-error-text: #f85149;
  --color-error-border: rgba(248, 81, 73, 0.5);
  --color-hover: rgba(177, 186, 196, 0.12);
  --color-nav-hover-bg: rgba(177, 186, 196, 0.12);

  --color-button: #212830;
  --color-button-hover: #2c3640;
  --color-button-red: #d23636;
  --color-button-hover-red: #e35353;
  --color-button-border: #3d444d;

  --color-green-label: #238636;
  --color-green-label-hover: #2ea043;
  --color-green-badge: #2ea043;

  --color-label-bg: #21262d;
  --color-label-hover-bg: rgba(177, 186, 196, 0.12);
  --color-label-text: #e6edf3;

  --color-caret: #e6edf3;
  --color-active-line: #222c40;

  /* Markup & Code Blocks */
  --color-markup-code-inline: #1e2329;
  --color-markup-code-block: #151b23;

  --color-input-border: #30363d;
  --color-input-border-hover: #4f7dff;
}


.overflow-menu-items > a > svg {
  color: var(--color-text-muted);
  fill: var(--color-text-muted);
}

.ui.menu {
  margin: 0;
}
.ui.menu .item:hover {
  background-color: var(--color-primary-alpha-10);
  border-left: 2px solid var(--color-primary-light-2);
  transition: background 0.15s ease-in-out, border-left 0.15s ease-in-out;
}


.navbar-left {
  flex: 1 1 auto;
}
#navbar {
  min-height: 64px;
}
.navbar-right {
  flex: 0 1 auto;
  padding-right: 11px;
}
.ui.secondary.menu {
  margin-left: 0;
  margin-right: 0;
}
.labels > .ui.label {
  height: 20px;
  line-height: 0.6;
  border-radius: 10px !important;
  background-color: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-text-muted);
  padding: 2px 8px;
}

.tippy-box {
  color: var(--color-text);
  background-color: var(--color-box-body) !important;
  border: 1px solid var(--color-secondary-alpha-60);
}

/* .tippy-svg-arrow-outer {
  fill:var(--color-text-muted) !important;
} */
.tippy-svg-arrow-inner {
  fill: var(--color-text-muted) !important;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {
  background: var(--color-box-header);
}
.repository.file.list #repo-files-table tr:hover {
  background-color: var(--color-box-body);
}
.repository.new.issue .comment.form .content::after {
  border-right-color: var(--color-body);
}
.ui.segment .ui.tabular.menu .active.item,
.ui.segment .ui.tabular.menu .active.item:hover {
  background: var(--color-body);
}
markdown-toolbar svg {
  color: var(--color-text-muted);
}
markdown-toolbar svg:hover {
  color: var(--color-primary);
}
.ui.tabular.menu .active.item {
  margin-bottom: -1px;
  border-bottom: 2px solid var(--color-primary-light-2);
}

.ui.grey.labels .label,
.ui.grey.label {
  background-color: #2d2d2d;
  color: var(--color-text-light-2);
}
.ui.red.labels .label,
.ui.red.label {
  background-color: var(--color-error-text);
  color: #fff;
}

.ui.secondary.menu .item {
  transition: color 0.1s ease, background 0.1s ease;
}

.feeds .list ul li.private {
  background: var(--color-input-background) no-repeat 0% 0%;
}
.ui.green.button,
.ui.green.buttons .button {
  background-color: var(--color-green-label);
  color: #fff;
  transition: background 0.15s ease-in-out, box-shadow 0.2s ease;
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
  background-color: var(--color-green-label-hover);
  box-shadow: 0 0 6px var(--color-green-badge);
}
/* === Red Buttons === */
.ui.red.button,
.ui.red.buttons .button {
  background-color: var(--color-button-red);
  color: #fff;
  transition: background 0.15s ease-in-out, box-shadow 0.2s ease;
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
  background-color: var(--color-button-hover-red);
  box-shadow: 0 0 6px rgba(255, 80, 80, 0.5);
}

/* === Green Labels === */
.ui.green.label,
.ui.green.labels .label,
.ui.basic.green.label {
  background-color: var(--color-green-label);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}

/* === Code Block Tagging (Chroma or Diff UI) === */
.tag-code,
.tag-code td {
  background: rgba(56, 139, 253, 0.15) !important;
  color: var(--color-text);
}
.tag-code td.lines-num {
  background-color: rgba(56, 139, 253, 0.4) !important;
}
/* === General Table Styling (for code diffs) === */
table.chroma > tbody,
tr.same-code {
  background-color: var(--color-box-body); /* previously footer, now more readable */
}
/* === Inline code background inside diffs === */
.lines-code {
  background-color: var(--color-diff-inactive);
  color: var(--color-text);
}
tr.same-code {
  background-color: var(--color-footer);
}
.lines-code {
  background-color: var(--color-diff-inactive);
}
/* === Added Code Rows === */
tr.add-code > td:nth-child(1),
tr.add-code > td:nth-child(2) {
  background-color: rgba(63, 185, 80, 0.3);
  border-left: 3px solid #3fb950;
}
tr.add-code > td:nth-child(1) {
  background-color: rgba(63, 185, 80, 0.3);
}
tr.add-code > td:nth-child(2) {
  background-color: rgba(63, 185, 80, 0.3);
}
tr.del-code > td:nth-child(1) {
  background-color: rgba(248, 81, 73, 0.3);
}
tr.del-code > td:nth-child(2) {
  background-color: rgba(248, 81, 73, 0.3);
}
tr.add-code:hover,
tr.del-code:hover {
  box-shadow: inset 0 0 0 1px var(--color-text-muted);
}


/* === SHA Label === */
.ui.primary.sha.label {
  background-color: var(--color-primary-alpha-30) !important;
  color: var(--color-text-light-2);
  font-family: monospace;
  border: 1px solid var(--color-primary-alpha-70);
  border-radius: 3px;
  padding: 2px 6px;
}
.ui.primary.sha.label:hover {
  background-color: var(--color-primary-alpha-50) !important;
}

/* === Diff Line Highlighting (Add/Delete blocks) === */
.lines-num.lines-num-old.del-code,
.lines-type-marker.lines-type-marker-old.del-code,
.lines-num.lines-num-old,
.lines-type-marker.lines-type-marker-old {
  background-color: rgba(248, 81, 73, 0.3) !important;
  border-left: 2px solid rgba(248, 81, 73, 0.6);
}

.lines-num.lines-num-new.add-code,
.lines-type-marker.lines-type-marker-new.add-code,
.lines-num.lines-num-new,
.lines-type-marker.lines-type-marker-new {
  background-color: rgba(63, 185, 80, 0.3) !important;
  border-left: 2px solid rgba(63, 185, 80, 0.6);
}
/* === Padding tweak for line markers (diff view) === */
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
  padding-right: 8px !important;
}

/* === Sticky issue metadata panel on wide screens === */
@media only screen and (min-width: 768px) {
  .issue .ui.segment.metas {
    position: sticky;
    top: 25px;
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 40px;
    border-left: 1px solid var(--color-secondary-alpha-50);
    background-color: var(--color-box-header);
  }
}

/* === Labels in issue list (hover polish) === */
.issue-item-top-row .ui.label {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.2em 0.5em;
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.issue-item-top-row .ui.label:hover {
  opacity: 1;
  transform: scale(1.03);
}
/* === Text selection (code/text highlight) === */
::selection,
::-moz-selection {
  background: #1953ac !important; /* Dark electric blue */
  color: #ffffff;
}
::selection {
  background: #1953ac !important;
}
.feeds .list .repo-owner-name-list .item-name {
  max-width: 90% !important;
}
/* === Feed list truncation control */
.feeds .list .repo-owner-name-list .item-name {
  max-width: 90% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Deleted Text Styles (Markdown or Diff Context) === */
del {
  opacity: 0.7;
  color: var(--color-text-muted);
  text-decoration-color: var(--color-error-text);
  text-decoration-thickness: 2px;
  transition: opacity 0.15s ease;
}

h1 > del {
  text-decoration-thickness: 5px;
}
h2 > del {
  text-decoration-thickness: 5px;
}
h3 > del {
  text-decoration-thickness: 3px;
}
h4 > del {
  text-decoration-thickness: 2px;
}
h5 > del,
h6 > del {
  text-decoration-thickness: 1px;
}

/* === Unicode Escape Prompt (used in code warnings/messages) === */
.ui.message.unicode-escape-prompt {
  opacity: 0.5;
  font-style: italic;
  color: var(--color-text-muted);
  background-color: var(--color-box-body);
  border-left: 4px solid var(--color-primary-alpha-30);
  transition: opacity 0.15s ease, background 0.2s ease;
}

.ui.message.unicode-escape-prompt:hover {
  opacity: 1;
  background-color: var(--color-box-header);
}

/* === Filter Panel UI (used in vertical navs or sidebar selectors) === */
div.ui.secondary.vertical.filter.menu {
  border: 2px solid var(--color-secondary-alpha-50);
  border-radius: 10px;
  background-color: var(--color-box-body);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  padding: 8px;
  transition: border 0.2s ease-in-out, box-shadow 0.2s ease;
}

div.ui.secondary.vertical.filter.menu:hover {
  border-color: var(--color-primary-light-2);
  box-shadow: 0 0 8px var(--color-primary-alpha-30);
}

.ui.basic.primary.button,
.ui.basic.primary.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: 1px solid var(--color-primary-dark-2);
  box-shadow: 0 0 4px var(--color-primary-alpha-40);
  transition: all 0.2s ease-in-out;
}
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary-dark-1) !important;
}
.feeds .list ul li .repo-list-link .svg {
  margin-right: 3px;
}
.repo-title > a:nth-child(4) {
  font-weight: bold;
}
.ui.repo-topic.large.label.topic,
.ui.small.label.topic {
  background: #13233a;
  color: #58a6ff;
  border-radius: 10px;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
  color: unset;
}
.ui.attached.table.unstackable.segment {
  border-radius: 0px 0px 5px 5px;
}
.ui.tertiary.button {
  color: #58a6ff;
}
.ui.tertiary.button:hover {
  color: #8bc1ff;
}
.ui.selection.dropdown {
  background: #0d1117;
}
.ui.selection.dropdown:hover {
  background: #0d1117;
}
.ui.error.header {
  background: unset !important;
}
.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
  background: rgba(248, 81, 73, 0.1);
}
.ui.modal > .header {
  color: var(--color-text);
}
.ui.modal > .actions,
.ui.modal .content + .actions,
.ui.modal .content + form > .actions {
  background: var(--color-body);
}
.ui.button,
.ui.button:focus {
  border: 1px solid rgba(238, 244, 250, 0.105);
}
.ui.button:hover {
  background: var(--color-active);
  border: 1px solid rgba(238, 244, 250, 0.48);
}
.small-menu-items .item {
  background: var(--color-body) !important;
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover,
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu a.item:hover {
  color: var(--color-text);
}
.ui.list > .item a,
.ui.list .list > .item a {
  overflow: auto;
}

.repo-buttons .ui.labeled.button > .label {
  border: 1px solid var(--color-button-border);
  border-color: var(--color-button-border);
}
.repo-buttons .ui.labeled.button > .label:hover {
  color: var(--color-text);
  background: var(--color-active);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
  border: 1px solid var(--color-button-border);
  color: var(--color-text);
  background: var(--color-active);
}
.ui.labeled.button > .button:hover + .label {
  border-left-color: var(--color-button-border);
}
.ui.action.input .ui.ui.button {
  border-left: 1px solid var(--color-button-border) !important;
  border: 1px solid var(--color-button-border);
}
.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover,
.repository .clone-panel #repo-clone-url {
  border: 1px solid var(--color-button-border);
  border-right: 0px solid #00000000;
}
.user.profile .ui.card {
  border-radius: 12px;
}

.ui.secondary.menu .dropdown.item > .menu,
.ui.text.menu .dropdown.item > .menu {
  padding: 5px;
  border-radius: 9px;
}

.ui.menu .ui.dropdown.item .menu .item {
  border-radius: 5px;
}

.user-menu > .item {
  border-radius: 5px !important;
}

.chroma .nx {
  color: rgb(191, 212, 234);
}

.chroma .s,
.chroma .s1,
.chroma .s2 {
  color: rgb(48, 200, 24);
}

.chroma .nf {
  color: rgb(251, 118, 174);
}

.chroma .kt {
  color: rgb(107, 141, 242);
}

.chroma .nb {
  color: rgb(64, 153, 255);
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
  color: rgb(244, 111, 124);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo {
  color: rgb(23, 202, 202);
}

.chroma .c,
.chroma .c1,
.chroma .ch {
  color: rgb(137, 149, 162);
}

.code-view .lines-num:hover {
  color: rgb(255, 255, 255) !important;
}

.monaco-editor .margin-view-overlays,
.monaco-editor-background {
  background-color: #0d1117 !important;
}

/*
  Gitea Theme Enhancements
  -------------------------
  - Change all description styles.
  - Adjusted font sizes for better readability
  - Added hover effects to buttons
*/

/* === Description Text === */
.description {
  color: var(--color-text-light-2) !important;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
  margin-bottom: 10px;
}
.repository .description {
  margin-bottom: 12px;
  display: block;
}
/* === Time Updated / Metadata Line */
.ui.repository.list .item .meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
/* === Template Label / Repo Meta Buttons */
.ui.repository.list .item .labels {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
/* === Repository Title and Metadata */
.ui.repository.list .item .header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-primary);
}

/* === Repository Description Text */
.ui.repository.list .item .description {
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 6px;
  color: var(--color-text-light-2);
  font-size: 14px;
  letter-spacing: 0.2px;
}
.ui.repository.list .item {
  padding: 16px 20px;
  border-radius: 6px;
  background-color: var(--color-box-header);
  margin-bottom: 18px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease;
}
/* === Basic Label Links (e.g., repo tags) === */
a.ui.basic.label {
  color: var(--color-text) !important;
  background-color: transparent;
  border: 1px solid var(--color-secondary-alpha-50);
  border-radius: 4px;
  padding: 2px 6px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a.ui.basic.label:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary-light-2);
}

/* === Black Text Transitions === */
.ui .text.black {
  transition: color 0.3s ease, text-shadow 0.2s ease;
}
.ui .text.black:hover {
  color: var(--color-primary) !important;
  text-shadow: 0 0 2px var(--color-primary-alpha-50);
}
/* === Global Text Handling === */
span.text {
  color: var(--color-text-light-2) !important;
}

span.text.black {
  color: var(--color-caret) !important;
  font-weight: 500;
}
/* === Table Headers and Content Blocks === */
tr > th,
.content {
  color: var(--color-text) !important;
}

/* === Autofill Override (Dark Mode Protection) === */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid var(--color-secondary) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--color-input-background) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  font-family: "Inter", sans-serif;
}

/* === Repo Button Label Text (Truncated) === */
a.ui.basic.blue.button.repo.name.item > span.text.truncate {
  color: var(--color-caret) !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Header Span Styling === */
span.header {
  color: var(--color-text-light-2) !important;
  font-weight: 500;
  font-size: 1.1em;
  letter-spacing: 0.2px;
}

/* === General Body Styles === */
body {
  background: var(--color-body);
  color: var(--color-text);
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === File View Anchors (code lines or diff view links) === */
.file-view a {
  text-decoration: underline;
  color: var(--color-primary-light-2);
  font-weight: 500;
}
.file-view a:hover {
  text-decoration-color: var(--color-primary);
  color: var(--color-primary);
}

/* === Global Link Styling === */
a {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.3s ease, text-shadow 0.2s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary-dark-1);
  text-shadow: 0 0 2px var(--color-primary-alpha-30);
}


/* === Global Button & Label Base Styling === */
.ui.button,
.ui.button:focus,
.ui.label,
.ui.label:focus {
  border: 1px solid var(--color-button-border);
  border-radius: 6px;
  padding: 0.6em 1.2em;
  font-weight: 500;
  font-size: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease;
  outline: none;
  background-color: var(--color-box-header);
  color: var(--color-text);
}

/* === Default Hover State === */
.ui.button:hover {
  background: var(--color-active);
  border-color: var(--color-primary-alpha-40);
  box-shadow: 0 0 6px var(--color-primary-alpha-20);
}

/* === Primary Buttons === */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary-alpha-30);
  color: var(--color-text);
  border-color: var(--color-primary-alpha-60);
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary-dark-1);
  color: var(--color-text-light);
  border-color: var(--color-primary-dark-2);
  box-shadow: 0 0 8px var(--color-primary-alpha-30);
}

/* === Secondary Buttons === */
.ui.secondary.button,
.ui.secondary.buttons .button {
  background-color: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary-alpha-60);
}

.ui.secondary.button:hover,
.ui.secondary.buttons .button:hover {
  background-color: var(--color-secondary-alpha-60);
  color: #ffffff;
  border-color: var(--color-text-muted);
}

/* === Tertiary Buttons === */
.ui.tertiary.button {
  color: var(--color-primary);
  background: transparent;
  border: none;
  font-weight: 500;
  text-decoration: underline;
  padding: 0.4em 0.8em;
}

.ui.tertiary.button:hover {
  color: var(--color-primary-dark-1);
  text-shadow: 0 0 1px var(--color-primary-alpha-30);
}

/* === Optional Glow on Focus (accessibility aid) === */
.ui.button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary-alpha-50);
}


/* === Text Inputs & Textareas === */
input[type="text"],
textarea {
  background-color: var(--color-input-background);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: "Inter", "Segoe UI", sans-serif;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease;
  outline: none;
}

input[type="text"]:focus,
textarea:focus {
  border-color: var(--color-primary);
  background-color: var(--color-box-body);
  box-shadow: 0 0 0 2px var(--color-primary-alpha-20);
}

/* === Special Input Overrides === */
input#repo-clone-url {
  border: none;
  background-color: var(--color-box-header);
  font-family: monospace;
  font-size: 13px;
  padding-left: 6px;
  color: var(--color-text-light-2);
}

/* === Code Block Presentation === */
pre.code-block {
  margin: 20px auto;
  padding: 16px;
  background-color: var(--color-box-body);
  color: var(--color-text-light);
  border-radius: 6px;
  border: 1px solid var(--color-secondary-alpha-60);
  overflow-x: auto;
  font-family: "Fira Code", "Courier New", monospace;
  z-index: 0;
  position: relative;
}

/* === Top Nav Menu === */
.ui.secondary.stackable.pointing.tight.menu {
  margin-bottom: 15px !important;
  border-bottom: 1px solid var(--color-secondary-alpha-50);
}

/* === Profile Avatar Text Color Override === */
.profile-avatar-name > span {
  color: var(--color-caret) !important;
  font-weight: 500;
  letter-spacing: 0.2px;
}

@import url("/assets/css/index.css");