/* =====================================================================
   نافذة اختيار الاستيل — منقولة من D:\LotusERP (Content/app.css)
   بتتحمل في Main.Master وشاشة الدخول (Default.aspx)، والـ HTML من App_Start/UiThemes.cs (UiPicker)
   والسلوك من js/Themes.js. كل كارت عليه متغيرات استيله (style) فالمعاينة بألوانه هو.
   الأزرار والحقول جوه النافذة متعرفة هنا عشان تبقى نفس الشكل في الصفحتين (Login.css فيه .ez-btn بعرض كامل)
   ===================================================================== */
.ezt-overlay {
	position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(2, 6, 23, .5); font-family: var(--ez-font); font-size: 14px; line-height: 1.55;
}
.ezt-overlay[hidden] { display: none; }
.ezt-dialog {
	width: min(960px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
	background: var(--ez-surface); color: var(--ez-ink); border: 1px solid var(--ez-line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.ezt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ez-line-soft); }
.ezt-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.ezt-head p { margin: 2px 0 0; font-size: 12px; color: var(--ez-ink-3); }
/* grid-auto-rows: الكروت (overflow: hidden) ماتنضغطش لما الشاشة قصيرة — الشبكة نفسها بتسكرول */
.ezt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 18px; overflow-y: auto; }
.ezt-card {
	display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer; text-align: start; font: inherit; color: var(--ez-ink);
	border: 2px solid var(--ez-line); border-radius: 14px; background: var(--ez-surface); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ezt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.ezt-card.selected { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); }
.ezt-prev { display: flex; flex-direction: column; height: 120px; background: var(--ez-bg); }
.ezt-top { height: 20px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 7px; background: var(--top-bg); border-bottom: 1px solid var(--top-line); }
.ezt-top i { width: 20px; height: 6px; border-radius: 3px; background: var(--top-ink-2); opacity: .4; }
.ezt-top i.on { background: var(--top-on-ink); opacity: 1; }
.ezt-top i.logo { width: 10px; height: 10px; border-radius: 3px; background: var(--btn-primary-bg); opacity: 1; }
.ezt-row { flex: 1; display: flex; min-height: 0; }
.ezt-side { width: 32%; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--side-bg); border-inline-end: 1px solid var(--side-line); }
.ezt-side i { height: 6px; border-radius: 3px; background: var(--side-ink-2); opacity: .7; }
.ezt-side i.on { height: 11px; background: var(--side-on); opacity: 1; border-inline-end: 3px solid var(--ez-hl); }
.ezt-body { flex: 1; min-width: 0; padding: 9px; }
.ezt-mini { display: flex; flex-direction: column; gap: 6px; padding: 7px; background: var(--ez-surface); border: 1px solid var(--ez-line); border-radius: min(var(--ez-radius), 8px); }
.ezt-line { height: 6px; width: 65%; border-radius: 3px; background: var(--ez-ink-3); opacity: .5; }
.ezt-input { height: 12px; border: 1px solid var(--ez-line); border-radius: min(var(--ctl-radius), 6px); background: var(--ez-surface-2); }
.ezt-btns { display: flex; gap: 5px; }
.ezt-btn-p { height: 14px; width: 42%; border-radius: min(var(--btn-radius), 7px); background: var(--btn-primary-bg); box-shadow: var(--btn-shadow); }
.ezt-btn-s { height: 14px; width: 28%; border-radius: min(var(--btn-radius), 7px); border: 1px solid var(--ez-line); background: var(--ez-surface); }
.ezt-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--ez-surface); border-top: 1px solid var(--ez-line-soft); }
.ezt-name b { display: block; font-size: 13px; }
.ezt-name small { display: block; font-size: 11px; color: var(--ez-ink-3); }
.ezt-check { color: var(--ez-accent); visibility: hidden; }
.ezt-card.current .ezt-check { visibility: visible; }
.ezt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--ez-line-soft); background: var(--ez-surface-2); }
.ezt-mode button { padding: 6px 12px; }
.ezt-hint { flex: 1 1 200px; font-size: 12px; color: var(--ez-ink-3); }
.ezt-actions { display: flex; gap: 8px; }

/* تبويبات: الاستيلات الجاهزة / التخصيص */
.ezt-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--ez-line-soft); flex: none; }
.ezt-tabs button {
	position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; margin-bottom: -1px;
	border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ez-ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ezt-tabs button:hover { color: var(--ez-ink); }
.ezt-tabs button.on { color: var(--ez-accent); border-bottom-color: var(--ez-accent); }
.ezt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ez-hl); }

