/* ════════════════════════════════════════════════════════════════════════
   Issues · Desperion.World — themed to match the cabinet (custom.css)
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Базовые цвета — взяты 1-в-1 из custom.css */
    --primary:           #FFBA00;
    --primary-light:     #FFE78E;
    --primary-mid:       #E8B223;
    --primary-dark:      #FF9800;
    --primary-shadow:    #FF3F00;
    --primary-lighter:   #FFDD61;
    --primary-deep:      #FF7100;
    --primary-hover-start: #ffeb6a;
    --primary-hover-mid: #FEC023;
    --primary-hover-end: #e68700;

    --text-main:         #BEBDC0;
    --text-light:        #C2BFC4;
    --text-muted:        #696975;
    --text-on-primary:   #4F1E10;

    --bg-block:          #1C1A1E;
    --bg-dark:           #201F23;
    --bg-mid:            #242328;
    --bg-header:         #2C2C33;
    --bg-header-trans:   rgba(44, 43, 49, 0.63);
    --bg-header-alt:     #242428;

    --border:            #2B2A2E;
    --border-alt:        #222023;

    --shadow-primary:    rgba(255, 217, 129, 0.75);
    --black-15:          rgba(0,0,0,0.15);
    --black-40:          rgba(0,0,0,0.4);
    --white-05:          rgba(255,255,255,0.05);
    --white-06:          rgba(255,255,255,0.06);

    /* Градиенты — оригинальные */
    --grad-panel:  linear-gradient(to bottom, var(--bg-header-trans) 0, var(--bg-dark) 60%, var(--bg-dark) 100%);
    --grad-header: linear-gradient(to bottom, var(--bg-header-trans) 0, var(--bg-mid) 60%, var(--bg-mid) 100%);
    --grad-btn:    linear-gradient(to bottom, var(--primary-light) 0, var(--primary-mid) 60%, var(--primary-mid) 100%);
    --grad-btn-hover: linear-gradient(to bottom, var(--primary-hover-start) 0, var(--primary-hover-mid) 60%, var(--primary-hover-end) 100%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg-dark);
    background-image:
        radial-gradient(ellipse 1100px 700px at 50% -10%, rgba(255,186,0,.08), transparent 60%),
        radial-gradient(ellipse 800px 500px at 100% 100%, rgba(255,63,0,.05), transparent 60%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
code, pre, kbd { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-size: .92em; }
kbd {
    background: var(--black-15); border: 1px solid var(--border-alt);
    border-radius: 2px; padding: 1px 6px; font-size: 11px;
    color: var(--text-light);
    box-shadow: 0 1px 0 0 rgba(0,0,0,.4);
}
h2 {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 19.5px; font-weight: 500;
    margin: 0 0 4px;
    color: var(--text-main);
    text-transform: uppercase; letter-spacing: .02em;
}
h2 .hl { color: var(--primary); }
.meta    { font-size: 12px; color: var(--text-muted); margin: 0; }
.dim     { color: var(--text-muted); }
.dim-dot { color: var(--text-muted); font-size: 12px; }

.app {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px 80px;
    position: relative; z-index: 1;
}

/* ── Brand header ── */
.brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.brand-mark {
    width: 38px; height: 38px;
    background: var(--grad-btn);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--primary-dark);
    border-radius: 5px;
    box-shadow: 0 2px 10px var(--shadow-primary), 0 1px 0 0 rgba(255,255,255,.25) inset;
    flex-shrink: 0; text-decoration: none;
}
.brand-mark svg { stroke: var(--text-on-primary) !important; }
.brand-title { display: flex; align-items: baseline; gap: 8px; }
.brand-name {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 18px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-light);
}
.brand-sub {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 18px; font-weight: 500;
    color: var(--primary);
    text-transform: uppercase; letter-spacing: .04em;
}

/* ── Page head ── */
.page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; margin-bottom: 18px;
}

