/* ============================================================
   BIBLIOMETRIX CLOUD — "Analytical Precision" v2
   Poppins · Research Navy sidebar · Proper contrast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ap-bg:               #f7fafc;
  --ap-surface:          #ffffff;
  --ap-surface-low:      #f1f4f6;
  --ap-surface-mid:      #ebeef0;
  --ap-border:           #e2e8f0;
  --ap-border-strong:    #c4c6cf;

  /* On-surfaces */
  --ap-text:             #181c1e;
  --ap-text-muted:       #43474e;
  --ap-text-subtle:      #74777f;

  /* Primary — Research Navy */
  --ap-navy:             #002045;
  --ap-navy-mid:         #1a365d;
  --ap-navy-light:       #2d476f;
  --ap-navy-pale:        #d6e3ff;
  --ap-on-navy:          #ffffff;

  /* Secondary — Data Teal */
  --ap-teal:             #13696a;
  --ap-teal-dark:        #004f50;
  --ap-teal-light:       #89d3d4;
  --ap-teal-pale:        #a2eded;
  --ap-on-teal:          #ffffff;

  /* Tertiary — Insight Amber */
  --ap-amber:            #cb9524;
  --ap-amber-pale:       #fff3cd;

  /* States */
  --ap-error:            #ba1a1a;
  --ap-error-bg:         #ffdad6;
  --ap-success:          #13696a;
  --ap-warning:          #cb9524;

  /* Sidebar (Navy) */
  --ap-sidebar-bg:       #002045;
  --ap-sidebar-hover:    rgba(255,255,255,0.08);
  --ap-sidebar-active:   rgba(255,255,255,0.14);
  --ap-sidebar-text:     rgba(255,255,255,0.75);
  --ap-sidebar-text-h:   #ffffff;
  --ap-sidebar-border:   rgba(255,255,255,0.1);
  --ap-sidebar-w:        280px;
  --ap-header-h:         56px;

  /* Typography */
  --ap-font:             'Poppins', system-ui, -apple-system, sans-serif;

  /* Shape */
  --ap-r-xs: 2px;
  --ap-r-sm: 4px;
  --ap-r-md: 6px;
  --ap-r-lg: 8px;
  --ap-r-xl: 12px;
  --ap-r-2xl:16px;
  --ap-r-full: 9999px;

  /* Elevation */
  --ap-shadow-xs: 0 1px 2px rgba(0,32,69,0.05);
  --ap-shadow-sm: 0 1px 4px rgba(0,32,69,0.08), 0 0 0 1px var(--ap-border);
  --ap-shadow-md: 0 4px 12px rgba(0,32,69,0.12), 0 0 0 1px var(--ap-border);
  --ap-shadow-lg: 0 8px 32px rgba(0,32,69,0.16);

  --ap-ease: 0.15s cubic-bezier(0.4,0,0.2,1);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body,
body.skin-blue,
body.skin-blue-light {
  font-family: var(--ap-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: var(--ap-bg) !important;
  color: var(--ap-text) !important;
  -webkit-font-smoothing: antialiased;
}

.wrapper { background: var(--ap-bg) !important; min-height: 100vh; }

/* ── TYPOGRAPHY SCALE ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ap-font) !important;
  color: var(--ap-text) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-top: 0;
}
h1, .h1 { font-size: 1.875rem !important; letter-spacing: -0.02em !important; font-weight: 800 !important; }
h2, .h2 { font-size: 1.5rem   !important; letter-spacing: -0.02em !important; }
h3, .h3 { font-size: 1.25rem  !important; letter-spacing: -0.01em !important; }
h4, .h4 { font-size: 1.0625rem!important; }
h5, .h5 { font-size: 0.9375rem!important; font-weight: 600 !important; }
h6, .h6 { font-size: 0.875rem !important; font-weight: 600 !important; }

p, li, span, td, th, div, label, input, select, textarea, button {
  font-family: var(--ap-font) !important;
}

a {
  color: var(--ap-teal) !important;
  text-decoration: none !important;
  transition: color var(--ap-ease);
}
a:hover { color: var(--ap-teal-dark) !important; }

/* ── HEADER ───────────────────────────────────────────────── */
.main-header,
.skin-blue .main-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1030;
}

