/* ============================================================
 * AimAds — Semi-Dark: chrome grafite + content claro
 * Inspiração: Notion / Vercel dashboard / Stripe
 * Sidebar+navbar em #2d3748, conteúdo em branco/quase-branco
 * ============================================================ */

:root {
    /* --- Content area (LIGHT) --- */
    --da-bg:              #f7f8fa;   /* page bg do conteúdo */
    --da-surface:         #ffffff;   /* cards */
    --da-surface-alt:     #f4f4f5;   /* hovers, table headers */
    --da-border:          #e5e7eb;
    --da-border-strong:   #d4d4d8;
    --da-divider:         #ececec;

    /* Texto sobre light */
    --da-ink:             #0f172a;   /* texto principal (slate-900) */
    --da-ink-2:           #1e293b;   /* headings (slate-800) */
    --da-ink-3:           #475569;   /* secundário (slate-600) */
    --da-ink-4:           #94a3b8;   /* muted (slate-400) */
    --da-ink-5:           #cbd5e1;   /* very muted (slate-300) */

    /* --- Chrome (DARK grafite mais fechado) --- */
    --da-dark:            #1e293b;   /* navbar + sidebar bg (slate-800) */
    --da-dark-2:          #172033;   /* topo do gradient / borders */
    --da-dark-hover:      #2d3748;   /* hover no sidebar */
    --da-dark-active:     rgba(56, 189, 248, 0.15);   /* item ativo sidebar (sky-400 translucido) */
    --da-dark-ink:        #e2e8f0;   /* texto claro na chrome */
    --da-dark-ink-2:      #ffffff;   /* brand na navbar */
    --da-dark-ink-3:      #94a3b8;   /* muted na chrome */
    --da-dark-ink-4:      #64748b;   /* section headers na sidebar */
    --da-dark-border:     #2d3748;   /* borders internas na chrome */

    /* --- Acento azul (estilo Telegram) --- */
    --da-accent:          #229ED9;   /* Telegram blue oficial */
    --da-accent-hover:    #1a89bd;   /* hover mais escuro */
    --da-accent-strong:   #0284c7;   /* sky-600, pra CTAs importantes */
    --da-accent-light:    #38bdf8;   /* sky-400, brilha no dark chrome */
    --da-accent-soft:     #e0f2fe;   /* sky-50, backgrounds sutis */
    --da-accent-ring:     rgba(34, 158, 217, 0.25);

    /* --- Semântica --- */
    --da-success:         #059669;
    --da-success-soft:    #d1fae5;
    --da-warning:         #d97706;
    --da-warning-soft:    #fef3c7;
    --da-danger:          #dc2626;
    --da-danger-soft:     #fee2e2;
    --da-info:            #0284c7;
    --da-info-soft:       #dbeafe;

    /* --- Espaço, radii, sombras --- */
    --da-r-sm:  4px;
    --da-r:     6px;
    --da-r-lg:  10px;
    --da-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --da-shadow:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --da-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.06);

    /* --- Tipografia --- */
    --da-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --da-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
 * Base
 * ============================================================ */
html, body {
    font-family: var(--da-font);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--da-ink);
}
body { background: var(--da-bg); }

h1, h2, h3, h4, h5, h6 { color: var(--da-ink-2); font-weight: 600; letter-spacing: -0.01em; }
.display-6 { font-weight: 700; letter-spacing: -0.02em; color: var(--da-ink); }
.text-muted { color: var(--da-ink-3) !important; }
.small, small { font-size: 0.8125rem; }

a { color: var(--da-accent); text-decoration: none; }
a:hover { color: var(--da-accent-hover); text-decoration: underline; }

hr { border-color: var(--da-divider); opacity: 1; }
code { background: var(--da-surface-alt); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; color: var(--da-ink-2); font-family: var(--da-font-mono); }
strong { color: var(--da-ink); font-weight: 600; }
::selection { background: var(--da-accent-soft); color: var(--da-accent-hover); }

