:root { --sidebar-w: 250px; }
body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; background: #f5f6fa; }
#sidebar { width: var(--sidebar-w); min-height: 100vh; transition: margin .25s; flex-shrink: 0; }
#sidebar .nav-link { color: #cfd3dc; padding: .55rem 1rem; border-radius: .375rem; margin: 0 .5rem; }
#sidebar .nav-link i { width: 22px; display: inline-block; }
#sidebar .nav-link:hover, #sidebar .nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
#sidebar .nav-header { color: #8b93a3; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: .9rem 1.2rem .3rem; }
[dir="rtl"] #wrapper.collapsed #sidebar { margin-right: calc(-1 * var(--sidebar-w)); }
[dir="ltr"] #wrapper.collapsed #sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
@media (max-width: 992px) {
  [dir="rtl"] #sidebar { margin-right: calc(-1 * var(--sidebar-w)); }
  [dir="ltr"] #sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
  [dir="rtl"] #wrapper.collapsed #sidebar { margin-right: 0; }
  [dir="ltr"] #wrapper.collapsed #sidebar { margin-left: 0; }
}
.kpi-card { border: 0; border-radius: .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kpi-card .kpi-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; }
.card { border-radius: .6rem; }
.table > :not(caption) > * > * { vertical-align: middle; }
.menu-grid td { min-width: 220px; }
.menu-grid textarea { font-size: .85rem; min-height: 60px; }
.img-thumb { width: 130px; height: 130px; object-fit: cover; border-radius: .5rem; cursor: pointer; border: 1px solid #ddd; }
.field-card { cursor: grab; }
.field-card.dragging { opacity: .5; }
.req::after { content: " *"; color: #dc3545; }
.login-card { border: 0; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.timeline { border-inline-start: 2px solid #dee2e6; padding-inline-start: 1rem; }
.timeline .item { position: relative; margin-bottom: .9rem; }
.timeline .item::before { content: ""; position: absolute; inset-inline-start: -1.45rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: #0d6efd; }
.calendar-cell { min-height: 80px; font-size: .8rem; }
pre.json { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: .5rem; direction: ltr; text-align: left; }