.skin-blue .main-header .navbar,
.main-header .navbar {
  background: var(--ap-navy) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) !important;
  min-height: var(--ap-header-h) !important;
}

/* Logo area — white logo on navy */
.skin-blue .main-header .logo,
.main-header .logo {
  background: var(--ap-navy-mid) !important;
  border-bottom: none !important;
  border-right: 1px solid var(--ap-sidebar-border) !important;
  color: var(--ap-on-navy) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  width: var(--ap-sidebar-w) !important;
  height: var(--ap-header-h) !important;
  line-height: var(--ap-header-h) !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  color: transparent !important; /* Hide any stray text */
  font-size: 0 !important;       /* Hide any stray text */
}

/* White logo image via CSS background */
.main-header .logo .logo-lg { display: none !important; }
.main-header .logo-mini { display: none !important; }
.main-header .logo img { display: none !important; }
.main-header .logo::after {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
  background: url('https://bibliometrix.spun.cloud/_next/image?url=%2Flogo-bibliometrix.png&w=384&q=75') no-repeat center left;
  background-size: contain;
  filter: brightness(0) invert(1);
}

/* Sidebar toggle (hamburger) */
.skin-blue .main-header .navbar .sidebar-toggle,
.main-header .navbar .sidebar-toggle {
  color: #ffffff !important;
  opacity: 0.8 !important;
  height: var(--ap-header-h) !important;
  line-height: var(--ap-header-h) !important;
  padding: 0 1rem !important;
  border-right: 1px solid var(--ap-sidebar-border) !important;
  transition: background var(--ap-ease), opacity var(--ap-ease);
}
.main-header .navbar .sidebar-toggle:hover {
  background: var(--ap-sidebar-hover) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* All navbar text — white on navy */
.skin-blue .main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > a {
  color: var(--ap-sidebar-text) !important;
  transition: color var(--ap-ease);
}
.main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:hover {
  color: var(--ap-on-navy) !important;
  background: var(--ap-sidebar-hover) !important;
}

.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover {
  background: var(--ap-sidebar-hover) !important;
  color: var(--ap-on-navy) !important;
}

/* Navbar buttons alignment and sizing (e.g. showMissingData) */
.main-header .navbar .navbar-nav {
  display: flex !important;
  align-items: center !important;
  height: var(--ap-header-h) !important;
}
.main-header .navbar .navbar-nav > li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
.main-header .navbar .navbar-nav .btn,
.main-header .navbar .navbar-nav .action-button,
.main-header .navbar .navbar-nav .shiny-bound-input {
  margin: 0 6px !important;
  height: 32px !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8125rem !important; /* Smaller text for long labels */
  font-weight: 500 !important;
  white-space: nowrap !important;
  border-radius: var(--ap-r-sm) !important;
}

/* Navbar brand / page title in header */
.skin-blue .main-header .navbar .navbar-brand,
.main-header .navbar-brand {
  color: #ffffff !important;
  font-family: var(--ap-font) !important;
  font-weight: 700 !important;
  position: relative !important;
  padding-left: 48px !important;
  display: flex !important;
  align-items: center !important;
  height: var(--ap-header-h) !important;
}

.skin-blue .main-header .navbar .navbar-brand::before,
.main-header .navbar-brand::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  width: 26px !important;
  height: 26px !important;
  background: url('https://spun.guru/uploads/logo-1780503338732-406665026.png') no-repeat center center !important;
  background-size: contain !important;
  filter: brightness(0) invert(1) !important;
}

/* ── SIDEBAR — Full Navy Blue ─────────────────────────────── */
.skin-blue .main-sidebar,
.main-sidebar,
.left-side {
  background: var(--ap-sidebar-bg) !important;
  border-right: none !important;
  width: var(--ap-sidebar-w) !important;
  box-shadow: 2px 0 16px rgba(0,0,0,0.2) !important;
  top: var(--ap-header-h) !important;
}

/* Sidebar inner bg */
.skin-blue .sidebar,
.sidebar {
  background: var(--ap-sidebar-bg) !important;
}

