body { background-color: #f8f9fa; }
[hidden] { display: none !important; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f8f9fa; }
.login-card { width: min(480px, 100%); }
.desktop-admin { min-height: 100vh; }
.desktop-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.desktop-tabs .nav-link { color: #495057; }
.desktop-tabs .nav-link.active { color: #0d6efd; font-weight: 600; }
.desktop-tabs .nav-link.text-danger.active { color: #dc3545; }
.stat-card .card-body { display: flex; align-items: center; justify-content: space-between; }
.stat-card .stat-icon { font-size: 3rem; opacity: .3; }
.stat-card .stat-text { text-align: right; }
.stat-card h5 { font-size: 1rem; color: #6c757d; }
.stat-card p { font-size: 2rem; font-weight: 600; margin: 0; }
.desktop-admin .card { border-color: #dee2e6; }
.desktop-admin .table th { white-space: nowrap; }
.dashboard-stock-scroll { max-height: 280px; overflow-y: auto; }
.dashboard-stock-scroll.is-expanded { max-height: none; }
.dashboard-stock-scroll thead th { position: sticky; top: 0; z-index: 1; background: #f8f9fa; }
.desktop-admin .tab-content { min-height: calc(100vh - 190px); }
@media (max-width: 768px) { .desktop-admin { padding: 16px !important; } .desktop-admin h1 { font-size: 1.35rem; } .desktop-tabs { margin-right: -16px; } }

/* Desktop parity: persistent left navigation with animated status accents. */
.desktop-admin { padding-left: 268px !important; background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%); }
.desktop-admin .desktop-tabs { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 248px; overflow-y: auto; display: block; padding: 20px 12px; border: 0; border-right: 1px solid #dbe6f5; background: #0d1b35; box-shadow: 8px 0 24px rgba(13, 27, 53, .12); }
.desktop-admin .desktop-tabs::before { content: "SALES BOT"; display: block; color: #8ec5ff; font-size: .72rem; font-weight: 800; letter-spacing: .18em; padding: 8px 14px 20px; }
.desktop-admin .desktop-tabs .nav-item { display: block; margin: 3px 0; }
.desktop-admin .desktop-tabs .nav-link { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 11px; color: #b8c8e6; padding: 11px 13px; transition: transform .18s ease, background .18s ease, color .18s ease; }
.desktop-admin .desktop-tabs .nav-link:hover { color: #fff; background: rgba(111, 178, 255, .16); transform: translateX(3px); }
.desktop-admin .desktop-tabs .nav-link.active { color: #fff; background: linear-gradient(90deg, #1769e0, #438cf5); box-shadow: 0 7px 18px rgba(23, 105, 224, .28); }
.desktop-admin .desktop-tabs .nav-link i { width: 22px; text-align: center; font-size: 1.05rem; }
.desktop-admin .desktop-tabs .nav-link.active i { animation: menuIconPulse 1.8s ease-in-out infinite; }
.desktop-admin .tab-content { min-height: calc(100vh - 120px); border-top: 1px solid #dee2e6 !important; border-radius: 0 0 14px 14px; }
.category-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; vertical-align: middle; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.category-icon-google { background: linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); }
.category-icon-tiktok { background: linear-gradient(135deg,#111,#25f4ee,#fe2c55); }
.category-icon-facebook { background: #1877f2; }
.category-icon-youtube { background: #ff0033; }
.category-icon-chatgpt { background: #10a37f; }
.category-icon-telegram { background: #229ed9; }
.category-icon-game { background: linear-gradient(135deg,#6f42c1,#d63384); }
.category-icon-other { background: #6c757d; }
@keyframes menuIconPulse { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.13) rotate(-4deg); } }
@media (max-width: 900px) { .desktop-admin { padding-left: 16px !important; } .desktop-admin .desktop-tabs { position: static; width: auto; display: flex; overflow-x: auto; padding: 8px; margin: 0 -16px 16px; border-right: 0; border-bottom: 1px solid #dbe6f5; } .desktop-admin .desktop-tabs::before { display: none; } .desktop-admin .desktop-tabs .nav-item { display: inline-block; } .desktop-admin .desktop-tabs .nav-link { white-space: nowrap; } }

.app-confirm-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(12, 24, 43, .58); backdrop-filter: blur(5px); animation: appConfirmFadeIn .16s ease-out; }
.app-confirm-dialog { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 16px; width: min(460px, 100%); padding: 26px; border: 1px solid rgba(222, 231, 243, .9); border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(11, 27, 52, .3); animation: appConfirmPop .2s ease-out; }
.app-confirm-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #1769e0; background: #eaf2ff; font-size: 1.35rem; }
.app-confirm-icon.is-danger { color: #c6283d; background: #fff0f1; }
.app-confirm-copy h2 { margin: 3px 0 8px; color: #18263b; font-size: 1.15rem; font-weight: 750; }
.app-confirm-copy p { margin: 0; color: #59697f; line-height: 1.55; white-space: pre-line; }
.app-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.app-confirm-dialog.catalog-dialog { display: flex; flex-direction: column; align-items: stretch; width: min(1000px, 100%); max-height: 90dvh; overflow-y: auto; }
.catalog-dialog > * { min-width: 0; flex-shrink: 0; }
.catalog-dialog h2 { overflow-wrap: anywhere; margin: 0; }
.catalog-dialog .table-responsive { width: 100%; overflow-x: auto; }
.catalog-dialog .table { width: 100%; min-width: 720px; }
.catalog-dialog .app-confirm-actions { position: sticky; bottom: -26px; background: #fff; margin-top: auto; padding-bottom: 12px; }
.app-confirm-actions .btn { min-width: 92px; border-radius: 10px; font-weight: 650; }
#api-products-search { min-width: 0; }
#api-products-table-body tr[hidden], #api-categories-table-body tr[hidden] { display: none; }
.api-catalog-search { background: #f6f9ff; }
.api-catalog-search .input-group { max-width: 760px; }
@keyframes appConfirmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes appConfirmPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 520px) { .app-confirm-dialog { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px; border-radius: 16px; } .app-confirm-icon { width: 44px; height: 44px; border-radius: 13px; } }
.app-notice-stack { position: fixed; z-index: 2100; top: 20px; right: 20px; display: grid; gap: 12px; width: min(410px, calc(100vw - 32px)); pointer-events: none; }
.app-notice { --notice-color: #2875df; display: grid; grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 12px; align-items: start; padding: 15px 14px; border: 1px solid #dce7f5; border-left: 4px solid var(--notice-color); border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(18, 39, 68, .2); color: #213047; pointer-events: auto; animation: appConfirmPop .2s ease-out; }
.app-notice-success { --notice-color: #15945d; }
.app-notice-error { --notice-color: #d33e4e; }
.app-notice-warning { --notice-color: #d68a08; }
.app-notice-icon { color: var(--notice-color); padding-top: 2px; font-size: 1.15rem; }
.app-notice-copy { display: grid; gap: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.app-notice-copy strong { color: #19283e; font-size: .93rem; }
.app-notice-copy span { color: #526176; font-size: .9rem; }
.app-notice-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #718096; }
.app-notice-close:hover { background: #f0f4f8; color: #24354d; }
.app-notice.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .18s ease, transform .18s ease; }
.app-prompt-field { grid-column: 1 / -1; min-width: 0; }
.app-prompt-input { width: 100%; }
.app-prompt-input:focus { border-color: #75a9f5; box-shadow: 0 0 0 .22rem rgba(40, 117, 223, .16); }
@media (max-width: 520px) { .app-notice-stack { top: 10px; right: 10px; width: calc(100vw - 20px); } }

.catalog-notifications-scroll{max-height:280px;overflow:auto;overscroll-behavior:contain}.catalog-notifications-scroll.is-expanded{max-height:none}.catalog-notifications-scroll thead th{position:sticky;top:0;background:var(--bs-body-bg,#fff);z-index:1}