/* ============================================================
 * Navbar — DARK grafite
 * ============================================================ */
.navbar.navbar-dark.bg-dark {
    background: var(--da-dark) !important;
    border-bottom: 1px solid var(--da-dark-2);
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.navbar .navbar-brand {
    color: var(--da-dark-ink-2) !important;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
/* .navbar .navbar-brand::before {
    content: '';
    display: inline-block;
    width: 18px; height: 18px;
    margin-right: 8px;
    background: linear-gradient(135deg, var(--da-accent) 0%, var(--da-accent-light) 100%);
    border-radius: 4px;
    vertical-align: -3px;
    box-shadow: 0 1px 4px var(--da-accent-ring);
} */
.navbar .text-white { color: var(--da-dark-ink) !important; }
.navbar .btn-outline-light {
    color: var(--da-dark-ink);
    border-color: var(--da-dark-border);
    background: transparent;
    font-weight: 500;
}
.navbar .btn-outline-light:hover {
    background: var(--da-dark-hover);
    color: var(--da-dark-ink-2);
    border-color: var(--da-dark-border);
}
.navbar .badge.bg-success {
    background: rgba(167, 139, 250, 0.18) !important;
    color: var(--da-accent-light) !important;
    border: 1px solid rgba(167, 139, 250, 0.30);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--da-r-sm);
}

/* ============================================================
 * Sidebar — DARK grafite
 * ============================================================ */
.sidebar {
    background: var(--da-dark) !important;
    border-right: 1px solid var(--da-dark-2);
    min-height: calc(100vh - 57px);
    padding: 12px 0;
    width: 240px;
    flex-shrink: 0;
}
/* Mobile: offcanvas drawer */
.sidebar.offcanvas-md.offcanvas-start { background: var(--da-dark); color: var(--da-dark-ink); }
.sidebar .offcanvas-header {
    background: var(--da-dark);
    color: var(--da-dark-ink-2);
    border-bottom: 1px solid var(--da-dark-border);
}
.sidebar .offcanvas-header .btn-close { filter: invert(1) grayscale(1) opacity(0.85); }

/* IMPORTANTE: Bootstrap 5.3 aplica display:flex no offcanvas-body em desktop
   (flex-direction:row default), o que quebra a lista vertical do sidebar.
   Forcamos block pra preservar layout. */
.sidebar .offcanvas-body {
    display: block !important;
    padding: 0 !important;
    overflow-y: auto;
    background: var(--da-dark) !important;
}
@media (max-width: 767.98px) {
    .sidebar { width: 280px; min-height: 100vh; padding-top: 0; }
    .sidebar .offcanvas-body { padding-top: 8px !important; }
}
.sidebar .nav-header {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    color: var(--da-dark-ink-4) !important;
    padding: 18px 20px 4px !important;
    font-weight: 600;
}
.sidebar .nav-link {
    color: var(--da-dark-ink) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 12px !important;
    margin: 1px 8px !important;
    border-radius: var(--da-r) !important;
    border-left: 2px solid transparent;
    transition: background 120ms, color 120ms;
    display: flex; align-items: center; gap: 8px;
}
.sidebar .nav-link i { font-size: 15px; opacity: 0.75; }
.sidebar .nav-link:hover { background: var(--da-dark-hover); color: var(--da-dark-ink-2) !important; }
.sidebar .nav-link.active {
    background: var(--da-dark-active) !important;
    color: var(--da-accent-light) !important;
    border-left-color: var(--da-accent-light);
    font-weight: 600;
}
.sidebar .nav-link.active i { opacity: 1; color: var(--da-accent-light); }
.sidebar .nav-link.disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
 * Content area — LIGHT
 * ============================================================ */
.content {
    padding: 32px 40px;
    background: var(--da-bg);
    min-width: 0;   /* impede flex overflow em mobile */
}
@media (max-width: 991.98px) { .content { padding: 20px 16px; } }
@media (max-width: 575.98px) { .content { padding: 16px 12px; } }

/* Tabelas gigantes ganham scroll horizontal em mobile */
@media (max-width: 767.98px) {
    .card > .table-responsive,
    .card .table { font-size: 0.8125rem; }
    .card-body { padding: 12px; }
    .card-body > .row { --bs-gutter-x: 0.5rem; }
    h2 { font-size: 1.4rem; }
    .display-6 { font-size: 1.4rem; }
    .content .row.g-2 > [class^="col-"] { margin-bottom: 8px; }
}

/* Preview column no form da campanha (advertiser/campaigns/form) —
   em mobile some pra baixo em vez de sticky, pra nao roubar espaço */
@media (max-width: 991.98px) {
    .preview-col { position: static !important; margin-top: 24px; }
}

/* Navbar em mobile: aperta padding e agrupa itens direita */
@media (max-width: 575.98px) {
    .navbar.navbar-dark.bg-dark { padding: 0.5rem 0.75rem; }
    .navbar .navbar-brand { font-size: 1rem; }
    .navbar .credits-badge { font-size: 11px; padding: 3px 6px; }
}

/* ============================================================
 * Cards — LIGHT
 * ============================================================ */
.card {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: var(--da-r-lg);
    box-shadow: var(--da-shadow-sm);
    color: var(--da-ink);
}
.card-header {
    background: var(--da-surface);
    border-bottom: 1px solid var(--da-divider);
    font-weight: 600;
    padding: 12px 16px;
    color: var(--da-ink-2);
}
.card-header.bg-primary {
    background: var(--da-accent) !important;
    color: #fff !important;
    border-bottom-color: var(--da-accent-hover);
}
.card-header.bg-light { background: var(--da-surface-alt) !important; color: var(--da-ink-2) !important; }
.card-body { padding: 16px; color: var(--da-ink); }
.card-title { font-size: 0.9375rem; font-weight: 600; color: var(--da-ink-2); margin-bottom: 12px; }
.bg-light { background: var(--da-surface-alt) !important; color: var(--da-ink) !important; }

/* Bordas coloridas viram listra fina esquerda */
.card.border-primary,
.card.border-success,
.card.border-info,
.card.border-danger,
.card.border-warning {
    border-color: var(--da-border);
    position: relative;
    overflow: hidden;
}
.card.border-primary::before,
.card.border-success::before,
.card.border-info::before,
.card.border-danger::before,
.card.border-warning::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
}
.card.border-primary::before { background: var(--da-accent); }
.card.border-success::before { background: var(--da-success); }
.card.border-info::before    { background: var(--da-info); }
.card.border-danger::before  { background: var(--da-danger); }
.card.border-warning::before { background: var(--da-warning); }