/* User panel */
.sidebar .user-panel {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ap-sidebar-border);
  background: var(--ap-navy-mid);
}
.sidebar .user-panel .info a,
.sidebar .user-panel .info p,
.skin-blue .sidebar .user-panel .info a,
.skin-blue .sidebar .user-panel .info p {
  color: var(--ap-sidebar-text) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
}

/* Sidebar search */
.sidebar-form {
  background: var(--ap-navy-mid) !important;
  border-bottom: 1px solid var(--ap-sidebar-border) !important;
  padding: 8px 12px !important;
}
.sidebar-form input[type="text"],
.skin-blue .sidebar-form input[type="text"] {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid var(--ap-sidebar-border) !important;
  color: var(--ap-on-navy) !important;
  border-radius: var(--ap-r-sm) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
}
.sidebar-form input[type="text"]::placeholder { color: var(--ap-sidebar-text) !important; }
.sidebar-form input[type="text"]:focus {
  background: rgba(255,255,255,0.15) !important;
  border-color: var(--ap-teal-light) !important;
  outline: none !important;
}

/* Sidebar menu items — ALL text white on navy */
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: var(--ap-sidebar-text) !important;
  background: transparent !important;
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 !important;
  transition: background var(--ap-ease), color var(--ap-ease), border-color var(--ap-ease) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.skin-blue .sidebar-menu > li > a:hover,
.sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li:hover > a {
  color: var(--ap-on-navy) !important;
  background: var(--ap-sidebar-hover) !important;
}

.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
  color: var(--ap-on-navy) !important;
  background: var(--ap-sidebar-active) !important;
  border-left-color: var(--ap-teal-light) !important;
  font-weight: 600 !important;
}

/* Icons in sidebar */
.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon,
.skin-blue .sidebar-menu > li > a > .ion,
.sidebar-menu > li > a > .fa {
  color: var(--ap-sidebar-text) !important;
}
.skin-blue .sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fa {
  color: var(--ap-teal-light) !important;
}

/* Section headers in sidebar */
.skin-blue .sidebar-menu > li.header,
.sidebar-menu > li.header {
  color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
  font-family: var(--ap-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 16px 16px 4px !important;
}

/* Arrow chevrons */
.skin-blue .sidebar-menu .fa-angle-left,
.sidebar-menu .fa-angle-left,
.sidebar-menu .pull-right {
  color: rgba(255,255,255,0.4) !important;
  transition: transform var(--ap-ease) !important;
}

/* Sub-menu (treeview) */
.skin-blue .sidebar-menu .treeview-menu,
.sidebar-menu .treeview-menu {
  background: rgba(0,0,0,0.2) !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border-left: none !important;
}
.skin-blue .sidebar-menu .treeview-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  color: var(--ap-sidebar-text) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  padding: 7px 16px 7px 36px !important;
  transition: color var(--ap-ease), background var(--ap-ease) !important;
  display: block;
}
.skin-blue .sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:hover {
  color: var(--ap-on-navy) !important;
  background: var(--ap-sidebar-hover) !important;
}
.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li.active > a {
  color: var(--ap-teal-light) !important;
  font-weight: 600 !important;
  background: rgba(137,211,212,0.1) !important;
}

/* ── CONTENT AREA ─────────────────────────────────────────── */
.content-wrapper {
  background: var(--ap-bg) !important;
  margin-left: var(--ap-sidebar-w) !important;
  margin-top: var(--ap-header-h) !important;
  min-height: calc(100vh - var(--ap-header-h)) !important;
  color: var(--ap-text) !important;
}

.content-header {
  background: var(--ap-surface) !important;
  border-bottom: 1px solid var(--ap-border) !important;
  padding: 14px 24px !important;
  margin-bottom: 0 !important;
}

/* Content header titles — dark on white */
.content-header h1,
.content-header .h1 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--ap-text) !important;
  font-family: var(--ap-font) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.content-header .breadcrumb {
  background: transparent !important;
  font-size: 0.8125rem !important;
  color: var(--ap-text-muted) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--ap-font) !important;
}
.content-header .breadcrumb > li + li::before {
  color: var(--ap-border-strong) !important;
}
.content-header .breadcrumb a { color: var(--ap-teal) !important; }

