/* =====================================================
   Gitea Custom Theme: Charcoal & Teal
   Installation: Place this file in gitea/custom/public/assets/css/
   Then set CUSTOM_THEME_COLOR_META_TAG and add it via the admin panel
   or reference it in your app.ini under [ui] THEMES
   ===================================================== */

:root {
    /* ── Core Palette ── */
    --color-primary: #00897B; /* teal 600 */
    --color-primary-dark-1: #00796B; /* teal 700 */
    --color-primary-dark-2: #00695C; /* teal 800 */
    --color-primary-light-1: #26A69A; /* teal 500 */
    --color-primary-light-2: #4DB6AC; /* teal 400 */
    --color-primary-light-3: #80CBC4; /* teal 300 */
    --color-primary-alpha-10: rgba(0, 137, 123, 0.10);
    --color-primary-alpha-20: rgba(0, 137, 123, 0.20);
    --color-primary-alpha-40: rgba(0, 137, 123, 0.40);

    /* ── Background Layers ── */
    --color-body: #1A1A1A; /* deepest charcoal */
    --color-nav-bg: #1E2224; /* navbar */
    --color-sidebar-bg: #242829; /* sidebar */
    --color-card-bg: #2A2E31; /* cards / panels */
    --color-box-header-bg: #2F3438; /* box headers */
    --color-input-bg: #252B2E; /* inputs */
    --color-hover-bg: #323A3D; /* hover rows */
    --color-active-bg: #2D3D3B; /* active / selected tint */

    /* ── Text ── */
    --color-text: #E0E6E8; /* primary text */
    --color-text-secondary: #A8B4B8; /* secondary / muted */
    --color-text-light: #6E8088; /* disabled / placeholder */
    --color-text-dark: #F4F9FA; /* headings */
    --color-text-link: #4DB6AC; /* links */
    --color-text-link-hover: #80CBC4; /* link hover */

    /* ── Borders ── */
    --color-secondary: #3A4246;
    --color-border: #3A4246;
    --color-light-border: #30383C;

    /* ── Status ── */
    --color-green: #26A69A;
    --color-green-light: rgba(38, 166, 154, 0.15);
    --color-red: #EF5350;
    --color-red-light: rgba(239, 83, 80, 0.15);
    --color-yellow: #FFA726;
    --color-yellow-light: rgba(255, 167, 38, 0.15);
    --color-blue: #42A5F5;
    --color-orange: #FF7043;
    --color-purple: #AB47BC;
    --color-teal: var(--color-primary);
    --color-teal-light: var(--color-primary-alpha-20);

    /* ── Buttons ── */
    --color-button: var(--color-primary);
    --color-button-hover: var(--color-primary-dark-1);
    --color-button-text: #FFFFFF;

    /* ── Misc ── */
    --color-diff-added-row: rgba(0, 137, 123, 0.12);
    --color-diff-removed-row: rgba(239, 83, 80, 0.12);
    --color-diff-added-cell: rgba(0, 137, 123, 0.20);
    --color-diff-removed-cell: rgba(239, 83, 80, 0.20);
    --color-shadow: rgba(0, 0, 0, 0.40);
    --color-topbar-shadow: rgba(0, 0, 0, 0.30);

    /* ── Code / Syntax ── */
    --color-code-bg: #1E2527;
    --color-code-text: #B2EBF2;

    /* ── Scrollbar ── */
    scrollbar-color: #3A4A4D #1A1A1A;
}

/* ════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════ */

body {
    background-color: var(--color-body) !important;
    color: var(--color-text) !important;
}

a {
    color: var(--color-text-link) !important;
}

a:hover {
    color: var(--color-text-link-hover) !important;
}

/* ════════════════════════════════════════════════════
   NAVIGATION BAR
   ════════════════════════════════════════════════════ */

.navbar,
#navbar,
.ui.menu.navbar {
    background-color: var(--color-nav-bg) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 2px 8px var(--color-topbar-shadow) !important;
}

.navbar .brand svg,
.navbar .brand img {
    filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(140deg);
}

.ui.menu.navbar .item,
.ui.menu.navbar .item:hover,
.ui.menu.navbar a.item {
    color: var(--color-text) !important;
}

.ui.menu.navbar .item:hover {
    background-color: var(--color-hover-bg) !important;
}

/* ════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════ */

.repository.file.list .sidebar,
.issue.list .sidebar,
.ui.sidebar {
    background-color: var(--color-sidebar-bg) !important;
    border-right: 1px solid var(--color-border) !important;
}

/* ════════════════════════════════════════════════════
   CARDS, SEGMENTS, BOXES
   ════════════════════════════════════════════════════ */

.ui.segment,
.ui.card,
.ui.cards > .card,
.repository .ui.attached.segment {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    box-shadow: 0 1px 4px var(--color-shadow) !important;
    color: var(--color-text) !important;
}

