/* Demo screens — mock product UI for Mizan, neutral demo data only */

.mz-screen {
  width: 100%;
  aspect-ratio: 1280 / 585;
  background: #F7F4EE;
  color: #1B2340;
  border-radius: 10px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  display: grid;
  grid-template-columns: 1fr 220px;
  overflow: hidden;
  direction: rtl;
  position: relative;
}

/* ============== Sidebar ============== */
.mz-side {
  background: linear-gradient(180deg, #142147 0%, #0E1838 100%);
  color: #DDE3F1;
  padding: 16px 14px;
  display: flex; flex-direction: column;
  font-size: 12.5px;
}
.mz-brand-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.mz-brand-tile {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(180deg, #EBC474, #A87826);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(212,162,76,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.mz-brand-row .name { font-weight: 600; font-size: 14px; line-height: 1; }
.mz-brand-row .sub { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.mz-side h6 {
  font-size: 10px; color: rgba(255,255,255,0.4); margin: 12px 6px 6px;
  font-weight: 500; letter-spacing: 0.04em;
}
.mz-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  color: #C4CCDB; cursor: default;
  margin-bottom: 2px;
}
.mz-nav-item .ic {
  width: 14px; height: 14px; flex-shrink: 0; opacity: .85;
}
.mz-nav-item.active {
  background: rgba(212,162,76,0.12);
  color: #EBC474;
  border: 1px solid rgba(212,162,76,0.25);
}
.mz-side .spacer { flex: 1; }
.mz-user-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
}
.mz-user-card .av {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(180deg, #EBC474, #A87826);
  color: #1A1304;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.mz-user-card .info { flex: 1; min-width: 0; }
.mz-user-card .info b { display: block; font-size: 12px; font-weight: 600; }
.mz-user-card .info span { font-size: 10px; color: rgba(255,255,255,0.5); }

/* ============== Main canvas ============== */
.mz-main {
  padding: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 12px;
}
.mz-greet-banner {
  background: linear-gradient(105deg, #142147 0%, #0E1838 70%);
  color: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.mz-greet-banner h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.mz-greet-banner .sub { color: rgba(255,255,255,0.55); font-size: 11px; }
.mz-greet-banner .ic-tile {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(180deg, #EBC474, #A87826);
  display: grid; place-items: center; color: #1A1304;
}

.mz-toolbar {
  display: flex; gap: 8px; align-items: center;
}
.mz-search {
  flex: 1; background: #fff; border: 1px solid #E5E2D9;
  border-radius: 8px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #8A92A6;
}
.mz-pill {
  background: #fff; border: 1px solid #E5E2D9;
  border-radius: 8px; padding: 7px 12px;
  font-size: 11px; color: #4B5475;
  display: inline-flex; align-items: center; gap: 6px;
}
.mz-btn-gold {
  background: linear-gradient(180deg, #EBC474, #A87826);
  color: #1A1304; font-weight: 600;
  border: none; padding: 8px 14px; border-radius: 8px;
  font-size: 11.5px; box-shadow: 0 4px 10px -4px rgba(212,162,76,.5);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Dashboard 3-col grid */
.mz-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  flex: 1; min-height: 0;
}
.mz-card {
  background: #fff; border: 1px solid #E8E4D9;
  border-radius: 10px; padding: 10px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.mz-card-head { display: flex; justify-content: space-between; align-items: center; }
.mz-card-head h4 { margin: 0; font-size: 13px; font-weight: 600; }
.mz-card-head .seg { display: flex; gap: 4px; }
.mz-card-head .seg span {
  font-size: 10px; padding: 4px 8px; border-radius: 5px;
  background: #F0EDE3; color: #4B5475;
}
.mz-card-head .seg span.on { background: #142147; color: #fff; }

.mz-row {
  display: flex; gap: 10px; padding: 8px 4px;
  border-top: 1px solid #F0EDE3;
  font-size: 11.5px;
}
.mz-row:first-of-type { border-top: none; }
.mz-row .pin {
  width: 36px; flex-shrink: 0;
  background: linear-gradient(180deg, #1F2C56, #142147);
  color: #fff; border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 0; line-height: 1.1;
}
.mz-row .pin b { font-size: 14px; font-weight: 600; }
.mz-row .pin span { font-size: 9px; opacity: .7; }
.mz-row .body { flex: 1; min-width: 0; }
.mz-row .body .t1 { font-weight: 600; font-size: 12px; }
.mz-row .body .t2 { color: #6F7892; font-size: 10.5px; margin-top: 2px; }
.mz-row .badge {
  align-self: flex-start;
  font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: 600;
}
.mz-row .badge.gold { background: #FBEFD1; color: #8C6116; }
.mz-row .badge.green { background: #DDF2E8; color: #1F6B50; }
.mz-row .badge.purple { background: #ECE3F4; color: #5B3A82; }
.mz-row .badge.red { background: #F8DDE2; color: #8C2C3E; }
.mz-row .badge.blue { background: #DCE5F5; color: #28457E; }
.mz-row .pre {
  font-size: 9px; color: #6F7892;
  font-family: "Inter", monospace;
}

/* Cases table */
.mz-table {
  background: #fff; border: 1px solid #E8E4D9;
  border-radius: 10px; flex: 1;
  overflow: hidden; display: flex; flex-direction: column;
}
.mz-table-h, .mz-table-r {
  display: grid; grid-template-columns: 36px 70px 70px 100px 1fr 130px 110px 100px 80px 80px;
  align-items: center;
  padding: 9px 12px;
  font-size: 11px;
  gap: 6px;
}
.mz-table-h {
  background: #FAF7EE; border-bottom: 1px solid #E8E4D9;
  color: #6F7892; font-weight: 500;
}
.mz-table-r { border-bottom: 1px solid #F2EFE5; color: #303A56; }
.mz-table-r:last-child { border-bottom: none; }
.mz-table-r .ic { color: #98A1B8; cursor: default; }
.mz-table-r b { font-weight: 600; }
.mz-tag {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
}
.mz-tag.civil { background: #E1EAF7; color: #28457E; }
.mz-tag.commercial { background: #FBEFD1; color: #8C6116; }
.mz-tag.realestate { background: #DDF2E8; color: #1F6B50; }
.mz-tag.family { background: #F8DDE2; color: #8C2C3E; }

.mz-status {
  font-size: 10px; padding: 4px 9px; border-radius: 5px; font-weight: 600;
}
.mz-status.s1 { background: #FBEFD1; color: #8C6116; }
.mz-status.s2 { background: #ECE3F4; color: #5B3A82; }
.mz-status.s3 { background: #DDF2E8; color: #1F6B50; }
.mz-status.s4 { background: #DCE5F5; color: #28457E; }
.mz-status.s5 { background: #F8DDE2; color: #8C2C3E; }

/* Case-detail layout */
.mz-detail {
  display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px;
  flex: 1; min-height: 0;
}
.mz-detail .col { display: flex; flex-direction: column; gap: 10px; }
.mz-info-row {
  display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px dashed #F0EDE3;
  font-size: 11.5px;
}
.mz-info-row:last-of-type { border-bottom: none; }
.mz-info-row .k { color: #6F7892; }
.mz-info-row .v { font-weight: 500; }
.mz-detail h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.mz-mini-card {
  border: 1px solid #F0EDE3; border-radius: 8px;
  padding: 8px 10px; font-size: 11px;
}
.mz-mini-card .h { display: flex; justify-content: space-between; margin-bottom: 4px; }
.mz-mini-card .h b { color: #28457E; font-size: 11.5px; }

/* New-case full-page form */
.nc-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 14px 20px 12px; border-bottom: 1px solid #EFEAE0;
}
.nc-crumb { font-size: 10px; color: #8A8470; margin-bottom: 4px; }
.nc-crumb b { color: #1B1F2A; font-weight: 600; }
.nc-title { font-size: 16px; font-weight: 700; color: #1B1F2A; margin: 0; }
.nc-actions { display: flex; gap: 6px; }

.nc-flags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 20px; background: #FAF6EE; border-bottom: 1px solid #EFEAE0;
}
.nc-flag {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 11px; background: #fff; border: 1px solid #E8E4D9;
  border-radius: 8px;
}
.nc-flag.on { background: #FBEFD1; border-color: #D4A24C; }
.nc-flag .check {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid #C4CCDB; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center;
}
.nc-flag.on .check { background: #D4A24C; border-color: #D4A24C; }
.nc-flag b { display: block; font-size: 11px; font-weight: 600; color: #1B1F2A; margin-bottom: 1px; }
.nc-flag span:not(.check) { display: block; font-size: 9.5px; color: #6F7892; line-height: 1.4; }

.nc-section { padding: 14px 20px 6px; border-bottom: 1px solid #F4F0E6; }
.nc-section:last-child { border-bottom: 0; }
.nc-sec-h {
  font-size: 11px; font-weight: 600; color: #1B1F2A;
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.nc-sec-h .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: linear-gradient(180deg, #E8B85B 0%, #C8932F 100%);
}
.nc-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px;
}
.nc-field { display: flex; flex-direction: column; gap: 4px; }
.nc-field.full { grid-column: 1 / -1; }
.nc-field label {
  font-size: 10px; color: #6F7892; font-weight: 500;
}
.nc-field.req label span { color: #D4A24C; }
.nc-input {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E8E4D9; border-radius: 7px;
  padding: 7px 10px; font-size: 11px; color: #1B1F2A; min-height: 28px;
}
.nc-input.search { background: #FAF6EE; }
.nc-input.search svg { color: #8A8470; flex-shrink: 0; }
.nc-input span { flex: 1; }
.nc-input .chev { color: #8A8470; flex-shrink: 0; }
.nc-input.select { background: #FCFAF4; }

/* Reports table */
.mz-rep-h, .mz-rep-r {
  display: grid;
  grid-template-columns: 90px 100px 110px 1fr 1fr 110px 70px 90px;
  gap: 6px; padding: 9px 12px;
  font-size: 11px; align-items: center;
}
.mz-rep-h { background: #FAF7EE; color: #6F7892; font-weight: 500; }
.mz-rep-r { border-top: 1px solid #F2EFE5; color: #303A56; }

/* Users table */
.mz-users-h, .mz-users-r {
  display: grid;
  grid-template-columns: 1fr 200px 100px 90px 100px 130px;
  gap: 8px; padding: 9px 12px;
  font-size: 11px; align-items: center;
}
.mz-users-h { background: #FAF7EE; color: #6F7892; font-weight: 500; }
.mz-users-r { border-top: 1px solid #F2EFE5; color: #303A56; }
.mz-mini-btn {
  font-size: 10px; padding: 4px 8px; border-radius: 5px;
  background: #F0EDE3; color: #4B5475;
}
.mz-mini-btn.danger { background: #FCE0E5; color: #8C2C3E; }

/* Messages table */
.mz-msg-h, .mz-msg-r {
  display: grid;
  grid-template-columns: 1fr 110px 100px 100px 130px;
  gap: 8px; padding: 9px 12px;
  font-size: 11px; align-items: center;
}
.mz-msg-h { background: #FAF7EE; color: #6F7892; font-weight: 500; }
.mz-msg-r { border-top: 1px solid #F2EFE5; color: #303A56; }
.mz-channel {
  background: #F0EDE3; border-radius: 6px; padding: 4px 8px;
  font-size: 10.5px; color: #4B5475; display: inline-flex; align-items: center; gap: 4px;
}

/* Contacts table */
.mz-cont-h, .mz-cont-r {
  display: grid;
  grid-template-columns: 28px 1fr 110px 110px 90px 80px;
  gap: 8px; padding: 9px 12px;
  font-size: 11px; align-items: center;
}
.mz-cont-h { background: #FAF7EE; color: #6F7892; font-weight: 500; }
.mz-cont-r { border-top: 1px solid #F2EFE5; color: #303A56; }
.mz-cont-r .av {
  width: 22px; height: 22px; border-radius: 6px;
  background: #ECE3F4; color: #5B3A82;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
}