/* ===================================================
   Prozorro Monitor — admin стиль "по мотивам Hando"
   Bootstrap 5 поверх з темним sidebar + карточки
   =================================================== */

:root {
    --sidebar-bg:      #1e2a3a;
    --sidebar-fg:      #c9d1db;
    --sidebar-active:  #27ae60;
    --sidebar-hover:   rgba(255,255,255,.06);
    --content-bg:      #f4f6f9;
    --topbar-bg:       #ffffff;
}

html, body {
    height: 100%;
    background: var(--content-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.admin-wrap {
    display: flex;
    min-height: 100vh;
}

/* -------------------- Sidebar -------------------- */
.admin-sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #fff;
}
.sidebar-brand .brand-icon { font-size: 28px; }
.sidebar-brand .brand-text { line-height: 1.1; }
.sidebar-brand small { color: var(--sidebar-fg); font-weight: 400; font-size: 11px; letter-spacing: .5px; }

.sidebar-nav { flex: 1; padding: 14px 0; }
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--sidebar-fg);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.sidebar-nav .nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav .nav-item.active {
    background: var(--sidebar-hover);
    color: #fff;
    border-left-color: var(--sidebar-active);
}
.sidebar-nav .nav-item i { font-size: 16px; width: 18px; text-align: center; }

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    color: rgba(255,255,255,.45);
}

/* -------------------- Main area -------------------- */
.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.admin-topbar {
    background: var(--topbar-bg);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e8ee;
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-topbar h4 { font-weight: 600; color: #1a1a2e; }

.admin-content { padding: 24px 28px 40px; flex: 1; }

/* -------------------- Cards -------------------- */
.stat-card .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8893a5;
    margin-top: 6px;
}

/* -------------------- Category pills (dashboard) -------------------- */
.category-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background: color-mix(in srgb, var(--cat-color) 15%, white);
    color: var(--cat-color);
    border: 1px solid color-mix(in srgb, var(--cat-color) 30%, white);
    transition: transform .1s, box-shadow .1s;
}
.cat-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.cat-pill input { accent-color: var(--cat-color); cursor: pointer; }

/* -------------------- Categories page -------------------- */
.category-detail .card-header {
    background: color-mix(in srgb, var(--cat-color) 8%, white);
    border-bottom: 2px solid var(--cat-color);
}
.category-detail .cat-icon { font-size: 20px; margin-right: 6px; }

.keyword-list { display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-chip {
    background: #eef1f5;
    color: #40526b;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.border-dashed { border: 2px dashed #c5cdd9 !important; background: #fafbfc; }

/* -------------------- Tender cards -------------------- */
.tender-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    border-left: 5px solid #ccc;
    transition: transform .15s, box-shadow .15s;
}
.tender-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.tender-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.category-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 14px;
}
.status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.tender-card h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 14px;
    color: #1a1a2e;
}
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.info-row { display: flex; flex-direction: column; gap: 2px; }
.info-row .lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9aa5b5;
    font-weight: 600;
}
.info-row .val { font-size: 14px; color: #2b3547; font-weight: 500; }
.info-row .val.amount { font-size: 20px; font-weight: 700; color: #27ae60; }
.info-row.full { grid-column: 1 / -1; }

.tender-desc {
    margin-top: 10px;
    font-size: 13px;
    color: #556478;
    line-height: 1.5;
    padding: 10px 14px;
    background: #f7f9fc;
    border-radius: 8px;
    border-left: 3px solid #dde3eb;
}

.items-section { margin-top: 16px; border-top: 1px solid #eef1f5; padding-top: 12px; }
.items-section h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #8893a5;
    margin-bottom: 10px;
    font-weight: 600;
}
.items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.items-table thead th {
    background: #f7f9fc;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: #556478;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid #eef1f5;
}
.items-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid #f2f4f8;
    vertical-align: top;
}
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table .qty { font-weight: 700; color: #1a1a2e; white-space: nowrap; text-align: center; }

.tender-link {
    display: inline-block;
    margin-top: 14px;
    color: #2980b9;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.tender-link:hover { text-decoration: underline; }

/* -------------------- Active CPV / keywords panel -------------------- */
.active-cpv-panel {
    background: #fafbfc;
    border: 1px solid #e5e8ee;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
}
.active-cpv-panel > summary {
    list-style: none;
    padding: 4px 0;
    color: #2b3547;
}
.active-cpv-panel > summary::-webkit-details-marker { display: none; }
.active-cpv-panel h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8893a5;
    margin-bottom: 6px;
    font-weight: 600;
}
.cpv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef1f5;
    color: #40526b;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    margin: 2px;
}
.cpv-chip.custom {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffe69c;
}
.cpv-chip.disabled {
    background: #f5f5f5;
    color: #95a5a6;
    border: 1px dashed #c5cdd9;
    text-decoration: line-through;
}
.cpv-chip .chip-remove {
    cursor: pointer;
    font-weight: bold;
    opacity: .6;
    margin-left: 2px;
    line-height: 1;
}
.cpv-chip .chip-remove:hover {
    opacity: 1;
    color: #c0392b;
}
.cpv-chip.disabled .chip-remove {
    color: #27ae60;
}
.cpv-chip.disabled .chip-remove:hover {
    color: #27ae60;
    opacity: 1;
}
.chip-count {
    font-size: 10px;
    font-weight: 400;
    color: #bac3cf;
    margin-left: 4px;
}
.disabled-section {
    border-top: 1px dashed #d5dae0;
    margin-top: 12px;
    padding-top: 12px;
}
.save-indicator {
    font-size: 11px;
    font-weight: 400;
    color: #bac3cf;
}
.save-indicator.saving { color: #e67e22; }
.save-indicator.saved  { color: #27ae60; }
.save-indicator.error  { color: #c0392b; }
.custom-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.custom-add-row input { flex: 1; }

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .admin-sidebar { width: 70px; min-width: 70px; }
    .sidebar-brand .brand-text,
    .sidebar-nav .nav-item span,
    .sidebar-footer { display: none; }
    .sidebar-nav .nav-item { justify-content: center; padding: 14px 8px; }
    .admin-content { padding: 16px; }
    .info-grid { grid-template-columns: 1fr; }
}