/* تبويب التخصيص (UiThemes.cs: AppendCustomPane) */
.ezt-custom { display: grid; gap: 14px; padding: 16px 18px; overflow-y: auto; }
.ezt-custom[hidden], .ezt-grid[hidden] { display: none; }
.ezc-base { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: 10px; background: var(--ez-accent-soft); font-size: 12.5px; color: var(--ez-ink-2); }
.ezc-base > i { color: var(--ez-accent); }
.ezc-base > span { flex: 1 1 260px; }
.ezc-base b { color: var(--ez-ink); }
.ezc-sec { display: grid; gap: 2px; border: 1px solid var(--ez-line); border-radius: 12px; padding: 4px 14px 10px; }
.ezc-sec h4 { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13.5px; font-weight: 800; }
.ezc-sec h4 i { color: var(--ez-accent); font-size: 12px; }
.ezc-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--ez-line-soft); }
.ezc-sec h4 + .ezc-row { border-top: 0; }
.ezc-label { font-size: 13px; font-weight: 600; }
.ezc-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ez-ink-3); }
.ezc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ezc-opts.ez-seg { flex-wrap: nowrap; justify-self: start; max-width: 100%; overflow-x: auto; }
.ezc-opts.ez-seg button { padding: 6px 12px; }
.ezc-auto {
	height: 28px; padding: 0 10px; border: 1px dashed var(--ez-line); border-radius: 999px; background: var(--ez-surface);
	color: var(--ez-ink-2); font: inherit; font-size: 12px; cursor: pointer;
}
.ezc-auto.on { border-style: solid; border-color: var(--ez-accent); background: var(--ez-accent-soft); color: var(--ez-ink); font-weight: 600; }
.ezc-sw, .ezc-pick {
	position: relative; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%; cursor: pointer; margin: 0;
	background: var(--sw); border: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.ezc-sw:hover, .ezc-pick:hover { transform: scale(1.1); }
.ezc-sw.on, .ezc-pick.on { box-shadow: 0 0 0 2px var(--ez-surface), 0 0 0 4px var(--ez-accent); }
.ezc-pick { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.ezc-pick.on { background: var(--sw); }
.ezc-pick i { font-size: 11px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); pointer-events: none; }
.ezc-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ezc-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ez-line-soft); }
.ezc-sample .ez-ctl { width: 160px; }
.ezc-sample .ez-btn { pointer-events: none; }

/* عناصر مشتركة جوه النافذة (نفس Master.css، متعرفة هنا عشان شاشة الدخول) */
.ezt-overlay .ez-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0;
	border: 1px solid var(--ez-line); background: var(--ez-surface); color: var(--ez-ink); box-shadow: none; filter: none;
	border-radius: var(--btn-radius); padding: 7px 15px; font: inherit; font-weight: var(--btn-weight); line-height: 1.4; white-space: nowrap; cursor: pointer;
}
.ezt-overlay .ez-btn:hover { background: var(--ez-surface-2); border-color: var(--top-on-line); }
.ezt-overlay .ez-btn-primary, .ezt-overlay .ez-btn-primary:hover { background: var(--btn-primary-bg); border-color: transparent; color: var(--ez-accent-ink); box-shadow: var(--btn-shadow); }
.ezt-overlay .ez-btn-primary:hover { filter: brightness(1.08); }
.ezt-overlay .ez-btn[disabled] { opacity: .45; pointer-events: none; }
.ezt-overlay .ez-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ez-ink-3); border: 1px solid transparent; background: none; cursor: pointer; }
.ezt-overlay .ez-icon-btn:hover { color: var(--ez-accent); background: var(--ez-accent-soft); }
.ezt-overlay .ez-ctl {
	display: block; min-height: 38px; padding: 6px 11px; border: 1px solid var(--ez-line); border-radius: var(--ctl-radius);
	background: var(--ez-surface); color: var(--ez-ink); font: inherit;
}
.ezt-overlay .ez-label { font-size: 12px; font-weight: 600; color: var(--ez-ink-2); }
.ezt-overlay .ez-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; color: var(--ez-accent); font: inherit; font-size: 12px; cursor: pointer; }
.ezt-overlay .ez-link:hover { text-decoration: underline; }
.ez-seg { display: inline-flex; border: 1px solid var(--ez-line); border-radius: min(var(--btn-radius), 8px); overflow: hidden; }
.ez-seg button { border: 0; background: var(--ez-surface); color: var(--ez-ink-2); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ez-seg button + button { border-inline-start: 1px solid var(--ez-line); }
.ez-seg button.on { background: var(--btn-primary-bg); color: var(--ez-accent-ink); font-weight: 600; }

/* رسالة "تم الحفظ" (js/Themes.js) */
.ez-toasts { position: fixed; top: 72px; inset-inline-end: 20px; z-index: 1200; display: grid; gap: 8px; font-family: var(--ez-font); }
.ez-toast { padding: 10px 14px; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); font-weight: 600; background: var(--ez-good-soft, #e7f6ec); color: var(--ez-good, #16a34a); }
.ez-toast.bad { background: var(--ez-bad-soft, #fdeceb); color: var(--ez-bad, #dc2626); }

@media (prefers-reduced-motion: reduce) { .ezt-card, .ezc-sw:hover, .ezc-pick:hover { transition: none; transform: none; } }
@media (max-width: 640px) {
	.ezc-row { grid-template-columns: minmax(0, 1fr); }
	.ezt-custom { padding: 12px; }
	.ezt-tabs { padding: 0 12px; }
	.ezt-tabs button { padding: 10px 6px; font-size: 12px; }
}
@media (max-width: 576px) {
	.ezt-overlay { padding: 0; align-items: stretch; }
	.ezt-dialog { max-height: none; height: 100%; border-radius: 0; }
	.ezt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
	.ezt-prev { height: 92px; }
	.ezt-mode, .ezt-actions { width: 100%; }
	.ezt-mode button, .ezt-actions .ez-btn { flex: 1; }
}
@media print { .ezt-overlay, .ez-toasts { display: none !important; } }