:root{
  --pp-bg:#f5f7fb;
  --pp-card:#ffffff;
  --pp-text:#0f172a;
  --pp-muted:#64748b;
  --pp-border:rgba(15,23,42,.08);
  /* Vomatec palette */
  --pp-primary:#dc2626;
  --pp-sidebar-1:#0f1218;
  --pp-sidebar-2:#0b0b0b;
  --pp-sidebar-text:rgba(255,255,255,.86);
  --pp-sidebar-muted:rgba(255,255,255,.62);
  --pp-radius:14px;
}

/* Dark mode (sidebar intentionally unchanged) */
html[data-theme="dark"]{
  --pp-bg:#0b1220;
  --pp-card:#0f172a;
  --pp-text:#e5e7eb;
  --pp-muted:#94a3b8;
  --pp-border:rgba(148,163,184,.16);
}

body{ background:var(--pp-bg); color:var(--pp-text); }

/* Dark mode: Bootstrap surface tweaks (outside sidebar) */
html[data-theme="dark"] .pp-topbar{ background: rgba(15,23,42,.78); }
html[data-theme="dark"] .pp-iconbtn{ background: #0b1220; color: var(--pp-text); }
html[data-theme="dark"] .pp-iconbtn:hover{ background:#111827; }
html[data-theme="dark"] .pp-search .form-control{ background:#0b1220; color: var(--pp-text); }
html[data-theme="dark"] .pp-search i{ color: var(--pp-muted); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .pp-card{ background: var(--pp-card); color: var(--pp-text); border-color: var(--pp-border); }
html[data-theme="dark"] .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--pp-text);
  --bs-table-border-color: var(--pp-border);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--pp-text);
  --bs-table-active-bg: rgba(255,255,255,.05);
  --bs-table-active-color: var(--pp-text);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-hover-color: var(--pp-text);
  color: var(--pp-text);
}
html[data-theme="dark"] .table thead th{ background:#111827 !important; color: #cbd5e1; border-color: var(--pp-border); }
html[data-theme="dark"] .text-muted{ color: var(--pp-muted) !important; }
html[data-theme="dark"] .bg-light{ background-color:#111827 !important; }
html[data-theme="dark"] .table-light{ --bs-table-bg: #111827; --bs-table-color: #cbd5e1; }
html[data-theme="dark"] .table-hover>tbody>tr:hover>*{ --bs-table-bg-state: rgba(255,255,255,.04); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background-color:#0b1220;
  color: var(--pp-text);
  border-color: var(--pp-border);
}
html[data-theme="dark"] .form-control::placeholder{ color: rgba(148,163,184,.75); }
html[data-theme="dark"] .dropdown-menu{
  background:#0b1220;
  border-color: var(--pp-border);
}
html[data-theme="dark"] .dropdown-item{ color: var(--pp-text); }
html[data-theme="dark"] .dropdown-item:hover{ background:#111827; }
html[data-theme="dark"] .progress{ background: rgba(255,255,255,.10); }

/* List groups (used in ToDo / notifications / workorders) */
html[data-theme="dark"] .list-group-item{
  background: var(--pp-card);
  color: var(--pp-text);
  border-color: var(--pp-border);
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus{
  background: rgba(255,255,255,.04);
  color: var(--pp-text);
}

/* Tabs */
html[data-theme="dark"] .nav-tabs{ border-bottom-color: var(--pp-border); }
html[data-theme="dark"] .nav-tabs .nav-link{
  color: var(--pp-muted);
  border-color: transparent;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover{
  border-color: transparent;
  color: var(--pp-text);
}
html[data-theme="dark"] .nav-tabs .nav-link.active{
  color: var(--pp-text);
  background-color: var(--pp-card);
  border-color: var(--pp-border) var(--pp-border) var(--pp-card);
}

/* Alerts / borders / light badges */
html[data-theme="dark"] .alert{
  background: #111827;
  border-color: var(--pp-border);
  color: var(--pp-text);
}
html[data-theme="dark"] .border{ border-color: var(--pp-border) !important; }
html[data-theme="dark"] .badge.text-bg-light{
  background-color: rgba(255,255,255,.10) !important;
  color: var(--pp-text) !important;
  border-color: var(--pp-border) !important;
}

.pp-shell{ min-height:100vh; display:flex; }

.pp-sidebar{
  width: 272px;
  background: linear-gradient(180deg, var(--pp-sidebar-1) 0%, var(--pp-sidebar-2) 100%);
  color: var(--pp-sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.06);
}
.pp-brand{
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  text-decoration: none;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.pp-brand-logo{ height: 26px; width: auto; display:block; }
.pp-brand-text{ font-weight: 750; letter-spacing: .2px; }
.pp-nav .nav-link{
  color: var(--pp-sidebar-text);
  border-radius: 12px;
  padding: .55rem .75rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  opacity: .92;
}
.pp-nav .nav-link i{ opacity:.95; }
.pp-nav .nav-link:hover{ background: rgba(255,255,255,.08); opacity:1; }
.pp-nav .nav-link.active{ background: rgba(255,255,255,.12); opacity:1; }
.pp-nav .pp-section{
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--pp-sidebar-muted);
  margin: 1.0rem .15rem .35rem;
}
.pp-pill{
  font-size:.72rem;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  padding: .12rem .5rem;
  border-radius: 999px;
}
.pp-userbox{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .75rem;
  margin-top: auto;
}
.pp-avatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.pp-user-meta{ line-height:1.15; }
.pp-user-meta .name{ color:#fff; font-size:.92rem; font-weight:600; }
.pp-user-meta .role{ color:var(--pp-sidebar-muted); font-size:.78rem; }

.pp-main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.pp-topbar{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pp-border);
  position: sticky;
  top: 0;
  z-index: 1040;
}

.pp-topbar .dropdown-menu{
  z-index: 2000;
}
.pp-search{
  max-width: 420px;
}
.pp-search .form-control{
  border-radius: 999px;
  border: 1px solid var(--pp-border);
  background: #fff;
  padding-left: 2.2rem;
}
.pp-search i{
  position:absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-muted);
}
.pp-iconbtn{
  width: 36px; height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--pp-border);
  background: #fff;
}
.pp-iconbtn:hover{ background:#f8fafc; }

.pp-content{ padding: 18px 18px 80px; }

.pp-card{
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
}
.pp-card .pp-card-h{
  padding: 14px 16px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pp-card .pp-card-b{ padding: 14px 16px 16px; }
.pp-card .title{ font-weight:700; font-size:.95rem; }
.pp-link{ color: var(--pp-primary); text-decoration: none; font-weight:600; }
.pp-link:hover{ text-decoration: underline; }
.pp-muted{ color: var(--pp-muted); }

.pp-tabs .btn{
  border-radius: 999px;
  border: 1px solid var(--pp-border);
  background: #fff;
  font-weight: 600;
  padding: .35rem .8rem;
}
.pp-tabs .btn.active{
  background: #eaf2ff;
  border-color: rgba(37,99,235,.25);
  color: var(--pp-primary);
}

.pp-table thead th{
  color: #334155;
  font-size: .78rem;
  text-transform: none;
  font-weight: 700;
  background: #f8fafc !important;
}

/* Dashboard compact timeline */
.pp-mini-tl{
  position: relative;
  height: 22px;
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  overflow: hidden;
}
.pp-mini-bar{
  position: absolute;
  height: 18px;
  border-radius: 10px;
  color: rgba(255,255,255,.95);
  padding: 0 8px;
  font-size: 11px;
  display:flex;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pp-mobile-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--pp-border);
  z-index: 1030;
}
.pp-mobile-nav a{
  text-decoration:none;
  color: #334155;
  font-weight: 650;
  font-size: .78rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  padding:.55rem .25rem;
}
.pp-mobile-nav i{ font-size: 1.05rem; }

@media (max-width: 991.98px){
  .pp-content{ padding: 14px 14px 86px; }
}

/* Mobile offcanvas matches sidebar theme */
.pp-offcanvas{
  background: linear-gradient(180deg, var(--pp-sidebar-1) 0%, var(--pp-sidebar-2) 100%);
  color: var(--pp-sidebar-text);
}
.pp-offcanvas .btn-close{
  filter: invert(1);
}
.pp-offcanvas .pp-brand,
.pp-offcanvas .pp-nav .nav-link{
  color: var(--pp-sidebar-text);
}
.pp-offcanvas .pp-section{
  color: var(--pp-sidebar-muted);
}