/*
 * Forgejo theme: studio → /assets/css/theme-studio.css → theme id "studio"
 * Minimal dark UI: neutral zinc/graphite surfaces, low-chroma accents, no decorative gradients.
 */

@import "./theme-forgejo-dark.css";

:root {
    /* Typography */
    --fonts-proportional: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonts-monospace: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco, Consolas, monospace;

    /* Neutrals — cool graphite */
    --steel-900: #09090b;
    --steel-850: #0c0c0f;
    --steel-800: #111113;
    --steel-750: #161618;
    --steel-700: #1c1c1f;
    --steel-650: #232326;
    --steel-600: #2a2a2e;
    --steel-550: #323236;
    --steel-500: #3b3b40;
    --steel-450: #45454b;
    --steel-400: #52525b;
    --steel-350: #71717a;
    --steel-300: #a1a1aa;
    --steel-250: #b4b4bd;
    --steel-200: #d4d4d8;
    --steel-150: #e4e4e7;
    --steel-100: #f4f4f5;

    /* Primary — neutral zinc (no violet); reads as “default” not “brand” */
    --color-primary: #d4d4d8;
    --color-primary-contrast: #0c0c0e;
    --color-primary-dark-1: #e4e4e7;
    --color-primary-dark-2: #e4e4e7;
    --color-primary-dark-3: #ededf0;
    --color-primary-dark-4: #f4f4f5;
    --color-primary-dark-5: #f4f4f5;
    --color-primary-dark-6: #fafafa;
    --color-primary-dark-7: #fafafa;
    --color-primary-light-1: #c4c4c8;
    --color-primary-light-2: #b4b4b9;
    --color-primary-light-3: #a1a1aa;
    --color-primary-light-4: #8e8e96;
    --color-primary-light-5: #787880;
    --color-primary-light-6: #64646c;
    --color-primary-light-7: #52525b;

    --color-primary-alpha-10: #d4d4d819;
    --color-primary-alpha-20: #d4d4d833;
    --color-primary-alpha-30: #d4d4d84b;
    --color-primary-alpha-40: #d4d4d866;
    --color-primary-alpha-50: #d4d4d880;
    --color-primary-alpha-60: #d4d4d899;
    --color-primary-alpha-70: #d4d4d8b3;
    --color-primary-alpha-80: #d4d4d8cc;
    --color-primary-alpha-90: #d4d4d8e1;

    --color-primary-hover: var(--color-primary-light-1);
    --color-primary-active: var(--color-primary-light-2);

    /* Single muted accent for success / selection hints (still low saturation) */
    --color-accent: #6d9a8f;
    --color-accent-muted: #8aa89f;

    --color-icon-purple: var(--steel-300);
    --color-icon-green: var(--color-accent-muted);

    --color-console-bg: #0c0c0e;
    --color-console-border: rgba(255, 255, 255, 0.08);
    --color-console-fg: #e4e4e7;
    --color-console-fg-subtle: var(--steel-350);
    --color-console-hover-bg: rgba(255, 255, 255, 0.05);
    --color-console-active-bg: var(--steel-650);

    --color-code-bg: #121214;

    --color-light-border: rgba(255, 255, 255, 0.06);
    --color-shadow: rgba(0, 0, 0, 0.45);

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-secondary: rgba(255, 255, 255, 0.04);

    /* Syntax — restrained, mostly gray with slight hue separation */
    --syn-bg: var(--color-code-bg);
    --syn-fg: #d4d4d8;
    --syn-keyword: #b8bcc6;
    --syn-str: #9eb0a8;
    --syn-func: #a8b2c0;
    --syn-num: #c0b8b4;
    --syn-comment: #6b6f78;
    --syn-orange: #c4b8a8;
}

/* --- Base --- */

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-color: var(--color-body);
    background-image: none;
}

a:hover {
    text-decoration-color: var(--steel-400);
}

::selection {
    background: rgba(212, 212, 216, 0.28) !important;
    color: var(--steel-100) !important;
}

.ui.card,
.ui.cards > .card,
.ui.segment,
.ui.menu:not(.tabular) {
    border-radius: 6px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-light-border);
}

.repository-header {
    border-bottom: 1px solid var(--color-border);
}

.ui.tabular.menu .item.active {
    border-bottom: 2px solid var(--steel-400) !important;
    font-weight: 600;
}

