/* ==========================================================================
   3wVault — Light & Airy AdminLTE 3.2 Theme (Stripe / Segment Console Style)
   Backend Stylesheet (/css/vault-admin.css)
   Agency: TonCodeur.com | Clean White Cards (16px) | Calm & Easy on the Eyes
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --admin-bg: #F4F6F9;
  --admin-surface: #FFFFFF;
  --admin-surface-muted: #F8FAFC;
  --admin-border: #E2E8F0;
  --admin-border-strong: #CBD5E1;

  --admin-sidebar: #0F172A;
  --admin-sidebar-hover: #1E293B;

  --admin-text: #0F172A;
  --admin-text-secondary: #475569;
  --admin-text-muted: #64748B;

  --admin-primary: #2563EB;
  --admin-primary-soft: #EFF6FF;

  --admin-success: #059669;
  --admin-success-soft: #ECFDF5;

  --admin-danger: #E11D48;
  --admin-danger-soft: #FFF1F2;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-card: 16px;
  --radius-md: 12px;
  --radius-pill: 9999px;
}

/* --------------------------------------------------------------------------
   1. Base Layout — Soft Daylight Background, Calm Typography
   -------------------------------------------------------------------------- */
body.vault-admin-lte,
body.vault-admin-lte .wrapper,
body.vault-admin-lte .content-wrapper {
  background-color: var(--admin-bg) !important;
  background-image: none !important;
  color: var(--admin-text) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

body.vault-admin-lte h1,
body.vault-admin-lte h2,
body.vault-admin-lte h3,
body.vault-admin-lte h4,
body.vault-admin-lte .card-title,
.font-display {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.015em;
  color: var(--admin-text) !important;
  font-weight: 600;
}

/* Calm Semantic Color Mappings (No Neon Explosion) */
.font-mono { font-family: var(--font-mono) !important; }
.text-brass { color: var(--admin-primary) !important; }
.text-teal { color: var(--admin-success) !important; }
.text-crimson { color: var(--admin-danger) !important; }
.text-paper { color: var(--admin-text) !important; }
.text-aluminum { color: var(--admin-text-secondary) !important; }
.text-steel { color: var(--admin-text-muted) !important; }

.fs-xs { font-size: 0.76rem !important; }
.fs-sm { font-size: 0.85rem !important; }
.fs-md { font-size: 0.95rem !important; }

/* --------------------------------------------------------------------------
   2. Top Navbar — Clean White Bar
   -------------------------------------------------------------------------- */
body.vault-admin-lte .main-header.navbar {
  background-color: var(--admin-surface) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  color: var(--admin-text) !important;
  padding: 0.55rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.vault-admin-lte .main-header .nav-link {
  color: var(--admin-text-secondary) !important;
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: var(--radius-md);
  padding: 0.4rem 0.75rem;
}

body.vault-admin-lte .main-header .nav-link:hover {
  color: var(--admin-text) !important;
  background-color: var(--admin-surface-muted);
}

/* --------------------------------------------------------------------------
   3. Sidebar — Clean Slate Navigation
   -------------------------------------------------------------------------- */
body.vault-admin-lte .main-sidebar {
  background-color: var(--admin-sidebar) !important;
  border-right: none !important;
  box-shadow: none !important;
}

body.vault-admin-lte .brand-link {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  padding: 0.95rem 1.25rem;
}

body.vault-admin-lte .brand-link .brand-text {
  color: #FFFFFF !important;
}

body.vault-admin-lte .brand-link .text-brass {
  color: #93C5FD !important;
}

.vault-sidebar-brand-icon,
.vault-brand-emblem {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: var(--admin-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.65rem;
}

body.vault-admin-lte .nav-sidebar .nav-item > .nav-link {
  color: #CBD5E1 !important;
  border-radius: 10px !important;
  margin-bottom: 4px;
  padding: 0.55rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 500;
}

body.vault-admin-lte .nav-sidebar .nav-item > .nav-link .nav-icon {
  color: #94A3B8 !important;
  font-size: 0.9rem;
}

body.vault-admin-lte .nav-sidebar .nav-item > .nav-link:hover {
  background-color: var(--admin-sidebar-hover) !important;
  color: #FFFFFF !important;
}

body.vault-admin-lte .nav-sidebar .nav-item > .nav-link.active {
  background-color: var(--admin-primary) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

body.vault-admin-lte .nav-sidebar .nav-item > .nav-link.active .nav-icon {
  color: #FFFFFF !important;
}

body.vault-admin-lte .nav-header {
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B !important;
  padding: 1rem 0.85rem 0.35rem !important;
}

body.vault-admin-lte .main-footer {
  background-color: var(--admin-surface) !important;
  border-top: 1px solid var(--admin-border) !important;
  color: var(--admin-text-muted) !important;
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   4. Clean White Cards & KPI Boxes
   -------------------------------------------------------------------------- */
body.vault-admin-lte .card {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: var(--admin-text) !important;
  overflow: hidden;
}

body.vault-admin-lte .card-header {
  background-color: var(--admin-surface) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  padding: 1rem 1.35rem;
}

body.vault-admin-lte .card-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--admin-text) !important;
}

body.vault-admin-lte .card-footer {
  background-color: var(--admin-surface-muted) !important;
  border-top: 1px solid var(--admin-border) !important;
}

/* Clean Minimal Info Boxes */
body.vault-admin-lte .info-box {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: var(--admin-text) !important;
  padding: 1rem 1.1rem;
  min-height: 88px;
}

body.vault-admin-lte .info-box .info-box-icon {
  background-color: var(--admin-primary-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--admin-primary) !important;
  width: 52px;
  height: 52px;
  font-size: 1.2rem;
}

body.vault-admin-lte .info-box .info-box-icon.icon-teal {
  background-color: var(--admin-success-soft) !important;
  color: var(--admin-success) !important;
}

body.vault-admin-lte .info-box .info-box-icon.icon-crimson {
  background-color: var(--admin-danger-soft) !important;
  color: var(--admin-danger) !important;
}

body.vault-admin-lte .info-box .info-box-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--admin-text-muted);
}

body.vault-admin-lte .info-box .info-box-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--admin-text);
  margin-top: 2px;
}

