/* ═══════════════════════════════════════════════════════════════
   ZAVENTRA DESIGN SYSTEM — COMPACT SCALE
   Every value below is EXACT per specification.
   ═══════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; max-width: 100vw; }
body { width: 100%; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
aside {
  width: 236px !important;
  min-height: 100vh;
  border-right: 1px solid var(--line) !important;
  background: #fff !important;
  padding: 16px 0 !important;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

aside .brand,
.brand {
  height: auto !important;
  padding: 12px 16px 14px 16px !important;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

aside .brand img,
.brand img,
aside .brand .theme-logo {
  width: 178px !important;
  max-width: 188px !important;
  max-height: 58px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left !important;
}

.sidebar-acc,
aside nav {
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px !important;
  padding: 0 8px !important;
  flex: 1;
}

.nav-item {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font: 500 13px/1.2 'Manrope', sans-serif !important;
  display: flex;
  align-items: center;
  gap: 10px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.nav-item .nav-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.nav-child {
  height: 34px !important;
  padding: 0 10px 0 30px !important;
  border-radius: 7px !important;
  font: 500 12px/1.2 'Manrope', sans-serif !important;
}

.nav-chevron {
  display: none !important;
}

/* ── HEADER ──────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px !important;
  margin-bottom: 0 !important;
  padding: 0 20px !important;
  border-bottom: 1px solid var(--line);
}

/* ── MAIN CONTENT ────────────────────────────────────────────── */
main {
  margin-left: 236px !important;
  width: calc(100% - 236px) !important;
  max-width: 1500px !important;
  padding: 20px !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

#content {
  padding-bottom: 24px !important;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: clip;
}

/* ── PAGE TYPOGRAPHY ─────────────────────────────────────────── */
h1 {
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}

h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

small {
  font-size: 12px !important;
}

.caption,
.dm-mono,
.crumb,
.eyebrow {
  font-size: 11px !important;
}

/* ── CARDS ───────────────────────────────────────────────────── */
.adm-card,
.card {
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.adm-card .adm-card-head {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line);
}

.adm-card .adm-card-body {
  padding: 10px 16px 16px !important;
}

/* ── STAT CARDS ──────────────────────────────────────────────── */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.adm-stat {
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  height: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.adm-stat:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.adm-stat .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0 !important;
}

.adm-stat .stat-label {
  font: 600 11px 'DM Mono' !important;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
}

.adm-stat .stat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: grid;
  place-items: center;
}

.adm-stat .stat-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.adm-stat .stat-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  color: var(--text);
}

.adm-stat .stat-change {
  font-size: 12px !important;
  color: var(--muted);
  margin-top: 0 !important;
}

/* ── GRID GAPS ───────────────────────────────────────────────── */
.adm-grid {
  display: grid;
  gap: 16px !important;
  margin-bottom: 16px !important;
}.adm-grid-2{grid-template-columns:1fr !important}.adm-grid-3{grid-template-columns:1fr !important}

/* ── SECTION TITLES ──────────────────────────────────────────── */
.adm-section {
  margin: 16px 0 12px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adm-section h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ── QUICK ACTIONS ───────────────────────────────────────────── */
.adm-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.adm-qa {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line);
  border-radius: 10px !important;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
}

.adm-qa:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.adm-qa .qa-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #eff6ff;
  color: #2563eb;
}

.adm-qa .qa-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.adm-qa .qa-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── TABLES ──────────────────────────────────────────────────── */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.adm-table th {
  text-align: left;
  padding: 10px 12px !important;
  font: 600 12px 'DM Mono' !important;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  height: 40px !important;
}

.adm-table td {
  padding: 12px !important;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  height: 44px !important;
}

.adm-table tr:last-child td {
  border-bottom: none;
}

.adm-table tbody tr {
  transition: background 0.15s;
}

.adm-table tbody tr:hover {
  background: #fafbfd;
}

.adm-table .name-cell {
  font-weight: 700;
  font-size: 13px !important;
}

.adm-table .sub-cell {
  font-size: 11px !important;
  color: var(--muted);
}

/* ── BADGES / PILLS ──────────────────────────────────────────── */
.adm-pill,
.pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font: 600 11px 'DM Mono' !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

.auth-submit,
.zmg-btn-primary {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font: 600 13px/1 'Manrope', sans-serif !important;
}

