/* zimcrm — Figma inventory UI (TheUnityWare / Untitled UI tokens)
   Overrides look only. Does not hide, remove, or disable any UI. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand — professional blue primary, charcoal chrome */
  --crm-brand-navy: #01203f;
  --crm-ink: #101828;
  --crm-muted: #667085;
  --crm-subtle: #98a2b3;
  --crm-line: #eaecf0;
  --crm-fill: #f9fafb;
  --crm-paper: #f9fafb;
  --crm-card: #ffffff;
  --crm-primary: #175cd3;
  --crm-primary-hover: #1570ef;
  --crm-primary-soft: #eff8ff;
  --crm-primary-border: #b2ddff;
  --crm-chrome: #334155;
  --crm-chrome-hover: #1e293b;
  --crm-accent: #175cd3;
  --crm-accent-hover: #1570ef;
  --crm-accent-soft: #eff8ff;
  --crm-accent-ring: rgba(23, 92, 211, 0.16);
  --crm-link: #175cd3;
  --crm-link-hover: #1570ef;
  /* Status */
  --crm-success: #027a48;
  --crm-success-bg: #ecfdf3;
  --crm-warning: #b54708;
  --crm-warning-bg: #fffaeb;
  --crm-danger: #b42318;
  --crm-danger-bg: #fef3f2;
  --crm-info: #175cd3;
  --crm-info-bg: #eff8ff;
  --crm-pending: #475569;
  --crm-pending-bg: #f1f5f9;
  /* Surfaces */
  --crm-surface: #ffffff;
  --crm-surface-soft: #f9fafb;
  --crm-surface-elevated: #ffffff;
  --crm-border-strong: #d0d5dd;
  /* Layout */
  --crm-radius-sm: 8px;
  --crm-radius: 12px;
  --crm-radius-lg: 16px;
  --crm-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --crm-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
  --crm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  /* Typography scale */
  --crm-text-xs: 12px;
  --crm-text-sm: 13px;
  --crm-text-base: 14px;
  --crm-text-lg: 16px;
  --crm-text-xl: 20px;
  --crm-text-2xl: 28px;
  --crm-text-3xl: 30px;
  --crm-control-h: 38px;
  --crm-control-radius: 8px;

  /* ─── ZIM brand token bridge (aliases — use these going forward) ─── */
  --zim-brand-navy: var(--crm-brand-navy);
  --zim-primary: var(--crm-primary);
  --zim-primary-hover: var(--crm-primary-hover);
  --zim-primary-soft: var(--crm-primary-soft);
  --zim-primary-border: var(--crm-primary-border);
  --zim-bg: var(--crm-fill);
  --zim-surface: var(--crm-surface);
  --zim-surface-soft: var(--crm-surface-soft);
  --zim-surface-elevated: var(--crm-surface-elevated);
  --zim-text: var(--crm-ink);
  --zim-text-secondary: var(--crm-muted);
  --zim-text-muted: var(--crm-subtle);
  --zim-border: var(--crm-line);
  --zim-border-strong: var(--crm-border-strong);
  --zim-success: var(--crm-success);
  --zim-success-soft: var(--crm-success-bg);
  --zim-warning: var(--crm-warning);
  --zim-warning-soft: var(--crm-warning-bg);
  --zim-danger: var(--crm-danger);
  --zim-danger-soft: var(--crm-danger-bg);
  --zim-info: var(--crm-info);
  --zim-info-soft: var(--crm-info-bg);
  --zim-radius-sm: var(--crm-radius-sm);
  --zim-radius-md: var(--crm-radius);
  --zim-radius-lg: var(--crm-radius-lg);
  --zim-shadow-sm: var(--crm-shadow-sm);
  --zim-shadow-md: var(--crm-shadow-md);
  --zim-focus-ring: var(--crm-accent-ring);
  --zim-control-h: var(--crm-control-h);
  --zim-font: Inter, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body:not(.lockscreen) {
  font-family: Inter, "Segoe UI", sans-serif !important;
  color: var(--crm-ink);
  background: var(--crm-fill) !important;
  -webkit-font-smoothing: antialiased;
}

body:not(.lockscreen) main.tw-bg-gray-100,
body:not(.lockscreen) #scrollable-container {
  background: var(--crm-fill) !important;
}

body:not(.lockscreen) .content {
  padding: 18px 20px 28px !important;
}

body:not(.lockscreen) .content-header {
  padding: 14px 20px 0 !important;
  background: transparent;
}

body:not(.lockscreen) .content-header h1,
body:not(.lockscreen) .content-header > h1 {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  color: var(--crm-ink) !important;
  margin: 0 0 16px !important;
}

body:not(.lockscreen) .content-header small,
body:not(.lockscreen) .content-header .small {
  color: var(--crm-muted);
  font-weight: 400;
}

/* Top bar — light chrome, readable controls */
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--crm-line) !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r > .tw-px-5 > .tw-flex {
  gap: 12px !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r .tw-flex.tw-flex-wrap {
  gap: 10px !important;
  row-gap: 10px !important;
}

/* Default header controls: white pill + dark ink (icons + labels) */
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-"],
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-inline-flex"] {
  background: #fff !important;
  background-image: none !important;
  color: #344054 !important;
  border: 1px solid #d0d5dd !important;
  box-shadow: none !important;
  margin: 0 !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-"]:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-inline-flex"]:hover {
  background: var(--crm-fill) !important;
  color: var(--crm-ink) !important;
  border-color: #c8c9cb !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button .tw-text-white,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary .tw-text-white,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a.tw-text-white,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r .tw-text-white {
  color: #344054 !important;
  stroke: currentColor !important;
}

/* POS — primary blue CTA */
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]):not(.btn-success) {
  background: var(--crm-primary) !important;
  border-color: var(--crm-primary) !important;
  color: #fff !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]):not(.btn-success):hover {
  background: var(--crm-primary-hover) !important;
  border-color: var(--crm-primary-hover) !important;
  color: #fff !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]):not(.btn-success) svg {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Repair CTA */
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a.btn-success,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="repair"] {
  background: #16a34a !important;
  border: 1px solid #16a34a !important;
  color: #fff !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  float: none !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a.btn-success:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="repair"]:hover {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #fff !important;
}

/* Sidebar */
aside.side-bar {
  border-right: 1px solid var(--crm-line) !important;
  background: #fff !important;
  width: 260px !important;
}

aside.side-bar > a,
aside.side-bar > a[class*="tw-bg-"],
aside.side-bar > a.zim-brand {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--crm-line) !important;
  border-right: 0 !important;
  justify-content: flex-start !important;
  padding: 16px 16px 14px !important;
  height: auto !important;
  min-height: 68px;
  box-shadow: none !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.zim-brand__mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(1, 32, 63, 0.08);
}

.zim-brand__mark svg {
  width: 34px;
  height: 34px;
  display: block;
}

.zim-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.zim-brand__name {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--zim-brand-navy) !important;
}

.zim-brand__biz {
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--crm-muted) !important;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

aside.side-bar > a .side-bar-heading,
aside.side-bar > a .side-bar-heading.tw-text-white {
  color: var(--crm-ink) !important;
  font-size: 16px !important;
  margin: 0 !important;
}

#side-bar.zim-sidebar-nav,
#side-bar {
  background: #fff;
  padding: 8px 10px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side-bar-heading {
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: var(--crm-ink) !important;
  text-align: left !important;
}

.side-bar-heading .tw-bg-green-400 {
  display: none;
}

/* Sidebar nav links */
.zim-nav-link,
#side-bar a.zim-nav-link,
aside.side-bar .sidebar-menu > li > a,
aside.side-bar .treeview-menu > li > a {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 11px;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  border-radius: 8px !important;
  color: #344054 !important;
  margin: 1px 0 !important;
  padding: 8px 11px !important;
  min-height: 36px;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.zim-nav-link i,
.zim-nav-link svg,
#side-bar a.zim-nav-link i,
#side-bar a.zim-nav-link svg {
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: #667085 !important;
  stroke: currentColor;
  flex-shrink: 0;
}

.zim-nav-link:hover,
#side-bar a.zim-nav-link:hover {
  background: #f2f4f7 !important;
  color: #101828 !important;
}

.zim-nav-link:hover i,
.zim-nav-link:hover svg {
  color: #344054 !important;
}

.zim-nav-chevron {
  color: #98a2b3 !important;
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

.zim-nav-link--active,
.zim-nav-group--open > .zim-nav-link,
#side-bar a.zim-nav-link--active,
aside.side-bar .sidebar-menu > li.active > a,
aside.side-bar .sidebar-menu > li.menu-open > a,
aside.side-bar .treeview-menu > li.active > a,
aside.side-bar .sidebar-menu > li > a.active,
#side-bar a.active {
  background: var(--zim-primary-soft) !important;
  color: var(--zim-primary) !important;
  font-weight: 600 !important;
}

.zim-nav-link--active i,
.zim-nav-link--active svg,
.zim-nav-group--open > .zim-nav-link i,
.zim-nav-group--open > .zim-nav-link svg,
.zim-nav-link--active .zim-nav-chevron,
.zim-nav-group--open > .zim-nav-link .zim-nav-chevron {
  color: var(--zim-primary) !important;
}

.zim-nav-link--active::before,
.zim-nav-group--open > .zim-nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--zim-primary);
}

.zim-nav-group {
  margin: 1px 0;
}

.zim-nav-children {
  margin: 4px 0 8px;
  padding: 0 0 0 14px;
  position: relative;
}

.zim-nav-rail {
  position: absolute;
  left: 20px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #eaecf0;
}

.zim-nav-children-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
}

.zim-nav-child {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 10px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #667085 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.zim-nav-child:hover {
  background: #f9fafb !important;
  color: #101828 !important;
}

.zim-nav-child--active {
  background: #eff8ff !important;
  color: #175cd3 !important;
  font-weight: 600 !important;
}

.zim-nav-header {
  padding: 12px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #98a2b3;
}

.zim-nav-divider {
  height: 1px;
  margin: 8px 10px;
  background: #eaecf0;
}

aside.side-bar .sidebar-menu > li > a:hover,
aside.side-bar .treeview-menu > li > a:hover,
#side-bar a:hover {
  background: #f9fafb !important;
  color: #101828 !important;
}

aside.side-bar .sidebar-menu > li.active > a:hover,
aside.side-bar .treeview-menu > li.active > a:hover {
  background: #eff8ff !important;
  color: #175cd3 !important;
}

/* Cards / AdminLTE boxes */
body:not(.lockscreen) .box,
body:not(.lockscreen) .box-solid,
body:not(.lockscreen) .box-primary,
body:not(.lockscreen) .box-success,
body:not(.lockscreen) .box-warning,
body:not(.lockscreen) .box-danger,
body:not(.lockscreen) .box-info,
body:not(.lockscreen) .box-default {
  background: var(--crm-card);
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  overflow: hidden;
}

body:not(.lockscreen) .box.box-solid {
  border-top: 1px solid var(--crm-line) !important;
}

body:not(.lockscreen) .box-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--crm-line);
  background: #fff !important;
}

body:not(.lockscreen) .box-header.with-border {
  border-bottom: 1px solid var(--crm-line) !important;
}

body:not(.lockscreen) .box-title,
body:not(.lockscreen) .box-header .box-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .box-body {
  padding: 16px !important;
  background: #fff;
}

body:not(.lockscreen) .box-footer {
  background: #fafafa !important;
  border-top: 1px solid var(--crm-line) !important;
  padding: 12px 16px !important;
}

body:not(.lockscreen) .info-box,
body:not(.lockscreen) .small-box {
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  border: 1px solid var(--crm-line);
  overflow: hidden;
}