.ui.primary.button,
.ui.primary.buttons .button {
    border-radius: 6px !important;
    border: 1px solid var(--steel-500);
    box-shadow: none;
    font-weight: 500;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
    border-color: var(--steel-450);
    box-shadow: none;
}

/* --- Code --- */

.view-file,
.file-content,
.ui.table.code-view td.lines-code {
    background-color: var(--syn-bg) !important;
    color: var(--syn-fg) !important;
    font-family: var(--fonts-monospace) !important;
}

.ui.table.code-view td.lines-num {
    background-color: var(--syn-bg) !important;
    color: var(--syn-comment) !important;
    border-right: 1px solid var(--color-border) !important;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
    color: var(--syn-keyword) !important;
}

.chroma .kt {
    color: var(--syn-orange) !important;
}

.chroma .na {
    color: var(--syn-str) !important;
}

.chroma .nc {
    color: var(--syn-orange) !important;
}

.chroma .nf {
    color: var(--syn-func) !important;
}

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss {
    color: var(--syn-str) !important;
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
    color: var(--syn-comment) !important;
    font-style: italic !important;
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
    color: var(--syn-num) !important;
}

.chroma .o,
.chroma .ow {
    color: var(--syn-orange) !important;
}

/* --- Search --- */

.code-search,
.code-search.tw-border {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.code-search .ui.action.input {
    border-radius: 6px !important;
    overflow: hidden;
}

.code-search .ui.action.input > input,
.code-search .ui.action.input > .dropdown,
.code-search .ui.action.input > .button {
    border-color: var(--color-input-border) !important;
    background-color: var(--color-input-background) !important;
    color: var(--color-text) !important;
}

.code-search .ui.action.input > input:focus {
    border-color: var(--steel-500) !important;
}

/* --- Popovers & dialogs --- */

.ui.popup {
    background-color: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.ui.modal,
.ui.modal .header,
.ui.modal .content,
.ui.modal .actions {
    border-radius: 8px !important;
}

.job-brief-item.selected {
    border-left: 2px solid var(--steel-400) !important;
}

/* --- Tables & dropdowns --- */

.repository .ui.table {
    border-radius: 6px !important;
    overflow: hidden;
    border: 1px solid var(--color-border) !important;
}

.ui.table thead th {
    border-bottom-color: var(--color-border) !important;
}

.ui.dropdown .menu {
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
    border: 1px solid var(--color-border) !important;
}

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

.ui.input input,
.ui.form textarea {
    border-radius: 6px !important;
}

/* --- Popup arrows --- */

.ui.bottom.popup:before,
.ui.top.popup:before,
.ui.left.popup:before,
.ui.right.popup:before {
    background-color: var(--color-card) !important;
    box-shadow: -1px -1px 0 0 var(--color-border) !important;
    border: none !important;
}

/* --- Modals --- */

.ui.modal .header {
    border-bottom: 1px solid var(--color-border) !important;
}

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

.ui.modal > .close.icon {
    opacity: 0.72;
}

/* --- Wiki --- */

.repository.wiki .ui.grid > .eleven.wide.column > .ui.segment,
.repository.wiki .ui.grid > .sixteen.wide.column > .ui.segment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 15px !important;
}

.repository.wiki .markdown {
    font-family: var(--fonts-proportional) !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
    color: var(--color-text) !important;
}

.repository.wiki h1,
.repository.wiki h2,
.repository.wiki h3,
.repository.wiki h4 {
    font-family: var(--fonts-proportional) !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding-bottom: 0.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.repository.wiki .ui.grid > .five.wide.column .ui.segment {
    background-color: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    padding: 16px !important;
}

.repository.wiki .markdown pre,
.repository.wiki .markdown code {
    background-color: var(--syn-bg) !important;
    color: var(--syn-fg) !important;
    font-family: var(--fonts-monospace) !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
}

.repository.wiki .markdown pre {
    padding: 16px !important;
    overflow: auto !important;
}

/* --- Actions / CI --- */

.flex-list .flex-item {
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
}

.flex-list .flex-item:hover {
    box-shadow: none;
    border-color: var(--steel-500) !important;
}

.ui.vertical.menu:not(.tabular) .item.active {
    border-left: 2px solid var(--steel-400) !important;
}

.action-view-header {
    border-radius: 6px !important;
}

.action-view-body,
.job-step-container {
    border-radius: 6px !important;
    border-color: var(--color-console-border) !important;
}

.action-view-left {
    border-radius: 6px !important;
}