:root {
  --color-primary: #00daa2;
  --color-primary-hover: #00e8ae;
  --color-primary-active: #00b885;

  --color-secondary: #000000;
  --color-body: #000000;
  --color-box-header: #0a0a0a;
  --color-box-body: #0a0a0a;

  --color-text: #ffffff;
  --color-text-light: rgba(255, 255, 255, 0.65);
  --color-border: rgba(255, 255, 255, 0.14);

  --color-input-background: #050505;
  --color-input-border: rgba(255, 255, 255, 0.18);
}

/* ================================
   VHCLS GLOBAL BLACK THEME
================================ */

html,
body,
.full.height,
.page-content,
.repository,
.dashboard,
.home,
.user.signin,
.user.signup,
.user.forgot.password {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Main page background */
body {
  background: #000000 !important;
}

/* ================================
   TOP HEADER / NAVBAR
================================ */

.following.bar,
.following.bar.light,
.page-content .navbar,
#navbar,
header {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

/* Header links, icons, and nav text */
.following.bar a,
.following.bar .item,
.following.bar svg,
#navbar a,
#navbar .item,
header a,
header .item {
  color: #f8fafc !important;
}

/* Hide default Gitea logo image */
.following.bar .brand img,
.following.bar a.item.brand img,
#navbar .brand img,
header .brand img {
  display: none !important;
}

/* Replace logo area with text */
.following.bar .brand::after,
.following.bar a.item.brand::after,
#navbar .brand::after,
header .brand::after {
  content: "code.vhcls.app";
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  font-size: 15px !important;
}

/* ================================
   LOGIN PAGE
================================ */

/* Login page wrapper */
.user.signin {
  background: #000000 !important;
}

/* Sign In title only - no border, no card, no background */
.user.signin h4.ui.top.attached.header.center,
.user.signin .ui.top.attached.header.center,
.user.signin .ui.top.attached.header {
  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  border-radius: 0 !important;
  color: #ffffff !important;

  padding: 0 0 14px 0 !important;
  margin: 0 !important;

  text-align: center !important;
  font-weight: 700 !important;
}

/* Main login container */
.user.signin .ui.middle.very.relaxed.page.grid,
.user.signin .ui.container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Actual input container/card */
.user.signin .ui.attached.segment,
.user.signin .ui.bottom.attached.segment,
.user.signin .ui.segment {
  background: rgba(10, 10, 10, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65) !important;
  overflow: hidden !important;
}

/* Prevent attached elements from forcing square edges */
.user.signin .ui.attached.segment:first-child,
.user.signin .ui.attached.segment:last-child,
.user.signin .ui.bottom.attached.segment {
  border-radius: 18px !important;
}

/* Login form */
.user.signin form.ui.form,
.user.signin .ui.form {
  background: transparent !important;
  border-radius: 18px !important;
}

/* Inputs */
.user.signin input,
.user.signin .ui.input input,
.user.signin .ui.form input,
.ui.input input,
.ui.form input,
.ui.form textarea {
  background: #050505 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
}

/* Input focus */
.user.signin input:focus,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: rgba(0, 218, 162, 0.75) !important;
  box-shadow: 0 0 0 2px rgba(0, 218, 162, 0.12) !important;
}

/* Labels and helper text */
.user.signin label,
.user.signin .field label,
.user.signin p,
.user.signin a {
  color: #ffffff !important;
}

/* ================================
   BUTTONS
================================ */

.ui.primary.button,
.ui.primary.buttons .button,
.user.signin .ui.primary.button,
.user.signin button {
  background: linear-gradient(135deg, #00daa2, #00b885) !important;
  color: #000000 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  border: none !important;
}

.ui.primary.button:hover,
.user.signin .ui.primary.button:hover {
  filter: brightness(1.08) !important;
}

/* ================================
   LOGGED-IN UI / CARDS / TABLES
================================ */

.ui.segment,
.ui.attached.segment,
.ui.attached.header,
.ui.card,
.ui.cards > .card,
.repository.file.list #repo-files-table,
.repository .header-wrapper,
.repo-header {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* General headers */
.ui.header,
.ui.attached.header {
  color: #ffffff !important;
}

/* Keep non-login attached headers rounded normally */
body:not(.user.signin) .ui.top.attached.header {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Tables */
.ui.table,
.repository.file.list #repo-files-table {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.ui.table thead th {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.ui.table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Links */
a {
  color: #00daa2 !important;
}

a:hover {
  color: #00e8ae !important;
}

/* Footer */
footer {
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  opacity: 0.75;
}