body:not(.lockscreen) .small-box h3,
body:not(.lockscreen) .info-box-number {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Forms */
body:not(.lockscreen) .form-control,
body:not(.lockscreen) select.form-control,
body:not(.lockscreen) textarea.form-control,
body:not(.lockscreen) input.form-control {
  border: 1px solid #d8d9db !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  min-height: 38px;
  color: var(--crm-ink);
  background: #fff;
}

body:not(.lockscreen) .form-control:focus {
  border-color: var(--crm-accent) !important;
  box-shadow: 0 0 0 4px var(--crm-accent-ring) !important;
}

body:not(.lockscreen) .input-group .form-control {
  border-radius: 8px 0 0 8px !important;
}

body:not(.lockscreen) .input-group-addon,
body:not(.lockscreen) .input-group-btn .btn {
  border-color: #d8d9db !important;
}

body:not(.lockscreen) .control-label,
body:not(.lockscreen) label {
  font-weight: 500 !important;
  color: #3a3c3f;
}

body:not(.lockscreen) .select2-container .select2-selection--single,
body:not(.lockscreen) .select2-container--default .select2-selection--single,
body:not(.lockscreen) .select2-container--default .select2-selection--multiple {
  border: 1px solid #d8d9db !important;
  border-radius: 8px !important;
  min-height: 38px;
  box-shadow: none !important;
}

body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
}

body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

body:not(.lockscreen) .select2-dropdown {
  border: 1px solid var(--crm-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--crm-shadow) !important;
}

/* Buttons — keep semantic colors, flatten AdminLTE 3D look */
body:not(.lockscreen) .btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  background-image: none !important;
  padding: 8px 14px !important;
}

body:not(.lockscreen) .btn-sm,
body:not(.lockscreen) .btn-xs {
  padding: 6px 10px !important;
}

body:not(.lockscreen) .tw-dw-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: 36px;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body:not(.lockscreen) .tw-dw-btn-primary,
body:not(.lockscreen) .btn-primary {
  background-color: #175cd3 !important;
  border-color: #175cd3 !important;
  color: #fff !important;
}

body:not(.lockscreen) .tw-dw-btn-primary:hover {
  background-color: #1570ef !important;
}

body:not(.lockscreen) .btn-primary:hover {
  background-color: #1570ef !important;
  border-color: #1570ef !important;
}