/* ── INPUTS ──────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

textarea {
  height: auto !important;
  min-height: 110px !important;
  padding: 10px 14px !important;
}

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-card,
#zmgModal > .zmg-modal-card,
.zmg-modal-card {
  border-radius: 14px !important;
  max-width: 760px !important;
  max-height: 90vh !important;
}

#zmgModal .field input,
#zmgModal .field select,
#zmgModal .field textarea {
  height: 42px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

/* ── AVATARS ─────────────────────────────────────────────────── */
.header-avatar,
.pd-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}

.pd-initials {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  font: 700 12px 'Manrope', sans-serif;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── WELCOME HEADER ──────────────────────────────────────────── */
.adm-welcome {
  margin-bottom: 16px !important;
}

.adm-welcome h1 {
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
}

.adm-welcome p {
  display: none !important;
}

.adm-welcome .adm-workspace {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font: 500 11px 'DM Mono' !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--adm-accent);
}

/* ── PROFILE DROPDOWN ────────────────────────────────────────── */
.pd-info b {
  font-size: 13px !important;
}

.pd-username {
  font-size: 11px !important;
}

.pd-role {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--adm-accent);
}

.pd-id {
  font-size: 11px !important;
}

/* ── ACTIVITY ROWS ───────────────────────────────────────────── */
.adm-activity {
  padding: 4px 16px !important;
}

.adm-act-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--line);
  font-size: 12px !important;
}

.adm-act-row:last-child {
  border-bottom: none;
}

.adm-act-ico {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.adm-act-ico svg {
  width: 13px !important;
  height: 13px !important;
}

.act-txt {
  font-size: 12px !important;
}

.act-time {
  font: 500 10px 'DM Mono' !important;
  color: var(--muted);
  margin-top: 1px;
}

/* ── ACTION BUTTONS ──────────────────────────────────────────── */
.adm-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font: 600 12px/1 'Manrope', sans-serif !important;
  cursor: pointer;
  transition: all 0.15s;
  height: 34px !important;
}

.adm-act svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── HEALTH ITEMS ────────────────────────────────────────────── */
.adm-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 16px !important;
}

.adm-h-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px !important;
  border: 1px solid var(--line);
  border-radius: 12px !important;
  height: 100%;
}

.adm-h-item .h-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.adm-h-item .h-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.adm-h-item .h-name {
  font-size: 12px !important;
  font-weight: 700;
}

.adm-h-item .h-status {
  font-size: 11px !important;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

/* ── OVERVIEW TILES ──────────────────────────────────────────── */
.adm-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.adm-ov {
  padding: 16px !important;
  border: 1px solid var(--line);
  border-radius: 12px !important;
  background: #fff;
  height: 100%;
}

.adm-ov .ov-label {
  font: 600 11px 'DM Mono' !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.adm-ov .ov-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

.adm-ov .ov-sub {
  font-size: 11px !important;
  color: var(--muted);
  margin-top: 3px;
}

/* ── PAGINATION ──────────────────────────────────────────────── */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.adm-pagination button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font: 600 12px/1 'Manrope', sans-serif !important;
}

/* ── SEARCH ──────────────────────────────────────────────────── */
.adm-search {
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

/* ── FILTER ──────────────────────────────────────────────────── */
.adm-filter {
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state,
.adm-empty {
  text-align: center;
  padding: 36px 20px;
}

.empty-state h4,
.adm-empty h4 {
  font-size: 16px !important;
  font-weight: 700;
  margin-bottom: 6px;
}

.empty-state p,
.adm-empty p {
  font-size: 13px !important;
  color: var(--muted);
}

/* ── SKELETON LOADING ────────────────────────────────────────── */
.adm-skel {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500;
  max-width: 340px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .adm-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .adm-overview {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  aside {
  width: 236px !important;
    padding: 16px 0 !important;
  }
  aside .brand,
  .brand {
    justify-content: center;
    padding: 0 6px !important;
  }
  aside .brand img,
  .brand img {
    width: 36px !important;
    height: 36px !important;
  }
  .nav-item span:not(.nav-icon) {
    display: none;
  }
  main {
  margin-left: 236px !important;
  width: calc(100% - 236px) !important;
    min-width: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SCROLLBAR HIDING — ALL PANELS
   ═══════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
*::-webkit-scrollbar-track {
  background: transparent !important;
}
*::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: none !important;
}
*::-webkit-scrollbar-button {
  display: none !important;
}
html {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar {
  display: none !important;
}
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}