/* Font + readability tuning on top of Unfold. All CSS-only — revert to roll back. */

/* --- Manrope (primary): geometric, minimalist, native Cyrillic ------------- */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-cyrillic.e58febde317b.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Inter kept only as a fallback for any glyph Manrope's subset lacks. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
}

/* Point Unfold's --font-sans at Manrope. */
:root {
    --font-sans: "Manrope", "Inter", system-ui, sans-serif !important;
}

body {
    font-optical-sizing: auto;
    font-feature-settings: "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Readability tweaks ---------------------------------------------------- */

/* Consistent, non-jittery numbers in tables. */
#content table td,
#content table th {
    font-variant-numeric: tabular-nums;
}

/* A bit more vertical air in list rows (Unfold ships py-2). */
#result_list td,
#result_list th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Sticky table header — column titles stay visible while scrolling the list.
   Theme is forced light, so a white surface + hairline is safe. */
#result_list thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}

/* --- Action buttons: quiet system, one focal accent (2026 palette) ---------
   Restraint over noise: the neutral canvas stays quiet, a single indigo
   accent marks the primary action, and destructive actions use a soft
   (tonal) red instead of a shouting solid fill. */

/* Focal / primary actions (Онбордить, Купить, Ввести в бой) already carry the
   indigo fill — add a soft lift so they read as THE action without competing
   for attention by colour alone. */
#content a.bg-primary-600,
#content button.bg-primary-600 {
    box-shadow: 0 1px 2px rgba(30, 27, 75, 0.12),
                0 6px 16px -6px rgba(79, 70, 229, 0.5);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#content a.bg-primary-600:hover,
#content button.bg-primary-600:hover {
    box-shadow: 0 2px 4px rgba(30, 27, 75, 0.16),
                0 10px 22px -6px rgba(79, 70, 229, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
    #content a.bg-primary-600:hover,
    #content button.bg-primary-600:hover {
        transform: translateY(-1px);
    }
}

/* Destructive action: soft/tonal red (Radix-style) — quiet, unmistakable. */
.dr-btn-danger {
    background: #fef2f2; /* red-50  */
    color: #b91c1c;      /* red-700 */
    border: 1px solid #fecaca; /* red-200 */
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dr-btn-danger:hover {
    background: #fee2e2; /* red-100 */
    border-color: #fca5a5; /* red-300 */
}

/* Loading spinner used on slow list actions (Обновить домены / Проверить …). */
.dr-spin {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(100, 116, 139, 0.35); border-top-color: #4f46e5;
    border-radius: 9999px; vertical-align: middle;
    animation: dr-rot 0.6s linear infinite;
}
@keyframes dr-rot { to { transform: rotate(360deg); } }

/* --- Shared purchase modal (admin list + panel), built by buy_modal.js ------
   Classes are dr- prefixed so they never collide with Unfold/Tailwind. */
.dr-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex;
    align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.dr-modal[hidden] { display: none; }
.dr-card { background: #fff; border-radius: 14px; width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px -12px rgba(15,23,42,.35);
    padding: 22px 24px; font-size: 14px; color: #334155; }
.dr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dr-head h2 { font-size: 18px; font-weight: 600; margin: 0; color: #18181b; }
.dr-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.dr-x:hover { color: #475569; }
.dr-desc { color: #64748b; font-size: 13px; margin: 0 0 16px; }
.dr-row { display: block; margin-bottom: 16px; }
.dr-row > span { display: block; margin-bottom: 6px; }
.dr-select, .dr-qty, .dr-names { border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px;
    font-size: 14px; font-family: inherit; box-sizing: border-box; }
.dr-select { width: 100%; }
.dr-qty { width: 72px; margin-left: 6px; }
.dr-names { width: 100%; }
.dr-tabs { display: flex; gap: 6px; background: #f1f5f9; padding: 4px; border-radius: 9px; margin-bottom: 16px; }
.dr-tab { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 6px; font-size: 13px;
    font-weight: 500; color: #64748b; cursor: pointer; }
.dr-tab.dr-active { background: #fff; color: #18181b; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.dr-pane { margin-bottom: 14px; }
.dr-pane[hidden] { display: none; }
.dr-hint { color: #94a3b8; font-size: 12px; margin: 8px 0 0; }
.dr-result { margin: 4px 0 14px; border-top: 1px solid #eef2f7; padding-top: 14px; }
.dr-result[hidden] { display: none; }
.dr-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.dr-item { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dr-item.dr-taken { color: #94a3b8; }
.dr-item .dr-ok { color: #22c55e; font-weight: 700; }
.dr-item .dr-no { color: #ef4444; font-weight: 700; }
.dr-item .dr-price { margin-left: auto; font-weight: 600; color: #334155; }
.dr-item .dr-why { margin-left: auto; font-size: 12px; }
.dr-balance { margin-top: 12px; font-size: 13px; padding: 8px 10px; border-radius: 6px; }
.dr-balance.dr-good { background: #f0fdf4; color: #166534; }
.dr-balance.dr-bad { background: #fef2f2; color: #991b1b; }
.dr-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dr-btn { border: 0; border-radius: 6px; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.dr-btn-primary { background: #4f46e5; color: #fff; box-shadow: 0 1px 2px rgba(30,27,75,.12), 0 6px 16px -6px rgba(79,70,229,.5); }
.dr-btn-primary:hover { background: #4338ca; }
.dr-btn-ghost { background: #fff; color: #18181b; border: 1px solid #d1d5db; }
.dr-btn-ghost:hover { background: #f8fafc; }
.dr-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Change / add forms keep Unfold's centred, max-width `container mx-auto`, which
   leaves a wide empty gap between the sidebar and the form. Make them flush and
   full-width — matching the list pages and the panel — so the form sits right
   against the sidebar. Scoped to `body.change-form` (Django's change/add view
   class) so lists (`.change-list`) and the panel are untouched. Both the header
   row and the content share the container, so widening both keeps them aligned. */
body.change-form .container.mx-auto {
    max-width: none !important;
}

/* Action toolbar moved out of the header (admin.js bindToolbar): the page
   title on the left, the action buttons + "Add" on the right, on their own row
   below the header so nothing crowds the clock/bell. */
#dr-toolbar { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; min-height: 40px; }
#dr-toolbar-title { font-size: 15px; font-weight: 700; color: #1e293b; letter-spacing: -.01em; }