body:not(.lockscreen) .btn-default,
body:not(.lockscreen) .btn-default:hover {
  background: #fff !important;
  border-color: #d8d9db !important;
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .btn-success {
  background-color: #1f7a4d !important;
  border-color: #1f7a4d !important;
}

body:not(.lockscreen) .btn-danger {
  background-color: #c0392b !important;
  border-color: #c0392b !important;
}

body:not(.lockscreen) .btn-warning {
  background-color: #c47b17 !important;
  border-color: #c47b17 !important;
  color: #fff !important;
}

body:not(.lockscreen) .btn-info {
  background-color: #fff !important;
  border: 1px solid #d0d5dd !important;
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .btn-info:hover,
body:not(.lockscreen) .btn-info:focus {
  background-color: var(--crm-fill) !important;
  border-color: #c8c9cb !important;
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .btn-group .btn-info.active,
body:not(.lockscreen) .btn-group label.btn-info.active {
  background: var(--crm-accent) !important;
  border-color: var(--crm-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Date filter pills — clear gaps between buttons */
body:not(.lockscreen) .btn-group[data-toggle="buttons"] {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

body:not(.lockscreen) .btn-group[data-toggle="buttons"] > .btn,
body:not(.lockscreen) .btn-group[data-toggle="buttons"] > label.btn {
  float: none !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

body:not(.lockscreen) .btn-app {
  border-radius: 10px !important;
  border: 1px solid var(--crm-line) !important;
  background: #fff !important;
}

/* Tables */
body:not(.lockscreen) table.table,
body:not(.lockscreen) .table-bordered,
body:not(.lockscreen) .dataTable {
  background: #fff;
}

body:not(.lockscreen) .table > thead > tr > th,
body:not(.lockscreen) table.dataTable thead th {
  background: #fff !important;
  color: #667085 !important;
  font-weight: 500 !important;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 1px solid var(--crm-line) !important;
  border-top: 0 !important;
  white-space: nowrap;
}

body:not(.lockscreen) .table-bordered,
body:not(.lockscreen) .table-bordered > thead > tr > th,
body:not(.lockscreen) .table-bordered > tbody > tr > td {
  border-left: 0 !important;
  border-right: 0 !important;
}

body:not(.lockscreen) .table > tbody > tr > td,
body:not(.lockscreen) .table-bordered > tbody > tr > td {
  border-color: var(--crm-line) !important;
  vertical-align: middle !important;
  color: #344054;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fff;
}

body:not(.lockscreen) .table-hover > tbody > tr:hover {
  background-color: var(--crm-fill) !important;
}

body:not(.lockscreen) div.dataTables_wrapper {
  padding-top: 4px;
}

/* ─── DataTables toolbar (Show + exports + search) ─── */
body:not(.lockscreen) .zim-dt-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px !important;
  padding: 0;
  width: 100%;
}

body:not(.lockscreen) .zim-dt-toolbar__left {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  flex: 1 1 auto;
  min-width: 0;
}

body:not(.lockscreen) .zim-dt-toolbar__right {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

body:not(.lockscreen) .zim-dt-toolbar .dataTables_length,
body:not(.lockscreen) .zim-dt-toolbar .dt-buttons,
body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter {
  float: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

body:not(.lockscreen) .zim-dt-toolbar .dataTables_length label,
body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #667085 !important;
  white-space: nowrap;
}

body:not(.lockscreen) .zim-dt-toolbar .dataTables_length select,
body:not(.lockscreen) .dataTables_length select,
body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter input,
body:not(.lockscreen) .dataTables_filter input {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  vertical-align: middle;
}

body:not(.lockscreen) .zim-dt-toolbar .dataTables_length select,
body:not(.lockscreen) .dataTables_length select {
  width: auto !important;
  min-width: 72px;
  padding-right: 28px !important;
}

body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter input,
body:not(.lockscreen) .dataTables_filter input {
  width: 220px !important;
  max-width: 100%;
}

body:not(.lockscreen) .zim-dt-toolbar .dt-buttons,
body:not(.lockscreen) .dt-buttons {
  text-align: left !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
}

body:not(.lockscreen) .zim-dt-toolbar .dt-buttons .dt-button,
body:not(.lockscreen) .zim-dt-toolbar .dt-buttons .tw-dw-btn,
body:not(.lockscreen) .zim-dt-toolbar .dt-buttons .tw-dw-btn-outline,
body:not(.lockscreen) .zim-dt-toolbar .dt-buttons .zim-dt-btn,
body:not(.lockscreen) .dt-buttons .dt-button,
body:not(.lockscreen) .dt-buttons .tw-dw-btn,
body:not(.lockscreen) .dt-buttons .tw-dw-btn-outline,
body:not(.lockscreen) .dt-buttons .zim-dt-btn,
body:not(.lockscreen) a.zim-dt-btn,
body:not(.lockscreen) button.zim-dt-btn {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  float: none !important;
  vertical-align: middle;
}

body:not(.lockscreen) .dt-buttons .dt-button i,
body:not(.lockscreen) .dt-buttons .tw-dw-btn i,
body:not(.lockscreen) .zim-dt-btn i {
  color: #475467 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  margin: 0 !important;
  width: 14px;
  text-align: center;
}

body:not(.lockscreen) .dt-buttons .dt-button:hover,
body:not(.lockscreen) .dt-buttons .tw-dw-btn:hover,
body:not(.lockscreen) .dt-buttons .tw-dw-btn-outline:hover,
body:not(.lockscreen) .zim-dt-btn:hover {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
  color: #101828 !important;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_info,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate {
  margin-top: 14px !important;
  padding-top: 4px;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  body:not(.lockscreen) .zim-dt-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.lockscreen) .zim-dt-toolbar__right {
    margin-left: 0;
    justify-content: flex-start;
    width: 100%;
  }

  body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter,
  body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter label {
    width: 100%;
  }

  body:not(.lockscreen) .zim-dt-toolbar .dataTables_filter input {
    width: 100% !important;
    flex: 1;
  }
}

/* Column visibility / DataTables collection — one clean panel, not stacked pills */
body:not(.lockscreen) ul.dt-button-collection,
body:not(.lockscreen) div.dt-button-collection,
body:not(.lockscreen) ul.dt-button-collection.dropdown-menu,
body:not(.lockscreen) div.dt-button-collection.dropdown-menu {
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
  padding: 6px !important;
  min-width: 200px !important;
  overflow: hidden;
}

body:not(.lockscreen) .dt-button-collection .dt-button,
body:not(.lockscreen) .dt-button-collection .tw-dw-btn,
body:not(.lockscreen) .dt-button-collection .zim-dt-btn,
body:not(.lockscreen) .dt-button-collection .tw-dw-btn-outline,
body:not(.lockscreen) .dt-button-collection button,
body:not(.lockscreen) .dt-button-collection a,
body:not(.lockscreen) .dt-button-collection li,
body:not(.lockscreen) .dt-button-collection .buttons-columnVisibility,
body:not(.lockscreen) ul.dt-button-collection > li,
body:not(.lockscreen) ul.dt-button-collection > .dt-button {
  background: transparent !important;
  background-image: none !important;
  color: #344054 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: left !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
  float: none !important;
}

body:not(.lockscreen) .dt-button-collection .dt-button:hover,
body:not(.lockscreen) .dt-button-collection .tw-dw-btn:hover,
body:not(.lockscreen) .dt-button-collection .zim-dt-btn:hover,
body:not(.lockscreen) .dt-button-collection button:hover,
body:not(.lockscreen) .dt-button-collection a:hover,
body:not(.lockscreen) .dt-button-collection .buttons-columnVisibility:hover {
  background: #f9fafb !important;
  color: #101828 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.lockscreen) .dt-button-collection .dt-button.active,
body:not(.lockscreen) .dt-button-collection .tw-dw-btn.active,
body:not(.lockscreen) .dt-button-collection .buttons-columnVisibility.active,
body:not(.lockscreen) div.dt-button-collection .dt-button.active {
  background: #eff8ff !important;
  color: #175cd3 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Pagination — current page must stay readable */
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: 8px !important;
  color: var(--crm-ink) !important;
  min-width: 36px;
  padding: 6px 12px !important;
  margin: 0 3px !important;
  box-shadow: none !important;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body:not(.lockscreen) .pagination > .active > a,
body:not(.lockscreen) .pagination > .active > span,
body:not(.lockscreen) .pagination > .active > a:hover,
body:not(.lockscreen) .pagination > .active > span:hover {
  background: var(--crm-accent) !important;
  background-image: none !important;
  border-color: var(--crm-accent) !important;
  color: #fff !important;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f4f4f3 !important;
  background-image: none !important;
  border-color: #c8c9cb !important;
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #fff !important;
  color: #b4b6ba !important;
  border-color: var(--crm-line) !important;
  cursor: default;
}

/* Page Add / primary CTAs — professional blue, always readable */
body:not(.lockscreen) .box-tools .tw-dw-btn.tw-bg-gradient-to-r,
body:not(.lockscreen) .box-tools a.tw-from-indigo-600,
body:not(.lockscreen) .box-tools a[class*="tw-from-indigo"],
body:not(.lockscreen) .box-tools a[class*="tw-to-blue"],
body:not(.lockscreen) .tw-dw-btn[class*="tw-from-indigo"],
body:not(.lockscreen) a.tw-dw-btn[class*="tw-from-indigo"],
body:not(.lockscreen) a[class*="tw-from-indigo"].tw-text-white,
body:not(.lockscreen) button[class*="tw-from-indigo"],
body:not(.lockscreen) .content-header a[class*="tw-from-indigo"],
body:not(.lockscreen) .zim-page-header__actions .tw-dw-btn-primary,
body:not(.lockscreen) .tw-dw-btn.tw-dw-btn-primary.tw-text-white {
  background: #175cd3 !important;
  background-image: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 1px solid #175cd3 !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

body:not(.lockscreen) .box-tools .tw-dw-btn.tw-bg-gradient-to-r:hover,
body:not(.lockscreen) .box-tools a[class*="tw-from-indigo"]:hover,
body:not(.lockscreen) .tw-dw-btn[class*="tw-from-indigo"]:hover,
body:not(.lockscreen) a[class*="tw-from-indigo"].tw-text-white:hover,
body:not(.lockscreen) button[class*="tw-from-indigo"]:hover,
body:not(.lockscreen) .tw-dw-btn.tw-dw-btn-primary.tw-text-white:hover {
  background: #1570ef !important;
  border-color: #1570ef !important;
  color: #fff !important;
}

body:not(.lockscreen) a[class*="tw-from-indigo"] svg,
body:not(.lockscreen) .box-tools a[class*="tw-from-indigo"] svg,
body:not(.lockscreen) .tw-dw-btn[class*="tw-from-indigo"] svg {
  color: #fff !important;
  stroke: currentColor !important;
  width: 18px;
  height: 18px;
}

/* Row actions — readable outline chips with spacing */
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-primary,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-info,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-success,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-warning,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-error,
body:not(.lockscreen) table .tw-dw-btn.tw-dw-btn-xs {
  background: #fff !important;
  color: #344054 !important;
  border: 1px solid #d0d5dd !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  margin: 0 6px 6px 0 !important;
  border-radius: 8px !important;
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  box-shadow: none !important;
}

body:not(.lockscreen) table td:last-child {
  white-space: nowrap;
}

body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-primary:hover,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-info:hover,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-success:hover,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-warning:hover {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
  color: #101828 !important;
}

body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-error:hover,
body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-error {
  border-color: #fecdca !important;
  color: #b42318 !important;
}

body:not(.lockscreen) table .tw-dw-btn-outline.tw-dw-btn-error:hover {
  background: #fef3f2 !important;
  border-color: #f97066 !important;
  color: #b42318 !important;
}

/* Tabs — consistent padding & spacing */
body:not(.lockscreen) .nav-tabs {
  border-bottom: 1px solid var(--crm-line) !important;
  gap: 4px;
  margin-bottom: 16px !important;
}

body:not(.lockscreen) .nav-tabs > li {
  margin-bottom: -1px !important;
  margin-right: 4px !important;
}

body:not(.lockscreen) .nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 14px !important;
  margin-right: 0 !important;
  color: #667085 !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
}

body:not(.lockscreen) .nav-tabs > li.active > a,
body:not(.lockscreen) .nav-tabs > li.active > a:hover,
body:not(.lockscreen) .nav-tabs > li.active > a:focus {
  background: #fff !important;
  border-color: var(--crm-line) var(--crm-line) #fff !important;
  color: #175cd3 !important;
  font-weight: 600 !important;
}

body:not(.lockscreen) .nav-pills > li {
  margin-right: 6px !important;
  margin-bottom: 6px !important;
}

body:not(.lockscreen) .nav-pills > li > a {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #344054 !important;
  font-weight: 500 !important;
}

body:not(.lockscreen) .nav-pills > li.active > a,
body:not(.lockscreen) .nav-pills > li.active > a:hover,
body:not(.lockscreen) .nav-pills > li.active > a:focus {
  background: #eff8ff !important;
  color: #175cd3 !important;
}

body:not(.lockscreen) .nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  color: var(--crm-muted);
  font-weight: 500;
}

body:not(.lockscreen) .nav-tabs > li.active > a,
body:not(.lockscreen) .nav-tabs > li.active > a:hover,
body:not(.lockscreen) .nav-tabs > li.active > a:focus {
  color: var(--crm-ink) !important;
  font-weight: 600;
  border-color: var(--crm-line) var(--crm-line) #fff !important;
}

body:not(.lockscreen) .nav-pills > li.active > a {
  background: var(--crm-accent) !important;
}

/* Modals */
body:not(.lockscreen) .modal-content {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(28, 29, 31, 0.18) !important;
}

body:not(.lockscreen) .modal-header {
  border-bottom: 1px solid var(--crm-line) !important;
  padding: 16px 20px !important;
}

body:not(.lockscreen) .modal-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

body:not(.lockscreen) .modal-footer {
  border-top: 1px solid var(--crm-line) !important;
  background: #fafafa;
  border-radius: 0 0 12px 12px;
}

body:not(.lockscreen) .modal-body {
  padding: 18px 20px !important;
}

/* Alerts / labels */
body:not(.lockscreen) .alert {
  border-radius: 10px !important;
  border-width: 1px !important;
}

body:not(.lockscreen) .label,
body:not(.lockscreen) .badge {
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 3px 8px;
}

body:not(.lockscreen) .callout {
  border-radius: 10px !important;
}

/* Pagination */
body:not(.lockscreen) .pagination > li > a,
body:not(.lockscreen) .pagination > li > span {
  border-radius: 8px !important;
  margin: 0 2px;
  border-color: var(--crm-line) !important;
  color: var(--crm-ink);
}

body:not(.lockscreen) .pagination > .active > a,
body:not(.lockscreen) .pagination > .active > span,
body:not(.lockscreen) .pagination > .active > a:hover,
body:not(.lockscreen) .pagination > .active > span:hover,
body:not(.lockscreen) .pagination > .active > a:focus,
body:not(.lockscreen) .pagination > .active > span:focus {
  background: var(--crm-accent) !important;
  border-color: var(--crm-accent) !important;
  color: #fff !important;
}

/* Dropdowns */
body:not(.lockscreen) .dropdown-menu {
  border: 1px solid var(--crm-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--crm-shadow) !important;
  padding: 6px !important;
}

body:not(.lockscreen) .dropdown-menu > li > a {
  border-radius: 6px;
  padding: 8px 12px;
}

/* Filters row often sits above tables */
body:not(.lockscreen) .filters-row,
body:not(.lockscreen) #filter_div,
body:not(.lockscreen) .custom-filters {
  background: #fff;
}

/* Footer */
body:not(.lockscreen) .tw-text-gray-500 {
  color: #8a8d92 !important;
}

/* Scroll top */
.scrolltop .scroll.icon {
  background: var(--crm-accent) !important;
  border-radius: 999px !important;
}

/* SweetAlert */
.swal-modal {
  border-radius: 12px !important;
  font-family: Inter, sans-serif !important;
}

.swal-button {
  border-radius: 8px !important;
}

/* Datepicker / daterangepicker */
.daterangepicker,
.datepicker {
  border-radius: 10px !important;
  border: 1px solid var(--crm-line) !important;
  font-family: Inter, sans-serif;
}

/* Keep print clean — no decorative shadows on invoices */
@media print {
  .box,
  .modal-content,
  .info-box,
  .small-box {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* Figma-style right detail drawer */
body:not(.lockscreen) .modal.view_modal.zim-detail-drawer {
  padding: 0 !important;
}

body:not(.lockscreen) .modal.view_modal.zim-detail-drawer .modal-dialog,
body:not(.lockscreen) .modal.view_modal .zim-detail-dialog,
body:not(.lockscreen) .modal.view_modal .modal-dialog {
  width: min(920px, 94vw) !important;
  max-width: 94vw !important;
  margin: 0 0 0 auto !important;
  height: 100vh;
  transform: none !important;
}

body:not(.lockscreen) .modal.view_modal .modal-content,
body:not(.lockscreen) .zim-detail-content {
  height: 100vh;
  border-radius: 0 !important;
  box-shadow: -12px 0 40px rgba(16, 24, 40, 0.12) !important;
  display: flex;
  flex-direction: column;
}

body:not(.lockscreen) .zim-detail-header,
body:not(.lockscreen) .modal.view_modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--crm-line) !important;
  padding: 16px 20px !important;
  background: #fff !important;
}

body:not(.lockscreen) .zim-detail-back {
  background: none;
  border: 0;
  color: var(--crm-accent);
  font-weight: 600;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
}

body:not(.lockscreen) .zim-detail-title,
body:not(.lockscreen) .modal.view_modal .modal-title {
  flex: 1;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--crm-ink) !important;
  margin: 0 !important;
}

body:not(.lockscreen) .zim-detail-body,
body:not(.lockscreen) .modal.view_modal .modal-body {
  flex: 1;
  overflow: auto;
  padding: 20px 24px 32px !important;
  background: #fff;
}

body:not(.lockscreen) .zim-detail-body .content-header {
  display: none;
}

/* Quieter cards */
body:not(.lockscreen) .box.box-primary,
body:not(.lockscreen) .box.box-info,
body:not(.lockscreen) .box.box-success,
body:not(.lockscreen) .box.box-warning,
body:not(.lockscreen) .box.box-danger {
  border-top: 1px solid var(--crm-line) !important;
}

body:not(.lockscreen) .nav-tabs-custom {
  box-shadow: none !important;
  background: transparent;
}

body:not(.lockscreen) table.dataTable tbody tr {
  cursor: pointer;
}

body:not(.lockscreen) .small-box .icon {
  opacity: 0.12;
}

.zim-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.zim-page-header h1 {
  margin: 0 !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  color: var(--crm-ink) !important;
}

.zim-page-header p {
  margin: 6px 0 0;
  color: var(--crm-muted);
  font-size: 14px;
}

.zim-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zim-back {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--crm-accent) !important;
  font-weight: 600;
  font-size: 14px;
}

.zim-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 991px) {
  .zim-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.zim-stat {
  background: #fff;
  border: 1px solid var(--crm-line);
  border-radius: 12px;
  padding: 16px 18px;
}

.zim-stat__label {
  display: block;
  color: var(--crm-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.zim-stat__value {
  display: block;
  color: var(--crm-ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.zim-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.zim-badge--success {
  background: #ecfdf3;
  color: #027a48;
}

.zim-badge--active {
  background: #eff8ff;
  color: #175cd3;
}

.zim-badge--danger {
  background: #fef3f2;
  color: #b42318;
}

.zim-badge--muted {
  background: #f2f4f7;
  color: #344054;
}

.zim-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.zim-person img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}

/* ─── Dashboard: remove saturated blue hero (not page Add buttons) ─── */
body:not(.lockscreen) .zim-dashboard,
body:not(.lockscreen) #scrollable-container > .tw-bg-gradient-to-r,
body:not(.lockscreen) .zim-dashboard [class*="tw-from-primary-800"],
body:not(.lockscreen) .zim-dashboard [class*="tw-from-indigo"],
body:not(.lockscreen) #scrollable-container .zim-dashboard .tw-absolute.tw-inset-0.tw-grid > div {
  background: var(--crm-fill) !important;
  background-image: none !important;
}

body:not(.lockscreen) .zim-dashboard {
  padding-bottom: 0 !important;
}

body:not(.lockscreen) #scrollable-container .zim-dashboard h1,
body:not(.lockscreen) #scrollable-container .zim-dashboard .text-white,
body:not(.lockscreen) #scrollable-container .zim-dashboard [class*="text-white"] {
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) #scrollable-container .tw-rounded-xl.tw-ring-gray-200,
body:not(.lockscreen) #scrollable-container .tw-ring-gray-200 {
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  ring: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

body:not(.lockscreen) #scrollable-container .tw-rounded-xl.tw-ring-gray-200:hover {
  box-shadow: var(--crm-shadow-md) !important;
  transform: none !important;
}

body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="tw-bg-sky"],
body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="tw-bg-green"],
body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="tw-bg-yellow"],
body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="tw-bg-red"],
body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="tw-bg-orange"],
body:not(.lockscreen) #scrollable-container .tw-inline-flex[class*="bg-sky"] {
  background: var(--crm-accent-soft) !important;
  color: var(--crm-accent) !important;
}

