/* ==========================================================================
   VRAM Estates Brand Theme
   Editorial Luxury Real Estate Aesthetic
   ========================================================================== */

:root {
  --vram-tertiary-fixed-dim: #f3bc89;
  --vram-inverse-on-surface: #f6f0e8;
  --vram-outline-variant: #d0c4bd;
  --vram-on-secondary-fixed-variant: #633f0f;
  --vram-on-error-container: #93000a;
  --vram-on-tertiary-container: #a97a4d;
  --vram-on-primary-fixed: #201b16;
  --vram-inverse-primary: #cfc4be;
  --vram-on-primary-container: #8b827c;
  --vram-on-error: #ffffff;
  --vram-background: #fff8f0;
  --vram-primary-fixed: #ece0d9;
  --vram-surface-container-low: #f9f3eb;
  --vram-on-tertiary: #ffffff;
  --vram-on-tertiary-fixed: #2d1600;
  --vram-on-surface-variant: #4d4540;
  --vram-on-surface: #1d1b17;
  --vram-secondary: #7e5625;
  --vram-on-secondary-container: #795220;
  --vram-error-container: #ffdad6;
  --vram-primary: #000000;
  --vram-surface-bright: #fff8f0;
  --vram-secondary-container: #fec88b;
  --vram-on-primary: #ffffff;
  --vram-surface: #fff8f0;
  --vram-on-background: #1d1b17;
  --vram-on-secondary-fixed: #2b1700;
  --vram-surface-container-high: #ede7df;
  --vram-primary-container: #201b16;
  --vram-on-tertiary-fixed-variant: #643e16;
  --vram-surface-variant: #e7e2da;
  --vram-surface-tint: #655d57;
  --vram-error: #ba1a1a;
  --vram-on-secondary: #ffffff;
  --vram-surface-container-lowest: #ffffff;
  --vram-secondary-fixed-dim: #f2bd81;
  --vram-tertiary: #000000;
  --vram-outline: #7f756f;
  --vram-tertiary-container: #2d1600;
  --vram-surface-container-highest: #e7e2da;
  --vram-inverse-surface: #32302b;
  --vram-tertiary-fixed: #ffdcbf;
  --vram-surface-container: #f3ede5;
  --vram-secondary-fixed: #ffddba;
  --vram-surface-dim: #dfd9d1;
  --vram-primary-fixed-dim: #cfc4be;
  --vram-on-primary-fixed-variant: #4d4540;

  --vram-font-headline: "Libre Caslon Text", Georgia, serif;
  --vram-font-body: "Plus Jakarta Sans", sans-serif;
  --vram-font-mono: "JetBrains Mono", monospace;
}

body.theme-vram-estates {
  background-color: var(--vram-background);
  color: var(--vram-on-background);
  font-family: var(--vram-font-body);
}

/* Custom Scrollbar */
body.theme-vram-estates ::-webkit-scrollbar,
body.theme-vram-estates.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
body.theme-vram-estates ::-webkit-scrollbar-track,
body.theme-vram-estates.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
body.theme-vram-estates ::-webkit-scrollbar-thumb,
body.theme-vram-estates.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--vram-outline-variant);
  border-radius: 10px;
}
body.theme-vram-estates ::-webkit-scrollbar-thumb:hover {
  background: var(--vram-outline);
}

