/* =====================================================================
   EU4D Dashboard (scoped to .page-container.dashboard-layout)
   Order: vars → reset → type → links → buttons → layout → cards/nav
          → submenu → responsive → catalog toggles & extras
   ===================================================================== */

/* ── Vars ──────────────────────────────────────────────────────────── */
:root {
    --eu4dual-blue:       #243C8C;
    --eu4dual-blue-700:   #1b2e6b;
    --eu4dual-blue-light: #E6EEFF;
    --eu4dual-blue-rgb:   36, 60, 140;
    --eu4d-radius:        4px; /* global radius for button-like controls */
  }
  
  /* ── Base reset (scoped) ───────────────────────────────────────────── */
  .page-container.dashboard-layout,
  .page-container.dashboard-layout * {
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .page-container.dashboard-layout {
    color: #212529;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
  }
  .page-container.dashboard-layout p,
  .page-container.dashboard-layout li,
  .page-container.dashboard-layout span,
  .page-container.dashboard-layout label,
  .page-container.dashboard-layout small,
  .page-container.dashboard-layout td,
  .page-container.dashboard-layout th {
    color: #212529 !important;
  }
  
  /* ── Typography ────────────────────────────────────────────────────── */
  .page-container.dashboard-layout b,
  .page-container.dashboard-layout strong { font-weight: 600 !important; }
  .page-container.dashboard-layout h1,
  .page-container.dashboard-layout h2,
  .page-container.dashboard-layout h3,
  .page-container.dashboard-layout h4,
  .page-container.dashboard-layout h5,
  .page-container.dashboard-layout h6 {
    font-weight: 600 !important; color: #111827 !important; margin-top: .2rem;
  }
  
  /* ── Links (don’t override button-like links) ──────────────────────── */
  .page-container.dashboard-layout main a:not(.btn):not(.view-toggle):not(.interested-button) {
    color: var(--eu4dual-blue);
  }
  .page-container.dashboard-layout main a:not(.btn):not(.view-toggle):not(.interested-button):hover,
  .page-container.dashboard-layout main a:not(.btn):not(.view-toggle):not(.interested-button):focus {
    color: var(--eu4dual-blue-700);
    text-decoration: underline;
  }
  
  /* ── Buttons (Bootstrap 5 variable-driven) ─────────────────────────── */
  .page-container.dashboard-layout .btn,
  .page-container.dashboard-layout .btn * { color: var(--bs-btn-color) !important; }
  .page-container.dashboard-layout .btn {
    border-radius: var(--eu4d-radius) !important;
    font-weight: 400 !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
  }
  .page-container.dashboard-layout .btn + .btn { margin-left: .5rem; }
  .page-container.dashboard-layout .btn:focus,
  .page-container.dashboard-layout .btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 .25rem rgba(var(--eu4dual-blue-rgb), .35) !important;
  }
  .page-container.dashboard-layout .btn:hover,
  .page-container.dashboard-layout .btn:focus {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
  }
  .page-container.dashboard-layout .btn:active,
  .page-container.dashboard-layout .btn.active {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
  }
  .page-container.dashboard-layout .btn:disabled,
  .page-container.dashboard-layout .btn.disabled {
    color: var(--bs-btn-disabled-color) !important;
    background-color: var(--bs-btn-disabled-bg) !important;
    border-color: var(--bs-btn-disabled-border-color) !important;
  }
  
  /* Brand mappings */
  .page-container.dashboard-layout .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--eu4dual-blue);
    --bs-btn-border-color: var(--eu4dual-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eu4dual-blue-700);
    --bs-btn-hover-border-color: var(--eu4dual-blue-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eu4dual-blue-700);
    --bs-btn-active-border-color: var(--eu4dual-blue-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--eu4dual-blue);
    --bs-btn-disabled-border-color: var(--eu4dual-blue);
  }
  .page-container.dashboard-layout .btn-outline-primary {
    --bs-btn-color: var(--eu4dual-blue);
    --bs-btn-border-color: var(--eu4dual-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eu4dual-blue);
    --bs-btn-hover-border-color: var(--eu4dual-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eu4dual-blue-700);
    --bs-btn-active-border-color: var(--eu4dual-blue-700);
  }
  .page-container.dashboard-layout .btn-soft-primary {
    --bs-btn-color: var(--eu4dual-blue);
    --bs-btn-bg: var(--eu4dual-blue-light);
    --bs-btn-border-color: var(--eu4dual-blue-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eu4dual-blue);
    --bs-btn-hover-border-color: var(--eu4dual-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eu4dual-blue-700);
    --bs-btn-active-border-color: var(--eu4dual-blue-700);
  }
  /* On dark headers */
  .page-container.dashboard-layout .btn-contrast,
  .page-container.dashboard-layout .nav-colored .btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255,255,255,.7);
    --bs-btn-hover-color: var(--eu4dual-blue);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--eu4dual-blue);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
  }
  
  /* ── Layout ─────────────────────────────────────────────────────────── */
  .page-container.dashboard-layout {
    display: flex; align-items: flex-start; width: 100%;
    padding-top: 0; /* flush with header on desktop */
  }
  .page-container.dashboard-layout > .sidebar {
    flex: 0 0 300px; width: 300px; box-sizing: border-box;
    background: #f8f9fa;
    border-right: 1px solid #c0c4cc;
    border-bottom: 1px solid #c0c4cc; /* requested */
    padding: 1rem .9rem;
  }
  .page-container.dashboard-layout > main {
    flex: 1 1 auto; min-width: 0; padding: 20px; box-sizing: border-box; overflow-x: hidden;
  }
  
  /* ── Cards & nav groups ─────────────────────────────────────────────── */
  .page-container.dashboard-layout .sidebar .card,
  .page-container.dashboard-layout .card.wp-main,
  .page-container.dashboard-layout .card.wp-sub,
  .page-container.dashboard-layout .card.wp-subparent,
  .page-container.dashboard-layout .card.wp-sublabel {
    width: 100%; box-sizing: border-box; border-radius: 10px; margin-bottom: .6rem;
    background: #fff !important; border: 1px solid #c0c4cc !important;
  }
  .page-container.dashboard-layout .sidebar .card .card-body,
  .page-container.dashboard-layout .card.wp-main .card-body,
  .page-container.dashboard-layout .card.wp-sub .card-body,
  .page-container.dashboard-layout .card.wp-subparent .card-body,
  .page-container.dashboard-layout .card.wp-sublabel .card-body {
    padding: .95rem 1rem; text-align: center; font-weight: 400 !important;
  }
  .page-container.dashboard-layout .sidebar .card i,
  .page-container.dashboard-layout .card.wp-main i,
  .page-container.dashboard-layout .card.wp-sub i,
  .page-container.dashboard-layout .card.wp-subparent i,
  .page-container.dashboard-layout .card.wp-sublabel i {
    font-size: 1.1rem; line-height: 1; margin-bottom: 6px;
  }
  
  /* Colored parent → tinted children */
  .page-container.dashboard-layout .sidebar .nav-colored .card.wp-main {
    background: var(--eu4dual-blue) !important; color: #fff !important; border-color: transparent !important;
  }
  .page-container.dashboard-layout .sidebar .nav-colored .card.wp-main .card-body,
  .page-container.dashboard-layout .sidebar .nav-colored .card.wp-main .card-body * {
    color: #fff !important; font-weight: 400 !important;
  }
  .page-container.dashboard-layout .sidebar .nav-colored .card.wp-sub,
  .page-container.dashboard-layout .sidebar .nav-colored .card.wp-subparent {
    background: var(--eu4dual-blue-light) !important;
    color: var(--eu4dual-blue) !important;
    border: 1px solid var(--eu4dual-blue) !important;
  }
  
  /* Chevron */
  .page-container.dashboard-layout .card.wp-main,
  .page-container.dashboard-layout .card.wp-subparent { position: relative; }
  .page-container.dashboard-layout .card.has-children .chev {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .18s ease; font-size: 1rem; opacity: .85;
  }
  .page-container.dashboard-layout .card.has-children.is-open .chev {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* ── Submenu ────────────────────────────────────────────────────────── */
  .page-container.dashboard-layout .submenu { display: none; padding-left: .4rem; margin-top: .25rem; }
  .page-container.dashboard-layout .submenu.active { display: block; }
  .page-container.dashboard-layout .submenu .submenu { padding-left: .6rem; }
  .page-container.dashboard-layout .submenu .card.wp-subparent { background: #F7FAFF !important; }
  .page-container.dashboard-layout .submenu .submenu .card.wp-sub,
  .page-container.dashboard-layout .submenu .submenu .card.wp-sublabel { background: #FBFCFF !important; }
  
  /* ── Responsive / drawer ────────────────────────────────────────────── */
  @media (max-width: 991.98px) {
    .page-container.dashboard-layout { flex-direction: column; padding-top: 60px; }
    .page-container.dashboard-layout > .sidebar {
      position: fixed; left: 0; top: 0; bottom: 0; width: 85%; max-width: 320px;
      transform: translateX(-100%); transition: transform .25s ease; z-index: 1050;
      overflow-y: auto; padding-top: 70px;
    }
    body.admin-bar .page-container.dashboard-layout > .sidebar { top: 46px; }
    .page-container.dashboard-layout.sidebar-open > .sidebar { transform: translateX(0); }
  
    .page-container.dashboard-layout .sidebar-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none;
      transition: opacity .25s ease; z-index: 1040;
    }
    .page-container.dashboard-layout.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .page-container.dashboard-layout > main { padding: 16px; }
  }
  body.sidebar-lock { overflow: hidden; }
  
  @media (min-width: 992px) {
    .page-container.dashboard-layout > main { padding-top: 12px; }
  }
  
  /* ── Catalog toggles & extras ───────────────────────────────────────── */
  .page-container.dashboard-layout .catalog-page .view-toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px;
    border-radius: var(--eu4d-radius) !important;
    border: 1px solid #ccc; text-decoration: none; font-weight: 400;
    background: #f8fafc; color: var(--eu4dual-blue) !important;
  }
  .page-container.dashboard-layout .catalog-page .view-toggle i { color: currentColor !important; }
  .page-container.dashboard-layout .catalog-page .view-toggle[aria-pressed="true"] {
    background: var(--eu4dual-blue) !important; border-color: var(--eu4dual-blue) !important; color: #fff !important;
  }
  .page-container.dashboard-layout .catalog-page .view-toggle:hover { filter: brightness(0.98); }
  .page-container.dashboard-layout .catalog-page .view-toggle[aria-pressed="true"]:hover {
    background: var(--eu4dual-blue-700) !important; border-color: var(--eu4dual-blue-700) !important;
  }
  
  /* Catalog CTAs / inputs squared */
  .page-container.dashboard-layout .catalog-page .interested-button {
    color: #fff !important; background: #1e40af !important;
    border-radius: 0 0 var(--eu4d-radius) var(--eu4d-radius) !important;
  }
  .page-container.dashboard-layout .catalog-page.view-list .interested-button {
    border-radius: 0 var(--eu4d-radius) var(--eu4d-radius) 0 !important;
  }
  @media (max-width: 800px) {
    .page-container.dashboard-layout .catalog-page.view-list .interested-button {
      border-radius: 0 0 var(--eu4d-radius) var(--eu4d-radius) !important;
    }
  }
  .page-container.dashboard-layout .catalog-page form button[type="submit"],
  .page-container.dashboard-layout .catalog-page #filterToggleButton,
  .page-container.dashboard-layout .catalog-page #resetButton,
  .page-container.dashboard-layout .catalog-page nav[aria-label="Course pagination"] a {
    border-radius: var(--eu4d-radius) !important;
  }
  .page-container.dashboard-layout .catalog-page .filter-select,
  .page-container.dashboard-layout .catalog-page .filter-input,
  .page-container.dashboard-layout input,
  .page-container.dashboard-layout select,
  .page-container.dashboard-layout textarea {
    border-radius: var(--eu4d-radius) !important;
  }
  
/* EU4D — Better Messages unread badge (scoped to the dashboard sidebar) */
.page-container.dashboard-layout .sidebar .unread-counter {
    /* colors */
    --badge-bg: #243C8C;  /* EU4D blue */
    --badge-fg: #fff;
  
    background: var(--badge-bg) !important;
    color: var(--badge-fg) !important;
  
    /* shape + size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    padding: 0 .38rem;
    border-radius: 999px;               /* circle; change to 4px if you prefer squarish */
    margin-left: .4rem;
    vertical-align: middle;
  
    /* type */
    font: 600 12px/1.1rem system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  
  /* Hide wrapper if shortcode outputs nothing (no unread) */
  .page-container.dashboard-layout .sidebar .unread-counter:empty { display: none; }
  
  /* If the plugin adds its own badge element inside, make sure it inherits */
  .page-container.dashboard-layout .sidebar .unread-counter * {
    color: inherit !important;
    background: transparent !important;
  }
  

  /* Make custom page buttons adopt EU4D/Bootstrap button theming */
.page-container.dashboard-layout main .button-primary,
.page-container.dashboard-layout main .mini-button {
  display: inline-block;
  border-radius: var(--eu4d-radius) !important;
  font-weight: 400 !important;
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid transparent;
  /* hook into our button color system */
  color: var(--bs-btn-color, #fff) !important;
  background-color: var(--bs-btn-bg, var(--eu4dual-blue)) !important;
  border-color: var(--bs-btn-border-color, var(--eu4dual-blue)) !important;
}
.page-container.dashboard-layout main .button-primary:hover,
.page-container.dashboard-layout main .button-primary:focus,
.page-container.dashboard-layout main .mini-button:hover,
.page-container.dashboard-layout main .mini-button:focus {
  color: var(--bs-btn-hover-color, #fff) !important;
  background-color: var(--bs-btn-hover-bg, var(--eu4dual-blue-700)) !important;
  border-color: var(--bs-btn-hover-border-color, var(--eu4dual-blue-700)) !important;
}
.page-container.dashboard-layout main .button-primary:focus,
.page-container.dashboard-layout main .mini-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 .25rem rgba(var(--eu4dual-blue-rgb), .35) !important;
}

/* Map each custom class to a brand variant (primary for both) */
.page-container.dashboard-layout main .button-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--eu4dual-blue);
  --bs-btn-border-color: var(--eu4dual-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--eu4dual-blue-700);
  --bs-btn-hover-border-color: var(--eu4dual-blue-700);
}
.page-container.dashboard-layout main .mini-button {
  /* “soft” chip look on light bg */
  --bs-btn-color: var(--eu4dual-blue);
  --bs-btn-bg: var(--eu4dual-blue-light);
  --bs-btn-border-color: var(--eu4dual-blue-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--eu4dual-blue);
  --bs-btn-hover-border-color: var(--eu4dual-blue);
}

/* IMPORTANT: don’t recolor these as plain links */
.page-container.dashboard-layout main a:not(.btn):not(.view-toggle):not(.interested-button):not(.button-primary):not(.mini-button) {
  color: var(--eu4dual-blue);
}