/* Repair header CTA — keep green, force readable white label */
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-green"] {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-green"] svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-green"].tw-text-white {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Extended status badges */
.zim-badge--warning {
  background: var(--crm-warning-bg);
  color: var(--crm-warning);
}

.zim-badge--info {
  background: var(--crm-info-bg);
  color: var(--crm-info);
}

.zim-badge--pending {
  background: var(--crm-pending-bg);
  color: var(--crm-pending);
}

/* Form section cards */
.zim-section {
  background: var(--zim-surface);
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-md);
  box-shadow: var(--zim-shadow-sm);
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.zim-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--zim-border);
  background: var(--zim-surface);
}

.zim-section__title {
  font-size: var(--crm-text-lg);
  font-weight: 600;
  color: var(--zim-text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.zim-section__desc {
  margin: 4px 0 0;
  font-size: var(--crm-text-sm);
  color: var(--zim-text-secondary);
  line-height: 1.45;
}

.zim-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.zim-section__body {
  padding: 18px 20px 20px;
}

.zim-section__body > :last-child {
  margin-bottom: 0;
}

/* Map legacy AdminLTE labels to design system */
body:not(.lockscreen) .label-success,
body:not(.lockscreen) .badge-success {
  background: var(--crm-success-bg) !important;
  color: var(--crm-success) !important;
}

body:not(.lockscreen) .label-danger,
body:not(.lockscreen) .badge-danger {
  background: var(--crm-danger-bg) !important;
  color: var(--crm-danger) !important;
}

body:not(.lockscreen) .label-warning,
body:not(.lockscreen) .badge-warning {
  background: var(--crm-warning-bg) !important;
  color: var(--crm-warning) !important;
}

body:not(.lockscreen) .label-info,
body:not(.lockscreen) .badge-info {
  background: var(--crm-info-bg) !important;
  color: var(--crm-info) !important;
}

body:not(.lockscreen) .label.bg-gray,
body:not(.lockscreen) .badge.bg-gray {
  background: #f2f4f7 !important;
  color: #344054 !important;
}

/* AdminLTE small-box — neutral enterprise cards (Superadmin + dashboard) */
body:not(.lockscreen) .small-box.bg-aqua,
body:not(.lockscreen) .small-box.bg-yellow,
body:not(.lockscreen) .small-box.bg-red,
body:not(.lockscreen) .small-box.bg-green,
body:not(.lockscreen) .small-box.bg-primary,
body:not(.lockscreen) .small-box.bg-purple {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
  color: var(--crm-ink) !important;
  overflow: hidden;
}

body:not(.lockscreen) .small-box .inner {
  padding: 20px 18px 12px !important;
}

body:not(.lockscreen) .small-box .inner h3,
body:not(.lockscreen) .small-box .inner p {
  color: var(--crm-ink) !important;
}

body:not(.lockscreen) .small-box .inner p {
  color: var(--crm-muted) !important;
  font-size: var(--crm-text-sm);
  font-weight: 500;
}

body:not(.lockscreen) .small-box .inner h3 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

body:not(.lockscreen) .small-box .icon {
  color: var(--crm-muted) !important;
  opacity: 0.12 !important;
}

body:not(.lockscreen) .small-box-footer {
  background: var(--crm-fill) !important;
  color: var(--crm-muted) !important;
  border-top: 1px solid var(--crm-line);
  padding: 10px 16px !important;
  font-size: var(--crm-text-sm);
  font-weight: 500;
}

body:not(.lockscreen) .small-box-footer:hover {
  background: #eef0f2 !important;
  color: var(--crm-ink) !important;
}

/* Superadmin sub-nav tabs */
body:not(.lockscreen) section.no-print nav.navbar-default {
  background: #fff !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  margin: 16px 20px !important;
}

body:not(.lockscreen) section.no-print nav.navbar-default .navbar-brand {
  color: var(--crm-ink) !important;
  font-weight: 600;
}

body:not(.lockscreen) section.no-print nav.navbar-default .nav > li > a {
  color: var(--crm-muted) !important;
  font-weight: 500;
  border-radius: 8px;
  margin: 8px 2px;
  padding: 8px 14px !important;
}

body:not(.lockscreen) section.no-print nav.navbar-default .nav > li.active > a,
body:not(.lockscreen) section.no-print nav.navbar-default .nav > li > a:hover {
  background: var(--crm-accent-soft) !important;
  color: var(--crm-accent) !important;
}

body:not(.lockscreen) section.no-print nav.navbar-default .nav > li.active > a {
  font-weight: 600;
}

/* Sidebar superadmin red highlight → neutral */
body:not(.lockscreen) .sidebar-menu > li.bg-red,
body:not(.lockscreen) .sidebar-menu > li.bg-red > a {
  background: transparent !important;
}

body:not(.lockscreen) .sidebar-menu > li.bg-red.active > a,
body:not(.lockscreen) .sidebar-menu > li.bg-red.active-sub > a {
  background: var(--crm-accent-soft) !important;
  color: var(--crm-accent) !important;
}

body:not(.lockscreen) a:hover:not([class*="tw-bg-"]):not(.small-box-footer):not(.zim-action):not(.btn):not(.zim-nav-link):not(.zim-nav-child):not(.zim-dt-btn),
body:not(.lockscreen) .zim-back:hover {
  color: var(--crm-link-hover) !important;
}

body:not(.lockscreen) .zim-back {
  color: var(--crm-link) !important;
}

/* ─── Row action stack (All Businesses + reusable) ─── */
.zim-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 148px;
  padding: 2px 0;
}

.zim-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zim-action--manage {
  background: #fff !important;
  border-color: #d0d5dd !important;
  color: #344054 !important;
}

.zim-action--manage:hover {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
  color: #101828 !important;
}

.zim-action--primary {
  background: #175cd3 !important;
  border-color: #175cd3 !important;
  color: #fff !important;
}

.zim-action--primary:hover {
  background: #1570ef !important;
  border-color: #1570ef !important;
  color: #fff !important;
}

.zim-action--success {
  background: #ecfdf3 !important;
  border-color: #abefc6 !important;
  color: #027a48 !important;
}

.zim-action--success:hover {
  background: #dcfae6 !important;
  color: #027a48 !important;
}

.zim-action--danger {
  background: #fff !important;
  border-color: #fecdca !important;
  color: #b42318 !important;
}

.zim-action--danger:hover {
  background: #fef3f2 !important;
  border-color: #f97066 !important;
  color: #b42318 !important;
}

/* Table cells — breathing room */
body:not(.lockscreen) .zim-data-table > thead > tr > th,
body:not(.lockscreen) .zim-data-table > tbody > tr > td {
  padding: 14px 16px !important;
}

body:not(.lockscreen) td.zim-cell-address,
body:not(.lockscreen) .zim-cell-address {
  max-width: 220px;
  white-space: normal !important;
  word-break: break-word;
  color: var(--crm-muted) !important;
  font-size: 13px;
  line-height: 1.45;
}

body:not(.lockscreen) td.zim-cell-actions,
body:not(.lockscreen) .zim-cell-actions {
  width: 168px;
  min-width: 168px;
  vertical-align: top !important;
}

body:not(.lockscreen) .zim-table-card {
  margin-top: 4px;
}

body:not(.lockscreen) .zim-table-card > .box-body {
  padding: 18px 20px 22px !important;
}

body:not(.lockscreen) .zim-business-page .zim-page-header {
  margin-bottom: 16px;
}

body:not(.lockscreen) .zim-business-page .box.filters,
body:not(.lockscreen) .zim-business-page [class*="filter"] .box {
  margin-bottom: 16px !important;
}

/* Legacy AdminLTE table buttons — readable + spaced */
body:not(.lockscreen) table .btn.btn-xs,
body:not(.lockscreen) table .btn-xs {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 3px 4px 3px 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

body:not(.lockscreen) table .btn-info.btn-xs,
body:not(.lockscreen) table a.btn-info {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  color: #344054 !important;
}

body:not(.lockscreen) table .btn-primary.btn-xs,
body:not(.lockscreen) table button.btn-primary.btn-xs {
  background: #175cd3 !important;
  border-color: #175cd3 !important;
  color: #fff !important;
}

body:not(.lockscreen) table .btn-danger.btn-xs,
body:not(.lockscreen) table a.btn-danger.btn-xs {
  background: #fff !important;
  border: 1px solid #fecdca !important;
  color: #b42318 !important;
}

body:not(.lockscreen) table .btn-success.btn-xs,
body:not(.lockscreen) table a.btn-success.btn-xs {
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
  color: #027a48 !important;
}

body:not(.lockscreen) .label.bg-green,
body:not(.lockscreen) .badge.bg-green,
body:not(.lockscreen) span.label.bg-green {
  background: #eff8ff !important;
  color: #175cd3 !important;
}

/* Sidebar bright green / colored li → soft accent */
body:not(.lockscreen) .sidebar-menu > li.bg-green,
body:not(.lockscreen) .sidebar-menu > li.bg-green > a,
body:not(.lockscreen) .sidebar-menu > li.bg-yellow,
body:not(.lockscreen) .sidebar-menu > li.bg-yellow > a,
body:not(.lockscreen) .sidebar-menu > li.bg-aqua,
body:not(.lockscreen) .sidebar-menu > li.bg-aqua > a,
body:not(.lockscreen) .sidebar-menu > li.bg-blue,
body:not(.lockscreen) .sidebar-menu > li.bg-blue > a {
  background: transparent !important;
  color: #344054 !important;
}

body:not(.lockscreen) .sidebar-menu > li.bg-green.active > a,
body:not(.lockscreen) .sidebar-menu > li.bg-green.active-sub > a,
body:not(.lockscreen) .sidebar-menu > li.bg-green > a:hover {
  background: #eff8ff !important;
  color: #175cd3 !important;
}

/* ─── Manage Modules page ─── */
body:not(.lockscreen) .zim-modules-page .zim-page-header {
  margin-bottom: 18px;
}

body:not(.lockscreen) .zim-modules-page .zim-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body:not(.lockscreen) .zim-modules-upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body:not(.lockscreen) .zim-modules-table > thead > tr > th {
  background: #f9fafb !important;
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--crm-line) !important;
  padding: 12px 16px !important;
}

body:not(.lockscreen) .zim-modules-table > tbody > tr > td {
  padding: 16px !important;
  vertical-align: top !important;
}

body:not(.lockscreen) .zim-modules-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--crm-ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

body:not(.lockscreen) .zim-modules-desc {
  font-size: 13px;
  color: #475467;
  line-height: 1.5;
  margin-bottom: 8px;
}

body:not(.lockscreen) .zim-modules-index {
  color: #98a2b3;
  font-weight: 500;
  width: 48px;
}

body:not(.lockscreen) .zim-row-actions--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

body:not(.lockscreen) .zim-row-actions--inline .zim-action {
  width: auto;
  min-width: 96px;
}

body:not(.lockscreen) .zim-inline-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Kill legacy green table header anywhere */
body:not(.lockscreen) table tr.success > th,
body:not(.lockscreen) table > thead > tr.success > th,
body:not(.lockscreen) .table > thead > tr.success > th {
  background: #f9fafb !important;
  color: #344054 !important;
  border-color: var(--crm-line) !important;
}

/* ─── Design system craft pass ─── */
body:not(.lockscreen) .zim-dash-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--crm-muted);
}

