/*
 * new-custom-css.css
 * Dynamic color system via CSS custom properties.
 * Loaded globally (always) after custom.css, before per-deployment custom-*.css.
 * Per-deployment files override :root variables; everything else uses var(--pp-*).
 */

/* ═══════════════════════════════════════════════════════════════
   :root — defaults match Bootstrap 3 blue (safe fallback)
   Overridden by per-deployment custom-*.css files.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --pp-primary:           #337ab7;
  --pp-primary-hover:     #286090;
  --pp-info:              #5bc0de;
  --pp-info-hover:        #31b0d5;
  --pp-success:           #5cb85c;
  --pp-success-hover:     #449d44;
  --pp-success-text:      #3c763d;
  --pp-warning:           #f0ad4e;
  --pp-warning-hover:     #ec971f;
  --pp-warning-text:      #8a6d3b;
  --pp-danger:            #d9534f;
  --pp-danger-hover:      #c9302c;
  --pp-danger-text:       #a94442;

  /* Secondary */
  --pp-secondary:         #6c757d;
  --pp-secondary-hover:   #5a6268;
  --pp-secondary-text:    #fff;

  /* Ghost (outline/transparent) */
  --pp-ghost-bg:          transparent;
  --pp-ghost-border:      #337ab7;
  --pp-ghost-text:        #337ab7;
  --pp-ghost-hover-bg:    rgba(51, 122, 183, 0.06);

  /* Destructive (explicit alias — mirrors danger) */
  --pp-destructive:       #d9534f;
  --pp-destructive-hover: #c9302c;
  --pp-destructive-text:  #a94442;

  /* Navbar / Institution branding */
  --pp-navbar-bg:         #2b3643;
  --pp-institution-color: #fff;

  /* Monochrome scale (ui-agent.md) */
  --pp-text-primary:      #111;
  --pp-text-secondary:    #777;
  --pp-text-muted:        #999;
  --pp-border:            #eaeaea;
  --pp-border-dark:       #333;
  --pp-bg-subtle:         #f9f9f9;
  --pp-bg-white:          #fff;

  /* Shadows */
  --pp-shadow-ambient:    0 4px 12px rgba(0, 0, 0, 0.08);
  --pp-shadow-elevated:   0 12px 28px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --pp-transition-fast:   all 150ms ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════
   Utility classes — all reference var(--pp-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Background ── */
.new-bg-primary               { background-color: var(--pp-primary) !important; color: #fff !important; }
.new-bg-primary-hover:hover   { background-color: var(--pp-primary-hover) !important; }
.new-bg-info                  { background-color: var(--pp-info) !important; color: #fff !important; }
.new-bg-success               { background-color: var(--pp-success) !important; color: #fff !important; }
.new-bg-warning               { background-color: var(--pp-warning) !important; color: #fff !important; }
.new-bg-danger                { background-color: var(--pp-danger) !important; color: #fff !important; }
.new-bg-subtle                { background-color: var(--pp-bg-subtle) !important; }
.new-bg-white                 { background-color: var(--pp-bg-white) !important; }

/* ── Text ── */
.new-text-primary             { color: var(--pp-primary) !important; }
.new-text-info                { color: var(--pp-info) !important; }
.new-text-success             { color: var(--pp-success-text) !important; }
.new-text-warning             { color: var(--pp-warning-text) !important; }
.new-text-danger              { color: var(--pp-danger-text) !important; }
.new-text-body                { color: var(--pp-text-primary) !important; }
.new-text-secondary           { color: var(--pp-text-secondary) !important; }
.new-text-muted               { color: var(--pp-text-muted) !important; }

/* ── Border ── */
.new-border-primary           { border-color: var(--pp-primary) !important; }
.new-border                   { border-color: var(--pp-border) !important; }
.new-border-subtle            { border: 1px solid var(--pp-border) !important; }
.new-border-left-primary      { border-left: 4px solid var(--pp-primary) !important; }

/* ── Focus ring ── */
.new-focus-ring:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--pp-bg-white), 0 0 0 4px var(--pp-primary) !important;
}

/* ── Shadow ── */
.new-shadow-ambient           { box-shadow: var(--pp-shadow-ambient) !important; }
.new-shadow-elevated          { box-shadow: var(--pp-shadow-elevated) !important; }
.new-shadow-none              { box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════
   .new-ui — scoped outline / semantic button variants
   Add class="new-ui" to any module wrapper to enable.
   ═══════════════════════════════════════════════════════════════ */

/* Force icons inside .new-ui buttons to inherit button color */
.new-ui [class*="btn-nu-"] i {
  color: inherit !important;
}

/* Outline — Primary */
.new-ui .btn-nu-outline-primary {
  background-color: transparent !important;
  border-color: var(--pp-primary) !important;
  color: var(--pp-primary) !important;
}
.new-ui .btn-nu-outline-primary:hover,
.new-ui .btn-nu-outline-primary:focus {
  background-color: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  color: #fff !important;
}

/* Outline — Success */
.new-ui .btn-nu-outline-success {
  background-color: transparent !important;
  border-color: var(--pp-success) !important;
  color: var(--pp-success-text) !important;
}
.new-ui .btn-nu-outline-success:hover,
.new-ui .btn-nu-outline-success:focus {
  background-color: var(--pp-success) !important;
  border-color: var(--pp-success) !important;
  color: #fff !important;
}

/* Outline — Warning */
.new-ui .btn-nu-outline-warning {
  background-color: transparent !important;
  border-color: var(--pp-warning) !important;
  color: var(--pp-warning-text) !important;
}
.new-ui .btn-nu-outline-warning:hover,
.new-ui .btn-nu-outline-warning:focus {
  background-color: var(--pp-warning) !important;
  border-color: var(--pp-warning) !important;
  color: #fff !important;
}

/* Outline — Destructive */
.new-ui .btn-nu-outline-destructive {
  background-color: transparent !important;
  border-color: var(--pp-destructive) !important;
  color: var(--pp-destructive) !important;
}
.new-ui .btn-nu-outline-destructive:hover,
.new-ui .btn-nu-outline-destructive:focus {
  background-color: var(--pp-destructive) !important;
  border-color: var(--pp-destructive) !important;
  color: #fff !important;
}

/* Ghost — Primary */
.new-ui .btn-nu-ghost {
  background-color: var(--pp-ghost-bg) !important;
  border-color: var(--pp-ghost-border) !important;
  color: var(--pp-ghost-text) !important;
}
.new-ui .btn-nu-ghost:hover,
.new-ui .btn-nu-ghost:focus {
  background-color: var(--pp-ghost-hover-bg) !important;
  color: var(--pp-ghost-text) !important;
}

/* ── Themed Badges ── */
.new-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: var(--pp-transition-fast);
}
.new-badge i { font-size: 12px; }

.new-badge-primary {
  background-color: var(--pp-primary) !important;
  color: #fff !important;
}
.new-badge-info {
  background-color: var(--pp-info) !important;
  color: #fff !important;
}
.new-badge-success {
  background-color: var(--pp-success) !important;
  color: #fff !important;
}
.new-badge-warning {
  background-color: var(--pp-warning) !important;
  color: #fff !important;
}
.new-badge-danger {
  background-color: var(--pp-danger) !important;
  color: #fff !important;
}

/* Solid — Secondary */
.new-ui .btn-nu-secondary {
  background-color: var(--pp-secondary) !important;
  border-color: var(--pp-secondary) !important;
  color: var(--pp-secondary-text) !important;
}
.new-ui .btn-nu-secondary:hover,
.new-ui .btn-nu-secondary:focus {
  background-color: var(--pp-secondary-hover) !important;
  border-color: var(--pp-secondary-hover) !important;
  color: var(--pp-secondary-text) !important;
}