/* NewspaperUp-like theme (lightweight, Bootstrap-based). No WP assets copied. */
:root {
  --tp-primary: #e31e24;
  --tp-dark: #111111;
  --tp-dark-2: #1a1a1a;
  --tp-light: #ffffff;
  --tp-muted: #6c757d;
  --tp-bg: #f5f6f7;
  --hero-bg: none; /* set to: url('/images/your-hero.jpg') center/cover no-repeat */
}

html, body { height: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" ,sans-serif;
  background-color: var(--tp-bg);
}

/* Topbar */
.topbar {
  background: var(--tp-dark);
  color: var(--tp-light);
  font-size: .875rem;
}
.topbar a { color: var(--tp-light); text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; }
.topbar .btn-link { color: var(--tp-light); opacity: .7; font-size: .8rem; text-decoration: none; }
.topbar .btn-link:hover { opacity: 1; }

/* Breaking bar */
.breaking-bar { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.breaking-bar .label { background: var(--tp-primary); color: #fff; font-weight: 700; padding: .25rem .5rem; border-radius: .25rem; white-space: nowrap; flex-shrink: 0; }
.breaking-bar .items { overflow: hidden; white-space: nowrap; position: relative; }
.breaking-bar .items-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  padding-left: 100%;
}
.breaking-bar .items-track:hover { animation-play-state: paused; }
.breaking-bar .items-track span { margin-right: 3rem; color: var(--tp-dark); font-weight: 500; }
.breaking-bar .items-track span .bi { color: var(--tp-primary); }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Navbar */
.navbar-brand {
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.85);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--tp-light);
}
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--tp-primary);
}

