/* ── Custom properties ─────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg-page:        #f0f2f5;
  --bg-card:        #ffffff;
  --bg-input:       #ffffff;
  --bg-surface:     #f8fafc;
  --bg-surface2:    #f1f5f9;
  --shadow-card:    0 2px 16px rgba(0,0,0,.09);
  --shadow-popup:   0 4px 16px rgba(0,0,0,.10);
  --shadow-toast:   0 4px 20px rgba(0,0,0,.14);
  --border:         #e2e8f0;
  --border-section: #f1f5f9;
  --text-heading:   #0f172a;
  --text-primary:   #1e293b;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --text-label:     #374151;
  --text-opt:       #9ca3af;
  --text-input:     #1e293b;
  --accent:         #3b82f6;
  --accent-dim:     rgba(59,130,246,.12);
  --accent-btn:     #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-active:  #1e40af;
  --accent-dis:     #93c5fd;
  --tag-accent:     #6366f1;
  --tag-accent-bg:  #eef2ff;
  --tag-accent-bd:  #c7d2fe;
  --tag-accent-hov: #e0e7ff;
  --tag-accent-tx:  #4f46e5;
  --tag-bg:         #f8fafc;
  --tag-bd:         #e2e8f0;
  --tag-tx:         #64748b;
  --pill-bg:        #cbd5e1;
  --pill-on:        #22c55e;
  --bg-toast:       #ffffff;
  --tx-toast:       #374151;
  --toast-link:     #2563eb;
  --ac-bg:          #ffffff;
  --ac-hov-bg:      #f1f5f9;
  --ac-hov-tx:      #1d4ed8;
  --notice-bg:      linear-gradient(135deg,#fffbeb,#fef3c7);
  --notice-bd:      #f59e0b;
  --notice-title:   #92400e;
  --notice-text:    #b45309;
  --ok-bg:#f0fdf4; --ok-bd:#86efac; --ok-tx:#166534;
  --ex-bg:#fffbeb; --ex-bd:#fcd34d; --ex-tx:#78350f;
  --er-bg:#fef2f2; --er-bd:#fca5a5; --er-tx:#7f1d1d;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:        #0d1117;
  --bg-card:        #161b22;
  --bg-input:       #0d1117;
  --bg-surface:     #0d1117;
  --bg-surface2:    #21262d;
  --shadow-card:    0 2px 16px rgba(0,0,0,.5);
  --shadow-popup:   0 4px 16px rgba(0,0,0,.5);
  --shadow-toast:   0 4px 20px rgba(0,0,0,.7);
  --border:         #30363d;
  --border-section: #21262d;
  --text-heading:   #e6edf3;
  --text-primary:   #c9d1d9;
  --text-secondary: #8b949e;
  --text-muted:     #6e7681;
  --text-label:     #c9d1d9;
  --text-opt:       #8b949e;
  --text-input:     #c9d1d9;
  --accent:         #3b82f6;
  --accent-dim:     rgba(59,130,246,.2);
  --accent-btn:     #1d4ed8;
  --accent-hover:   #2563eb;
  --accent-active:  #3b82f6;
  --accent-dis:     #1e3a5f;
  --tag-accent:     #818cf8;
  --tag-accent-bg:  #1e1e38;
  --tag-accent-bd:  #3730a3;
  --tag-accent-hov: #1e1b4b;
  --tag-accent-tx:  #a5b4fc;
  --tag-bg:         #21262d;
  --tag-bd:         #30363d;
  --tag-tx:         #8b949e;
  --pill-bg:        #30363d;
  --pill-on:        #2ea043;
  --bg-toast:       #1c2128;
  --tx-toast:       #c9d1d9;
  --toast-link:     #60a5fa;
  --ac-bg:          #1c2128;
  --ac-hov-bg:      #21262d;
  --ac-hov-tx:      #60a5fa;
  --notice-bg:      linear-gradient(135deg,#2a1a00,#1c1000);
  --notice-bd:      #9e6a03;
  --notice-title:   #d29922;
  --notice-text:    #9e6a03;
  --ok-bg:#0d2a18; --ok-bd:#2ea043; --ok-tx:#3fb950;
  --ex-bg:#2a1e0a; --ex-bd:#9e6a03; --ex-tx:#d29922;
  --er-bg:#2d1212; --er-bd:#f85149; --er-tx:#ff7b72;
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    transition: background-color .25s;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 660px;
    padding: 2rem 2.25rem 2.25rem;
    transition: background-color .25s, box-shadow .25s;
}

/* ── Header bar ───────────────────────────────────────────── */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .2rem;
}
.topbar-left { display: flex; align-items: center; gap: .75rem; }
.logo-img { height: 38px; width: auto; display: block; }
h1 { font-size: 1.35rem; font-weight: 700; color: var(--text-heading); }