.content {
  padding: 24px !important;
  color: var(--ap-text) !important;
}

/* ── BOXES / CARDS ────────────────────────────────────────── */
.box {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-top: none !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: var(--ap-shadow-xs) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  color: var(--ap-text) !important;
  transition: box-shadow var(--ap-ease);
}
.box:hover { box-shadow: var(--ap-shadow-md) !important; }

.box-header {
  background: var(--ap-surface) !important;
  border-bottom: 1px solid var(--ap-border) !important;
  padding: 12px 20px !important;
}
.box-header .box-title {
  font-family: var(--ap-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--ap-text) !important;
  line-height: 1.4 !important;
}
.box-body {
  background: var(--ap-surface) !important;
  padding: 20px !important;
  color: var(--ap-text) !important;
}
.box-footer {
  background: var(--ap-surface-low) !important;
  border-top: 1px solid var(--ap-border) !important;
  padding: 10px 20px !important;
  color: var(--ap-text-muted) !important;
}

/* Box color accents */
.box.box-primary { border-top: 3px solid var(--ap-navy)  !important; }
.box.box-success  { border-top: 3px solid var(--ap-teal)  !important; }
.box.box-info     { border-top: 3px solid var(--ap-teal-light) !important; }
.box.box-warning  { border-top: 3px solid var(--ap-amber) !important; }
.box.box-danger   { border-top: 3px solid var(--ap-error) !important; }

/* Box tools */
.box-header .box-tools .btn {
  background: transparent !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text-muted) !important;
  border-radius: var(--ap-r-sm) !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
  font-family: var(--ap-font) !important;
  transition: all var(--ap-ease) !important;
}
.box-header .box-tools .btn:hover {
  background: var(--ap-surface-low) !important;
  color: var(--ap-text) !important;
}

/* ── TABS ─────────────────────────────────────────────────── */
.nav-tabs-custom {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: var(--ap-shadow-xs) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
}

.nav-tabs-custom > .nav-tabs {
  background: var(--ap-surface-low) !important;
  border-bottom: 1px solid var(--ap-border) !important;
  padding: 0 8px;
  display: flex;
  flex-wrap: wrap;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--ap-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  white-space: nowrap;
  transition: color var(--ap-ease), border-color var(--ap-ease) !important;
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--ap-text) !important;
  background: rgba(0,32,69,0.04) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  background: var(--ap-surface) !important;
  border-bottom: 2px solid var(--ap-navy) !important;
  color: var(--ap-navy) !important;
  font-weight: 600 !important;
}

.nav-tabs-custom > .tab-content {
  background: var(--ap-surface) !important;
  padding: 20px !important;
  color: var(--ap-text) !important;
}

/* Generic Bootstrap tabs */
.nav-tabs { border-bottom: 1px solid var(--ap-border) !important; }
.nav-tabs > li > a {
  color: var(--ap-text-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ap-r-sm) var(--ap-r-sm) 0 0 !important;
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  transition: all var(--ap-ease) !important;
}
.nav-tabs > li > a:hover {
  background: var(--ap-surface-low) !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text) !important;
}
.nav-tabs > li.active > a {
  background: var(--ap-surface) !important;
  border-color: var(--ap-border) var(--ap-border) transparent !important;
  color: var(--ap-navy) !important;
  font-weight: 600 !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: var(--ap-r-sm) !important;
  padding: 7px 16px !important;
  border: 1px solid transparent !important;
  line-height: 1.5 !important;
  transition: all var(--ap-ease) !important;
  cursor: pointer !important;
}

.btn-primary {
  background: var(--ap-navy) !important;
  border-color: var(--ap-navy) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background: var(--ap-navy-mid) !important;
  border-color: var(--ap-navy-mid) !important;
  color: #ffffff !important;
}

.btn-default {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-navy) !important;
  color: var(--ap-navy) !important;
}
.btn-default:hover {
  background: var(--ap-surface-low) !important;
  color: var(--ap-navy-mid) !important;
}

