/* ==================== RESET & BASE ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--f-sans);
    font-size: var(--fs, 13px);
    line-height: 1.45;
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    transition: background .2s, color .2s;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Monospace utility for numbers/prices/IDs */
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

/* Focus ring for keyboard navigation */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* ==================== THEME BUTTON ==================== */
.theme-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg-1); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: background .15s, border-color .15s;
    flex-shrink: 0; color: var(--fg-2);
}
.theme-btn:hover { background: var(--bg-hover); border-color: var(--line-2); color: var(--fg); }

/* ==================== MODALS ==================== */
.adm-modal-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 100;
    animation: dx-fade 140ms;
}
[data-theme="light"] .adm-modal-backdrop { background: rgba(0,0,0,.35); }
.adm-modal-backdrop.open { display: block; }
@keyframes dx-fade { from { opacity: 0 } to { opacity: 1 } }
.adm-modal {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 460px; max-width: 92vw;
    background: var(--bg-1);
    border-radius: 10px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    z-index: 101; padding: 0;
    animation: dx-popin 180ms cubic-bezier(.2,.6,.2,1);
}
@keyframes dx-popin {
    from { opacity: 0; transform: translate(-50%,-52%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.adm-modal.open { display: block; }
.adm-modal h3 {
    font-size: 14px; font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.adm-modal-field { padding: 0 16px; margin-bottom: 12px; }
.adm-modal-field:first-of-type { padding-top: 14px; }
.adm-modal-label {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--fg-3); text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 5px;
}
.adm-modal-input {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg-2); color: var(--fg);
    font: 13px var(--f-sans); outline: none;
    transition: border-color var(--t);
}
.adm-modal-input:focus { border-color: var(--acc); }
.adm-modal-input:disabled { opacity: .55; cursor: not-allowed; }
.adm-modal-select {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg-2); color: var(--fg);
    font: 13px var(--f-sans); outline: none; cursor: pointer;
    transition: border-color var(--t);
}
.adm-modal-select:focus { border-color: var(--acc); }
.adm-modal-submit {
    width: calc(100% - 32px); margin: 6px 16px 16px;
    padding: 10px; border: none; border-radius: var(--r);
    background: var(--acc); color: var(--invert);
    font: 600 13px var(--f-sans); cursor: pointer;
    transition: background var(--t);
}
.adm-modal-submit:hover { background: var(--acc-hi); }
.adm-modal-submit.orange { background: var(--warn); }
.adm-modal-submit.orange:hover { background: #fbbf24; }
.adm-modal-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: var(--fg-3);
    width: 26px; height: 26px; border-radius: 4px;
    display: grid; place-items: center;
    transition: background var(--t), color var(--t);
}
.adm-modal-close:hover { background: var(--bg-hover); color: var(--fg); }

/* ==================== EMPTY / UTILITY ==================== */
.empty { text-align: center; padding: 40px; color: var(--fg-4); font-size: 13px; }

/* ==================== GENERIC PILLS / TAGS / CHIPS ==================== */
.tag {
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 6px;
    font-family: var(--f-mono);
    font-size: 10px; font-weight: 500;
    border-radius: 3px;
    background: var(--bg-3); color: var(--fg-3);
    border: 1px solid var(--line);
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.tag.ok   { color: var(--ok);   border-color: var(--ok);   background: rgba(16,185,129,.10); }
.tag.warn { color: var(--warn); border-color: var(--warn); background: rgba(245,158,11,.10); }
.tag.bad  { color: var(--bad);  border-color: var(--bad);  background: var(--bad-tint); }
.tag.acc  { color: var(--acc);  border-color: var(--acc);  background: var(--acc-tint); }
[data-theme="light"] .tag.acc { color: var(--acc-lo); }

.chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 24px; padding: 0 8px;
    border-radius: var(--r);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-2);
    font-size: 11px;
    font-family: var(--f-mono);
    cursor: pointer;
    transition: all var(--t);
    white-space: nowrap;
}
.chip:hover { border-color: var(--line-2); color: var(--fg); }
.chip.on { background: var(--acc-tint); border-color: var(--acc); color: var(--acc); }
[data-theme="light"] .chip.on { color: var(--acc-lo); }

