/*
 * PLAYVODS | BLACK AMOLED + RED | 2026-10-09
 * Somente apresentacao. Nenhuma regra de login, banco, API ou sincronizacao e alterada.
 * Estilo compartilhado: todas as paginas administrativas + tela de login.
 */
:root {
    color-scheme: dark;
    --bg: #030303;
    --bg-soft: #080809;
    --bg-card: #0e0e11;
    --bg-card-hover: #181014;
    --bg-input: #09090b;
    --border: rgba(255,255,255,.12);
    --border-strong: rgba(225,35,56,.32);
    --text: #ffffff;
    --muted: #d2d2d9;
    --muted-2: #b5b5be;
    --red: #cf102d;
    --red-2: #ff3451;
    --red-soft: rgba(223,22,54,.15);
    --shadow: 0 16px 40px rgba(0,0,0,.44);
}

/* Barra de rolagem preta/vermelha no conteudo, menu, modais e tabelas. */
html,
body,
.sidebar,
.sidebar-nav,
.table-wrap,
.modal-overlay,
.modal-card,
pre,
textarea,
select,
* {
    scrollbar-color: #cf102d #050505;
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050505; border-radius: 12px; }
::-webkit-scrollbar-corner { background: #050505; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,#e51a3a,#970920);
    border-radius: 12px;
    border: 2px solid #050505;
}
::-webkit-scrollbar-thumb:hover { background: #ff3451; }
::-webkit-scrollbar-thumb:active { background: #b20c29; }
::selection { background: #b70d2e; color: #fff; }

html { background: #030303; }
body { color: #fff; background: #030303; }
.admin-body { overflow-x: clip; }
.admin-shell {
    min-width: 0;
    background:
        radial-gradient(ellipse at 78% 0%, rgba(190,12,36,.16), transparent 37%),
        linear-gradient(140deg,#030303 20%,#080407 66%,#030303) !important;
}
.admin-shell::before {
    background: radial-gradient(circle at 85% 18%,rgba(222,23,48,.07),transparent 32%);
}
.sidebar {
    background: #070709 !important;
    border-right: 1px solid rgba(220,24,47,.23);
    max-width: 90vw;
}
.sidebar-brand { border-bottom-color: rgba(222,30,54,.26); }
.sidebar-brand strong,
.topbar-title h1,
.card-header h2,
.card-header h3,
.stat-value,
.page-toolbar h2,
.form-section h3,
.modal-header h3,
.auth-card h2,
.summary-item strong,
.topbar-user-card strong { color: #fff; }
.sidebar-brand span,
.sidebar-section-title,
.sidebar-link,
.topbar-title p,
.topbar-user-card span,
.admin-footer,
.card-header p,
.stat-label,
.page-toolbar p,
.summary-item span,
.hint,
label { color: var(--muted); }
.sidebar-section-title { color: #ff9eaa; }
.sidebar-link { border: 1px solid transparent; }
.sidebar-link:hover, .sidebar-link:focus-visible {
    color: #fff;
    background: rgba(222,25,49,.13);
    border-color: rgba(230,30,52,.22);
}
.sidebar-link.is-active {
    background: linear-gradient(90deg,rgba(198,16,43,.27),rgba(135,13,34,.07));
    color: #fff;
    border-color: rgba(255,52,81,.43);
    box-shadow: inset 3px 0 0 #ff3451;
}
.sidebar-link.subtle { color: #ffabb8; }
.topbar {
    background: rgba(5,5,7,.97) !important;
    border-bottom: 1px solid rgba(224,25,52,.22);
}
.admin-main { min-width: 0; }
.admin-content { min-width: 0; }
.admin-footer { background: #060607; overflow-wrap: anywhere; }
.badge-online { color: #fff; background: #111114; border-color: rgba(255,255,255,.15); }
.topbar-user-card { background: #101012; border-color: rgba(255,255,255,.15); }

.card,
.stat-card,
.auth-card,
.modal-card,
.page-toolbar,
.form-section-panel {
    background: linear-gradient(155deg,rgba(21,13,16,.97),rgba(8,8,10,.98)) !important;
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 16px 44px rgba(0,0,0,.40);
}
.card,
.stat-card,
.page-toolbar,
.form-section,
.form-grid,
.form-sections,
.content-grid,
.stats-grid,
.method-grid,
.config-summary-grid,
.grid,
.modal-body { min-width: 0; }
.stat-card::after { background: rgba(205,15,42,.10); }
.summary-item,.method-item,.support-preview {
    background: #101013;
    border-color: rgba(255,255,255,.13);
}
.method-item.enabled { background: rgba(208,14,45,.15); border-color: #ae1931; }

/* Campos e botoes: sem fundo branco mesmo com autofill / selects nativos. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background: #0c0b0e;
    color: #fff;
    border-color: rgba(255,255,255,.20);
    min-width: 0;
    max-width: 100%;
}
input::placeholder, textarea::placeholder { color: #a6a6af; opacity: 1; }
input:focus,select:focus,textarea:focus {
    border-color: #ff3451;
    box-shadow: 0 0 0 3px rgba(222,18,49,.2);
}
input[type="checkbox"],input[type="radio"] { accent-color: #e7193b; }
select option { background: #09090b; color: #fff; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0c0b0e inset;
    caret-color: #fff;
}
.btn,button.btn { color: #fff; background: linear-gradient(180deg,#ef2547,#a50c28); }
.btn.btn-secondary,button.btn.btn-secondary {
    background: #221317;
    color: #fff;
    border: 1px solid rgba(236,55,78,.3);
    box-shadow: none;
}
.btn.btn-secondary:hover,button.btn.btn-secondary:hover { background: #3a151f; }
.btn-danger,.btn-small.btn-danger { background: #980d25; }
.btn:focus-visible, button:focus-visible, a:focus-visible,
[tabindex]:focus-visible { outline: 2px solid #ff536d; outline-offset: 2px; }

.table-wrap { width: 100%; max-width: 100%; background: #08080a; border-color: rgba(255,255,255,.16); }
table { color: #fff; }
.table-wrap table { width: 100%; }
th { color: #f6d9df; background: #170b0e; }
td { color: #fff; overflow-wrap: anywhere; }
tr:hover td { background: rgba(227,22,50,.065); }
code,pre { color: #fff; background: #100e11; border-color: rgba(227,36,61,.24); overflow-wrap: anywhere; }
pre { white-space: pre-wrap; }
.status-pill { color: #fff; }
.status-pill.off { background: #242226; color: #fff; }
.status-pill.warn { color: #fff; }
.status-pill.ok { color: #fff; }
.alert { color: #fff; background: #2c1017; }
.alert.success,.alert.ok { color: #fff; }
.alert.error { color: #fff; }
.modal-overlay { background: rgba(0,0,0,.84); }
.modal-close,.icon-button { color: #fff; background: #161014; border-color: rgba(231,42,66,.3); }
.detail-grid strong { overflow-wrap: anywhere; }

/* O seletor de data tinha azul fixo no proprio PHP: substitui apenas a cor. */
.datetime-picker-button { background: rgba(221,22,51,.20) !important; color: #ff6a80 !important; }
.datetime-picker-button:hover,.datetime-picker-button:focus-visible {
    background: rgba(226,19,49,.34) !important;
}

/* Mobile / tablets: menu acessivel, elementos sem corte horizontal. */
@media (max-width: 1200px) {
    .stats-grid { gap: 14px; }
    .content-grid { gap: 14px; }
}
@media (max-width: 900px) {
    .admin-main { width: 100%; margin-left: 0; }
    .sidebar { width: min(300px,90vw); }
    .sidebar-nav { overscroll-behavior: contain; }
    .sidebar-overlay.is-visible { background: rgba(0,0,0,.78); }
    .topbar { min-width: 0; }
}
@media (max-width: 700px) {
    .admin-content { padding: 16px 12px; }
    .admin-footer { padding: 16px 12px; }
    .topbar { padding: 12px; }
    .card,.stat-card,.page-toolbar { padding: 17px 14px; }
    .stats-grid,.content-grid,.form-grid.two-cols,.method-grid {
        grid-template-columns: minmax(0,1fr);
    }
    .stats-grid { gap: 12px; }
    .stat-value { font-size: clamp(1.6rem,7vw,2rem); overflow-wrap: anywhere; }
    .topbar-title h1 { font-size: clamp(.95rem,4.5vw,1.2rem); overflow-wrap: anywhere; }
    .topbar-left { min-width: 0; }
    .topbar-actions { flex-shrink: 0; gap: 5px; }
    .topbar-user-card { padding: 4px; }
    .user-avatar { width: 30px; height: 30px; }
    .badge { padding: 6px 7px; font-size: .72rem; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 610px; }
    .toolbar-actions { flex-direction: column; align-items: stretch; }
    .toolbar-actions .btn { width: 100%; }
    .card-actions,.table-actions,.modal-actions { max-width: 100%; }
    .card-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
    .modal-card { max-width: 100%; }
    .detail-grid { grid-template-columns: minmax(0,1fr); }
    .form-grid[style*="grid-template-columns"] {
        grid-template-columns: minmax(0,1fr) !important;
    }
    .inline-activate-form { min-width: 0; }
}
@media (max-width: 380px) {
    .topbar { gap: 6px; }
    .topbar-left { gap: 6px; }
    .icon-button { flex-shrink: 0; width: 37px; height: 37px; }
    .badge-online { font-size: 0; padding: 6px; }
    .badge-online .badge-dot { width: 8px; height: 8px; }
    .topbar-user-card { display: none; }
    .stats-grid { grid-template-columns: minmax(0,1fr); }
}

/* Login Tailwind: escopo exclusivo; restabelece rolagem e contraste. */
body.playvods-login {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    background: radial-gradient(ellipse at 22% 10%,#22060c 0%,#070608 45%,#030303 100%) !important;
    color: #fff;
}
.playvods-login .bg-animate,.playvods-login .bg-animate-2 { pointer-events: none; }
.playvods-login .neon-glow {
    background: rgba(14,10,12,.98);
    border-color: rgba(231,30,60,.23);
    box-shadow: 0 14px 45px rgba(0,0,0,.6),0 0 28px rgba(230,23,51,.12);
}
.playvods-login input { background: #0d0a0d !important; color: #fff !important; }
.playvods-login label { color: #e7e7eb; }
.playvods-login .text-gray-600,
.playvods-login .text-gray-500,
.playvods-login .text-gray-400,
.playvods-login .text-gray-300 { color: #d3d3da; }
.playvods-login .btn-glow { background: linear-gradient(95deg,#ee2748,#9e0b25); }
.playvods-login h1 .bg-gradient-to-r {
    background-image: linear-gradient(90deg,#ff3451,#ffffff) !important;
}
@media (max-width: 767px) {
    body.playvods-login { padding: 24px 14px !important; }
    .playvods-login .max-w-md { width: 100%; }
    .playvods-login .neon-glow { padding: 24px 18px; }
    .playvods-login .bg-animate,.playvods-login .bg-animate-2 {
        max-width: 90vw;
    }
}
@media (max-height: 600px) {
    body.playvods-login { align-items: flex-start !important; }
}
@media (prefers-reduced-motion: reduce) {
    .playvods-login .bg-animate,.playvods-login .bg-animate-2 { animation: none; }
}