/* Glass Card */
body.theme-vram-estates .glass-card {
  background: rgba(255, 248, 240, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(127, 117, 111, 0.15);
  box-shadow: 0 4px 20px rgba(126, 86, 37, 0.05);
}

/* ==========================================================================
   Sidebar Theming
   ========================================================================== */
body.theme-vram-estates .app-sidebar {
  background-color: var(--vram-surface-container);
  border-right: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .sidebar-brand {
  border-bottom: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .brand-badge {
  background: var(--vram-secondary);
  color: #ffffff;
  border-radius: 4px;
}

body.theme-vram-estates .brand-text h2 {
  color: var(--vram-on-surface);
  font-family: var(--vram-font-headline);
  font-weight: 700;
  font-size: 0.95rem;
}

body.theme-vram-estates .brand-text span {
  color: var(--vram-on-surface-variant);
}

body.theme-vram-estates .nav-section-label {
  color: var(--vram-outline);
  letter-spacing: 0.08em;
}

body.theme-vram-estates .sidebar-link {
  color: var(--vram-on-surface-variant);
  font-weight: 500;
}

body.theme-vram-estates .sidebar-link:hover {
  color: var(--vram-on-surface);
  background: rgba(126, 86, 37, 0.08);
}

body.theme-vram-estates .sidebar-link.active {
  color: var(--vram-on-secondary-fixed);
  background: var(--vram-secondary-fixed);
  border-left: 3px solid var(--vram-secondary);
  font-weight: 700;
}

body.theme-vram-estates .sidebar-footer {
  border-top: 1px solid var(--vram-outline-variant);
  color: var(--vram-on-surface-variant);
  background: var(--vram-surface-container-high);
}

body.theme-vram-estates .status-dot.online {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   Top Navigation Bar
   ========================================================================== */
body.theme-vram-estates .top-nav-bar {
  background: rgba(255, 248, 240, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .breadcrumbs .crumb-root {
  color: var(--vram-outline);
}
body.theme-vram-estates .breadcrumbs .crumb-sep {
  color: var(--vram-outline-variant);
}
body.theme-vram-estates .breadcrumbs .crumb-current {
  color: var(--vram-on-background);
  font-weight: 600;
  font-family: var(--vram-font-headline);
  font-size: 0.92rem;
}

body.theme-vram-estates .token-badge {
  background: var(--vram-surface-container-low);
  border: 1px solid var(--vram-outline-variant);
  color: var(--vram-on-surface);
}

body.theme-vram-estates .token-badge.token-valid {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: #065f46;
}

/* ==========================================================================
   Service Header Card
   ========================================================================== */
body.theme-vram-estates .service-header-card {
  background: rgba(255, 248, 240, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(127, 117, 111, 0.2);
  box-shadow: 0 4px 20px rgba(126, 86, 37, 0.05);
}

body.theme-vram-estates .service-identity h1 {
  font-family: var(--vram-font-headline);
  font-size: 2rem;
  font-weight: 400;
  color: var(--vram-on-surface);
  letter-spacing: -0.01em;
}

body.theme-vram-estates .service-identity p {
  color: var(--vram-on-surface-variant);
  font-size: 0.88rem;
}

/* Controls & Selects */
body.theme-vram-estates .clean-select {
  background-color: var(--vram-surface-container-lowest);
  border: 1px solid var(--vram-outline-variant);
  color: var(--vram-on-surface);
  border-radius: 4px;
  padding-left: 10px;
}
body.theme-vram-estates .clean-select:focus {
  border-color: var(--vram-secondary);
  box-shadow: 0 0 0 2px rgba(126, 86, 37, 0.15);
}

body.theme-vram-estates .endpoint-picker label {
  color: var(--vram-on-surface-variant);
  font-weight: 600;
}

/* Buttons */
body.theme-vram-estates .btn-primary {
  background: var(--vram-primary-container);
  color: #ffffff;
  border: 1px solid var(--vram-primary-container);
  border-radius: 4px;
  font-weight: 600;
}
body.theme-vram-estates .btn-primary:hover {
  background: var(--vram-secondary);
  border-color: var(--vram-secondary);
  color: #ffffff;
}

body.theme-vram-estates .btn-secondary {
  background: var(--vram-surface-container-lowest);
  border: 1px solid var(--vram-outline-variant);
  color: var(--vram-on-surface);
  border-radius: 4px;
  font-weight: 500;
}
body.theme-vram-estates .btn-secondary:hover {
  background: var(--vram-surface-container);
  color: var(--vram-on-surface);
  border-color: var(--vram-outline);
}

body.theme-vram-estates .btn-icon {
  background: var(--vram-surface-container-lowest);
  border: 1px solid var(--vram-outline-variant);
  color: var(--vram-on-surface-variant);
  border-radius: 4px;
}
body.theme-vram-estates .btn-icon:hover {
  color: var(--vram-on-surface);
  border-color: var(--vram-secondary);
}

/* ==========================================================================
   KPI Widgets
   ========================================================================== */
body.theme-vram-estates .kpi-widget {
  background: var(--vram-surface-container-lowest);
  border: 1px solid rgba(127, 117, 111, 0.18);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(126, 86, 37, 0.04);
}

body.theme-vram-estates .kpi-label {
  color: var(--vram-outline);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

body.theme-vram-estates .kpi-value {
  font-family: var(--vram-font-headline);
  font-size: 2rem;
  font-weight: 400;
  color: var(--vram-on-surface);
}

/* ==========================================================================
   Content Panel & Sections
   ========================================================================== */
body.theme-vram-estates .content-panel {
  background: var(--vram-surface-container-lowest);
  border: 1px solid var(--vram-outline-variant);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(126, 86, 37, 0.04);
}

body.theme-vram-estates .panel-tabs {
  background: var(--vram-surface-container-low);
  border-bottom: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .tab-item {
  color: var(--vram-on-surface-variant);
  font-weight: 600;
}
body.theme-vram-estates .tab-item:hover {
  color: var(--vram-on-surface);
}
body.theme-vram-estates .tab-item.active {
  color: var(--vram-secondary);
  border-bottom: 2px solid var(--vram-secondary);
  background: transparent;
}

body.theme-vram-estates .tab-pill {
  background: var(--vram-surface-container);
  color: var(--vram-on-secondary-fixed-variant);
  border: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .panel-meta {
  color: var(--vram-outline);
}

/* Section Cards */
body.theme-vram-estates .vram-section-card {
  background: var(--vram-surface-container-lowest);
  border: 1px solid var(--vram-outline-variant);
  border-radius: 6px;
}

body.theme-vram-estates .vram-card-head {
  background: var(--vram-surface-container-low);
  border-bottom: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .vram-card-head h4 {
  font-family: var(--vram-font-headline);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--vram-on-surface);
  letter-spacing: 0.02em;
}

/* Funnel Pipeline */
body.theme-vram-estates .lead-pipeline-bar {
  background: var(--vram-surface-container-lowest);
  border-top: none;
}

body.theme-vram-estates .stage-name {
  color: var(--vram-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}

body.theme-vram-estates .stage-badge {
  background: var(--vram-surface-container);
  color: var(--vram-on-surface);
  border: 1px solid var(--vram-outline-variant);
}

body.theme-vram-estates .stage-badge.stage-new {
  background: var(--vram-error-container);
  color: var(--vram-on-error-container);
  border-color: rgba(186, 26, 26, 0.3);
}

body.theme-vram-estates .stage-badge.stage-interested {
  background: var(--vram-secondary-container);
  color: var(--vram-on-secondary-fixed-variant);
  border-color: rgba(126, 86, 37, 0.3);
}

body.theme-vram-estates .stage-badge.stage-booked {
  background: var(--vram-primary-fixed);
  color: var(--vram-on-primary-fixed);
  border-color: var(--vram-secondary);
}

body.theme-vram-estates .pipeline-sep {
  color: var(--vram-outline);
}

/* ==========================================================================
   Clean Tables
   ========================================================================== */
body.theme-vram-estates .clean-table th {
  background: var(--vram-surface-container-low);
  color: var(--vram-on-surface-variant);
  border-bottom: 1px solid var(--vram-outline-variant);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

body.theme-vram-estates .clean-table td {
  border-bottom: 1px solid var(--vram-surface-container);
  color: var(--vram-on-surface);
}

body.theme-vram-estates .clean-table tbody tr:hover {
  background-color: var(--vram-surface-container-low);
}

body.theme-vram-estates strong,
body.theme-vram-estates .item-title {
  color: var(--vram-on-surface) !important;
}

body.theme-vram-estates .text-muted {
  color: var(--vram-outline) !important;
}

/* Luxury Price Tag */
body.theme-vram-estates .price-tag {
  font-family: var(--vram-font-headline);
  font-size: 0.86rem;
  color: var(--vram-secondary);
  font-weight: 700;
  background: rgba(254, 200, 139, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(126, 86, 37, 0.2);
}

body.theme-vram-estates .badge-source {
  background: var(--vram-surface-container);
  color: var(--vram-on-secondary-fixed-variant);
  border: 1px solid var(--vram-outline-variant);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 7px;
}

body.theme-vram-estates .badge-status.status-success {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

body.theme-vram-estates .badge-status.status-warning {
  background: var(--vram-secondary-container);
  color: var(--vram-on-secondary-fixed-variant);
  border: 1px solid rgba(126, 86, 37, 0.3);
}

body.theme-vram-estates .badge-status.status-idle {
  background: var(--vram-surface-container);
  color: var(--vram-on-surface-variant);
  border: 1px solid var(--vram-outline-variant);
}

/* Telemetry & Code Containers */
body.theme-vram-estates .telem-grid {
  background: var(--vram-surface-container-lowest);
}
body.theme-vram-estates .telem-card {
  background: var(--vram-surface-container-low);
  border: 1px solid var(--vram-outline-variant);
}
body.theme-vram-estates .telem-label {
  color: var(--vram-outline);
}
body.theme-vram-estates .telem-val {
  color: var(--vram-on-surface);
}

body.theme-vram-estates .json-code-box {
  background: #1d1b17;
  color: #f6f0e8;
  border: 1px solid #4d4540;
}

/* Mobile Responsive Overrides */
body.theme-vram-estates .mobile-sidebar-toggle {
  background: var(--vram-surface-container);
  border-color: var(--vram-outline-variant);
  color: var(--vram-on-surface);
}
body.theme-vram-estates .mobile-sidebar-toggle:hover {
  background: var(--vram-surface-container-high);
  border-color: var(--vram-secondary);
}
body.theme-vram-estates .mobile-sidebar-close {
  background: var(--vram-surface-container);
  border-color: var(--vram-outline-variant);
  color: var(--vram-on-surface-variant);
}
body.theme-vram-estates .sidebar-backdrop {
  background: rgba(32, 27, 22, 0.65);
}

/* Notice Banners Theming for VRAM Estates */
body.theme-vram-estates .service-notice-banner {
  background: var(--vram-surface-container);
  border-color: var(--vram-outline-variant);
  color: var(--vram-on-surface);
  box-shadow: 0 2px 10px rgba(126, 86, 37, 0.06);
}

body.theme-vram-estates .service-notice-banner code {
  background: var(--vram-surface-container-highest);
  color: var(--vram-on-surface);
}

body.theme-vram-estates .service-notice-banner.banner-warning {
  background: #fef7ea;
  border-color: #f59e0b;
  color: #78350f;
}

body.theme-vram-estates .service-notice-banner.banner-warning strong {
  color: #92400e;
}

body.theme-vram-estates .service-notice-banner.banner-warning .banner-inline-link {
  color: #7e5625;
}

body.theme-vram-estates .service-notice-banner.banner-warning .btn-secondary {
  background: #7e5625;
  color: #ffffff;
  border-color: #7e5625;
}

body.theme-vram-estates .service-notice-banner.banner-warning .btn-secondary:hover {
  background: #64441d;
  color: #ffffff;
}

body.theme-vram-estates .service-notice-banner.banner-success {
  background: #f0fdf4;
  border-color: #10b981;
  color: #065f46;
}

body.theme-vram-estates .service-notice-banner.banner-success strong {
  color: #047857;
}

body.theme-vram-estates .service-notice-banner.banner-error {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

body.theme-vram-estates .service-notice-banner.banner-error strong {
  color: #b91c1c;
}

@media (max-width: 1024px) {
  body.theme-vram-estates .app-sidebar:not(.open) {
    box-shadow: none !important;
    visibility: hidden !important;
  }

  body.theme-vram-estates .app-sidebar.open {
    box-shadow: 6px 0 32px rgba(45, 30, 15, 0.4) !important;
    visibility: visible !important;
  }
}