.ui.segment.header,
.issue-box .header,
.timeline-item .event .detail {
    background-color: var(--color-box-header-bg) !important;
}

/* ════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════ */

.ui.table {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ui.table thead th {
    background-color: var(--color-box-header-bg) !important;
    color: var(--color-text-dark) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.ui.table tr:hover > td {
    background-color: var(--color-hover-bg) !important;
}

.ui.table td {
    border-top-color: var(--color-light-border) !important;
}

/* ════════════════════════════════════════════════════
   INPUTS & FORMS
   ════════════════════════════════════════════════════ */

input,
textarea,
select,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.dropdown,
.CodeMirror {
    background-color: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-light) !important;
}

input:focus,
textarea:focus,
.ui.input.focus input,
.ui.form input:focus,
.ui.form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-alpha-20) !important;
}

/* ════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════ */

.ui.button.primary,
.ui.buttons .primary.button,
.ui.teal.button,
.ui.green.button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.ui.button.primary:hover,
.ui.teal.button:hover,
.ui.green.button:hover {
    background-color: var(--color-primary-dark-1) !important;
}

.ui.basic.button,
.ui.button {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ui.basic.button:hover,
.ui.button:hover {
    background-color: var(--color-hover-bg) !important;
}

/* ════════════════════════════════════════════════════
   LABELS & BADGES
   ════════════════════════════════════════════════════ */

.ui.label {
    background-color: var(--color-box-header-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ui.teal.label,
.ui.green.label {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════
   ISSUE / PR STATUS LABELS
   ════════════════════════════════════════════════════ */

.ui.green.label.isSigned,
.issue-state-label.open {
    background-color: var(--color-primary) !important;
}

/* ════════════════════════════════════════════════════
   CODE & DIFFS
   ════════════════════════════════════════════════════ */

pre,
code,
.code-view,
.file-view pre {
    background-color: var(--color-code-bg) !important;
    color: var(--color-code-text) !important;
    border-color: var(--color-border) !important;
}

.diff-added-row,
.code-diff .add {
    background-color: var(--color-diff-added-row) !important;
}

.diff-removed-row,
.code-diff .del {
    background-color: var(--color-diff-removed-row) !important;
}

/* ════════════════════════════════════════════════════
   ACTIVITY TIMELINE
   ════════════════════════════════════════════════════ */

.timeline-item .badge {
    background-color: var(--color-primary) !important;
    border-color: var(--color-nav-bg) !important;
}

/* ════════════════════════════════════════════════════
   DROPDOWNS & MENUS
   ════════════════════════════════════════════════════ */

.ui.dropdown .menu,
.ui.menu .dropdown .menu {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    box-shadow: 0 4px 16px var(--color-shadow) !important;
}

.ui.dropdown .menu > .item,
.ui.menu .dropdown .menu > .item {
    color: var(--color-text) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.menu .dropdown .menu > .item:hover {
    background-color: var(--color-hover-bg) !important;
    color: var(--color-text-dark) !important;
}

/* ════════════════════════════════════════════════════
   MODALS & DIMMER
   ════════════════════════════════════════════════════ */

.ui.modal {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.ui.modal > .header {
    background-color: var(--color-box-header-bg) !important;
    color: var(--color-text-dark) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.ui.modal > .actions {
    background-color: var(--color-box-header-bg) !important;
    border-top: 1px solid var(--color-border) !important;
}

/* ════════════════════════════════════════════════════
   REPOSITORY FILE LIST
   ════════════════════════════════════════════════════ */

.repository.file.list #repo-files-table .item {
    border-bottom: 1px solid var(--color-light-border) !important;
}

.repository.file.list #repo-files-table .item:hover {
    background-color: var(--color-hover-bg) !important;
}

.repository.file.list .item .text.primary {
    color: var(--color-text-link) !important;
}

/* ════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════ */

.ui.pagination.menu .item {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ui.pagination.menu .item.active {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.ui.pagination.menu .item:hover:not(.active) {
    background-color: var(--color-hover-bg) !important;
}

/* ════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-body);
}

::-webkit-scrollbar-thumb {
    background: #3A4A4D;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark-1);
}

/* ════════════════════════════════════════════════════
   MISC POLISH
   ════════════════════════════════════════════════════ */

hr, .divider {
    border-color: var(--color-border) !important;
}

.ui.statistic > .value,
.ui.statistics .statistic > .value {
    color: var(--color-primary) !important;
}

.repo-tag-list .ui.label {
    background-color: var(--color-primary-alpha-20) !important;
    color: var(--color-primary-light-2) !important;
    border: 1px solid var(--color-primary-alpha-40) !important;
}

/* Highlight selected tab */
.ui.tabular.menu .item.active,
.ui.pointing.menu .item.active {
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary-light-2) !important;
}

/* Active nav item */
.ui.menu .active.item {
    color: var(--color-primary-light-2) !important;
}

/* Footer */
#footer {
    background-color: var(--color-nav-bg) !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}