:root{
  --ecx-primary: #0ea5e9; /* cyan-500 */
  --ecx-primary-600:#0284c7;
  --ecx-bg: #f5f7fb;
  --ecx-surface:#ffffff;
  --ecx-text:#0f172a; /* slate-900 */
  --ecx-muted:#64748b; /* slate-500 */
  --ecx-border:#e2e8f0; /* slate-200 */
}

:root[data-theme="dark"]{
  --ecx-bg: #0b1220;
  --ecx-surface:#0f172a;
  --ecx-text:#e2e8f0;
  --ecx-muted:#94a3b8;
  --ecx-border:#1f2937;
}

html, body.ecx-backoffice{
  background: var(--ecx-bg);
  color: var(--ecx-text);
}

.ecx-navbar{
  background: linear-gradient(90deg, var(--ecx-surface), rgba(14,165,233,.08));
  border-bottom: 1px solid var(--ecx-border);
}
.ecx-navbar .navbar-item{ color: var(--ecx-text); }

.ecx-brand{ display:flex; gap:.5rem; align-items:center; font-weight:700; color:var(--ecx-text); }
.ecx-brand img{ height:22px; }

.ecx-aside{
  background: var(--ecx-surface);
  border-right: 1px solid var(--ecx-border);
}
.ecx-aside .menu-list a{
  border-radius: 8px; margin: .25rem .5rem; padding:.5rem .75rem; color: var(--ecx-text);
}
.ecx-aside .menu-list a:hover{ background: rgba(14,165,233,.08); color: var(--ecx-primary-600); }
.ecx-aside .menu-list a.is-active{ background: rgba(14,165,233,.15); color: var(--ecx-primary-600); font-weight:600; }
.ecx-aside .menu-label{ color: var(--ecx-muted); padding-left:.75rem; }
.ecx-aside-tools{ border-bottom: 1px solid var(--ecx-border); }

.ecx-content{ padding: 5rem 1.25rem 2rem 1.25rem; }
@media(min-width: 1024px){ .ecx-content{ padding-left: calc(260px + 1.5rem); } }

/* Cards and panels */
.card, .panel{ background: var(--ecx-surface); border:1px solid var(--ecx-border); border-radius:14px; }
.box{ background: var(--ecx-surface); border:1px solid var(--ecx-border); border-radius:14px; }

/* Tables */
.table{ background: var(--ecx-surface); color: var(--ecx-text); }
.table th, .table td{ border-color: var(--ecx-border); }
.table thead th{ background: rgba(14,165,233,.06); color: var(--ecx-muted); font-weight:600; }

/* Buttons */
.button.is-primary{ background: var(--ecx-primary); }
.button.is-primary:hover{ background: var(--ecx-primary-600); }
.button.is-light{ background: var(--ecx-surface); color: var(--ecx-text); border:1px solid var(--ecx-border); }

/* Footer */
.footer{ background: var(--ecx-surface); border-top:1px solid var(--ecx-border); color: var(--ecx-muted); }

/* Breadcrumbs placeholder */
.breadcrumb a{ color: var(--ecx-primary-600); }

/* DataTables (Bulma theme) tune */
.dataTables_wrapper .dataTables_filter input{ border: 1px solid var(--ecx-border); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--ecx-primary); color:white !important; border-radius:8px; border:none;
}

/* Notifications panel styling hook */
.backoffice-notif{ background: var(--ecx-surface); border:1px solid var(--ecx-border); border-radius:12px; }

/* Utilities */
.ecx-theme-toggle{ margin-right:.5rem; }