/* ==================== BUTTONS (reusable) ==================== */
.btn-primary {
    height: 34px;
    padding: 0 14px;
    background: var(--acc); color: var(--invert);
    border-radius: var(--r);
    border: none;
    font: 600 13px var(--f-sans);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background var(--t);
}
.btn-primary:hover { background: var(--acc-hi); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary.big { height: 40px; font-size: 14px; padding: 0 18px; }

.btn-ghost {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-2);
    color: var(--fg-2);
    font: 500 13px var(--f-sans);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--t);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--line-2); }

.btn-danger {
    height: 34px; padding: 0 14px;
    background: var(--bad-tint);
    border: 1px solid var(--bad);
    color: var(--bad);
    border-radius: var(--r);
    font: 500 12px var(--f-sans);
    cursor: pointer;
    transition: all var(--t);
}
.btn-danger:hover { background: var(--bad); color: var(--invert); }

/* ==================== CONFIRM / PROMPT MODAL (common.js) ==================== */
.confirm-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    animation: dx-fade 140ms;
}
[data-theme="light"] .confirm-backdrop { background: rgba(0,0,0,.35); }
.confirm-modal {
    background: var(--bg-1, var(--surface, #1f2937));
    color: var(--fg, #e5e7eb);
    border: 1px solid var(--line, var(--border, #374151));
    border-radius: 10px;
    padding: 20px;
    width: 420px; max-width: 92vw;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    /* Centered via flex backdrop — DON'T translate, otherwise the dx-popin
       keyframe (which targets fixed-positioned admin modals) shifts this
       one off-center on the first animation frame and snaps it back. */
    animation: dx-popin-centered 180ms cubic-bezier(.2,.6,.2,1);
}
@keyframes dx-popin-centered {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.confirm-msg {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg, var(--text, #e5e7eb));
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}
.confirm-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    margin-bottom: 14px;
    border: 1px solid var(--line, var(--border, #374151));
    border-radius: var(--r, 6px);
    background: var(--bg-2, var(--bg, #111827));
    color: var(--fg, var(--text, #e5e7eb));
    font: 13px var(--f-sans, Inter, sans-serif);
    outline: none;
}
.confirm-input:focus { border-color: var(--acc, var(--accent, #3b82f6)); }
textarea.confirm-input { height: auto; min-height: 48px; padding: 8px 10px; resize: vertical; font-family: var(--f-sans, Inter, sans-serif); }
.confirm-field-label {
    display: block;
    font-size: 10px; font-weight: 600;
    color: var(--fg-3, var(--text2, #9ca3af));
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-btns button {
    padding: 8px 16px;
    border-radius: var(--r, 6px);
    border: 1px solid var(--line, var(--border, #374151));
    background: var(--bg-2, var(--bg, #111827));
    color: var(--fg, var(--text, #e5e7eb));
    cursor: pointer;
    font: 500 13px var(--f-sans, Inter, sans-serif);
    transition: background .15s, border-color .15s;
}
.confirm-btns button:hover { border-color: var(--line-2, #4b5563); }
.confirm-btns .confirm-btn-ok {
    background: var(--acc, var(--accent, #3b82f6));
    color: var(--invert, #fff);
    border-color: var(--acc, var(--accent, #3b82f6));
}
.confirm-btns .confirm-btn-ok:hover { background: var(--acc-hi, #2563eb); }
.confirm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid var(--line, var(--border, #374151));
    border-radius: var(--r, 6px);
    background: var(--bg-2, var(--bg, #111827));
    font-size: 13px;
    color: var(--fg, var(--text, #e5e7eb));
    cursor: pointer;
    user-select: none;
}
.confirm-checkbox input { margin: 0; cursor: pointer; }
.confirm-btns .confirm-btn-ok.danger {
    background: var(--bad, var(--red, #ef4444));
    border-color: var(--bad, var(--red, #ef4444));
}

/* ==================== SCROLLBARS (dark) ==================== */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }