/* Anti-Piracy Tracker – Custom Styles */

:root {
    --light-bg:  #f0f4f8;
    --card-bg:   #ffffff;
    --nav-bg:    #ffffff;
    --border:    #d1d9e0;
    --text-muted-custom: #6c757d;
    --accent:    #e94560;
    --text-main: #1e2a38;
}

/* ─── Global ─────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-main);
}

body.bg-dark-custom {
    background: linear-gradient(160deg, #e8eef5 0%, #f0f4f8 100%);
    min-height: 100vh;
}

/* ─── Navbar ─────────────────────────────── */
.bg-dark-nav {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.navbar-brand {
    letter-spacing: .5px;
}

/* Override Bootstrap dark navbar text for light navbar */
.navbar-dark .navbar-brand,
.bg-dark-nav .navbar-brand {
    color: var(--accent) !important;
}

.navbar .nav-link {
    color: #495057 !important;
    transition: color .15s;
    padding: .5rem .9rem !important;
    border-radius: 6px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--accent) !important;
    background: rgba(233, 69, 96, .08);
}

.navbar-toggler {
    border-color: var(--border);
}

.navbar-toggler-icon {
    /* Invert the dark Bootstrap toggler icon so it's visible on the white navbar */
    filter: invert(1) brightness(0.3);
}

/* ─── Cards ─────────────────────────────── */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.card-header {
    background: #f7f9fc;
    border-bottom: 1px solid var(--border);
    padding: .85rem 1.25rem;
    border-radius: 12px 12px 0 0 !important;
}

.card-footer {
    background: #f7f9fc;
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px !important;
}

/* ─── Login Card ─────────────────────────── */
.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px !important;
}

.login-card .card-header {
    background: linear-gradient(135deg, #e94560, #0f3460);
    border-radius: 16px 16px 0 0 !important;
    color: #fff;
}

/* ─── Tables ─────────────────────────────── */
.table {
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(0,0,0,.03);
    --bs-table-striped-bg: rgba(0,0,0,.015);
}

.table thead.table-light th {
    background: #f0f4f8;
    color: #6c757d;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.table td, .table th {
    border-color: var(--border);
    vertical-align: middle;
}

/* ─── Forms ─────────────────────────────── */
.form-control,
.form-select {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
    background: #ffffff;
    border-color: var(--accent);
    color: var(--text-main);
    box-shadow: 0 0 0 .2rem rgba(233,69,96,.15);
}

.form-control::placeholder {
    color: #adb5bd;
}

.input-group-text {
    background: #f7f9fc;
    border: 1px solid var(--border);
    color: #6c757d;
}

/* ─── Buttons ─────────────────────────────── */
.btn-danger {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
}

.btn-outline-danger {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
}

.btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: var(--border);
}

.btn-outline-secondary:hover {
    background: rgba(0,0,0,.05);
    color: var(--text-main);
    border-color: #adb5bd;
}

/* ─── Badges ─────────────────────────────── */
.badge {
    font-size: .72em;
    padding: .32em .6em;
    border-radius: 5px;
}

/* ─── List Group ─────────────────────────── */
.list-group-item {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-main);
    cursor: pointer;
}

.list-group-item:hover,
.list-group-item-action:hover {
    background: #f0f4f8;
    color: var(--text-main);
}

/* ─── Scrollbar ─────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1cad4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aab4; }

/* ─── Text ─────────────────────────────── */
.text-muted { color: var(--text-muted-custom) !important; }
a { color: #1565c0; }
a:hover { color: #0d47a1; }

/* ─── Pagination ─────────────────────────── */
.page-link {
    background: var(--card-bg);
    border-color: var(--border);
    color: #495057;
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.page-link:hover {
    background: rgba(233,69,96,.08);
    color: var(--accent);
    border-color: var(--accent);
}

/* ─── Progress ─────────────────────────── */
.progress {
    background: rgba(0,0,0,.08);
}

/* ─── Cursor ─────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ─── Toast ─────────────────────────────── */
.toast {
    min-width: 280px;
}

/* ─── Stats Cards ─────────────────────────── */
.card .bi {
    opacity: .9;
}

/* ─── Sticky Bottom Bar ─────────────────── */
.sticky-bottom {
    z-index: 1000;
}

/* ─── Chart canvas ─────────────────────── */
canvas {
    max-width: 100%;
}

/* ─── DMCA Notice Preview ─────────────────── */
#noticeContent {
    line-height: 1.6;
    color: #212529 !important;
    background: #f8f9fa !important;
}

/* ─── Responsive tweaks ─────────────────── */
@media (max-width: 576px) {
    .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
    .card-header { padding: .6rem .9rem; }
}

/* ─── Print Styles (DMCA PDF) ────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .navbar, .btn, .card-footer { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    #noticeContent { max-height: none !important; overflow: visible !important; }
}