body:not(.lockscreen) .zim-dash-welcome {
  letter-spacing: -0.03em !important;
}

body:not(.lockscreen) .zim-dashboard .tw-grid > div.tw-bg-white {
  box-shadow: var(--crm-shadow) !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
}

body:not(.lockscreen) .zim-dashboard .tw-inline-flex[class*="tw-bg-sky"],
body:not(.lockscreen) .zim-dashboard .tw-inline-flex[class*="tw-bg-green"],
body:not(.lockscreen) .zim-dashboard .tw-inline-flex[class*="tw-bg-yellow"],
body:not(.lockscreen) .zim-dashboard .tw-inline-flex[class*="tw-bg-red"],
body:not(.lockscreen) .zim-dashboard .tw-inline-flex[class*="tw-bg-orange"],
body:not(.lockscreen) .zim-dashboard .bg-sky-100,
body:not(.lockscreen) .zim-dashboard [class*="bg-sky"] {
  background: var(--crm-primary-soft) !important;
  color: var(--crm-primary) !important;
}

body:not(.lockscreen) .zim-dashboard .tw-font-mono {
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Secondary KPI strip — quieter density */
body:not(.lockscreen) .zim-dashboard > .tw-relative {
  margin-top: 8px;
}

body:not(.lockscreen) .zim-dashboard > .tw-relative > .tw-absolute {
  display: none !important;
}

body:not(.lockscreen) .zim-dashboard > .tw-relative .tw-grid > div.tw-bg-white {
  background: #fff !important;
}

body:not(.lockscreen) .zim-dashboard > .tw-relative .tw-text-xl {
  font-size: 18px !important;
}

/* Chart cards — breathing room so axis labels are not clipped */
body:not(.lockscreen) .zim-dashboard canvas,
body:not(.lockscreen) .zim-dashboard .chartjs-render-monitor {
  max-width: 100%;
}

body:not(.lockscreen) .zim-dashboard .tw-p-4.sm\:tw-p-5 {
  padding: 18px 20px 22px !important;
}

body:not(.lockscreen) .zim-dashboard .chart-legend,
body:not(.lockscreen) .zim-dashboard [id*="chart"] {
  padding-bottom: 8px;
}

/* Empty table states */
body:not(.lockscreen) table.dataTable td.dataTables_empty,
body:not(.lockscreen) .dataTables_empty {
  padding: 48px 24px !important;
  color: var(--crm-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: #fcfcfd !important;
}

/* Quiet scrollbars */
body:not(.lockscreen) * {
  scrollbar-width: thin;
  scrollbar-color: #d0d5dd transparent;
}

body:not(.lockscreen) *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body:not(.lockscreen) *::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 999px;
}

body:not(.lockscreen) *::-webkit-scrollbar-track {
  background: transparent;
}

body:not(.lockscreen) .table-responsive {
  scrollbar-width: thin;
}

/* Stat cards — tighter, more Figma-like */
.zim-stat {
  padding: 16px 18px !important;
}

.zim-stat__value {
  font-size: 24px !important;
  margin-top: 4px;
}

.zim-stat-row {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* Content canvas breathing room */
body:not(.lockscreen) .content {
  padding: 20px 24px 32px !important;
}

body:not(.lockscreen) .zim-page-header {
  margin-bottom: 18px;
}

body:not(.lockscreen) .zim-page-header h1 {
  letter-spacing: -0.03em;
}

/* Collapsible apps section in sidebar */
.zim-nav-apps {
  margin-top: 6px;
  border-top: 1px solid var(--crm-line);
  padding-top: 8px;
}

.zim-nav-apps__toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #98a2b3 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.zim-nav-apps__toggle:hover {
  background: #f9fafb !important;
  color: #667085 !important;
}

.zim-nav-apps__body.is-collapsed {
  display: none !important;
}

.zim-nav-apps__body .zim-nav-link,
.zim-nav-apps__body .zim-nav-group > .zim-nav-link {
  color: #667085 !important;
  font-size: 13px !important;
}

/* Filter button on dashboard */
body:not(.lockscreen) #dashboard_date_filter {
  border: 1px solid #d0d5dd !important;
  height: 36px;
  box-shadow: none !important;
}

body:not(.lockscreen) #dashboard_date_filter:hover {
  border-color: #98a2b3 !important;
  background: #f9fafb !important;
}

/* ============================================================
   PHASE 2 — Global ZIM design system
   Tokens, buttons, inputs, states, modal/drawer, legacy overrides
   ============================================================ */

/* Typography hierarchy */
.zim-page-header__title,
body:not(.lockscreen) .zim-page-header h1 {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  color: var(--zim-text) !important;
  line-height: 1.25;
  margin: 0 !important;
}

.zim-page-header__subtitle,
body:not(.lockscreen) .zim-page-header p {
  margin: 6px 0 0;
  font-size: var(--crm-text-sm);
  color: var(--zim-text-secondary);
  line-height: 1.45;
}

.zim-stat__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zim-stat__icon {
  display: inline-flex;
  color: var(--zim-text-muted);
  font-size: 14px;
}

.zim-stat__context {
  display: block;
  margin-top: 6px;
  font-size: var(--crm-text-xs);
  color: var(--zim-text-secondary);
}

.zim-stat--interactive {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zim-stat--interactive:hover {
  border-color: var(--zim-border-strong);
  box-shadow: var(--zim-shadow-sm);
}

/* Button system */
.zim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--zim-control-h);
  padding: 8px 14px;
  border-radius: var(--crm-control-radius);
  border: 1px solid transparent;
  font-family: var(--zim-font);
  font-size: var(--crm-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zim-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--zim-focus-ring);
}

.zim-btn:disabled,
.zim-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.zim-btn--primary {
  background: var(--zim-primary);
  border-color: var(--zim-primary);
  color: #fff !important;
}

.zim-btn--primary:hover {
  background: var(--zim-primary-hover);
  border-color: var(--zim-primary-hover);
  color: #fff !important;
}

.zim-btn--secondary {
  background: var(--zim-surface);
  border-color: var(--zim-border-strong);
  color: var(--zim-text) !important;
}

.zim-btn--secondary:hover {
  background: var(--zim-surface-soft);
  border-color: #98a2b3;
}

.zim-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--zim-text-secondary) !important;
}

.zim-btn--ghost:hover {
  background: var(--zim-surface-soft);
  color: var(--zim-text) !important;
}

.zim-btn--danger {
  background: var(--zim-danger);
  border-color: var(--zim-danger);
  color: #fff !important;
}

.zim-btn--danger:hover {
  background: #912018;
  border-color: #912018;
  color: #fff !important;
}

.zim-btn--icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--crm-control-radius);
  background: var(--zim-surface);
  border-color: var(--zim-border-strong);
  color: var(--zim-text-secondary) !important;
}

.zim-btn--icon:hover {
  background: var(--zim-surface-soft);
  color: var(--zim-text) !important;
}

.zim-btn--sm {
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--crm-text-xs);
}

/* Kill indigo / purple gradient CTAs — solid ZIM primary */
body:not(.lockscreen) [class*="tw-from-indigo"],
body:not(.lockscreen) [class*="tw-to-indigo"],
body:not(.lockscreen) a[class*="tw-from-indigo"],
body:not(.lockscreen) button[class*="tw-from-indigo"],
body:not(.lockscreen) .tw-dw-btn.tw-bg-gradient-to-r[class*="indigo"],
body:not(.lockscreen) .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600,
body:not(.lockscreen) .tw-bg-gradient-to-r.tw-from-indigo-600 {
  background: var(--zim-primary) !important;
  background-image: none !important;
  border: 1px solid var(--zim-primary) !important;
  color: #fff !important;
  border-radius: var(--crm-control-radius) !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
}

body:not(.lockscreen) [class*="tw-from-indigo"]:hover,
body:not(.lockscreen) a[class*="tw-from-indigo"]:hover,
body:not(.lockscreen) button[class*="tw-from-indigo"]:hover,
body:not(.lockscreen) .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover {
  background: var(--zim-primary-hover) !important;
  background-image: none !important;
  border-color: var(--zim-primary-hover) !important;
  color: #fff !important;
}

/* POS indigo CTAs → solid primary (keep clip-text headings readable) */
body:not(.lockscreen) .tw-bg-clip-text[class*="tw-from-indigo"] {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--zim-primary) !important;
  color: var(--zim-primary) !important;
}

/* Reduce pill-shaped action buttons (badges/tags keep pills) */
body:not(.lockscreen) .tw-dw-btn.tw-rounded-full,
body:not(.lockscreen) a.tw-dw-btn.tw-rounded-full,
body:not(.lockscreen) button.tw-dw-btn.tw-rounded-full,
body:not(.lockscreen) .box-tools .tw-rounded-full,
body:not(.lockscreen) .content-header .tw-rounded-full,
body:not(.lockscreen) .zim-page-header__actions .tw-rounded-full {
  border-radius: var(--crm-control-radius) !important;
}

/* DaisyUI button alignment with ZIM */
body:not(.lockscreen) .tw-dw-btn {
  border-radius: var(--crm-control-radius) !important;
  font-weight: 600 !important;
  min-height: 36px;
  box-shadow: none !important;
}

body:not(.lockscreen) .tw-dw-btn-primary:not(.tw-dw-btn-outline):not(.tw-dw-btn-ghost) {
  background: var(--zim-primary) !important;
  border-color: var(--zim-primary) !important;
  color: #fff !important;
}

body:not(.lockscreen) .tw-dw-btn-primary:not(.tw-dw-btn-outline):not(.tw-dw-btn-ghost):hover {
  background: var(--zim-primary-hover) !important;
  border-color: var(--zim-primary-hover) !important;
}

body:not(.lockscreen) .btn-primary:not(.btn-outline),
body:not(.lockscreen) .btn.btn-primary {
  background: var(--zim-primary) !important;
  border-color: var(--zim-primary) !important;
  color: #fff !important;
  border-radius: var(--crm-control-radius) !important;
  box-shadow: none !important;
}

body:not(.lockscreen) .btn-default,
body:not(.lockscreen) .btn-secondary {
  background: var(--zim-surface) !important;
  border-color: var(--zim-border-strong) !important;
  color: var(--zim-text) !important;
  border-radius: var(--crm-control-radius) !important;
  box-shadow: none !important;
}

body:not(.lockscreen) .btn-danger {
  background: var(--zim-danger) !important;
  border-color: var(--zim-danger) !important;
  border-radius: var(--crm-control-radius) !important;
}