.btn-success {
  background: var(--ap-teal) !important;
  border-color: var(--ap-teal) !important;
  color: #ffffff !important;
}
.btn-success:hover { background: var(--ap-teal-dark) !important; border-color: var(--ap-teal-dark) !important; }

.btn-info {
  background: var(--ap-surface-mid) !important;
  border-color: var(--ap-border-strong) !important;
  color: var(--ap-text) !important;
}
.btn-info:hover { background: var(--ap-border) !important; }

.btn-warning {
  background: var(--ap-amber) !important;
  border-color: var(--ap-amber) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: var(--ap-error) !important;
  border-color: var(--ap-error) !important;
  color: #ffffff !important;
}
.btn-danger:hover { background: #93000a !important; }

.btn-sm { padding: 4px 10px !important; font-size: 0.8125rem !important; }
.btn-lg { padding: 10px 24px !important; font-size: 1rem !important; }

/* ── FORM CONTROLS ────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select,
.form-control {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-r-sm) !important;
  padding: 7px 12px !important;
  transition: border-color var(--ap-ease), box-shadow var(--ap-ease) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--ap-navy) !important;
  box-shadow: 0 0 0 3px rgba(0,32,69,0.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ap-text-subtle) !important; }

label {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ap-text) !important;
  margin-bottom: 4px !important;
  display: block;
}

/* Selectize */
.selectize-input {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-r-sm) !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  min-height: 36px !important;
}
.selectize-input.focus {
  border-color: var(--ap-navy) !important;
  box-shadow: 0 0 0 3px rgba(0,32,69,0.12) !important;
  outline: none !important;
}
.selectize-dropdown {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: var(--ap-shadow-md) !important;
  font-family: var(--ap-font) !important;
  color: var(--ap-text) !important;
}
.selectize-dropdown .option {
  color: var(--ap-text) !important;
  font-size: 0.875rem !important;
  padding: 8px 12px !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: var(--ap-surface-low) !important;
  color: var(--ap-navy) !important;
}
.selectize-dropdown .optgroup-header {
  color: var(--ap-text-subtle) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 12px 4px !important;
}

/* Slider */
.irs-bar, .irs-bar-edge, .irs--shiny .irs-bar { background: var(--ap-navy) !important; border-color: var(--ap-navy) !important; }
.irs-handle > i:first-child { background: var(--ap-navy) !important; border-color: var(--ap-navy-mid) !important; }
.irs-from, .irs-to, .irs-single {
  background: var(--ap-navy) !important;
  color: #ffffff !important;
  font-family: var(--ap-font) !important;
  font-size: 0.75rem !important;
  border-radius: var(--ap-r-full) !important;
}
.irs-min, .irs-max {
  background: var(--ap-surface-mid) !important;
  color: var(--ap-text-muted) !important;
  font-size: 0.6875rem !important;
  font-family: var(--ap-font) !important;
}

/* Checkbox / Radio */
.checkbox label, .radio label {
  color: var(--ap-text) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: var(--ap-font) !important;
}

/* ── TABLES ───────────────────────────────────────────────── */
.dataTable, table.dataTable {
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
  color: var(--ap-text) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
table.dataTable > thead > tr > th,
.dataTable thead th {
  background: var(--ap-surface-low) !important;
  color: var(--ap-text) !important;
  border-bottom: 2px solid var(--ap-border) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  white-space: nowrap;
}
.dataTable thead th.sorting::after,
.dataTable thead th.sorting_asc::after,
.dataTable thead th.sorting_desc::after { color: var(--ap-navy) !important; }

.dataTable tbody tr { background: var(--ap-surface) !important; }
.dataTable tbody tr:nth-child(even) { background: var(--ap-surface-low) !important; }
.dataTable tbody tr:hover { background: rgba(0,32,69,0.04) !important; }
.dataTable tbody td {
  border-top: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  padding: 8px 12px !important;
  font-size: 0.8125rem !important;
  vertical-align: middle;
}

/* DT controls */
.dataTables_wrapper .dataTables_filter input {
  font-family: var(--ap-font) !important;
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-r-sm) !important;
  padding: 5px 10px !important;
  font-size: 0.875rem !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ap-navy) !important;
  box-shadow: 0 0 0 3px rgba(0,32,69,0.12) !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_length select {
  font-family: var(--ap-font) !important;
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-r-sm) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
  font-family: var(--ap-font) !important;
  font-size: 0.8125rem !important;
  color: var(--ap-text-muted) !important;
  padding: 12px 0 !important;
}
.dataTables_paginate .paginate_button {
  font-family: var(--ap-font) !important;
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-sm) !important;
  color: var(--ap-text-muted) !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  font-size: 0.8125rem !important;
  transition: all var(--ap-ease) !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--ap-surface-low) !important;
  border-color: var(--ap-navy) !important;
  color: var(--ap-navy) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--ap-navy) !important;
  border-color: var(--ap-navy) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── SMALL BOXES & INFO BOXES ─────────────────────────────── */
