/* ==========================================================================
   DimrahStack theme for Gitea
   Overrides Gitea's CSS custom properties so the orange-on-dark palette
   applies to all built-in themes (gitea-light, gitea-dark, gitea-auto).
   Loaded via templates/custom/header.tmpl.
   ========================================================================== */

:root,
:root[data-theme],
.theme-gitea-light,
.theme-gitea-dark,
.theme-gitea-auto {
  /* Brand accent → #f97316 */
  --ds-accent:           #f97316;
  --ds-accent-hover:     #ea6a05;
  --ds-accent-dim:       rgba(249, 115, 22, 0.2);

  /* Map Gitea's primary scale onto the orange ramp */
  --color-primary:               #f97316;
  --color-primary-contrast:      #111111;
  --color-primary-dark-1:        #ea6a05;
  --color-primary-dark-2:        #d35e04;
  --color-primary-dark-3:        #b85204;
  --color-primary-dark-4:        #993f00;
  --color-primary-dark-5:        #7a3200;
  --color-primary-dark-6:        #5a2400;
  --color-primary-dark-7:        #3a1700;
  --color-primary-light-1:       #fb8a3a;
  --color-primary-light-2:       #fc9c5a;
  --color-primary-light-3:       #fdaf7a;
  --color-primary-light-4:       #fec39a;
  --color-primary-light-5:       #fed4b3;
  --color-primary-light-6:       #ffe4cc;
  --color-primary-light-7:       #fff2e5;
  --color-primary-alpha-10:      rgba(249, 115, 22, 0.10);
  --color-primary-alpha-20:      rgba(249, 115, 22, 0.20);
  --color-primary-alpha-30:      rgba(249, 115, 22, 0.30);
  --color-primary-alpha-40:      rgba(249, 115, 22, 0.40);
  --color-primary-alpha-50:      rgba(249, 115, 22, 0.50);
  --color-primary-alpha-60:      rgba(249, 115, 22, 0.60);
  --color-primary-alpha-70:      rgba(249, 115, 22, 0.70);
  --color-primary-alpha-80:      rgba(249, 115, 22, 0.80);
  --color-primary-alpha-90:      rgba(249, 115, 22, 0.90);

  --color-accent:                #f97316;
  --color-secondary:             #1c1c1c;
}

/* ─── Dark canvas ─ apply only to dark / auto themes ──────────────────── */
:root[data-theme*="dark"],
.theme-gitea-dark,
@media (prefers-color-scheme: dark) {
  :root[data-theme*="auto"], .theme-gitea-auto {
    --color-body:            #0b0b0c;
    --color-box-body:        #141417;
    --color-box-body-hover:  #1c1c1f;
    --color-box-header:      #1c1c1f;
    --color-menu:            #1c1c1f;
    --color-nav-bg:          #141417;
    --color-secondary:       #1c1c1f;
    --color-secondary-dark-1: #16161a;
    --color-text:            #ededed;
    --color-text-dark:       #ffffff;
    --color-text-light:      #b5b5b5;
    --color-text-light-1:    #9a9a9a;
    --color-text-light-2:    #7a7a7a;
    --color-input-background: #16161a;
    --color-input-border:    rgba(255, 255, 255, 0.10);
    --color-input-border-hover: var(--ds-accent);
    --color-input-text:      #ededed;
    --color-light:           rgba(255, 255, 255, 0.04);
    --color-light-mimic-enabled: rgba(255, 255, 255, 0.06);
    --color-light-border:    rgba(255, 255, 255, 0.10);
  }
}

/* ─── Subtle noise grain overlay (matches other DimrahStack apps) ─────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Primary buttons ─────────────────────────────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.basic.primary.button:hover {
  background: var(--ds-accent) !important;
  color: #111 !important;
  border-color: var(--ds-accent) !important;
  font-weight: 600;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--ds-accent-hover) !important;
  border-color: var(--ds-accent-hover) !important;
  color: #111 !important;
}

.ui.basic.primary.button {
  background: transparent !important;
  color: var(--ds-accent) !important;
  border: 1px solid var(--ds-accent) !important;
  box-shadow: none !important;
}

/* ─── Links ──────────────────────────────────────────────────────────── */
a, a:hover {
  color: var(--ds-accent);
}
a:hover {
  color: var(--ds-accent-hover);
}

/* ─── Active nav / tabs ──────────────────────────────────────────────── */
.ui.menu .active.item,
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  color: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
}

/* ─── Form focus ─────────────────────────────────────────────────────── */
.ui.form input:focus,
.ui.form textarea:focus,
.ui.input input:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-dim) !important;
}

/* ─── Selection ──────────────────────────────────────────────────────── */
::selection {
  background-color: var(--ds-accent-dim);
  color: #ffffff;
}

/* ─── Scrollbars (dark) ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-body, #0b0b0c); }
::-webkit-scrollbar-thumb { background: #2a2a2f; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-accent); }

/* ─── Logo sizing in navbar (square icon, fill the available height) ── */
.ui.menu .item > img.ui.image,
header img.ui.image {
  height: 32px !important;
  width: 32px !important;
  object-fit: contain;
}