/* Input / select / textarea system */
body:not(.lockscreen) .form-control,
body:not(.lockscreen) input.form-control,
body:not(.lockscreen) select.form-control,
body:not(.lockscreen) textarea.form-control,
body:not(.lockscreen) .tw-dw-input,
body:not(.lockscreen) .tw-dw-select,
body:not(.lockscreen) .tw-dw-textarea,
body:not(.lockscreen) .select2-container--default .select2-selection--single,
body:not(.lockscreen) .select2-container--default .select2-selection--multiple,
body:not(.lockscreen) input[type="text"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="number"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="email"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="password"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="search"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="date"]:not([class*="tw-"]),
body:not(.lockscreen) input[type="tel"]:not([class*="tw-"]) {
  min-height: var(--zim-control-h);
  height: auto;
  padding: 8px 12px;
  border: 1px solid var(--zim-border-strong) !important;
  border-radius: var(--crm-control-radius) !important;
  background: var(--zim-surface) !important;
  color: var(--zim-text) !important;
  font-size: var(--crm-text-sm) !important;
  font-family: var(--zim-font);
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(.lockscreen) textarea.form-control,
body:not(.lockscreen) .tw-dw-textarea {
  min-height: 88px;
}

body:not(.lockscreen) .form-control::placeholder,
body:not(.lockscreen) .tw-dw-input::placeholder {
  color: var(--zim-text-muted) !important;
  opacity: 1;
}

body:not(.lockscreen) .form-control:focus,
body:not(.lockscreen) .tw-dw-input:focus,
body:not(.lockscreen) .tw-dw-select:focus,
body:not(.lockscreen) .tw-dw-textarea:focus,
body:not(.lockscreen) .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.lockscreen) .select2-container--default.select2-container--focus .select2-selection--multiple,
body:not(.lockscreen) .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--zim-primary) !important;
  box-shadow: 0 0 0 3px var(--zim-focus-ring) !important;
  outline: none !important;
}

body:not(.lockscreen) .form-control:disabled,
body:not(.lockscreen) .form-control[readonly],
body:not(.lockscreen) .tw-dw-input:disabled {
  background: var(--zim-surface-soft) !important;
  color: var(--zim-text-secondary) !important;
  cursor: not-allowed;
}

body:not(.lockscreen) .has-error .form-control,
body:not(.lockscreen) .form-group.has-error .form-control,
body:not(.lockscreen) .is-invalid,
body:not(.lockscreen) .zim-field--error .form-control {
  border-color: var(--zim-danger) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}

body:not(.lockscreen) .has-success .form-control,
body:not(.lockscreen) .zim-field--success .form-control {
  border-color: var(--zim-success) !important;
}

body:not(.lockscreen) .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}

body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--zim-text) !important;
  line-height: 22px;
  padding-left: 0;
}

body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
}

/* Form field recipe */
.zim-field {
  margin-bottom: 16px;
}

.zim-label,
body:not(.lockscreen) .form-group > label,
body:not(.lockscreen) label.control-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--crm-text-sm);
  font-weight: 500;
  color: var(--zim-text);
  line-height: 1.3;
}

.zim-label .required,
.zim-label .tw-text-red-500,
body:not(.lockscreen) .form-group > label .text-danger,
body:not(.lockscreen) label .required {
  color: var(--zim-danger);
  margin-left: 2px;
}

.zim-help,
.zim-field__help {
  display: block;
  margin: 0 0 6px;
  font-size: var(--crm-text-xs);
  color: var(--zim-text-secondary);
  line-height: 1.4;
}

.zim-field__error,
body:not(.lockscreen) .help-block,
body:not(.lockscreen) .invalid-feedback,
body:not(.lockscreen) .text-danger.help-block {
  display: block;
  margin-top: 6px;
  font-size: var(--crm-text-xs);
  color: var(--zim-danger);
}

/* Widget / card surface */
body:not(.lockscreen) .box,
body:not(.lockscreen) [class*="tw-ring-gray-200"].tw-bg-white,
body:not(.lockscreen) .tw-mb-4.tw-bg-white.tw-shadow-sm.tw-rounded-xl {
  background: var(--zim-surface) !important;
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-md) !important;
  box-shadow: var(--zim-shadow-sm) !important;
}

body:not(.lockscreen) .box-header {
  border-bottom: 1px solid var(--zim-border) !important;
  padding: 14px 16px !important;
  background: transparent !important;
}

body:not(.lockscreen) .box-title,
body:not(.lockscreen) .box-header .box-title {
  font-size: var(--crm-text-base) !important;
  font-weight: 600 !important;
  color: var(--zim-text) !important;
  letter-spacing: -0.01em;
}

body:not(.lockscreen) .box-body {
  padding: 16px 18px !important;
}

/* Empty state */
.zim-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  color: var(--zim-text-secondary);
}

.zim-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--zim-surface-soft);
  border: 1px solid var(--zim-border);
  color: var(--zim-text-muted);
}

.zim-empty__title {
  margin: 0;
  font-size: var(--crm-text-base);
  font-weight: 600;
  color: var(--zim-text);
}

.zim-empty__desc {
  margin: 6px 0 0;
  max-width: 360px;
  font-size: var(--crm-text-sm);
  color: var(--zim-text-secondary);
  line-height: 1.45;
}

.zim-empty__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* DataTables empty */
.zim-dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
}

.zim-dt-empty__title {
  font-size: var(--crm-text-sm);
  font-weight: 600;
  color: var(--zim-text);
}

.zim-dt-empty__desc {
  font-size: var(--crm-text-xs);
  color: var(--zim-text-secondary);
}

body:not(.lockscreen) table.dataTable td.dataTables_empty,
body:not(.lockscreen) .dataTables_empty {
  padding: 40px 20px !important;
  background: var(--zim-surface-soft) !important;
}

/* Skeleton system */
@keyframes zim-skeleton-pulse {
  0% { opacity: 0.55; }
  50% { opacity: 1; }
  100% { opacity: 0.55; }
}

.zim-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.zim-skeleton__line,
.zim-skeleton__block {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f2f4f7 0%, #eaecf0 50%, #f2f4f7 100%);
  background-size: 200% 100%;
  animation: zim-skeleton-pulse 1.4s ease-in-out infinite;
}

.zim-skeleton__line--xs { width: 28%; height: 8px; }
.zim-skeleton__line--sm { width: 40%; }
.zim-skeleton__line--md { width: 55%; }
.zim-skeleton__line--lg { width: 72%; height: 18px; }
.zim-skeleton__line--full { width: 100%; }

.zim-skeleton__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.6fr;
  gap: 12px;
}

.zim-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.zim-skeleton__block {
  height: 72px;
  border-radius: 10px;
}

.zim-skeleton--kpi {
  padding: 16px 18px;
  background: var(--zim-surface);
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-md);
}

.zim-skeleton--card,
.zim-skeleton--detail {
  padding: 20px;
  background: var(--zim-surface);
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-md);
}

.zim-skeleton--table {
  padding: 12px 0;
}

.zim-skeleton--page {
  padding: 8px 0;
}

.zim-detail-body .zim-skeleton--detail {
  border: 0;
  padding: 8px 0;
  background: transparent;
}

/* Error / retry */
.zim-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px;
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-md);
  background: var(--zim-surface);
}

.zim-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--zim-danger-soft);
  color: var(--zim-danger);
}

.zim-error__title {
  margin: 0;
  font-size: var(--crm-text-base);
  font-weight: 600;
  color: var(--zim-text);
}

.zim-error__desc {
  margin: 6px 0 0;
  max-width: 360px;
  font-size: var(--crm-text-sm);
  color: var(--zim-text-secondary);
  line-height: 1.45;
}

.zim-error__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Modal visual polish (AJAX .view_modal preserved) */
body:not(.lockscreen) .modal-content {
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-md) !important;
  box-shadow: var(--zim-shadow-md) !important;
  overflow: hidden;
}

body:not(.lockscreen) .modal-header {
  border-bottom: 1px solid var(--zim-border) !important;
  background: var(--zim-surface) !important;
  padding: 16px 20px !important;
}

body:not(.lockscreen) .modal-title {
  font-size: var(--crm-text-lg) !important;
  font-weight: 600 !important;
  color: var(--zim-text) !important;
}

body:not(.lockscreen) .modal-header .close {
  opacity: 1;
  width: 32px;
  height: 32px;
  margin-top: -4px;
  border-radius: var(--crm-control-radius);
  border: 1px solid transparent;
  font-weight: 400;
  color: var(--zim-text-secondary) !important;
}

body:not(.lockscreen) .modal-header .close:hover {
  background: var(--zim-surface-soft);
  border-color: var(--zim-border);
  color: var(--zim-text) !important;
}

body:not(.lockscreen) .modal-body {
  padding: 18px 20px !important;
  background: var(--zim-surface);
}

body:not(.lockscreen) .modal-footer {
  border-top: 1px solid var(--zim-border) !important;
  background: var(--zim-surface-soft) !important;
  padding: 12px 16px !important;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body:not(.lockscreen) .modal-footer .btn,
body:not(.lockscreen) .modal-footer .tw-dw-btn {
  min-height: 36px;
  border-radius: var(--crm-control-radius) !important;
}

/* Drawer refinements */
body:not(.lockscreen) .modal.view_modal.zim-detail-drawer .modal-content,
body:not(.lockscreen) .zim-detail-content {
  border-left: 1px solid var(--zim-border) !important;
  box-shadow: -8px 0 28px rgba(16, 24, 40, 0.08) !important;
}

body:not(.lockscreen) .zim-detail-header .close {
  opacity: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--crm-control-radius);
  border: 1px solid var(--zim-border);
  background: var(--zim-surface);
  color: var(--zim-text-secondary) !important;
  margin: 0;
  padding: 0;
  line-height: 30px;
}

body:not(.lockscreen) .zim-detail-header .close:hover {
  background: var(--zim-surface-soft);
  color: var(--zim-text) !important;
}

body:not(.lockscreen) .zim-detail-back {
  color: var(--zim-primary) !important;
  border-radius: var(--crm-control-radius);
  padding: 4px 8px;
}

body:not(.lockscreen) .zim-detail-back:hover {
  background: var(--zim-primary-soft);
}

/* DaisyUI badge / tabs quieter */
body:not(.lockscreen) .tw-dw-badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  border: 0 !important;
}

body:not(.lockscreen) .tw-dw-tabs .tw-dw-tab {
  border-radius: var(--crm-control-radius) var(--crm-control-radius) 0 0 !important;
}

body:not(.lockscreen) .tw-dw-dropdown-content {
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-sm) !important;
  box-shadow: var(--zim-shadow-md) !important;
  background: var(--zim-surface) !important;
}

/* Checkbox / radio alignment */
body:not(.lockscreen) input[type="checkbox"],
body:not(.lockscreen) input[type="radio"] {
  accent-color: var(--zim-primary);
  width: 15px;
  height: 15px;
}

/* File input */
body:not(.lockscreen) input[type="file"].form-control {
  padding: 6px 10px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .zim-skeleton__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   PHASE 3 — Brand continuity + application shell
   Login bridge · Sidebar · Header · Shell spacing
   ============================================================ */

/* App shell canvas */
body:not(.lockscreen) > .tw-flex.thetop,
body:not(.lockscreen) .thetop {
  min-height: 100vh;
  background: var(--zim-bg);
}

body:not(.lockscreen) main.tw-flex.tw-flex-col.tw-flex-1 {
  background: var(--zim-bg) !important;
  min-width: 0;
}

body:not(.lockscreen) #scrollable-container {
  background: var(--zim-bg) !important;
}

body:not(.lockscreen) .content {
  padding: 18px 22px 28px !important;
}

body:not(.lockscreen) .main-footer,
body:not(.lockscreen) footer {
  border-top: 1px solid var(--zim-border) !important;
  background: transparent !important;
  color: var(--zim-text-muted) !important;
  font-size: 12px;
  padding: 12px 20px !important;
  box-shadow: none !important;
}

/* Header shell */
body:not(.lockscreen) .zim-app-header,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--zim-border) !important;
  min-height: 60px;
  box-shadow: none !important;
}

body:not(.lockscreen) .zim-app-header__inner,
body:not(.lockscreen) .zim-app-header > .tw-px-5,
body:not(.lockscreen) .no-print.tw-border-b > .tw-px-5 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body:not(.lockscreen) .zim-app-header__row,
body:not(.lockscreen) .no-print.tw-border-b .tw-flex.tw-items-start {
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px;
}