.topbar-right { display: flex; align-items: center; gap: .75rem; }
.logout { font-size: .78rem; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.logout:hover { color: #ef4444; }

/* ── Theme toggle ─────────────────────────────────────────── */
.theme-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 5px; border-radius: 6px;
    display: flex; align-items: center; line-height: 1;
    transition: color .15s, background-color .15s;
}
.theme-toggle:hover { color: var(--text-secondary); background: var(--bg-surface2); }

/* ── Notification toggle ──────────────────────────────────── */
.notif-toggle {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; user-select: none; border: none; background: none; padding: 0;
}
.notif-toggle .pill {
    width: 32px; height: 18px; border-radius: 9px;
    background: var(--pill-bg); position: relative;
    transition: background .2s; flex-shrink: 0;
}
.notif-toggle .pill::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%; background: #fff;
    transition: transform .2s;
}
.notif-toggle.on .pill { background: var(--pill-on); }
.notif-toggle.on .pill::after { transform: translateX(14px); }

/* ── Typography ───────────────────────────────────────────── */
.subtitle { font-size: .85rem; color: var(--text-secondary); margin-bottom: 1.75rem; }
.section {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted);
    margin: 1.5rem 0 .85rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border-section);
    transition: border-color .25s, color .25s;
}

/* ── Form elements ────────────────────────────────────────── */
.field { margin-bottom: .9rem; }
label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-label); }
label .opt { font-weight: 400; color: var(--text-opt); }

.url-wrap { display: flex; gap: .5rem; }
.url-wrap input { flex: 1; min-width: 0; }

input[type="text"],
input[type="url"],
input[type="number"],
select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: .9rem;
    color: var(--text-input);
    background: var(--bg-input);
    outline: none;
    -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s, background-color .25s, color .25s;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input.error { border-color: #f87171; }

.fetch-btn {
    padding: .5rem .9rem;
    background: var(--bg-surface2); border: 1.5px solid var(--border);
    border-radius: 7px; font-size: .82rem; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .25s, color .25s;
    flex-shrink: 0; touch-action: manipulation;
}
.fetch-btn:hover { background: var(--border); }
.fetch-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Ticket preview card ──────────────────────────────────── */
.ticket-card {
    background: var(--bg-surface); border: 1.5px solid var(--border);
    border-radius: 8px; padding: .75rem 1rem;
    margin-top: .5rem; display: none;
    transition: background-color .25s, border-color .25s;
}
.ticket-card.visible { display: block; }
.ticket-card .tc-row { display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap; }
.ticket-card .tc-num { font-size: .8rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ticket-card .tc-title { font-size: .88rem; color: var(--text-primary); font-weight: 500; }
.tc-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.tc-badge {
    display: inline-block; font-size: .72rem; font-weight: 600;
    padding: .18rem .55rem; border-radius: 999px;
    border: 1px solid; text-transform: capitalize; letter-spacing: .02em;
}
[data-theme="dark"] .tc-badge {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* ── DevOps disabled notice ───────────────────────────────── */
.devops-disabled-notice {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--notice-bg);
    border: 1.5px solid var(--notice-bd);
    border-left: 4px solid var(--notice-bd);
    border-radius: 10px; padding: 1.1rem 1.25rem;
    margin-top: 1.5rem;
    transition: border-color .25s;
}
.devops-disabled-icon { flex-shrink: 0; margin-top: .1rem; }
.devops-disabled-text strong {
    display: block; margin-bottom: .4rem;
    font-size: .92rem; font-weight: 700; color: var(--notice-title);
}
.devops-disabled-text p {
    margin: 0; font-size: .83rem;
    color: var(--notice-text); line-height: 1.55;
}

/* ── Tags suggestion UI ───────────────────────────────────── */
.tags-label-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .3rem;
}
.tag-suggest-btn {
    font-size: .75rem; font-weight: 600; color: var(--tag-accent);
    background: var(--tag-accent-bg); border: 1.5px solid var(--tag-accent-bd);
    border-radius: 6px; padding: .22rem .65rem; cursor: pointer;
    transition: background-color .12s, opacity .12s, border-color .25s, color .25s;
    white-space: nowrap;
}
.tag-suggest-btn:hover:not(:disabled) { background: var(--tag-accent-hov); }
.tag-suggest-btn:disabled { opacity: .4; cursor: not-allowed; }

.tag-suggest-header {
    font-size: .73rem; font-weight: 600; color: var(--tag-accent);
    margin: .5rem 0 .4rem;
    transition: color .25s;
}

.tag-options {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .1rem;
}
.tag-option {
    font-size: .75rem; font-weight: 600;
    padding: .28rem .7rem; border-radius: 999px;
    border: 1.5px solid var(--tag-bd);
    background: var(--tag-bg); color: var(--tag-tx);
    cursor: pointer;
    transition: all .12s; user-select: none;
}
.tag-option:hover { border-color: var(--tag-accent-bd); color: var(--tag-accent-tx); background: var(--tag-accent-bg); }
.tag-option.selected {
    background: var(--tag-accent-bg); color: var(--tag-accent-tx);
    border-color: var(--tag-accent-bd);
}
.tag-option.selected::after { content: ' ✓'; font-size: .7rem; opacity: .7; }

/* ── Tag autocomplete dropdown ────────────────────────────── */
.tag-autocomplete {
    position: absolute; z-index: 1000;
    background: var(--ac-bg); border: 1.5px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-popup);
    max-height: 220px; overflow-y: auto;
    width: 100%; margin-top: 2px;
    transition: background-color .25s, border-color .25s;
}
.tag-ac-item {
    padding: .5rem .75rem; font-size: .85rem; color: var(--text-primary);
    cursor: pointer; transition: background .1s, color .1s;
}
.tag-ac-item:hover, .tag-ac-item.active { background: var(--ac-hov-bg); color: var(--ac-hov-tx); }
.tag-ac-item mark { background: none; color: var(--tag-accent); font-weight: 700; }

