/* Supplemental layout styles complementing zohari-theme.css (tables, nav,
   forms grid). Palette variables come from zohari-theme.css. */
* { box-sizing: border-box; }
body.z-body { margin: 0; }

.z-shell { display: flex; min-height: 100vh; }
/* Sidebar is a solid olive brand surface (guideline's dark-olive brand-mark
   variant) so the light content area still carries strong brand presence. */
.z-side {
  width: 232px; flex: 0 0 232px; background: var(--primary-olive, #3E5226);
  border-right: 1px solid rgba(0,0,0,.15); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.z-side .brand { display: flex; justify-content: center; padding: 12px 10px 24px; }
.z-side .brand img { height: 64px; width: auto; display: block; }
.z-navlink { display: block; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.75);
  text-decoration: none; font-size: 14px; }
.z-navlink:hover { background: rgba(255,255,255,.08); color: #fff; }
.z-navlink.active { background: rgba(173,198,68,.18); color: var(--leaf-green, #ADC644); }

.z-navgroup { margin: 2px 0; }
.z-navgroup summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.6);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.z-navgroup summary::-webkit-details-marker { display: none; }
.z-navgroup summary::after { content: '\203A'; transition: transform .15s ease; }
.z-navgroup[open] summary::after { transform: rotate(90deg); }
.z-navgroup summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.z-navgroup__items { display: flex; flex-direction: column; gap: 2px; padding-left: 8px; margin-top: 2px; }
.z-navgroup__items .z-navlink { font-size: 13px; }

.z-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-top { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--surface-core, #fff); border-bottom: 1px solid var(--border-color, #E4E3D6); }
.z-top .who { color: var(--text-muted, #6E7568); font-size: 13px; }
.z-top .who b { color: var(--text-primary, #23291B); }
.z-content { padding: 24px; max-width: 1440px; width: 100%; }

.z-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.z-table th, .z-table td { text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border-color, #E4E3D6); }
.z-table th { color: var(--text-muted, #6E7568); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.z-table tbody tr:hover, .z-table tr:hover { background: var(--leaf-green-tint, #EEF3D8); }
.z-mono2 { font-family: var(--font-heading, sans-serif); font-variant-numeric: tabular-nums; color: var(--primary-olive, #3E5226); }

.z-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.z-formgrid label { display: block; font-size: 12px; color: var(--text-muted, #6E7568); margin-bottom: 4px; }
.z-formgrid input, .z-formgrid select {
  width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--canvas-bg, #F1F1EB);
  border: 1px solid var(--border-color, #E4E3D6); color: var(--text-primary, #23291B); font-size: 14px;
}
.z-panel2 { background: var(--surface-core, #fff); border: 1px solid var(--border-color, #E4E3D6);
  border-radius: 12px; padding: 18px; margin-bottom: 20px; }
.z-panel2 h2 { margin: 0 0 12px; font-size: 15px; font-family: var(--font-heading, sans-serif); }
.z-alert { padding: 12px 14px; border-radius: 8px; margin: 8px 0; font-size: 14px; }
.z-alert--critical { background: rgba(179,38,30,.10); border: 1px solid var(--critical-red, #B3261E); color: #7A1D17; }
.z-alert--warning { background: rgba(180,83,9,.10); border: 1px solid var(--amber, #B45309); color: #7A3607; }
.z-alert--ok { background: rgba(173,198,68,.18); border: 1px solid var(--leaf-green, #ADC644); color: #3E5226; }
.z-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.dot-green { color: var(--primary-olive, #3E5226); } .dot-amber { color: var(--amber, #B45309); } .dot-red { color: var(--critical-red, #B3261E); }