/* Header icon / secondary controls */
body:not(.lockscreen) .zim-app-header button,
body:not(.lockscreen) .zim-app-header summary,
body:not(.lockscreen) .zim-app-header a[class*="tw-bg-"],
body:not(.lockscreen) .zim-app-header a[class*="tw-inline-flex"],
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-"],
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-inline-flex"] {
  background: #fff !important;
  background-image: none !important;
  color: #344054 !important;
  border: 1px solid var(--zim-border-strong) !important;
  border-radius: var(--crm-control-radius) !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 36px;
  padding: 6px 10px !important;
}

body:not(.lockscreen) .zim-app-header button:hover,
body:not(.lockscreen) .zim-app-header summary:hover,
body:not(.lockscreen) .zim-app-header a[class*="tw-bg-"]:hover,
body:not(.lockscreen) .zim-app-header a[class*="tw-inline-flex"]:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-bg-"]:hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[class*="tw-inline-flex"]:hover {
  background: var(--zim-surface-soft) !important;
  color: var(--zim-text) !important;
  border-color: #98a2b3 !important;
}

body:not(.lockscreen) .zim-app-header button svg,
body:not(.lockscreen) .zim-app-header summary svg,
body:not(.lockscreen) .zim-app-header a svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r button svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r summary svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a svg,
body:not(.lockscreen) .zim-app-header .tw-text-white,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r .tw-text-white {
  color: #344054 !important;
  stroke: currentColor !important;
}

/* POS — primary CTA only */
body:not(.lockscreen) .zim-app-header a[href*="pos"]:not([href*="repair"]):not(.btn-success),
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]):not(.btn-success) {
  background: var(--zim-primary) !important;
  border-color: var(--zim-primary) !important;
  color: #fff !important;
}

body:not(.lockscreen) .zim-app-header a[href*="pos"]:not([href*="repair"]):not(.btn-success):hover,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]):not(.btn-success):hover {
  background: var(--zim-primary-hover) !important;
  border-color: var(--zim-primary-hover) !important;
  color: #fff !important;
}

body:not(.lockscreen) .zim-app-header a[href*="pos"]:not([href*="repair"]) svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="pos"]:not([href*="repair"]) svg {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Repair stays success green */
body:not(.lockscreen) .zim-app-header a.btn-success,
body:not(.lockscreen) .zim-app-header a[href*="repair"],
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a.btn-success,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="repair"] {
  background: #16a34a !important;
  border: 1px solid #16a34a !important;
  color: #fff !important;
}

body:not(.lockscreen) .zim-app-header a[href*="repair"] svg,
body:not(.lockscreen) .no-print.tw-border-b.tw-bg-gradient-to-r a[href*="repair"] svg {
  color: #fff !important;
}

/* Profile control */
body:not(.lockscreen) .zim-app-header details:last-of-type > summary,
body:not(.lockscreen) .no-print.tw-border-b details:last-of-type > summary {
  gap: 8px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-weight: 600 !important;
  color: var(--zim-brand-navy) !important;
}

body:not(.lockscreen) .zim-app-header details ul,
body:not(.lockscreen) .no-print.tw-border-b details ul {
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-sm) !important;
  box-shadow: var(--zim-shadow-md) !important;
  overflow: hidden;
}

/* Notifications */
body:not(.lockscreen) .notifications-menu > a,
body:not(.lockscreen) .notifications-menu .dropdown-toggle {
  position: relative !important;
  width: 36px;
  height: 36px;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body:not(.lockscreen) .notifications-menu .notifications_count,
body:not(.lockscreen) .notifications-menu .label {
  position: absolute !important;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: var(--zim-danger) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  border: 2px solid #fff;
  text-align: center;
}

body:not(.lockscreen) .notifications-menu .dropdown-menu {
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-md) !important;
  box-shadow: var(--zim-shadow-md) !important;
  padding: 8px !important;
  max-height: min(70vh, 480px);
}

body:not(.lockscreen) .notifications-menu .dropdown-menu .menu > li > a {
  border-radius: 8px;
  padding: 10px 12px !important;
  color: var(--zim-text-secondary) !important;
}

body:not(.lockscreen) .notifications-menu .dropdown-menu .menu > li > a:hover {
  background: var(--zim-surface-soft) !important;
  color: var(--zim-text) !important;
}

/* Apps & integrations group */
.zim-nav-apps {
  margin-top: 10px;
  border-top: 1px solid var(--zim-border);
  padding-top: 10px;
}

.zim-nav-apps__toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 11px !important;
  margin: 0 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--zim-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.zim-nav-apps__toggle:hover {
  background: #f2f4f7 !important;
  color: var(--zim-text-secondary) !important;
}

.zim-nav-apps__toggle.is-open {
  color: var(--zim-text-secondary) !important;
  background: var(--zim-surface-soft) !important;
}

.zim-nav-apps__chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.zim-nav-apps__toggle.is-open .zim-nav-apps__chevron {
  transform: rotate(180deg);
}

.zim-nav-apps__body {
  padding: 2px 0 4px 2px;
}

.zim-nav-apps__body.is-collapsed {
  display: none !important;
}

.zim-nav-apps__body .zim-nav-link,
.zim-nav-apps__body .zim-nav-group > .zim-nav-link {
  color: #667085 !important;
  font-size: 13px !important;
  padding-left: 12px !important;
}

.zim-nav-header {
  padding: 14px 11px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zim-text-muted);
}

/* Quieter child active */
.zim-nav-child--active {
  background: var(--zim-primary-soft) !important;
  color: var(--zim-primary) !important;
  font-weight: 600 !important;
}

/* Sidebar scroll */
aside.side-bar {
  display: flex !important;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

aside.side-bar #side-bar,
aside.side-bar .zim-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Responsive shell */
@media (max-width: 1024px) {
  body:not(.lockscreen) .content {
    padding: 16px 16px 24px !important;
  }

  body:not(.lockscreen) .zim-app-header__inner,
  body:not(.lockscreen) .no-print.tw-border-b > .tw-px-5 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 767px) {
  body:not(.lockscreen) .content {
    padding: 12px 12px 20px !important;
  }

  body:not(.lockscreen) .zim-app-header .tw-flex.tw-flex-wrap {
    gap: 8px !important;
  }

  .zim-brand__biz {
    max-width: 120px;
  }
}

@media (min-width: 1280px) {
  body:not(.lockscreen) .content {
    padding: 20px 28px 32px !important;
  }
}

/* ============================================================
   PHASE 4 — Dashboard hierarchy
   ============================================================ */

body:not(.lockscreen) .zim-dashboard {
  max-width: none;
  width: 100%;
  padding-bottom: 0 !important;
}

/* Match Users page header → content rhythm */
body:not(.lockscreen) .zim-dashboard > .zim-page-header {
  margin-bottom: 18px;
}

body:not(.lockscreen) .zim-dashboard .zim-page-header__actions {
  align-items: center;
  gap: 10px;
}

body:not(.lockscreen) .zim-dashboard .zim-page-header__actions .select2-container {
  min-width: 180px;
  max-width: 240px;
}

body:not(.lockscreen) .zim-dashboard #dashboard_date_filter {
  border: 1px solid var(--zim-border-strong) !important;
  background: var(--zim-surface) !important;
  color: var(--zim-text) !important;
  border-radius: var(--crm-control-radius) !important;
  min-height: 38px;
  box-shadow: none !important;
  padding: 8px 12px !important;
}

body:not(.lockscreen) .zim-dashboard #dashboard_date_filter:hover {
  background: var(--zim-surface-soft) !important;
  border-color: #98a2b3 !important;
}

.zim-dash-welcome-muted {
  margin: 0 0 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--zim-text-secondary) !important;
  font-size: var(--crm-text-sm);
}

body:not(.lockscreen) .zim-dashboard > .tw-px-5,
body:not(.lockscreen) .zim-dashboard > .zim-dash-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}

/* Primary / secondary KPI grids — same gap as Users zim-stat-row */
.zim-dash-kpi {
  display: grid;
  gap: 12px;
}

.zim-dash-kpi--primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  margin-bottom: 16px;
}

.zim-dash-kpi--secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.zim-stat-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zim-stat-row .small-box {
  margin-bottom: 0 !important;
}

/* Superadmin home — Users-like spacing */
body:not(.lockscreen) .zim-superadmin-home > .zim-page-header {
  margin-bottom: 18px;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  box-shadow: none;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn {
  border: 1px solid var(--zim-border-strong) !important;
  background: var(--zim-surface) !important;
  color: var(--zim-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn:first-child {
  border-radius: var(--crm-control-radius) 0 0 var(--crm-control-radius) !important;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn:last-child {
  border-radius: 0 var(--crm-control-radius) var(--crm-control-radius) 0 !important;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn.active,
body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn:hover {
  background: var(--zim-primary-soft) !important;
  border-color: var(--zim-primary) !important;
  color: var(--zim-primary) !important;
}

body:not(.lockscreen) .zim-superadmin-home .zim-date-filter-group > .btn + .btn {
  margin-left: -1px !important;
}

/* Superadmin sub-nav aligns with .content padding */
body:not(.lockscreen) #scrollable-container > section.no-print nav.navbar-default {
  margin: 18px 22px 0 !important;
}

@media (min-width: 1280px) {
  body:not(.lockscreen) #scrollable-container > section.no-print nav.navbar-default {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }
}

@media (max-width: 1024px) {
  body:not(.lockscreen) #scrollable-container > section.no-print nav.navbar-default {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

@media (max-width: 767px) {
  body:not(.lockscreen) #scrollable-container > section.no-print nav.navbar-default {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .zim-stat-row--3 {
    grid-template-columns: 1fr;
  }
}

.zim-dash-section-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zim-text-muted);
}

.zim-dashboard .zim-stat {
  margin: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zim-dashboard .zim-stat:hover {
  border-color: var(--zim-border-strong);
  box-shadow: var(--zim-shadow-sm);
}

.zim-dashboard .zim-stat--primary {
  padding: 18px 18px 16px !important;
}

.zim-dashboard .zim-stat--primary .zim-stat__value {
  font-size: 26px !important;
  letter-spacing: -0.03em;
  margin-top: 8px;
  color: var(--zim-text);
  font-variant-numeric: tabular-nums;
}

.zim-dashboard .zim-stat--secondary {
  padding: 14px 14px 12px !important;
  background: var(--zim-surface-soft);
  box-shadow: none !important;
}

.zim-dashboard .zim-stat--secondary .zim-stat__value {
  font-size: 18px !important;
  margin-top: 6px;
  color: var(--zim-text);
  font-variant-numeric: tabular-nums;
}

.zim-dashboard .zim-stat--secondary .zim-stat__label {
  font-size: 12px;
}

.zim-stat__icon--soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--zim-primary-soft);
  color: var(--zim-primary);
  flex-shrink: 0;
}

.zim-stat--secondary .zim-stat__icon--soft {
  width: 28px;
  height: 28px;
  background: #f2f4f7;
  color: var(--zim-text-secondary);
}

.zim-kpi-skeleton {
  display: block;
  margin-top: 10px;
}

.zim-kpi-skeleton .zim-skeleton__line--lg {
  width: 70%;
  height: 22px;
}

.zim-stat.is-loading .zim-stat__value {
  min-height: 28px;
}

.zim-dash-kpi-error {
  max-width: 420px;
}

/* Panels / hero */
.zim-dash-panel {
  background: var(--zim-surface);
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-md);
  box-shadow: var(--zim-shadow-sm);
  padding: 18px 20px 20px;
}