.card .display-6 { font-size: 1.75rem; letter-spacing: -0.02em; color: var(--da-ink); }

/* ============================================================
 * Buttons
 * ============================================================ */
.btn { font-weight: 500; border-radius: var(--da-r); padding: 6px 14px; font-size: 0.875rem; transition: all 120ms; }
.btn-sm { padding: 3px 10px; font-size: 0.8125rem; }
.btn-lg { padding: 10px 18px; font-size: 0.9375rem; }

.btn-primary {
    background: var(--da-accent) !important;
    border-color: var(--da-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px var(--da-accent-ring);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--da-accent-hover) !important;
    border-color: var(--da-accent-hover) !important;
    box-shadow: 0 2px 8px var(--da-accent-ring);
    color: #fff !important;
}
.btn-primary:disabled { opacity: 0.55; }
.btn-success { background: var(--da-success) !important; border-color: var(--da-success) !important; color: #fff !important; }
.btn-success:hover { background: #047857 !important; border-color: #047857 !important; }
.btn-warning { background: var(--da-warning) !important; border-color: var(--da-warning) !important; color: #fff !important; }
.btn-danger  { background: var(--da-danger) !important;  border-color: var(--da-danger) !important; color: #fff !important; }

.btn-outline-primary   { color: var(--da-accent); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-primary:hover { background: var(--da-accent-soft); color: var(--da-accent-hover); border-color: var(--da-accent); }
.btn-outline-secondary { color: var(--da-ink-3); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-secondary:hover { background: var(--da-surface-alt); color: var(--da-ink); border-color: var(--da-border-strong); }
.btn-outline-success   { color: var(--da-success); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-success:hover { background: var(--da-success-soft); color: #047857; border-color: var(--da-success); }
.btn-outline-danger    { color: var(--da-danger); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-danger:hover { background: var(--da-danger-soft); color: #991b1b; border-color: var(--da-danger); }
.btn-outline-warning   { color: var(--da-warning); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-warning:hover { background: var(--da-warning-soft); color: #92400e; border-color: var(--da-warning); }
.btn-outline-dark      { color: var(--da-ink); border-color: var(--da-border-strong); background: var(--da-surface); }
.btn-outline-dark:hover { background: var(--da-ink); color: #fff; border-color: var(--da-ink); }

.btn-link { color: var(--da-ink-3); text-decoration: none; font-weight: 500; }
.btn-link:hover { color: var(--da-ink); text-decoration: none; }

/* ============================================================
 * Forms
 * ============================================================ */
.form-label { font-weight: 500; color: var(--da-ink-2); font-size: 0.875rem; margin-bottom: 5px; }
.form-control, .form-select, textarea.form-control {
    border: 1px solid var(--da-border-strong);
    border-radius: var(--da-r);
    padding: 7px 10px;
    font-size: 0.875rem;
    background-color: var(--da-surface);
    color: var(--da-ink);
    transition: border-color 120ms, box-shadow 120ms;
}
/* Preserva a chevron do Bootstrap no select (SVG do proprio Bootstrap) */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    border-color: var(--da-accent);
    box-shadow: 0 0 0 3px var(--da-accent-ring);
    outline: 0;
    background-color: var(--da-surface);
    color: var(--da-ink);
}
.form-control::placeholder { color: var(--da-ink-4); }
.form-text { color: var(--da-ink-3); font-size: 0.8125rem; }
.form-check-input:checked { background-color: var(--da-accent); border-color: var(--da-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--da-accent-ring); border-color: var(--da-accent); }
.form-check-label { color: var(--da-ink); }
.input-group-text {
    background: var(--da-surface-alt);
    border-color: var(--da-border-strong);
    color: var(--da-ink-3);
    font-size: 0.8125rem;
}

/* ============================================================
 * Tables
 * ============================================================ */
.table {
    color: var(--da-ink);
    font-size: 0.875rem;
    border-color: var(--da-divider);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--da-divider); }
.table thead th, .table > thead > tr > th {
    background: var(--da-surface-alt) !important;
    color: var(--da-ink-3) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--da-border) !important;
    padding: 8px 12px;
}
.table-light { --bs-table-bg: var(--da-surface-alt); }
.table-hover > tbody > tr:hover > * { background: var(--da-surface-alt); color: var(--da-ink); }

/* ============================================================
 * Badges
 * ============================================================ */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: var(--da-r-sm);
    letter-spacing: 0;
}
.badge.bg-primary   { background: var(--da-accent) !important; color: #fff !important; }
.badge.bg-success   { background: var(--da-success-soft) !important; color: #047857 !important; }
.badge.bg-warning   { background: var(--da-warning-soft) !important; color: #92400e !important; }
.badge.bg-danger    { background: var(--da-danger-soft) !important; color: #991b1b !important; }
.badge.bg-info      { background: var(--da-info-soft) !important; color: #075985 !important; }
.badge.bg-secondary { background: var(--da-surface-alt) !important; color: var(--da-ink-3) !important; border: 1px solid var(--da-border); }
.badge.bg-dark      { background: var(--da-dark) !important; color: var(--da-dark-ink-2) !important; }

/* ============================================================
 * Alerts
 * ============================================================ */
.alert {
    border-radius: var(--da-r);
    border: 1px solid transparent;
    padding: 12px 14px;
    font-size: 0.875rem;
}
.alert-success { background: var(--da-success-soft); color: #065f46; border-color: rgba(5, 150, 105, 0.20); }
.alert-warning { background: var(--da-warning-soft); color: #78350f; border-color: rgba(217, 119, 6, 0.20); }
.alert-danger  { background: var(--da-danger-soft); color: #7f1d1d; border-color: rgba(220, 38, 38, 0.20); }
.alert-info    { background: var(--da-info-soft);   color: #0c4a6e; border-color: rgba(2, 132, 199, 0.20); }
.alert-light   { background: var(--da-surface); color: var(--da-ink-3); border-color: var(--da-border); }
.alert strong  { color: inherit; }

/* ============================================================
 * Auth page — LIGHT clean
 * ============================================================ */
body.auth-page {
    background: var(--da-bg) !important;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.auth-page .auth-card { max-width: 400px; margin: 0 auto; padding: 24px 16px; width: 100%; }
.auth-page .brand {
    color: var(--da-ink) !important;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* .auth-page .brand::before {
    content: '';
    width: 22px; height: 22px;
    background: linear-gradient(135deg, var(--da-accent) 0%, var(--da-accent-light) 100%);
    border-radius: 5px;
    box-shadow: 0 2px 10px var(--da-accent-ring);
} */
.auth-page .brand-sub {
    color: var(--da-ink-3) !important;
    text-align: center;
    font-size: 13px !important;
    margin-bottom: 20px !important;
}
.auth-page .card {
    border: 1px solid var(--da-border);
    border-radius: var(--da-r-lg);
    box-shadow: var(--da-shadow);
    background: var(--da-surface);
}
.auth-page .card-body { padding: 24px; }

/* ============================================================
 * Misc polish
 * ============================================================ */
.progress { height: 6px !important; background: var(--da-surface-alt); border-radius: 999px; }
.progress-bar { background: var(--da-accent); border-radius: 999px; }
.list-group-item { border-color: var(--da-divider); font-size: 0.875rem; padding: 10px 14px; background: var(--da-surface); color: var(--da-ink); }
.list-group-item:hover { background: var(--da-surface-alt); }
.list-group-item-action { color: var(--da-ink-2); }
.list-group-item-action:hover, .list-group-item-action:focus { color: var(--da-ink); }

.empty-state { text-align: center; padding: 48px 24px; color: var(--da-ink-3); }
.empty-state i { font-size: 40px; color: var(--da-ink-4); margin-bottom: 12px; display: block; }
.empty-state h5 { color: var(--da-ink-2); margin-bottom: 6px; }
.empty-state p { color: var(--da-ink-3); margin-bottom: 16px; }

/* Tooltip com fundo dark grafite (combina com o sidebar) */
.tooltip .tooltip-inner {
    background: var(--da-dark);
    color: var(--da-dark-ink);
    font-size: 0.75rem;
    padding: 8px 10px;
    border-radius: var(--da-r);
    box-shadow: var(--da-shadow-lg);
    max-width: 280px;
    text-align: left;
}
.tooltip .tooltip-arrow::before {
    border-top-color: var(--da-dark) !important;
    border-bottom-color: var(--da-dark) !important;
    border-left-color: var(--da-dark) !important;
    border-right-color: var(--da-dark) !important;
}

/* Snippet code blocks (pre bg-dark) — mantém dark, combina com sidebar */
pre.bg-dark { background: var(--da-dark) !important; border: 1px solid var(--da-dark-2); }
pre.bg-dark code { background: transparent; color: var(--da-dark-ink); }

/* Modal */
.modal-content { border-radius: var(--da-r-lg); border: 1px solid var(--da-border); box-shadow: var(--da-shadow-lg); }
.modal-header { border-bottom-color: var(--da-divider); background: var(--da-surface); }
.modal-footer { border-top-color: var(--da-divider); }