/* ── Grid row ─────────────────────────────────────────────── */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Submit button ────────────────────────────────────────── */
.btn {
    width: 100%; padding: .72rem 1rem;
    background: var(--accent-btn); color: #fff;
    border: none; border-radius: 8px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer; margin-top: 1.5rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: background .15s; touch-action: manipulation;
}
.btn:hover:not(:disabled) { background: var(--accent-hover); }
.btn:active:not(:disabled) { background: var(--accent-active); }
.btn:disabled { background: var(--accent-dis); cursor: not-allowed; }

.spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50%;
    animation: spin .55s linear infinite; display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Result banner ────────────────────────────────────────── */
#result {
    margin-top: 1.25rem; border-radius: 8px;
    padding: 1rem 1.1rem; font-size: .88rem;
    display: none; line-height: 1.55;
    transition: background-color .25s, border-color .25s, color .25s;
}
#result.success { background: var(--ok-bg); border: 1.5px solid var(--ok-bd); color: var(--ok-tx); }
#result.exists  { background: var(--ex-bg); border: 1.5px solid var(--ex-bd); color: var(--ex-tx); }
#result.error   { background: var(--er-bg); border: 1.5px solid var(--er-bd); color: var(--er-tx); }
.result-title { font-weight: 700; margin-bottom: .35rem; font-size: .92rem; }
#result a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ── Toast notifications ──────────────────────────────────── */
#toast-container {
    position: fixed; top: 1rem; right: 1rem;
    display: flex; flex-direction: column; gap: .6rem;
    z-index: 9999; width: calc(100vw - 2rem); max-width: 340px;
}
.toast {
    background: var(--bg-toast); border-radius: 10px;
    box-shadow: var(--shadow-toast);
    padding: .85rem 1rem; font-size: .84rem;
    line-height: 1.45; border-left: 4px solid var(--accent);
    animation: slideIn .25s ease; cursor: pointer; word-break: break-word;
    transition: background-color .25s;
}
.toast.info    { border-color: #3b82f6; }
.toast.success { border-color: #22c55e; }
.toast.exists  { border-color: #f59e0b; }
.toast.error   { border-color: #ef4444; }
.toast-title   { font-weight: 700; margin-bottom: .2rem; font-size: .87rem; color: var(--text-heading); }
.toast a       { color: var(--toast-link); text-decoration: underline; }
.toast-body    { color: var(--tx-toast); }

@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.hide { animation: slideOut .3s ease forwards; }
@keyframes slideOut { to { transform: translateX(120%); opacity: 0; } }

/* ── Responsive: Tablet (≤768px) ─────────────────────────── */
@media (max-width: 768px) {
    body { padding: 1.5rem .75rem; }
    .card { padding: 1.5rem 1.25rem; }
    h1 { font-size: 1.15rem; }
}

/* ── Responsive: Mobile (≤520px) ─────────────────────────── */
@media (max-width: 520px) {
    body { padding: 1rem .5rem; align-items: flex-start; }
    .card { padding: 1.25rem 1rem; border-radius: 10px; max-width: 100%; }
    .row { grid-template-columns: 1fr; }
    .topbar { flex-wrap: wrap; gap: .5rem; }
    .topbar-right { gap: .5rem; }
    .notif-toggle .notif-label { display: none; }
    h1 { font-size: 1rem; }
    .subtitle { font-size: .8rem; }
    .section { font-size: .65rem; }
    .logo-img { height: 26px !important; }
    .url-wrap { flex-direction: column; }
    .fetch-btn { width: 100%; text-align: center; }
    #toast-container { top: .5rem; right: .5rem; width: calc(100vw - 1rem); }
}

/* ── Responsive: Large (≥1024px) ─────────────────────────── */
@media (min-width: 1024px) {
    .card { padding: 2.25rem 2.5rem; }
}