.small-box {
  border-radius: var(--ap-r-lg) !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: var(--ap-shadow-sm) !important;
  transition: box-shadow var(--ap-ease), transform var(--ap-ease) !important;
}
.small-box:hover { transform: translateY(-2px); box-shadow: var(--ap-shadow-md) !important; }
.small-box > .inner { padding: 16px 20px !important; }
.small-box > .inner h3 {
  font-family: var(--ap-font) !important;
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.small-box > .inner p {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  opacity: 0.9;
}
.small-box > .small-box-footer {
  padding: 6px 20px !important;
  font-size: 0.8125rem !important;
  font-family: var(--ap-font) !important;
  background: rgba(0,0,0,0.15) !important;
}

.info-box {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: var(--ap-shadow-xs) !important;
  overflow: hidden;
  transition: box-shadow var(--ap-ease) !important;
}
.info-box:hover { box-shadow: var(--ap-shadow-md) !important; }
.info-box-content { padding: 10px 16px !important; }
.info-box-text {
  font-family: var(--ap-font) !important;
  color: var(--ap-text-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.info-box-number {
  font-family: var(--ap-font) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ap-text) !important;
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--ap-r-md) !important;
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  padding: 12px 16px !important;
  border: 1px solid !important;
}
.alert-info    { background: rgba(19,105,106,0.07) !important;  border-color: rgba(19,105,106,0.25) !important; color: var(--ap-teal-dark) !important; }
.alert-success { background: rgba(19,105,106,0.08) !important;  border-color: rgba(19,105,106,0.3)  !important; color: var(--ap-teal-dark) !important; }
.alert-warning { background: var(--ap-amber-pale)  !important;  border-color: rgba(203,149,36,0.4)  !important; color: #7a4f00 !important; }
.alert-danger, .alert-error {
  background: var(--ap-error-bg) !important;
  border-color: rgba(186,26,26,0.3) !important;
  color: #93000a !important;
}
.shiny-output-error {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem;
  background: var(--ap-error-bg) !important;
  color: #93000a !important;
  border: 1px solid rgba(186,26,26,0.2) !important;
  border-radius: var(--ap-r-md);
  padding: 10px 14px;
}

/* ── PROGRESS ─────────────────────────────────────────────── */
.progress {
  background: var(--ap-surface-mid) !important;
  border-radius: var(--ap-r-full) !important;
  height: 6px !important;
  border: none !important;
  margin-bottom: 8px;
}
.progress-bar          { background: var(--ap-navy) !important; }
.progress-bar-success  { background: var(--ap-teal) !important; }
.progress-bar-warning  { background: var(--ap-amber) !important; }
.progress-bar-danger   { background: var(--ap-error) !important; }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-content {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-xl) !important;
  box-shadow: var(--ap-shadow-lg) !important;
  color: var(--ap-text) !important;
}
.modal-header {
  background: var(--ap-surface-low) !important;
  border-bottom: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-xl) var(--ap-r-xl) 0 0 !important;
  padding: 14px 20px !important;
}
.modal-header .modal-title {
  font-family: var(--ap-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ap-text) !important;
}
.modal-body { color: var(--ap-text) !important; font-family: var(--ap-font) !important; }
.modal-footer {
  background: var(--ap-surface-low) !important;
  border-top: 1px solid var(--ap-border) !important;
  border-radius: 0 0 var(--ap-r-xl) var(--ap-r-xl) !important;
}
.modal-backdrop { background: rgba(0,32,69,0.5) !important; }
.close { color: var(--ap-text-muted) !important; opacity: 1 !important; }
.close:hover { color: var(--ap-text) !important; }