/* ── Buttons (mirrors .btn / .btn-danger from custom.css) ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 35px; padding: 4px 20px;
    background: var(--white-05);
    border: 1px solid var(--white-06);
    border-radius: 2px;
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
    font-size: 13px; font-weight: 400;
    line-height: 25px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.9);
    user-select: none; cursor: pointer;
    transition: 0.1s all linear;
    opacity: 0.95;
}
.btn:hover {
    background: var(--grad-btn-hover);
    color: #000 !important;
    text-shadow: 1px 1px var(--shadow-primary);
    border: 1px solid var(--primary-dark);
    box-shadow: 0 2px 10px var(--primary-shadow);
    opacity: 1;
}
.btn-small { height: 28px; padding: 2px 12px; font-size: 11px; line-height: 22px; }

/* primary button = always-bright gold (mirrors .btn-danger in custom.css) */
.btn-primary {
    background: var(--grad-btn) !important;
    color: var(--text-on-primary) !important;
    text-shadow: 1px 1px var(--shadow-primary) !important;
    border: none !important;
    border-radius: 2px;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.btn-primary:hover {
    background: var(--grad-btn-hover) !important;
    box-shadow: 0 2px 15px var(--primary-shadow) !important;
    color: #000 !important;
}

/* ── Tabs ── */
.tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.tab {
    background: transparent; border: 0;
    color: var(--text-muted);
    font-family: 'Roboto', sans-serif;
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .03em;
    padding: 10px 16px; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .15s;
    margin-bottom: -1px;
}
.tab:hover { color: var(--text-light); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Issue rows (mirror .panel-heading / .panel-body) ── */
.issue { margin-bottom: 4px; }
.ic-row {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px;
    background: var(--grad-panel);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
    box-shadow: 0px 1px 5px var(--black-40);
}
.ic-row:hover {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 1px rgba(255,186,0,.15), 0px 1px 5px var(--black-40);
}
.ic-row.expanded {
    border-color: var(--primary-dark);
    border-bottom-color: var(--border-alt);
    border-radius: 2px 2px 0 0;
    box-shadow: 0px 1px 5px var(--black-40);
}
.ic-title {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 500; color: var(--text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-id {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-muted);
    background: var(--black-15); padding: 3px 8px;
    border-radius: 2px; border: 1px solid var(--border-alt);
    flex-shrink: 0;
}

/* Pill badges */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px 2px 8px;
    border-radius: 2px;
    font-size: 11px; font-weight: 500; letter-spacing: .03em;
    border-width: 1px; border-style: solid;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.badge.ready {
    color: #22c55e; background: rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.25); padding: 4px 10px;
}

/* Body / details panel */
.ic-body {
    max-height: 0; overflow: hidden; opacity: 0;
    transition:
        max-height .35s cubic-bezier(.4,0,.2,1),
        opacity   .25s ease .05s;
}
.ic-body.open { max-height: 4000px; opacity: 1; }
.ic-body-inner {
    background: var(--bg-block);
    border: 1px solid var(--primary-dark);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    padding: 14px 18px 16px;
    box-shadow: 0px 1px 5px var(--black-40);
    color: var(--text-light);
}
.ic-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-desc {
    background: var(--black-15);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    padding: 14px 16px;
    color: var(--text-light); line-height: 1.65; font-size: 13px;
    margin-top: 12px;
}
.ic-desc-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ic-desc img, .ic-desc video {
    max-width: 100%; max-height: 500px;
    border-radius: 2px; border: 1px solid var(--border);
/*    margin-top: 12px; display: block;*/
}
.ic-desc audio { margin-top: 12px; width: 100%; }

.ic-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ic-actions .inline { margin: 0; padding: 0; }
.ic-action {
    display: inline-flex; align-items: center; gap: 7px;
    height: 35px; padding: 0 16px;
    background: var(--white-05);
    border: 1px solid var(--white-06);
    border-radius: 2px;
    color: var(--text-main);
    font: 400 12px 'Roboto', sans-serif;
    text-transform: uppercase; letter-spacing: .02em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.9);
    cursor: pointer;
    transition: 0.1s all linear;
}
.ic-action:hover {
    background: var(--grad-btn-hover);
    color: #000 !important;
    text-shadow: 1px 1px var(--shadow-primary);
    border-color: var(--primary-dark);
    box-shadow: 0 2px 10px var(--primary-shadow);
}
.ic-action-danger:hover {
    background: linear-gradient(to bottom, #FF5E3A 0%, #FF3C00 60%, #CC3200 100%) !important;
    border-color: #E63600 !important;
    color: #fff !important;
    text-shadow: 1px 1px rgba(0,0,0,.5) !important;
    box-shadow: 0 2px 10px rgba(255,60,0,.5) !important;
}

/* ── Empty state ── */
.empty {
    padding: 64px 24px; text-align: center;
    border: 1px dashed var(--border);
    background: var(--bg-block);
    box-shadow: 0px 1px 5px var(--black-40);
    margin-top: 8px;
}
.empty-icon {
    width: 48px; height: 48px; border-radius: 2px;
    background: linear-gradient(135deg, rgba(255,186,0,.15), rgba(255,113,0,.05));
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.empty-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px; font-weight: 500; color: var(--text-light);
    text-transform: uppercase; letter-spacing: .03em;
    margin-bottom: 4px;
}
.empty-sub { font-size: 12px; color: var(--text-muted); }

/* ── Form ── */
.grid { display: grid; grid-template-columns: 7fr 3fr; gap: 28px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.col-form, .col-side { min-width: 0; }
.lbl {
    display: block;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 12px; font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
    margin: 14px 0 6px;
}
.lbl.tiny {
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    color: var(--primary);
}
.side-head { margin-top: 24px; }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select {
    width: 100%;
    background: var(--black-15);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    color: var(--text-main);
    font: 400 13px 'Roboto', sans-serif;
    padding: 9px 12px;
    transition: box-shadow .15s, border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: inset 0 0px 1px var(--primary), 0 0 0 1px rgba(255,186,0,.15);
}
textarea { min-height: 220px; resize: vertical; line-height: 1.55; font-family: 'Roboto', sans-serif; }
select  { appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFBA00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; }

/* ── File input — themed to match the dark UI ── */
input[type="file"] {
    width: 100%;
    background: var(--black-15);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-light);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    padding: 6px;
    cursor: pointer;
    line-height: 1.4;
}
input[type="file"]:hover { border-color: var(--primary-dark); }
input[type="file"]:focus { outline: none; border-color: var(--primary); }
/* The "Choose file" / "Browse" button (Chrome/Firefox/Safari) */
input[type="file"]::file-selector-button {
    background: var(--bg-mid);
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 5px 12px;
    margin-right: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover {
    background: var(--grad-btn);
    color: var(--text-on-primary);
    border-color: var(--primary-dark);
}
/* Webkit-specific (older Chrome/Safari) */
input[type="file"]::-webkit-file-upload-button {
    background: var(--bg-mid);
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 5px 12px;
    margin-right: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--grad-btn);
    color: var(--text-on-primary);
    border-color: var(--primary-dark);
}

.dropzone {
    background: var(--black-15);
    border: 1px dashed var(--border-alt);
    border-radius: 2px;
    padding: 14px 16px; margin: 6px 0 10px;
    color: var(--text-muted); font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.dropzone-text { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.dropzone-main { color: var(--text-light); font-size: 13px; }
.dropzone-sub  { font-size: 11px; }
.dropzone-preview { margin: 8px 0; }
.dropzone-preview img,
.dropzone-preview video,
.dropzone-preview audio {
    max-width: 100%;
    max-height: 240px;
    display: block;
    border-radius: 2px;
    margin-bottom: 6px;
}
.dropzone-filename {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
}
.dropzone .link { color: var(--primary); cursor: pointer; text-decoration: underline; }
.dropzone.dragging,
.dropzone.drag-over {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), 0 0 12px var(--shadow-primary);
}
.dropzone.has-file { border-style: solid; border-color: rgba(34,197,94,.4); }
.dropzone svg { stroke: var(--primary) !important; }

.preview {
    background: var(--bg-block);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    padding: 14px 16px;
    margin: 6px 0 12px;
    box-shadow: 0px 1px 5px var(--black-40);
}
.preview .lbl { margin-top: 0; }
.preview img, .preview video {
    max-width: 100%; max-height: 380px;
    border-radius: 2px; display: block;
    border: 1px solid var(--border);
}
.preview audio { width: 100%; }
.preview-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

.tips {
    margin-top: 24px;
    background: var(--grad-panel);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 14px 16px;
    font-size: 12px; color: var(--text-muted); line-height: 1.75;
    box-shadow: 0px 1px 5px var(--black-40);
}
.tips-head {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px; font-weight: 500;
    color: var(--primary);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.tips kbd { color: var(--text-light); }

.submit { margin-top: 18px; min-width: 160px; height: 35px; padding: 0 22px; font-size: 13px; }
.inline { display: inline; }

/* ── Priority pills + custom dropdown ── */
.prio-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 90px;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    gap: 4px;
    box-sizing: border-box;
}
.prio-high   { color: #ef4444; border-color: rgba(239,68,68,.55);  background: rgba(239,68,68,.08); }
.prio-medium { color: #FFBA00; border-color: rgba(255,186,0,.55);  background: rgba(255,186,0,.08); }
.prio-low    { color: #22c55e; border-color: rgba(34,197,94,.55);  background: rgba(34,197,94,.08); }

/* Visibility pill — same shape as priority, different colors */
.vis-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 90px;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    gap: 4px;
    box-sizing: border-box;
}
.vis-public  { color: #38bdf8; border-color: rgba(56,189,248,.55); background: rgba(56,189,248,.08); }
.vis-private { color: #f472b6; border-color: rgba(244,114,182,.55); background: rgba(244,114,182,.08); }
.vis-help {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Section badge — filled, contrasts with outlined priority pills ── */
.sec-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 90px;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
    white-space: nowrap;
    gap: 5px;
    box-sizing: border-box;
}

/* Icon-only variant — used in issue-row to save horizontal space.
   Square badge, just an icon, no text. Height matches a regular pill
   (font-size 11px + 4px+4px padding + 2*1px border = 21px). */
.sec-badge--icon,
.vis-pill--icon {
    min-width: 0;
    width: 21px; height: 21px;
    padding: 0;
    gap: 0;
}
.sec-badge--icon { font-size: 0; }     /* hide any stray label text */
.vis-pill--icon  { font-size: 0; }
.sec-badge--icon .ico,
.vis-pill--icon  .ico { width: 13px; height: 13px; vertical-align: 0; }

/* Inline flat SVG icon (Lucide-style). Inherits color via currentColor. */
.ico {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -1px;
}

/* ── Tabs + sort row layout ── */
.tabs-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.tabs-row .tabs { border-bottom: 0; margin-bottom: 0; }

/* Filters span the full width of the issues list, with each dropdown getting an
   equal slice. Five compact dropdowns side-by-side. */
.sort-row {
    display: flex; gap: 8px; align-items: stretch;
    margin-bottom: 14px;
}
.sort-row .dd {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 720px) {
    .tabs-row { flex-direction: column; align-items: stretch; }
    .sort-row { flex-wrap: wrap; }
    .sort-row .dd { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* ── Generic dropdown (used for priority, section, sort, filter) ── */
.dd { position: relative; }
.dd-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: var(--black-15);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    padding: 8px 8px;
    color: var(--text-main);
    font: 400 13px 'Roboto', sans-serif;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
    gap: 10px;
}
.dd-trigger:hover { border-color: var(--border); }
.dd-trigger:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: inset 0 0 1px var(--primary);
}
.dd-trigger.open {
    outline: none;
    border-color: var(--primary);
    border-bottom-color: var(--border-alt);
    border-radius: 2px 2px 0 0;
    box-shadow: none;
}
.dd-caret {
    color: var(--text-muted);
    transition: transform .15s;
    flex-shrink: 0;
}
.dd-trigger.open .dd-caret { transform: rotate(180deg); color: var(--primary); }

.dd-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 20;
    background: var(--bg-block);
    border: 1px solid var(--primary);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    padding: 4px;
    margin: 0; list-style: none;
    box-shadow: 0 8px 18px var(--black-40);
    animation: dd-fade .12s ease;
}
@keyframes dd-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dd-item {
    padding: 7px 8px;
    border-radius: 2px;
    cursor: pointer;
    transition: background .12s;
    font-size: 13px;
    color: var(--text-main);
}
.dd-item:hover    { background: var(--white-05); }
.dd-item.selected { background: var(--white-06); color: var(--text-light); }
.dd-item.selected .prio-pill,
.dd-item.selected .sec-badge { box-shadow: 0 0 0 1px currentColor; }

/* Compact variant — used in the sort/filter row */
.dd--compact .dd-trigger { padding: 5px 10px; font-size: 12px; min-height: 32px; gap: 6px; }
.dd--compact .dd-item    { padding: 5px 8px; font-size: 12px; }

/* Inside a compact trigger, the slot must be allowed to shrink — otherwise the
   prefix + badge + caret can't fit on narrow viewports. */
.dd--compact .dd-slot {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.dd--compact .dd-trigger .dd-label-prefix {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
    flex-shrink: 0;
}
/* Inside a compact TRIGGER, badges/pills lose their min-width so they collapse
   to whatever space is available. The slot is narrow — we just need it to fit. */
.dd--compact .dd-trigger .sec-badge,
.dd--compact .dd-trigger .prio-pill,
.dd--compact .dd-trigger .vis-pill {
    min-width: 0;
    padding: 3px 6px;
    font-size: 10px;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dd--compact .dd-trigger .dd-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inside the dropdown MENU, badges keep their normal sizing — sec-badge is
   90px, prio-pill / vis-pill are 78px. They still line up vertically because
   each menu item is full-width and badges are inline-flex within. */

/* ── Header user chip ── */
.user-chip {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    background: var(--black-15);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 5px 10px;
    padding-right: 5px;
    font-size: 12px;
}
.user-name { color: var(--text-light); font-weight: 500; }
.user-name-link {
    text-decoration: none; color: inherit;
    display: inline-flex; align-items: baseline; gap: 5px;
}
.user-name-link:hover,
.user-name-link:focus,
.user-name-link:active,
.user-name-link:visited { text-decoration: none; }
.user-name-link:hover .user-name { color: var(--primary); }
.user-username { font-size: 11px; }

/* ── Role badge ───────────────────────────────────────────
   Each role has its own border-color AND text-color (set explicitly
   per-role below). The default fallback (.user-role without a role-*
   modifier) keeps the legacy primary-yellow look used in headers. */
.user-role {
    color: var(--primary);
    text-transform: uppercase; letter-spacing: .06em;
    font-size: 10px; font-weight: 700;
    border: 1px solid rgba(255,186,0,.5);
    background: transparent;
    padding: 1px 6px;
    border-radius: 2px;
    display: inline-block; line-height: 1.4;
    white-space: nowrap;
}
/* Smaller variant used inline next to nicknames in issues/comments */
.user-role--inline {
    font-size: 9px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: baseline;
    position: relative;
    top: -1px;
}

/* Per-role colors — text color is brighter, border slightly muted to match.
   Must mirror AVAILABLE_ROLES in config.php. */
.user-role.role-user   { color: #d1d5db; border-color: #4b5563; }
.user-role.role-vip    { color: #FFBA00; border-color: #a87a00; }
.user-role.role-tester { color: #4ade80; border-color: #15803d; }
.user-role.role-mod    { color: #60a5fa; border-color: #1d4ed8; }
.user-role.role-dev    { color: #c084fc; border-color: #7e22ce; }
.user-role.role-admin  { color: #f87171; border-color: #b91c1c; }

/* ── Inline display name + username pair ──────────────────
   Стандартный inline (не flex), чтобы все дочерние элементы
   корректно сидели на baseline окружающего текста. Отступы
   между элементами создаются естественными пробелами в HTML. */
.user-display {
    display: inline;
}
.user-display > * { vertical-align: baseline; }
.user-display-name {
    font-weight: 600; color: var(--text-light);
}
.user-display-username {
    font-size: 11px; font-weight: 400;
/*    margin-left: 4px;*/
}

/* ── Login page ── */
.login-shell {
    display: flex; align-items: center; justify-content: center;
    min-height: 60vh;
    padding: 20px 0;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--grad-panel);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 28px 32px 32px;
    box-shadow: 0 6px 24px var(--black-40);
}
.login-head { margin-bottom: 18px; }
.login-form .lbl { margin-top: 14px; }
.login-form .submit { width: 100%; margin-top: 22px; }
.login-error {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #ef9494;
    padding: 9px 12px;
    border-radius: 2px;
    margin-bottom: 6px;
    font-size: 13px;
}

/* ── Comments ── */
.comments-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.comments-head {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px; font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 10px;
}
.comments-head .count {
    color: var(--primary);
    margin-left: 4px;
}
.comment {
    background: var(--black-15);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.comment-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}
.comment-author {
    color: var(--text-light);
    font-weight: 500;
}
/* The legacy .is-admin::after pseudo-badge has been removed —
   role badges (.user-role.role-admin etc.) now handle this everywhere. */
.comment-date  { color: var(--text-muted); }
.comment-spacer { flex: 1; }
.comment-delete {
    background: transparent; border: 0;
    color: var(--text-muted);
    font-size: 11px; padding: 0;
    cursor: pointer;
    transition: color .15s;
}
.comment-delete:hover { color: #ef4444; }
.comment-body {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comment-media {
    max-width: 100%; max-height: 400px;
    border: 1px solid var(--border);
    border-radius: 2px;
    margin-top: 8px;
    display: block;
}
audio.comment-media { max-height: none; width: 100%; }
.comment-form {
    margin-top: 12px;
}
.comment-form .row {
    display: flex; gap: 8px; align-items: stretch;
    flex-wrap: nowrap;
}
.comment-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 35px;
    height: 35px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
}
.comment-form .btn-primary {
    height: 35px;
    padding: 0 18px;
    flex-shrink: 0;
    align-self: flex-start;
}
.comment-attach-preview {
    display: none;
    margin-top: 8px;
    background: var(--bg-block);
    border: 1px solid var(--border-alt);
    border-radius: 2px;
    padding: 8px 10px;
}
.comment-attach-preview.has-file { display: block; }
.comment-attach-preview img {
    max-width: 240px; max-height: 180px;
    border-radius: 2px; display: block;
    border: 1px solid var(--border);
}
.comment-attach-preview .preview-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; gap: 12px; font-size: 11px;
}
.comment-attach-clear {
    background: transparent; border: 0;
    color: #ef4444; cursor: pointer;
    font-size: 11px; padding: 0;
}
.comment-attach-clear:hover { text-decoration: underline; }
.comment-attach-hint {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px;
}
.comment-attach-hint kbd { font-size: 10px; padding: 0 4px; }
@media (max-width: 600px) {
    .comment-form .row { flex-direction: column; }
    .comment-form .btn-primary { width: 100%; }
}

/* ── Admin panel ── */
.admin-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.atab {
    background: transparent; border: 0;
    color: var(--text-muted);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.atab:hover { color: var(--text-light); }
.atab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.atab-panel { display: none; }
.atab-panel.active { display: block; }

.admin-card {
    background: var(--grad-panel);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.admin-card-head {
    margin: 0 0 12px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--primary);
}
.admin-form-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.admin-form-row input[type="text"] {
    flex: 1; min-width: 140px;
    height: 32px;
    margin: 0;
}
.admin-form-row input[type="color"] {
    width: 36px; height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--black-15);
    cursor: pointer;
    flex-shrink: 0;
}
.admin-check {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
    padding: 0 8px;
}
.admin-check input { margin: 0; }
.admin-help {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-alt, var(--border));
    vertical-align: middle;
}
.admin-table th {
    color: var(--text-muted);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
    font-size: 11px;
}
.admin-table td.ar, .admin-table th.ar { text-align: right; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tr.is-banned td { opacity: .55; }
.admin-table code {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-light);
    background: var(--black-15);
    padding: 1px 5px;
    border-radius: 2px;
}
.admin-table .user-pw {
    user-select: all;  /* easy to copy */
}
.admin-actions {
    display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end;
}
.admin-actions .inline { margin: 0; padding: 0; }
.btn-danger {
    color: #fca5a5;
    border-color: rgba(239,68,68,.4);
}
.btn-danger:hover {
    color: #ff6868 !important;
    background: rgba(239,68,68,.18);
    border-color: rgba(239,68,68,.7);
    text-shadow: 1px 1px rgba(46, 0, 0, 0.75) !important;
}
.banned-pill {
    display: inline-block;
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.4);
    background: rgba(239,68,68,.08);
    text-transform: uppercase; letter-spacing: .04em;
    font-size: 10px; font-weight: 700;
    padding: 1px 7px;
    border-radius: 2px;
}
.admin-flash {
    padding: 10px 14px;
    border-radius: 2px;
    margin-bottom: 14px;
    font-size: 13px;
    border: 1px solid;
}
.admin-flash-ok {
    color: #86efac;
    border-color: rgba(34,197,94,.4);
    background: rgba(34,197,94,.08);
}
.admin-flash-error {
    color: #fca5a5;
    border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.10);
}

/* AJAX loading states */
.comment-form button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.comment-form-error {
    font-size: 12px;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 2px;
    background: rgba(239, 68, 68, 0.1);
}

/* Animation for new comment */
@keyframes comment-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment:last-child {
    animation: comment-slide-in 0.3s ease-out;
}

/* Comment media styling */
.comment-media {
    max-width: 100%;
    max-height: 400px;
    border: 1px solid var(--border);
    border-radius: 2px;
    margin-top: 8px;
    display: block;
}

audio.comment-media {
    max-height: none;
    width: 100%;
}
/* ════════════════════════════════════════════════════════════════════════
   Roles, display names, profile page, inline admin forms
   ════════════════════════════════════════════════════════════════════════ */

/* Disabled item in custom dropdown */
.dd-item.is-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: auto; /* still receive clicks so we can swallow them */
}
.dd-item.is-disabled:hover { background: transparent; }

/* Auto-submit role dropdown — slightly tighter so the badge fits the cell */
.dd--submit { display: inline-block; }
.dd--submit .dd-trigger { min-width: 110px; }

/* Inline admin input (display name field in users table) */
.admin-inline-input {
    height: 30px;
    padding: 4px 8px;
    background: var(--black-15);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-light);
    font-size: 12px;
    font-family: inherit;
    min-width: 0;
    width: 100%;
}
.admin-inline-input:focus {
    outline: none;
    border-color: var(--primary);
}
.admin-inline-save {
    flex-shrink: 0;
    margin-left: 6px;
}

/* Display-name form: input + Save in one row, never wrapping. */
.display-name-form {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    min-width: 0;
}
.display-name-form .admin-inline-input {
    flex: 1 1 auto;
    min-width: 80px;
}
.role-form {
    display: inline-block;
    margin: 0; padding: 0;
}

/* ── Profile (Control Panel) page ────────────────────── */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 720px;
}
@media (min-width: 720px) {
    .profile-grid { grid-template-columns: 1fr 1fr; }
}

.profile-list {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 8px; column-gap: 12px;
    align-items: center;
}
.profile-list dt {
    color: var(--text-muted);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em;
    font-weight: 500;
}
.profile-list dd {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
}

.profile-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.profile-input {
    flex: 1; min-width: 200px; max-width: 100%;
    height: 34px;
    font-size: 13px;
}

.profile-preview {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--black-15);
    border: 1px solid var(--border);
    border-radius: 2px;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    font-size: 13px;
}

/* Comment author with display name should not lose its is-admin styling */
.comment-author.user-display-name { font-weight: 600; }

/* Make the Display Name column wide enough for the input + Save button */
.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
    min-width: 220px;
}

/* ════════════════════════════════════════════════════════════════════════
   Multi-file upload UI: dropzone items, comment attach previews,
   existing-media chooser on the edit page.
   ════════════════════════════════════════════════════════════════════════ */

/* Dropzone preview — multiple thumbnails in a row */
.dropzone-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}
.dropzone-preview:empty { display: none; }

.dz-item {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px;
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dz-item img,
.dz-item video {
    width: 100%;
    height: 90px;
    object-fit: cover;
    background: #000;
    border-radius: 2px;
}
.audio-thumb {
    width: 100%;
    height: 90px;
    background: #1f1f22;
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    border-radius: 2px;
    font-size: 18px; font-weight: 700;
    letter-spacing: .04em;
}
.dz-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
}
.dz-item-name {
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.dz-item-remove {
    background: transparent;
    border: 0;
    color: #ef4444;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.dz-item-remove:hover { text-decoration: underline; }

/* Existing-media block on the edit page */
.existing-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.existing-media-item {
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px;
}
.existing-media-thumb img,
.existing-media-thumb video {
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: #000;
    border-radius: 2px;
    display: block;
}
.existing-media-thumb .audio-thumb { height: 80px; font-size: 14px; }
.existing-media-meta {
    display: flex;
    justify-content: flex-end;
}
.existing-media-remove-btn {
    background: transparent;
    border: 0;
    color: #ef4444;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}
.existing-media-remove-btn:hover { text-decoration: underline; }

/* Comment attach preview — multi-file row */
.comment-attach-preview {
    flex-wrap: wrap;
    gap: 8px;
}
.comment-attach-preview.has-file {
    display: flex !important;
}
.cap-item {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px;
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cap-item img,
.cap-item video {
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: #000;
    border-radius: 2px;
}
.cap-item .audio-thumb { height: 80px; font-size: 14px; }
.cap-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
}
.cap-item-meta .dim {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Output media list — bug body & comment body */
.ic-media-list,
.comment-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.ic-media-list > img,
.ic-media-list > video {
    max-width: 320px;
    max-height: 220px;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: #000;
    cursor: pointer;
}
.ic-media-list > audio { width: 320px; }

.comment-media-list > .comment-media {
    max-width: 280px;
    max-height: 200px;
    margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   Lightbox — fullscreen viewer for media in issues and comments
   ════════════════════════════════════════════════════════════════════════ */

/* Make thumbnails feel clickable */
.ic-media-list > img,
.comment-media-list > img.comment-media,
.ic-desc img {
    cursor: zoom-in;
    transition: opacity .12s;
}
.ic-media-list > img:hover,
.comment-media-list > img.comment-media:hover,
.ic-desc img:hover {
    opacity: .92;
}

body.lb-open {
    overflow: hidden;
}

.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: lb-fadein .15s ease-out;
}
/* The class above overrides the native [hidden] attribute (which UAs set
   to display:none). Re-establish hide-when-hidden explicitly. */
.lb-overlay[hidden] { display: none !important; }
@keyframes lb-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lb-stage {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-stage img,
.lb-stage video {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .8);
    background: #000;
    border-radius: 2px;
    display: block;
    cursor: zoom-out;
}
.lb-stage audio {
    width: min(600px, 90vw);
}

.lb-close {
    position: absolute;
    top: 14px; right: 18px;
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.lb-close:hover {
    background: rgba(255, 255, 255, .18);
}
.lb-close svg { display: block; }

.lb-prev,
.lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 64px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.lb-prev svg,
.lb-next svg { display: block; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-prev:hover,
.lb-next:hover {
    background: rgba(255, 255, 255, .14);
}

.lb-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-family: 'Roboto Mono', monospace;
    background: rgba(0, 0, 0, .4);
    padding: 4px 10px;
    border-radius: 2px;
}

@media (max-width: 600px) {
    .lb-overlay { padding: 12px; }
    .lb-prev, .lb-next { width: 40px; height: 52px; font-size: 26px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-close { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 20px; }
}