/* Hero area */
.hero-wrap {
  background: linear-gradient(0deg, rgba(17,17,17,.7), rgba(17,17,17,.7)), var(--hero-bg);
  color: var(--tp-light);
}
.hero-title { font-weight: 800; }
.hero-kicker { color: #ffdede; font-weight: 600; letter-spacing: .4px; }
.hero-cta .btn-primary { background: var(--tp-primary); border-color: var(--tp-primary); }

/* Article cards */
.card-news { border: 0; border-radius: .5rem; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.card-news .badge { background: var(--tp-primary); }
.card-news .card-title { font-weight: 700; }
.card-news .card-text { color: var(--tp-muted); }

/* Footer */
.footer-dark { background: var(--tp-dark-2); color: rgba(255,255,255,.8); }
.footer-dark a { color: #fff; text-decoration: none; opacity:.9; }
.footer-dark a:hover { opacity: 1; }

/* Utilities */
.kicker { text-transform: uppercase; font-size: .75rem; letter-spacing: .6px; color: var(--tp-primary); font-weight: 700; }
.bg-primary-soft { background: rgba(227,30,36,.08); }
.text-primary { color: var(--tp-primary) !important; }
.btn-primary { background-color: var(--tp-primary); border-color: var(--tp-primary); }
.btn-outline-primary { border-color: var(--tp-primary); color: var(--tp-primary); }
.btn-outline-primary:hover { background-color: var(--tp-primary); color: #fff; }

/* Content spacing */
.section { padding-top: 2rem; padding-bottom: 2rem; }
.section-lg { padding-top: 3rem; padding-bottom: 3rem; }

/* Sidebar (optional) */
.widget { background: #fff; border-radius: .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.widget .widget-title { font-weight: 700; border-bottom: 1px solid #eee; }

/* Dashboard card hover */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 6px 24px rgba(0,0,0,.12) !important; }

/* Topbar logout button */
.topbar-logout-btn {
    font-family: inherit; font-size: inherit; line-height: inherit;
    text-decoration: none; color: rgba(255,255,255,.9);
}
.topbar-logout-btn:hover { color: #fff; text-decoration: none; }

/* Dropdown dark menu polish */
.dropdown-menu-dark .dropdown-header {
    color: rgba(255,255,255,.6);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.dropdown-menu-dark .dropdown-item i { opacity: .7; }
.dropdown-menu-dark .dropdown-item:hover i { opacity: 1; }

/* ========== DARK MODE ========== */
html[data-theme="dark"] {
  --tp-bg: #1a1a2e;
  --tp-dark: #0f0f1a;
  --tp-dark-2: #0a0a14;
  --tp-light: #e8e8e8;
  --tp-muted: #9a9ab0;
}

html[data-theme="dark"] body { background-color: var(--tp-bg); color: var(--tp-light); }

/* Topbar & navbar – already dark, small tweaks */
html[data-theme="dark"] .topbar { background: var(--tp-dark); }

/* Breaking bar */
html[data-theme="dark"] .breaking-bar { background: #16213e; border-color: #1a1a3e; }
html[data-theme="dark"] .breaking-bar .items-track span { color: #d0d0e0; }

/* Cards & widgets */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-news,
html[data-theme="dark"] .widget { background: #16213e; color: var(--tp-light); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
html[data-theme="dark"] .card-header { background-color: #0f3460 !important; border-bottom-color: #1a1a3e; }
html[data-theme="dark"] .card-news .card-text { color: var(--tp-muted); }
html[data-theme="dark"] .widget .widget-title { border-bottom-color: #2a2a4a; }

/* Tables */
html[data-theme="dark"] .table { --bs-table-bg: #16213e; --bs-table-color: var(--tp-light); --bs-table-border-color: #2a2a4a; }
html[data-theme="dark"] .table-light { --bs-table-bg: #1a2744; --bs-table-color: var(--tp-light); }
html[data-theme="dark"] .table-secondary { --bs-table-bg: #12192e; }
html[data-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: #1e2d50; }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0f1a30; border-color: #2a2a4a; color: var(--tp-light);
}
html[data-theme="dark"] .form-control::placeholder { color: #6a6a8a; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { border-color: var(--tp-primary); box-shadow: 0 0 0 .2rem rgba(227,30,36,.25); }
html[data-theme="dark"] .form-label { color: var(--tp-light); }

/* Alerts */
html[data-theme="dark"] .alert-success { background-color: #0f3d2a; border-color: #1a5c3a; color: #8fd4b0; }
html[data-theme="dark"] .alert-info { background-color: #0f2a3d; border-color: #1a3c5c; color: #8fc8d4; }

/* Badges */
html[data-theme="dark"] .badge.bg-success { background-color: #1a5c3a !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #2a2a4a !important; }

/* Buttons – outlines */
html[data-theme="dark"] .btn-outline-danger { color: #ff6b6b; border-color: #ff6b6b; }
html[data-theme="dark"] .btn-outline-secondary { color: #9a9ab0; border-color: #3a3a5a; }

/* Dropdown */
html[data-theme="dark"] .dropdown-menu { background-color: #16213e; border-color: #2a2a4a; }
html[data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--tp-light); }
html[data-theme="dark"] .dropdown-menu .dropdown-item:hover { background-color: #1e2d50; }
html[data-theme="dark"] .dropdown-divider { border-color: #2a2a4a; }

/* Footer – already dark */
html[data-theme="dark"] .footer-dark { background: var(--tp-dark-2); }

/* Hero area */
html[data-theme="dark"] .hero-wrap { background: linear-gradient(0deg, rgba(10,10,20,.85), rgba(10,10,20,.85)), var(--hero-bg); }

/* Misc */
html[data-theme="dark"] .bg-primary-soft { background: rgba(227,30,36,.12); }
html[data-theme="dark"] .text-muted { color: var(--tp-muted) !important; }
html[data-theme="dark"] .border-bottom { border-bottom-color: #2a2a4a !important; }
html[data-theme="dark"] hr { border-color: #2a2a4a; }

/* Smooth transition */
body, .card, .card-news, .widget, .form-control, .form-select, .table, .breaking-bar, .alert {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  background: none; border: none; color: rgba(255,255,255,.85);
  font-size: 1.15rem; cursor: pointer; padding: .25rem .5rem;
  transition: color .2s;
}
.dark-mode-toggle:hover { color: #fff; }