.zim-dash-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.zim-dash-panel__title {
  margin: 0;
  font-size: var(--crm-text-lg);
  font-weight: 600;
  color: var(--zim-text);
  letter-spacing: -0.01em;
}

.zim-dash-panel__desc {
  margin: 4px 0 0;
  font-size: var(--crm-text-sm);
  color: var(--zim-text-secondary);
}

.zim-dash-hero {
  padding: 20px 22px 24px;
}

.zim-dash-hero__chart {
  min-height: 320px;
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-sm);
  background: var(--zim-surface-soft);
  padding: 12px 8px 8px;
}

.zim-dash-hero__chart canvas,
.zim-dash-panel--fy canvas {
  max-width: 100% !important;
}

.zim-dash-panel--fy .zim-dash-panel__body {
  min-height: 220px;
  border: 1px solid var(--zim-border);
  border-radius: var(--zim-radius-sm);
  background: var(--zim-surface-soft);
  padding: 10px 8px;
}

.zim-dash-grid--secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Ops panels — quiet chrome */
.zim-dash-ops .zim-dash-panel {
  box-shadow: var(--zim-shadow-sm) !important;
  border: 1px solid var(--zim-border) !important;
  border-radius: var(--zim-radius-md) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

.zim-dash-ops .zim-dash-panel:hover {
  transform: none !important;
  box-shadow: var(--zim-shadow-sm) !important;
}

.zim-dash-ops__priority {
  border-color: #fecdca !important;
  background: linear-gradient(180deg, #fffaf9 0%, #fff 48%) !important;
}

.zim-dash-ops .zim-dash-panel h3 {
  font-size: var(--crm-text-base) !important;
  font-weight: 600 !important;
  color: var(--zim-text) !important;
}

/* Kill leftover dashboard hero gradients if any remain */
body:not(.lockscreen) .zim-dashboard .tw-bg-gradient-to-r,
body:not(.lockscreen) .zim-dashboard [class*="tw-from-primary"] {
  background: transparent !important;
  background-image: none !important;
}

@media (max-width: 1199px) {
  .zim-dash-kpi--primary,
  .zim-dash-kpi--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zim-dash-hero__chart {
    min-height: 260px;
  }
}

@media (max-width: 767px) {
  .zim-dash-kpi--primary,
  .zim-dash-kpi--secondary {
    grid-template-columns: 1fr;
  }

  .zim-dashboard .zim-stat--primary .zim-stat__value {
    font-size: 22px !important;
  }

  .zim-dash-hero__chart {
    min-height: 220px;
  }

  body:not(.lockscreen) .zim-dashboard .zim-page-header__actions {
    width: 100%;
  }

  body:not(.lockscreen) .zim-dashboard .zim-page-header__actions .select2-container,
  body:not(.lockscreen) .zim-dashboard #dashboard_date_filter {
    width: 100% !important;
    max-width: none;
  }
}

/* =========================================================
   Phase 5A — Core CRUD module surfaces
   ========================================================= */

.zim-form-actions {
  margin-top: 8px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.zim-profile {
  text-align: center;
}

.zim-profile__avatar,
.zim-profile .profile-user-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--zim-border);
  margin: 8px auto 12px;
  box-shadow: none;
}

.zim-profile__name,
.zim-profile .profile-username {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--zim-text);
}

.zim-profile__meta {
  margin-bottom: 16px;
  font-size: 13px;
}

.zim-profile__list.list-group,
.zim-profile .list-group {
  margin-bottom: 0;
  text-align: left;
}

.zim-profile__list .list-group-item,
.zim-profile .list-group-item {
  border-left: 0;
  border-right: 0;
  border-color: var(--zim-border);
  padding: 10px 4px;
  background: transparent;
  font-size: 13px;
}

.zim-profile__list .list-group-item:first-child,
.zim-profile .list-group-item:first-child {
  border-top: 0;
}

.zim-profile__list .list-group-item:last-child,
.zim-profile .list-group-item:last-child {
  border-bottom: 0;
}

/* Nested AdminLTE tabs inside ZIM sections */
body:not(.lockscreen) .zim-section .nav-tabs-custom,
body:not(.lockscreen) .zim-widget .nav-tabs-custom {
  margin-bottom: 0;
  box-shadow: none;
  background: transparent;
}

body:not(.lockscreen) .zim-section .nav-tabs-custom > .nav-tabs,
body:not(.lockscreen) .zim-widget .nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--zim-border);
}

body:not(.lockscreen) .zim-section .nav-tabs-custom > .tab-content,
body:not(.lockscreen) .zim-widget .nav-tabs-custom > .tab-content {
  padding: 16px 0 0;
  background: transparent;
}

/* Compact multi-submit rows on product forms */
body:not(.lockscreen) .btn-group .submit_product_form {
  margin: 4px;
}

/* Filters: keep compact ZIM surface (existing card chrome is fine) */
body:not(.lockscreen) .box-header.with-border a {
  color: var(--zim-text);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 767px) {
  .zim-form-actions {
    flex-direction: column;
  }

  .zim-form-actions .tw-dw-btn {
    width: 100%;
  }
}

body:not(.lockscreen) .zim-modal-form .form-group {
  margin-bottom: 14px;
}

body:not(.lockscreen) .zim-modal-form .help-block {
  margin-top: 4px;
  font-size: 12px;
  color: var(--zim-text-muted);
}

/* =========================================================
   Phase 5B — Remaining module consistency + legacy sweep
   ========================================================= */

/* content-header → match zim-page-header hierarchy */
body:not(.lockscreen) .content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 4px !important;
  margin: 0 0 16px !important;
  background: transparent !important;
}

body:not(.lockscreen) .content-header > h1,
body:not(.lockscreen) .content-header h1 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  color: var(--zim-text, var(--crm-ink)) !important;
  margin: 0 !important;
  line-height: 1.25;
}

body:not(.lockscreen) .content-header h1 > small,
body:not(.lockscreen) .content-header > p,
body:not(.lockscreen) .content-header .small {
  display: block;
  margin-top: 6px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--zim-text-muted, var(--crm-muted)) !important;
}

/* Kill AdminLTE colored box tops / aqua chips */
body:not(.lockscreen) .box.box-primary,
body:not(.lockscreen) .box.box-info,
body:not(.lockscreen) .box.box-success,
body:not(.lockscreen) .box.box-warning,
body:not(.lockscreen) .box.box-danger,
body:not(.lockscreen) .box.box-default {
  border-top-color: var(--zim-border, var(--crm-line)) !important;
}

body:not(.lockscreen) .bg-aqua,
body:not(.lockscreen) .bg-light-blue,
body:not(.lockscreen) .input-group-addon.bg-light-blue,
body:not(.lockscreen) .input-group-addon.bg-aqua {
  background: var(--zim-surface-soft, #f8fafc) !important;
  color: var(--zim-text, #101828) !important;
  border-color: var(--zim-border, #e4e7ec) !important;
}

body:not(.lockscreen) .small-box.bg-aqua,
body:not(.lockscreen) .small-box.bg-green,
body:not(.lockscreen) .small-box.bg-yellow,
body:not(.lockscreen) .small-box.bg-red,
body:not(.lockscreen) .small-box.bg-blue,
body:not(.lockscreen) .small-box.bg-navy {
  background: #fff !important;
  color: var(--zim-text) !important;
  border: 1px solid var(--zim-border, var(--crm-line)) !important;
}

body:not(.lockscreen) .small-box .inner h3,
body:not(.lockscreen) .small-box .inner p {
  color: var(--zim-text) !important;
}

/* Report surfaces */
body:not(.lockscreen) .content .print_section {
  display: none;
}

@media print {
  body:not(.lockscreen) .content .print_section {
    display: block !important;
  }
}

body:not(.lockscreen) .content .row.no-print .input-group-addon {
  border-radius: var(--crm-control-radius) 0 0 var(--crm-control-radius) !important;
}

/* Module nav strips (Repair / Manufacturing / CRM / HMS / Essentials) */
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a,
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a:hover {
  border-top-color: var(--zim-primary) !important;
  color: var(--zim-primary) !important;
}

/* Legacy box-tools primary buttons */
body:not(.lockscreen) .box-tools .btn-primary,
body:not(.lockscreen) .box-tools a.btn-primary {
  background: var(--zim-primary) !important;
  border-color: var(--zim-primary) !important;
  border-radius: var(--crm-control-radius) !important;
  box-shadow: none !important;
}

/* POS: keep specialized layout; quiet surfaces only */
body:not(.lockscreen) #add_pos_sell_form .tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\],
body:not(.lockscreen) #edit_pos_sell_form .tw-rounded-2xl {
  border: 1px solid var(--zim-border, var(--crm-line)) !important;
  box-shadow: var(--zim-shadow-sm, var(--crm-shadow)) !important;
}

/* Panel / panel-heading leftovers */
body:not(.lockscreen) .panel,
body:not(.lockscreen) .panel-default {
  border: 1px solid var(--zim-border, var(--crm-line)) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
}

body:not(.lockscreen) .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid var(--zim-border, var(--crm-line)) !important;
  color: var(--zim-text) !important;
  font-weight: 600;
}

/* =========================================================
   Phase 6C — Users-like content canvas on all screens
   ========================================================= */

/* Single consistent page padding (match Users) */
body:not(.lockscreen) .content {
  padding: 20px 24px 32px !important;
}

/* Legacy content-header sitting OUTSIDE .content — same horizontal inset */
body:not(.lockscreen) #scrollable-container > section.content-header,
body:not(.lockscreen) #scrollable-container > .content-header {
  padding: 20px 24px 0 !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

body:not(.lockscreen) #scrollable-container > section.content-header + section.content,
body:not(.lockscreen) #scrollable-container > .content-header + .content {
  padding-top: 14px !important;
}

/* content-header already inside .content */
body:not(.lockscreen) .content > section.content-header,
body:not(.lockscreen) .content > .content-header {
  padding: 0 !important;
  margin: 0 0 18px !important;
}

body:not(.lockscreen) .zim-page-header {
  margin-bottom: 18px !important;
}

body:not(.lockscreen) .zim-stat-row {
  margin-bottom: 16px !important;
  gap: 12px !important;
}

body:not(.lockscreen) .zim-section.zim-widget,
body:not(.lockscreen) .content > .box,
body:not(.lockscreen) .content > .row > [class*="col-"] > .box {
  margin-bottom: 16px !important;
}

body:not(.lockscreen) .zim-section__body {
  padding: 16px 18px 18px !important;
}

body:not(.lockscreen) .zim-section__head {
  padding: 14px 18px !important;
}

/* DataTables toolbar breathing room */
body:not(.lockscreen) .content .dataTables_wrapper .row:first-child,
body:not(.lockscreen) .content .dataTables_wrapper > .row:first-of-type {
  margin-bottom: 8px !important;
}

@media (min-width: 1280px) {
  body:not(.lockscreen) .content {
    padding: 20px 28px 32px !important;
  }

  body:not(.lockscreen) #scrollable-container > section.content-header,
  body:not(.lockscreen) #scrollable-container > .content-header {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 1024px) {
  body:not(.lockscreen) .content {
    padding: 16px 16px 24px !important;
  }

  body:not(.lockscreen) #scrollable-container > section.content-header,
  body:not(.lockscreen) #scrollable-container > .content-header {
    padding: 16px 16px 0 !important;
  }
}

@media (max-width: 767px) {
  body:not(.lockscreen) .content {
    padding: 12px 12px 20px !important;
  }

  body:not(.lockscreen) #scrollable-container > section.content-header,
  body:not(.lockscreen) #scrollable-container > .content-header {
    padding: 12px 12px 0 !important;
  }
}