/* ── DROPDOWNS ────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: var(--ap-shadow-md) !important;
  padding: 4px 0 !important;
}
.dropdown-menu > li > a {
  font-family: var(--ap-font) !important;
  font-size: 0.875rem !important;
  color: var(--ap-text) !important;
  padding: 7px 16px !important;
  transition: background var(--ap-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li.active > a {
  background: var(--ap-surface-low) !important;
  color: var(--ap-navy) !important;
}
.dropdown-menu .divider { background: var(--ap-border) !important; margin: 4px 0 !important; }

/* ── CHIPS / BADGES / LABELS ──────────────────────────────── */
.label, .badge {
  font-family: var(--ap-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--ap-r-full) !important;
  padding: 2px 8px !important;
}
.label-primary, .badge-primary { background: var(--ap-navy) !important; color: #ffffff !important; }
.label-success, .badge-success { background: rgba(19,105,106,0.15) !important; color: var(--ap-teal-dark) !important; }
.label-info, .badge-info { background: var(--ap-surface-mid) !important; color: var(--ap-text-muted) !important; }
.label-warning, .badge-warning { background: var(--ap-amber-pale) !important; color: #7a4f00 !important; }
.label-danger, .badge-danger { background: var(--ap-error-bg) !important; color: #93000a !important; }

/* ── PANELS & WELLS ───────────────────────────────────────── */
.panel {
  background: var(--ap-surface) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: var(--ap-shadow-xs) !important;
  color: var(--ap-text) !important;
}
.panel-heading {
  background: var(--ap-surface-low) !important;
  border-bottom: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0 !important;
  padding: 10px 16px !important;
  font-family: var(--ap-font) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}
.panel-body {
  background: var(--ap-surface) !important;
  color: var(--ap-text) !important;
  padding: 16px !important;
  font-family: var(--ap-font) !important;
}

.well {
  background: var(--ap-surface-low) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: none !important;
  padding: 16px !important;
  color: var(--ap-text) !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.main-footer {
  background: var(--ap-surface) !important;
  border-top: 1px solid var(--ap-border) !important;
  color: var(--ap-text-muted) !important;
  font-size: 0.8125rem !important;
  font-family: var(--ap-font) !important;
  padding: 10px 24px !important;
  margin-left: var(--ap-sidebar-w) !important;
}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ap-surface-low) !important; }
::-webkit-scrollbar-thumb { background: var(--ap-border-strong) !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ap-text-subtle) !important; }

/* ── SHINY STATES ─────────────────────────────────────────── */
.recalculating { opacity: 0.35 !important; }
.shiny-busy { color: var(--ap-navy) !important; }

.shiny-upload-input {
  border: 2px dashed var(--ap-border) !important;
  border-radius: var(--ap-r-lg) !important;
  padding: 24px !important;
  background: var(--ap-surface-low) !important;
  text-align: center;
  color: var(--ap-text-muted) !important;
  font-family: var(--ap-font) !important;
  cursor: pointer;
  transition: border-color var(--ap-ease), background var(--ap-ease);
}
.shiny-upload-input:hover {
  border-color: var(--ap-navy) !important;
  background: rgba(0,32,69,0.04) !important;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .main-sidebar {
    transform: translateX(-280px);
    transition: transform var(--ap-ease);
    position: fixed !important;
    top: var(--ap-header-h);
    height: calc(100vh - var(--ap-header-h));
    z-index: 9999;
    width: 280px !important;
  }
  body.sidebar-open .main-sidebar { transform: translateX(0); }
  .wrapper { overflow-x: hidden; }
  .content { padding: 12px !important; }
  .main-footer { margin-left: 0 !important; }
}