/* Clean Navigation Pills / Tabs on Dashboard */
.vault-nav-tabs {
  border-bottom: 1px solid var(--admin-border);
  gap: 0.4rem;
}

.vault-nav-tabs .nav-link {
  border: none !important;
  border-radius: 10px !important;
  color: var(--admin-text-secondary) !important;
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
}

.vault-nav-tabs .nav-link:hover {
  background-color: var(--admin-surface) !important;
  color: var(--admin-text) !important;
}

.vault-nav-tabs .nav-link.active {
  background-color: var(--admin-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.vault-nav-tabs .nav-link.active .badge {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Soft Banners */
.vault-banner-alert,
.vault-banner-key,
.vault-banner-danger,
.vault-banner-secret {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  border: 1px solid var(--admin-border);
  font-size: 0.88rem;
}

.vault-banner-alert,
.vault-banner-key {
  background-color: var(--admin-success-soft);
  border-color: #A7F3D0;
  color: #065F46;
}

.vault-banner-danger {
  background-color: var(--admin-danger-soft);
  border-color: #FECDD3;
  color: #9F1239;
}

.vault-banner-secret {
  background-color: var(--admin-primary-soft);
  border-color: #BFDBFE;
  color: #1E3A8A;
}

/* --------------------------------------------------------------------------
   5. Clean Tables, Inputs, Buttons & Badges
   -------------------------------------------------------------------------- */
body.vault-admin-lte .table {
  color: var(--admin-text) !important;
  margin-bottom: 0;
}

body.vault-admin-lte .table thead th {
  background-color: var(--admin-surface-muted) !important;
  color: var(--admin-text-muted) !important;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--admin-border) !important;
  border-top: none !important;
  padding: 0.75rem 1.15rem;
}

body.vault-admin-lte .table td,
body.vault-admin-lte .table th {
  border-top: 1px solid var(--admin-border) !important;
  padding: 0.85rem 1.15rem;
  vertical-align: middle;
  font-size: 0.86rem;
}

body.vault-admin-lte .table-hover tbody tr:hover {
  background-color: var(--admin-surface-muted) !important;
}

.vault-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vault-inline-form {
  display: inline-block;
  margin: 0;
}

/* Modals */
body.vault-admin-lte .modal-content {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 20px !important;
  color: var(--admin-text) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

body.vault-admin-lte .modal-header,
body.vault-admin-lte .modal-footer {
  background-color: var(--admin-surface-muted) !important;
  border-color: var(--admin-border) !important;
  padding: 1rem 1.35rem;
}

/* Forms & Inputs */
body.vault-admin-lte .form-control,
body.vault-admin-lte .custom-select,
.vault-login-page .form-control {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border-strong) !important;
  border-radius: 10px !important;
  color: var(--admin-text) !important;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  height: auto;
  padding: 0.55rem 0.85rem;
}

body.vault-admin-lte .form-control:focus,
body.vault-admin-lte .custom-select:focus,
.vault-login-page .form-control:focus {
  border-color: var(--admin-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.vault-input-addon {
  background-color: var(--admin-surface-muted) !important;
  border: 1px solid var(--admin-border-strong) !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--admin-text-muted) !important;
}

/* Soft Pastel Badges */
body.vault-admin-lte .badge {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32em 0.7em;
  border-radius: var(--radius-pill);
}

body.vault-admin-lte .badge-success {
  background-color: var(--admin-success-soft) !important;
  color: var(--admin-success) !important;
}

body.vault-admin-lte .badge-warning,
body.vault-admin-lte .badge-info {
  background-color: var(--admin-primary-soft) !important;
  color: var(--admin-primary) !important;
}

body.vault-admin-lte .badge-danger {
  background-color: var(--admin-danger-soft) !important;
  color: var(--admin-danger) !important;
}

body.vault-admin-lte .badge-secondary,
body.vault-admin-lte .badge-dark {
  background-color: #F1F5F9 !important;
  color: var(--admin-text-secondary) !important;
}

/* Clean Buttons */
body.vault-admin-lte .btn,
.vault-login-page .btn {
  border-radius: 10px !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  transition: all 150ms ease;
}

body.vault-admin-lte .btn-xs {
  padding: 0.25rem 0.65rem;
  font-size: 0.76rem;
  border-radius: 8px !important;
}

body.vault-admin-lte .btn-primary,
.vault-login-page .btn-primary {
  background-color: var(--admin-primary) !important;
  border: 1px solid var(--admin-primary) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

body.vault-admin-lte .btn-primary:hover,
.vault-login-page .btn-primary:hover {
  background-color: #1D4ED8 !important;
}

body.vault-admin-lte .btn-danger {
  background-color: var(--admin-danger-soft) !important;
  border: 1px solid #FECDD3 !important;
  color: var(--admin-danger) !important;
}

body.vault-admin-lte .btn-danger:hover {
  background-color: var(--admin-danger) !important;
  color: #FFFFFF !important;
}

body.vault-admin-lte .btn-default,
body.vault-admin-lte .btn-secondary,
.vault-login-page .btn-secondary {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border-strong) !important;
  color: var(--admin-text-secondary) !important;
}

body.vault-admin-lte .btn-default:hover,
body.vault-admin-lte .btn-secondary:hover {
  background-color: var(--admin-surface-muted) !important;
  color: var(--admin-text) !important;
}

/* Code Blocks & Pills */
.vault-code-block {
  background-color: #F8FAFC;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 0.95rem 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #1E293B;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.vault-mono-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--admin-text-secondary);
  background-color: var(--admin-surface-muted);
  border: 1px solid var(--admin-border);
  padding: 0.22rem 0.65rem;
  border-radius: 8px;
}

.circuit-status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--admin-success);
  background-color: var(--admin-success-soft);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
}

.circuit-status-tripped {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--admin-danger);
  background-color: var(--admin-danger-soft);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   6. Clean Light Admin Login Page (.vault-login-page)
   -------------------------------------------------------------------------- */
body.vault-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--admin-bg) !important;
  color: var(--admin-text);
  font-family: var(--font-sans);
  padding: 1.5rem;
}

.vault-login-box {
  width: 100%;
  max-width: 420px;
}

.vault-login-card {
  background-color: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

.vault-login-card .login-box-msg {
  font-size: 0.88rem;
  color: var(--admin-text-secondary);
  padding: 0 0 1.25rem;
  text-align: left;
}