*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
.dmz-icon{display:inline-block;vertical-align:middle;max-width:none}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}

:root,.dmz-theme-dark{
  --dmz-bg-primary:#09090B;--dmz-bg-secondary:#18181B;--dmz-bg-tertiary:#27272A;
  --dmz-bg-elevated:#18181B;--dmz-bg-glass:rgba(24,24,27,0.85);--dmz-bg-sidebar:#09090B;
  --dmz-bg:#09090B;--dmz-card-bg:#18181B;
  --dmz-accent:#FAB005;--dmz-accent-hover:#E09D00;--dmz-accent-soft:rgba(250,176,5,0.10);--dmz-accent-text:#000;
  --dmz-accent-faint:rgba(250,176,5,0.03);--dmz-accent-subtle:rgba(250,176,5,0.05);--dmz-accent-light:rgba(250,176,5,0.08);--dmz-accent-medium:rgba(250,176,5,0.18);
  --dmz-success:#12B886;--dmz-danger:#FA5252;--dmz-warning:#FAB005;--dmz-info:#9775FA;
  --dmz-danger-bg:rgba(250,82,82,0.10);
  --dmz-text-primary:#FAFAFA;--dmz-text-secondary:#A1A1AA;--dmz-text-tertiary:#71717A;--dmz-text-accent:#FCC419;
  --dmz-text-dim:#71717A;--dmz-text-muted:#71717A;
  --dmz-border:#27272A;--dmz-border-light:rgba(255,255,255,0.06);--dmz-border-strong:#3F3F46;
  --dmz-text-sidebar:#D4D4D8;--dmz-text-sidebar-dim:#71717A;--dmz-text-sidebar-active:#FAB005;
  --dmz-bg-sidebar-active:rgba(250,176,5,0.12);
  --dmz-radius:10px;--dmz-radius-sm:6px;--dmz-radius-md:10px;--dmz-radius-lg:16px;--dmz-radius-xl:20px;--dmz-radius-full:9999px;
  --dmz-shadow-sm:0 1px 2px rgba(0,0,0,0.3);--dmz-shadow-md:0 4px 20px rgba(0,0,0,0.35);
  --dmz-shadow-lg:0 12px 40px rgba(0,0,0,0.45);--dmz-shadow-xl:0 20px 60px rgba(0,0,0,0.55);
  --dmz-shadow-glow:0 0 0 3px rgba(250,176,5,0.22);
  --dmz-transition:0.15s ease;
  --dmz-font-heading:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --dmz-font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --dmz-font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

.dmz-theme-light{
  --dmz-bg-primary:#F8F8F7;--dmz-bg-secondary:#FFFFFF;--dmz-bg-tertiary:#F1F0EE;
  --dmz-bg-elevated:#FFFFFF;--dmz-bg-glass:rgba(248,248,247,0.85);
  --dmz-bg-sidebar:#FFFFFF;
  --dmz-bg:#F8F8F7;--dmz-card-bg:#FFFFFF;
  --dmz-text-primary:#18181B;--dmz-text-secondary:#71717A;--dmz-text-tertiary:#A1A1AA;--dmz-text-accent:#C68A00;
  --dmz-text-dim:#A1A1AA;--dmz-text-muted:#A1A1AA;
  --dmz-text-sidebar:#18181B;--dmz-text-sidebar-dim:#71717A;--dmz-text-sidebar-active:#C68A00;
  --dmz-bg-sidebar-active:rgba(250,176,5,0.10);
  --dmz-border:#E4E4E7;--dmz-border-light:rgba(0,0,0,0.06);--dmz-border-strong:#D4D4D8;
  --dmz-shadow-sm:0 1px 2px rgba(0,0,0,0.06);--dmz-shadow-md:0 4px 20px rgba(0,0,0,0.08);
  --dmz-shadow-lg:0 12px 40px rgba(0,0,0,0.12);--dmz-shadow-xl:0 20px 60px rgba(0,0,0,0.15);
  --dmz-shadow-glow:0 0 0 3px rgba(250,176,5,0.18);
  --dmz-accent-faint:rgba(250,176,5,0.03);--dmz-accent-subtle:rgba(250,176,5,0.05);--dmz-accent-light:rgba(250,176,5,0.08);--dmz-accent-medium:rgba(250,176,5,0.18);
}

.dmz-accent-blue{
  --dmz-accent:#339AF0;--dmz-accent-hover:#1C7ED6;--dmz-accent-soft:rgba(51,154,240,0.10);--dmz-accent-text:#fff;
  --dmz-accent-faint:rgba(51,154,240,0.03);--dmz-accent-subtle:rgba(51,154,240,0.05);--dmz-accent-light:rgba(51,154,240,0.08);--dmz-accent-medium:rgba(51,154,240,0.18);
  --dmz-text-accent:#74C0FC;--dmz-shadow-glow:0 0 0 3px rgba(51,154,240,0.22);
  --dmz-text-sidebar-active:#339AF0;--dmz-bg-sidebar-active:rgba(51,154,240,0.12);
}
.dmz-accent-blue.dmz-theme-light{--dmz-text-accent:#1C7ED6;--dmz-text-sidebar-active:#1C7ED6}
.dmz-accent-blue .dmz-btn--primary:hover{box-shadow:0 4px 12px rgba(51,154,240,0.3)}
.dmz-accent-emerald{
  --dmz-accent:#12B886;--dmz-accent-hover:#099268;--dmz-accent-soft:rgba(18,184,134,0.10);--dmz-accent-text:#fff;
  --dmz-accent-faint:rgba(18,184,134,0.03);--dmz-accent-subtle:rgba(18,184,134,0.05);--dmz-accent-light:rgba(18,184,134,0.08);--dmz-accent-medium:rgba(18,184,134,0.18);
  --dmz-text-accent:#63E6BE;--dmz-shadow-glow:0 0 0 3px rgba(18,184,134,0.22);
  --dmz-text-sidebar-active:#12B886;--dmz-bg-sidebar-active:rgba(18,184,134,0.12);
}
.dmz-accent-emerald.dmz-theme-light{--dmz-text-accent:#099268;--dmz-text-sidebar-active:#099268}
.dmz-accent-emerald .dmz-btn--primary:hover{box-shadow:0 4px 12px rgba(18,184,134,0.3)}
.dmz-accent-violet{
  --dmz-accent:#9775FA;--dmz-accent-hover:#7950F2;--dmz-accent-soft:rgba(151,117,250,0.10);--dmz-accent-text:#fff;
  --dmz-accent-faint:rgba(151,117,250,0.03);--dmz-accent-subtle:rgba(151,117,250,0.05);--dmz-accent-light:rgba(151,117,250,0.08);--dmz-accent-medium:rgba(151,117,250,0.18);
  --dmz-text-accent:#B197FC;--dmz-shadow-glow:0 0 0 3px rgba(151,117,250,0.22);
  --dmz-text-sidebar-active:#9775FA;--dmz-bg-sidebar-active:rgba(151,117,250,0.12);
}
.dmz-accent-violet.dmz-theme-light{--dmz-text-accent:#7950F2;--dmz-text-sidebar-active:#7950F2}
.dmz-accent-violet .dmz-btn--primary:hover{box-shadow:0 4px 12px rgba(151,117,250,0.3)}
.dmz-accent-rose{
  --dmz-accent:#F06595;--dmz-accent-hover:#E64980;--dmz-accent-soft:rgba(240,101,149,0.10);--dmz-accent-text:#fff;
  --dmz-accent-faint:rgba(240,101,149,0.03);--dmz-accent-subtle:rgba(240,101,149,0.05);--dmz-accent-light:rgba(240,101,149,0.08);--dmz-accent-medium:rgba(240,101,149,0.18);
  --dmz-text-accent:#FAA2C1;--dmz-shadow-glow:0 0 0 3px rgba(240,101,149,0.22);
  --dmz-text-sidebar-active:#F06595;--dmz-bg-sidebar-active:rgba(240,101,149,0.12);
}
.dmz-accent-rose.dmz-theme-light{--dmz-text-accent:#E64980;--dmz-text-sidebar-active:#E64980}
.dmz-accent-rose .dmz-btn--primary:hover{box-shadow:0 4px 12px rgba(240,101,149,0.3)}
.dmz-accent-orange{
  --dmz-accent:#FF922B;--dmz-accent-hover:#F76707;--dmz-accent-soft:rgba(255,146,43,0.10);--dmz-accent-text:#000;
  --dmz-accent-faint:rgba(255,146,43,0.03);--dmz-accent-subtle:rgba(255,146,43,0.05);--dmz-accent-light:rgba(255,146,43,0.08);--dmz-accent-medium:rgba(255,146,43,0.18);
  --dmz-text-accent:#FFC078;--dmz-shadow-glow:0 0 0 3px rgba(255,146,43,0.22);
  --dmz-text-sidebar-active:#FF922B;--dmz-bg-sidebar-active:rgba(255,146,43,0.12);
}
.dmz-accent-orange.dmz-theme-light{--dmz-text-accent:#F76707;--dmz-text-sidebar-active:#F76707}
.dmz-accent-orange .dmz-btn--primary:hover{box-shadow:0 4px 12px rgba(255,146,43,0.3)}

.dmz-radius-sharp{--dmz-radius-sm:4px;--dmz-radius-md:6px;--dmz-radius-lg:8px;--dmz-radius-xl:10px}
.dmz-radius-round{--dmz-radius-sm:10px;--dmz-radius-md:14px;--dmz-radius-lg:22px;--dmz-radius-xl:28px}

body{font-family:var(--dmz-font-body);font-size:14px;font-weight:400;color:var(--dmz-text-primary);background:var(--dmz-bg-primary)}

.dmz-heading{font-family:var(--dmz-font-heading);font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--dmz-text-primary);overflow-wrap:break-word;word-break:normal;hyphens:auto}
.dmz-heading--xl{font-size:26px}.dmz-heading--lg{font-size:20px}.dmz-heading--md{font-size:17px}.dmz-heading--sm{font-size:15px}.dmz-heading--xs{font-size:13px}
.dmz-text--sm{font-size:13px}.dmz-text--xs{font-size:12px}.dmz-text--xxs{font-size:11px}.dmz-text--lg{font-size:18px}
.dmz-text--bold{font-weight:600}.dmz-text--medium{font-weight:500}
.dmz-text--muted{color:var(--dmz-text-secondary)}.dmz-text--dim{color:var(--dmz-text-tertiary)}
.dmz-text--accent{color:var(--dmz-text-accent)}.dmz-text--success{color:var(--dmz-success)}.dmz-text--danger{color:var(--dmz-danger)}
.dmz-text--tabular{font-variant-numeric:tabular-nums}.dmz-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmz-text--nowrap{white-space:nowrap}.dmz-text--center{text-align:center}.dmz-text--right{text-align:right}
.dmz-text--mono{font-family:'SF Mono',Consolas,monospace;font-size:12px}

.dmz-flex{display:flex}.dmz-flex-col{flex-direction:column}.dmz-flex-wrap{flex-wrap:wrap}
.dmz-flex-1{flex:1}.dmz-flex-shrink-0{flex-shrink:0}.dmz-flex-push{margin-left:auto}
.dmz-items-center{align-items:center}.dmz-items-start{align-items:flex-start}.dmz-items-end{align-items:flex-end}
.dmz-justify-between{justify-content:space-between}.dmz-justify-center{justify-content:center}.dmz-justify-end{justify-content:flex-end}
.dmz-min-w-0{min-width:0}.dmz-relative{position:relative}.dmz-ml-auto{margin-left:auto}
.dmz-overflow-x{overflow-x:auto}.dmz-overflow-hidden{overflow:hidden}
.dmz-w-full{width:100%}.dmz-block{display:block}.dmz-inline-flex{display:inline-flex}.dmz-hidden{display:none}

.dmz-gap-1{gap:4px}.dmz-gap-2{gap:6px}.dmz-gap-3{gap:8px}.dmz-gap-4{gap:10px}.dmz-gap-5{gap:12px}
.dmz-gap-6{gap:14px}.dmz-gap-7{gap:16px}.dmz-gap-8{gap:18px}.dmz-gap-9{gap:20px}.dmz-gap-10{gap:22px}
.dmz-gap-11{gap:24px}.dmz-gap-12{gap:28px}.dmz-gap-14{gap:32px}.dmz-gap-16{gap:40px}

.dmz-mb-1{margin-bottom:4px}.dmz-mb-2{margin-bottom:6px}.dmz-mb-3{margin-bottom:8px}
.dmz-mb-4{margin-bottom:10px}.dmz-mb-5{margin-bottom:12px}.dmz-mb-6{margin-bottom:14px}
.dmz-mb-7{margin-bottom:16px}.dmz-mb-8{margin-bottom:18px}.dmz-mb-9{margin-bottom:20px}
.dmz-mb-10{margin-bottom:22px}.dmz-mb-12{margin-bottom:28px}.dmz-mb-14{margin-bottom:32px}.dmz-mb-16{margin-bottom:40px}
.dmz-mt-2{margin-top:6px}.dmz-mt-3{margin-top:8px}.dmz-mt-4{margin-top:10px}.dmz-mt-6{margin-top:14px}
.dmz-ml-2{margin-left:6px}.dmz-ml-4{margin-left:10px}
.dmz-p-0{padding:0}.dmz-p-2{padding:6px}.dmz-p-3{padding:8px}.dmz-p-4{padding:10px}.dmz-p-5{padding:12px}.dmz-p-6{padding:14px}.dmz-p-8{padding:20px}
.dmz-pt-2{padding-top:6px}.dmz-pt-3{padding-top:8px}.dmz-pt-4{padding-top:12px}.dmz-pt-6{padding-top:16px}

.dmz-card{background:var(--dmz-bg-secondary);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-lg);overflow:hidden}
.dmz-card__header{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dmz-card__header--bordered{border-bottom:1px solid var(--dmz-border)}
.dmz-card__body{padding:18px 22px}
.dmz-card__footer{padding:14px 22px;border-top:1px solid var(--dmz-border)}

.dmz-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;font-size:13px;font-weight:600;border-radius:var(--dmz-radius-md);transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition);white-space:nowrap;line-height:1.3;border:none;cursor:pointer}
.dmz-btn svg{width:16px;height:16px;flex-shrink:0}
.dmz-btn--primary{background:var(--dmz-accent);color:var(--dmz-accent-text)}
.dmz-btn--primary:hover{background:var(--dmz-accent-hover);transform:translateY(-1px);box-shadow:var(--dmz-shadow-btn-glow,0 4px 12px rgba(250,176,5,0.3))}
.dmz-btn--secondary{background:transparent;color:var(--dmz-text-primary);border:1px solid var(--dmz-border)}
.dmz-btn--secondary:hover{background:var(--dmz-bg-tertiary);border-color:var(--dmz-text-tertiary)}
.dmz-btn--ghost{background:transparent;color:var(--dmz-text-secondary)}
.dmz-btn--ghost:hover{background:var(--dmz-bg-tertiary);color:var(--dmz-text-primary)}
.dmz-btn--icon{width:36px;height:36px;padding:0;border-radius:var(--dmz-radius-sm);background:transparent;color:var(--dmz-text-tertiary)}
.dmz-btn--icon:hover{background:var(--dmz-bg-tertiary);color:var(--dmz-text-primary)}
.dmz-btn--icon svg{width:18px;height:18px}
.dmz-btn--accent-soft{background:var(--dmz-accent-soft);color:var(--dmz-text-accent)}
.dmz-btn--accent-soft:hover{background:var(--dmz-accent-medium)}
.dmz-btn--danger{background:rgba(250,82,82,0.1);color:var(--dmz-danger)}
.dmz-btn--danger:hover{background:rgba(250,82,82,0.2)}
.dmz-btn--close{width:30px;height:30px;padding:0;border-radius:50%;background:transparent;color:var(--dmz-text-tertiary)}
.dmz-btn--close:hover{background:var(--dmz-bg-tertiary);color:var(--dmz-text-primary)}
.dmz-btn--sm{padding:6px 12px;font-size:12px}.dmz-btn--sm svg{width:14px;height:14px}
.dmz-btn--xs{padding:4px 8px;font-size:11px}.dmz-btn--xs svg{width:12px;height:12px}
.dmz-btn:disabled{opacity:0.4;pointer-events:none}
.dmz-btn--link{background:none;padding:0;color:var(--dmz-text-accent);font-weight:500}
.dmz-btn--link:hover{text-decoration:underline}

.dmz-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:12px;font-weight:600;border-radius:100px;white-space:nowrap;line-height:1.5}
.dmz-badge--dot::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dmz-badge--success{background:rgba(18,184,134,0.12);color:#12B886}.dmz-badge--success.dmz-badge--dot::before{background:#12B886}
.dmz-badge--warning{background:rgba(250,176,5,0.12);color:#FAB005}.dmz-badge--warning.dmz-badge--dot::before{background:#FAB005}
.dmz-badge--danger{background:rgba(250,82,82,0.12);color:#FA5252}.dmz-badge--danger.dmz-badge--dot::before{background:#FA5252}
.dmz-badge--info{background:rgba(151,117,250,0.12);color:#9775FA}.dmz-badge--info.dmz-badge--dot::before{background:#9775FA}
.dmz-badge--neutral{background:var(--dmz-bg-tertiary);color:var(--dmz-text-secondary)}.dmz-badge--neutral.dmz-badge--dot::before{background:var(--dmz-text-tertiary)}
.dmz-badge--muted{background:var(--dmz-bg-tertiary);color:var(--dmz-text-tertiary);opacity:0.8}.dmz-badge--muted.dmz-badge--dot::before{background:var(--dmz-text-tertiary)}
.dmz-badge--accent{background:var(--dmz-accent-soft);color:var(--dmz-text-accent)}.dmz-badge--accent.dmz-badge--dot::before{background:var(--dmz-accent)}
.dmz-badge--secondary{background:var(--dmz-bg-tertiary);color:var(--dmz-text-tertiary)}.dmz-badge--secondary.dmz-badge--dot::before{background:var(--dmz-text-tertiary)}
.dmz-badge--primary{background:var(--dmz-accent-soft);color:var(--dmz-text-accent)}.dmz-badge--primary.dmz-badge--dot::before{background:var(--dmz-accent)}
.dmz-badge--outline{background:transparent!important;border:1px solid currentColor}

/* Chip — clickable cluster used in Tasks summary card. Groups a badge
 * with a count, renders as a single button-like element. Reusable for
 * future summary-style navigation chips. */
.dmz-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--dmz-bg-tertiary);border:1px solid var(--dmz-border);border-radius:100px;cursor:pointer;transition:background-color var(--dmz-transition),border-color var(--dmz-transition);color:var(--dmz-text-secondary);font:inherit}
.dmz-chip:hover{background:var(--dmz-bg-hover);border-color:var(--dmz-accent)}

/* Chip toggle — click-to-toggle filter pill. Used in the Tasks tab
 * status filter (Phase 3a.2). Off state is muted; on state uses the
 * accent color to match selected-state conventions elsewhere. */
.dmz-chip-toggle{display:inline-flex;align-items:center;padding:5px 11px;background:var(--dmz-bg-tertiary);border:1px solid var(--dmz-border);border-radius:100px;cursor:pointer;transition:background-color var(--dmz-transition),border-color var(--dmz-transition),color var(--dmz-transition);color:var(--dmz-text-secondary);font:inherit;font-size:12px;line-height:1.4;user-select:none}
.dmz-chip-toggle:hover{border-color:var(--dmz-accent);color:var(--dmz-text-primary)}
.dmz-chip-toggle--on{background:var(--dmz-accent-soft);border-color:var(--dmz-accent);color:var(--dmz-text-accent);font-weight:600}
.dmz-chip-toggle:focus-visible{outline:2px solid var(--dmz-accent);outline-offset:2px}

.dmz-input{width:100%;padding:9px 14px;background:var(--dmz-bg-tertiary);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-sm);color:var(--dmz-text-primary);font-size:13px;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition);outline:none}
.dmz-input:focus{border-color:var(--dmz-accent);box-shadow:var(--dmz-shadow-glow)}
.dmz-input::placeholder{color:var(--dmz-text-tertiary)}
.dmz-input--search{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}

/* Input error state — used by the reviewer-required flash in task edit
 * modal (alpha 3a.2.5.2). Red border with subtle glow. Consumer toggles
 * the class, listens for first change event, removes it on interaction. */
.dmz-input--error{border-color:var(--dmz-danger) !important;box-shadow:0 0 0 3px rgba(239,68,68,0.15) !important;animation:dmzInputErrorPulse 0.4s ease-out}
@keyframes dmzInputErrorPulse{0%{transform:scale(1)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
textarea.dmz-input{resize:vertical;min-height:80px}
select.dmz-input{appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 10px) center;cursor:pointer}
.dmz-label{display:block;font-size:13px;font-weight:500;color:var(--dmz-text-secondary);margin-bottom:6px}
.dmz-field{margin-bottom:18px}
.dmz-field__hint{font-size:11px;color:var(--dmz-text-tertiary);margin-top:4px}
.dmz-field__row{display:grid;gap:14px}
.dmz-field__row--2{grid-template-columns:1fr 1fr}
.dmz-field__row--3{grid-template-columns:1fr 1fr 1fr}
.dmz-field__row--4{grid-template-columns:1fr 1fr 1fr 1fr}

.dmz-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dmz-text-secondary);line-height:1.4}
.dmz-checkbox:hover{color:var(--dmz-text-primary)}
.dmz-checkbox input[type="checkbox"]{width:16px;height:16px;accent-color:var(--dmz-accent);cursor:pointer;flex-shrink:0;margin:0}
.dmz-checkbox span{user-select:none}

.dmz-check{display:inline-flex;align-items:center;cursor:pointer}
.dmz-check input{position:absolute;opacity:0;width:0;height:0}
.dmz-check__box{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--dmz-border);border-radius:4px;background:var(--dmz-bg-tertiary);color:transparent;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition);flex-shrink:0}
.dmz-check:hover .dmz-check__box{border-color:var(--dmz-accent)}
.dmz-check input:checked+.dmz-check__box{background:var(--dmz-accent);border-color:var(--dmz-accent);color:#000}
.dmz-check input:focus-visible+.dmz-check__box{box-shadow:var(--dmz-shadow-glow)}

.dmz-toggle{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}

.dmz-table{width:100%;border-collapse:collapse}
.dmz-table th{padding:10px 14px;text-align:left;font-size:12px;font-weight:600;color:var(--dmz-text-tertiary);text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--dmz-border);white-space:nowrap}
.dmz-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--dmz-border);vertical-align:middle}
.dmz-table tbody tr{transition:background var(--dmz-transition)}
.dmz-table tbody tr:hover{background:var(--dmz-bg-tertiary)}
.dmz-table tbody tr:last-child td{border-bottom:none}
.dmz-table__col--action{width:1%;white-space:nowrap;text-align:right}
.dmz-table__row--clickable{cursor:pointer}
.dmz-table__th--sortable{cursor:pointer;user-select:none}
.dmz-table__col--checkbox{width:32px;padding-left:16px!important;padding-right:0!important}
.dmz-table--compact th{padding:6px 10px}
.dmz-table--compact td{padding:6px 10px;font-size:12px}
.dmz-metric{position:relative;background:var(--dmz-bg-secondary);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-lg);padding:20px;overflow:hidden;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition)}
.dmz-metric:hover{border-color:var(--dmz-text-tertiary)}
.dmz-metric__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dmz-metric__glow{position:absolute;top:-30px;right:-30px;width:80px;height:80px;border-radius:50%;opacity:0.07;pointer-events:none}
.dmz-metric__icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--dmz-radius-md)}
.dmz-metric__icon svg{width:20px;height:20px}
.dmz-metric__value{font-family:var(--dmz-font-heading);font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1;margin-bottom:8px}
.dmz-metric__trend-row{display:flex;align-items:center;gap:8px}
.dmz-metric__trend{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 7px;border-radius:100px}
.dmz-metric__trend--up{background:rgba(18,184,134,0.12);color:#12B886}
.dmz-metric__trend--down{background:rgba(250,82,82,0.12);color:#FA5252}

.dmz-progress{height:6px;background:var(--dmz-bg-tertiary);border-radius:100px;overflow:hidden}
.dmz-progress__fill{height:100%;border-radius:100px;transition:width 0.8s ease}

.dmz-pagination{display:flex;align-items:center;gap:4px}
.dmz-pagination__btn{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border-radius:var(--dmz-radius-sm);color:var(--dmz-text-secondary);transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition);cursor:pointer;border:none;background:transparent;padding:0 8px}
.dmz-pagination__btn:hover{background:var(--dmz-bg-tertiary);color:var(--dmz-text-primary)}
.dmz-pagination__btn--active{background:var(--dmz-accent-soft);color:var(--dmz-text-accent);font-weight:600}
.dmz-pagination__btn:disabled{opacity:0.3;pointer-events:none}

.dmz-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;text-transform:uppercase;flex-shrink:0;color:#fff;font-size:12px}
.dmz-avatar--sm{width:28px;height:28px;font-size:10px}
.dmz-avatar--md{width:36px;height:36px;font-size:12px}
.dmz-avatar--lg{width:44px;height:44px;font-size:14px}

.dmz-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--dmz-bg-elevated);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-md);box-shadow:var(--dmz-shadow-md);padding:6px;z-index:1000;min-width:180px;animation:dmz-slideDown 0.15s ease}
.dmz-dropdown--w-210{min-width:210px}
.dmz-dropdown__section{padding:6px 10px;font-size:11px;font-weight:600;color:var(--dmz-text-tertiary);text-transform:uppercase;letter-spacing:0.05em}
.dmz-dropdown__info{padding:10px 12px;border-bottom:1px solid var(--dmz-border);margin-bottom:4px;overflow:hidden}
.dmz-dropdown__info .dmz-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dmz-dropdown__item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:var(--dmz-text-secondary);border-radius:var(--dmz-radius-sm);cursor:pointer;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition);width:100%;text-align:left;border:none;background:none}
.dmz-dropdown__item:hover{background:var(--dmz-bg-tertiary);color:var(--dmz-text-primary)}
.dmz-dropdown__item svg{width:16px;height:16px;flex-shrink:0}
.dmz-dropdown__item--danger{color:var(--dmz-danger)}
.dmz-dropdown__item--danger:hover{background:rgba(250,82,82,0.1)}
.dmz-dropdown__divider{height:1px;background:var(--dmz-border);margin:4px 0}

.dmz-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.dmz-empty__icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--dmz-bg-tertiary);border-radius:50%;margin-bottom:18px;color:var(--dmz-text-tertiary)}
.dmz-empty__icon svg{width:28px;height:28px}

.dmz-toast{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--dmz-bg-elevated);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-md);box-shadow:var(--dmz-shadow-lg);font-size:13px;font-weight:500;z-index:10000;opacity:0;transform:translateY(14px);transition:opacity 0.25s ease,transform 0.25s ease}
.dmz-toast svg{width:18px;height:18px;flex-shrink:0}
.dmz-toast--success{border-color:rgba(18,184,134,0.3)}.dmz-toast--success svg{color:var(--dmz-success)}
.dmz-toast--error{border-color:rgba(250,82,82,0.3)}.dmz-toast--error svg{color:var(--dmz-danger)}
.dmz-toast--info{border-color:rgba(59,130,246,0.3)}.dmz-toast--info svg{color:#3b82f6}
.dmz-toast--warning{border-color:rgba(245,158,11,0.3)}.dmz-toast--warning svg{color:#f59e0b}

.dmz-chart-wrap{position:relative;width:100%;height:280px}
.dmz-chart-wrap canvas{width:100%!important;height:100%!important}
.dmz-chart-wrap--sm{height:200px}.dmz-chart-wrap--sm canvas{height:200px!important}
.dmz-legend{display:flex;flex-direction:column;gap:4px}
.dmz-legend__item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dmz-text-secondary);cursor:pointer;transition:opacity var(--dmz-transition)}
.dmz-legend__item--faded{opacity:0.35}
.dmz-legend__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dmz-sparkline{width:80px;height:32px;position:absolute;bottom:12px;right:16px;opacity:0.6}

@keyframes dmz-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes dmz-fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes dmz-modalIn{from{opacity:0;transform:translate(-50%,-50%) translateY(14px)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes dmz-slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dmz-slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes dmz-spin{to{transform:rotate(360deg)}}
@keyframes dmz-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.dmz-animate-in{opacity:0;transform:translateY(14px);transition:opacity 0.4s ease,transform 0.4s ease}
.dmz-animate-in.dmz-visible{opacity:1;transform:translateY(0)}

.dmz-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px}
.dmz-loading__spinner{width:32px;height:32px;border:3px solid var(--dmz-border);border-top-color:var(--dmz-accent);border-radius:50%;animation:dmz-spin 0.7s linear infinite}
.dmz-loading__text{font-size:13px;color:var(--dmz-text-tertiary)}
.dmz-skeleton{background:var(--dmz-bg-tertiary);border-radius:var(--dmz-radius-sm);animation:dmz-pulse 1.5s ease infinite}

.dmz-show-tablet{display:none !important}
.dmz-show-mobile{display:none !important}
@media(max-width:1080px){.dmz-show-tablet{display:flex !important}.dmz-hide-tablet{display:none !important}}
@media(max-width:1080px){.dmz-input,select.dmz-input,textarea.dmz-input,.dmz-filter-select,.dmz-stock-input,.dmz-date-range input[type="date"]{font-size:16px}}
@media(max-width:640px){.dmz-show-mobile{display:flex !important}.dmz-hide-mobile{display:none !important}.dmz-field__row--2,.dmz-field__row--3,.dmz-field__row--4{grid-template-columns:1fr}}

[dir="rtl"]{--dmz-font-body:'Noto Kufi Arabic','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;--dmz-font-heading:'Noto Kufi Arabic','Outfit',-apple-system,BlinkMacSystemFont,sans-serif}
/* Alpha 10.37 — direct Arabic font-family override for headings + body.
 *
 * The CSS-variable approach above SHOULD work (the var is overridden for
 * [dir="rtl"], and body/headings reference the var). But real-world
 * testing (Bengal Live portal, alpha 10.36) showed Arabic body text
 * still rendering in iOS system Arabic instead of Noto Kufi.
 *
 * Mirroring the landing pattern that's been proven working since alpha
 * 9 (`html[lang="ar"] body { font-family: 'Noto Kufi Arabic', ...; }`)
 * gives a rule with higher specificity than the var-based body rule and
 * doesn't depend on variable cascade through :root → [dir="rtl"]. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] .dmz-heading,
html[lang="ar"] .dmz-metric__value{
    font-family:'Noto Kufi Arabic',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
[dir="rtl"] .dmz-ml-auto{margin-left:0;margin-right:auto}
[dir="rtl"] .dmz-ml-2{margin-left:0;margin-right:6px}
[dir="rtl"] .dmz-ml-4{margin-left:0;margin-right:10px}
[dir="rtl"] .dmz-input--search{padding-left:14px;padding-right:38px;background-position:calc(100% - 12px) center}
[dir="rtl"] select.dmz-input{padding-right:14px;padding-left:32px;background-position:10px center}
[dir="rtl"] .dmz-table th{text-align:right}
[dir="rtl"] div.dmz-table__col--action{text-align:left}
[dir="rtl"] .dmz-toast{right:auto;left:24px}
[dir="rtl"] .dmz-dropdown{right:auto;left:0}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--dmz-border);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--dmz-text-tertiary)}

.dmz-divider{height:1px;background:var(--dmz-border);width:100%}
.dmz-link{color:var(--dmz-text-accent);cursor:pointer;transition:opacity var(--dmz-transition)}.dmz-link:hover{opacity:0.8}
.dmz-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:900;animation:dmz-fadeIn 0.15s ease;touch-action:none;overscroll-behavior:none}
.dmz-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--dmz-bg-secondary);border:1px solid var(--dmz-border);
  border-radius:var(--dmz-radius-xl);box-shadow:var(--dmz-shadow-lg);z-index:950;
  max-width:500px;width:calc(100% - 40px);
  animation:dmz-modalIn 0.2s ease;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
}
.dmz-modal__header{padding:20px 24px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.dmz-modal__body{
  padding:0 24px 20px;
  overflow-y:scroll;            
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;  
  flex:1;
  min-height:0;                 
}
.dmz-modal__footer{padding:14px 24px;border-top:1px solid var(--dmz-border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
.dmz-modal--lg{max-width:680px}

@media(max-width:640px){
  .dmz-modal{
    top:auto;left:0;right:0;bottom:0;
    transform:none;
    width:100%;max-width:100%;
    border-radius:var(--dmz-radius-xl) var(--dmz-radius-xl) 0 0;
    
    max-height:92svh;
    max-height:92dvh;           
    max-height:92vh;            
    animation:dmz-modalUp 0.25s cubic-bezier(0.32,0.72,0,1);
  }
  .dmz-modal__body{
    padding:0 16px 16px;
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    
    touch-action:pan-y;
  }
  .dmz-modal__header{padding:16px 16px 12px}
  .dmz-modal__footer{
    padding:10px 16px;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  
  .dmz-modal::before{
    content:'';display:block;
    width:36px;height:4px;border-radius:2px;
    background:var(--dmz-border);
    margin:10px auto -6px;
    flex-shrink:0;
  }
  @keyframes dmz-modalUp{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
}

.dmz-dropdown--visible,.dmz-dropdown--open{display:block!important}

.dmz-toast--visible{opacity:1;transform:translateY(0)}

.dmz-badge--sm{font-size:10px;padding:1px 6px}

.dmz-btn--active{background:var(--dmz-accent)!important;color:#000!important;border-color:var(--dmz-accent)!important}
.dmz-btn--icon--danger{color:var(--dmz-danger)}.dmz-btn--icon--danger:hover{background:rgba(250,82,82,0.1)}
.dmz-btn--success{background:var(--dmz-success);color:#fff;border-color:var(--dmz-success)}.dmz-btn--success:hover{opacity:0.9}
.dmz-btn--info{background:rgba(59,130,246,0.1);color:#3b82f6;border-color:rgba(59,130,246,0.2)}.dmz-btn--info:hover{background:rgba(59,130,246,0.2)}

.dmz-btn--primary.dmz-btn--danger{background:var(--dmz-danger);border-color:var(--dmz-danger);color:#fff}
.dmz-btn--primary.dmz-btn--danger:hover{opacity:0.9;transform:none;box-shadow:none}

.dmz-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:1080px){.dmz-grid-2{grid-template-columns:1fr}}
.dmz-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dmz-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dmz-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.dmz-grid-4,.dmz-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.dmz-grid-3,.dmz-grid-4,.dmz-grid-5{grid-template-columns:repeat(2,1fr)}}



.dmz-switch{position:relative;display:inline-flex;width:36px;height:20px;flex-shrink:0}
.dmz-switch input{position:absolute;opacity:0;width:0;height:0}
.dmz-switch__slider{position:absolute;inset:0;background:var(--dmz-bg-tertiary);border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-full);transition:color 0.2s ease,background-color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease,transform 0.2s ease;cursor:pointer}
.dmz-switch__slider::before{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform 0.2s ease;box-shadow:0 1px 2px rgba(0,0,0,0.15)}
.dmz-switch input:checked+.dmz-switch__slider{background:var(--dmz-accent);border-color:var(--dmz-accent)}
.dmz-switch input:checked+.dmz-switch__slider::before{transform:translateX(16px)}
[dir="rtl"] .dmz-switch__slider::before{left:auto;right:2px}
[dir="rtl"] .dmz-switch input:checked+.dmz-switch__slider::before{transform:translateX(-16px)}

.dmz-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:24px}
.dmz-detail-grid__main{min-width:0}
.dmz-detail-grid__side{min-width:0}
@media(max-width:1080px){.dmz-detail-grid{grid-template-columns:1fr}.dmz-detail-grid__side{order:-1}}

.dmz-txn-detail{display:flex;flex-direction:column;gap:0}
.dmz-txn-detail__row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--dmz-border)}
.dmz-txn-detail__row:last-child{border-bottom:none}
.dmz-txn-detail__label{font-size:13px;color:var(--dmz-text-secondary);min-width:120px;flex-shrink:0}
.dmz-txn-detail__value{font-size:13px;color:var(--dmz-text-primary);text-align:end;word-break:break-all}
.dmz-code--inline{font-family:monospace;font-size:12px;background:var(--dmz-bg-base);border:1px solid var(--dmz-border);border-radius:4px;padding:2px 6px}

.dmz-detail-panel{display:grid;grid-template-columns:1fr 320px;gap:24px}
@media(max-width:1080px){.dmz-detail-panel{grid-template-columns:1fr}}

.dmz-totals-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}

.dmz-info-row{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--dmz-text-secondary)}

.dmz-detail-row{padding:10px 0;border-bottom:1px solid var(--dmz-border)}
.dmz-detail-row:last-child{border-bottom:none}
.dmz-detail-row__label{font-size:12px;font-weight:600;color:var(--dmz-text-tertiary);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:4px}
.dmz-detail-row__value{font-size:13px;color:var(--dmz-text-primary)}

.dmz-filter-bar__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.dmz-filter-select{width:auto;min-width:130px;font-size:12px;padding:7px 30px 7px 10px}

.dmz-input-wrap{position:relative;display:flex;align-items:center}
.dmz-input-wrap svg{position:absolute;left:12px;color:var(--dmz-text-tertiary);pointer-events:none}
.dmz-input-wrap .dmz-input{padding-left:38px}
.dmz-input-wrap--search{max-width:280px;width:100%}

.dmz-product-thumb{width:40px;height:40px;border-radius:var(--dmz-radius-sm);background:var(--dmz-bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--dmz-text-tertiary);flex-shrink:0;overflow:hidden}

.dmz-stars{display:flex;gap:1px}
.dmz-star{color:var(--dmz-text-tertiary)}
.dmz-star--filled{color:#FAB005}
.dmz-star-btn{background:none;border:none;color:var(--dmz-text-tertiary);cursor:pointer;padding:2px}
.dmz-star-btn--active{color:#FAB005}

.dmz-card--banner{background:linear-gradient(135deg,var(--dmz-accent-light),var(--dmz-accent-faint));border-color:var(--dmz-accent-soft)}
.dmz-banner__content{max-width:600px}
.dmz-card--info{border-color:var(--dmz-info);background:rgba(151,117,250,0.05)}
.dmz-card--danger{border-color:var(--dmz-danger);background:rgba(250,82,82,0.05)}

.dmz-donut-layout{display:flex;align-items:center;gap:24px}
.dmz-chart-wrap--donut{width:180px;height:180px;flex-shrink:0}
.dmz-donut-legend{flex:1;display:flex;flex-direction:column;gap:8px}
@media(max-width:640px){.dmz-donut-layout{flex-direction:column}.dmz-chart-wrap--donut{width:140px;height:140px}}

.dmz-form-section{display:block;max-width:700px;width:100%}
.dmz-form--narrow{max-width:500px}
.dmz-card__body--flush{padding:0}
.dmz-sort-icon{display:inline-flex;vertical-align:middle;margin-left:4px;opacity:0.4}
.dmz-sort-icon--active{opacity:1}
.dmz-creative-banner{padding:12px 12px 0}
.dmz-creative-banner__img{width:100%;max-height:160px;object-fit:cover;border-radius:6px}
.dmz-form-group{margin-bottom:20px}
.dmz-form-group .dmz-label{display:block;font-size:12px;font-weight:600;color:var(--dmz-text-secondary);margin-bottom:6px}
.dmz-form-row{display:flex;gap:16px}
.dmz-form-row .dmz-form-group{flex:1;margin-bottom:16px}
.dmz-form-group--half{flex:0 0 calc(50% - 8px)!important}
.dmz-form-group--third{flex:0 0 calc(33.33% - 11px)!important}
.dmz-form-group--quarter{flex:0 0 calc(25% - 12px)!important}
@media(max-width:640px){.dmz-form-row{flex-direction:column}.dmz-form-group--half,.dmz-form-group--third,.dmz-form-group--quarter{flex:1!important}.dmz-form-section{max-width:100%}}

.dmz-upload-zone{border:2px dashed var(--dmz-border-light);border-radius:var(--dmz-radius-lg);padding:40px 20px;text-align:center;cursor:pointer;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition)}
.dmz-upload-zone:hover{border-color:var(--dmz-accent);background:var(--dmz-accent-faint)}
.dmz-upload-zone--dragover{border-color:var(--dmz-accent)!important;background:var(--dmz-accent-faint)!important;box-shadow:var(--dmz-shadow-glow)}
.dmz-upload-zone__content{display:flex;flex-direction:column;align-items:center;color:var(--dmz-text-tertiary)}
.dmz-upload-zone--full{padding:32px 20px}
.dmz-upload-zone--sm{padding:20px;display:inline-flex;min-width:120px}
.dmz-upload-zone--sm .dmz-upload-zone__content{flex-direction:row;gap:8px}

.dmz-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
.dmz-gallery-item{position:relative;aspect-ratio:1;border-radius:var(--dmz-radius-sm);overflow:hidden;border:1px solid var(--dmz-border)}
.dmz-gallery-item__img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--dmz-bg-tertiary);color:var(--dmz-text-tertiary)}
.dmz-gallery-item__remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dmz-transition)}
.dmz-gallery-item:hover .dmz-gallery-item__remove{opacity:1}
.dmz-gallery-item--add{border-style:dashed;display:flex;align-items:center;justify-content:center;color:var(--dmz-text-tertiary);cursor:pointer}
.dmz-gallery-item--add:hover{border-color:var(--dmz-accent);color:var(--dmz-accent)}

.dmz-attr-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--dmz-border)}
.dmz-attr-row:last-child{border-bottom:none}
.dmz-variation-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--dmz-border)}
.dmz-variation-row:last-child{border-bottom:none}

.dmz-media-card{border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-lg);overflow:hidden;cursor:pointer;transition:color var(--dmz-transition),background-color var(--dmz-transition),border-color var(--dmz-transition),box-shadow var(--dmz-transition),opacity var(--dmz-transition),transform var(--dmz-transition)}
.dmz-media-card:hover{border-color:var(--dmz-accent);box-shadow:var(--dmz-shadow-sm)}
.dmz-media-card--selected{outline:2px solid var(--dmz-accent);outline-offset:-2px}
.dmz-media-card__img{aspect-ratio:1;background:var(--dmz-bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--dmz-text-tertiary)}
.dmz-media-card__info{padding:10px 12px;border-top:1px solid var(--dmz-border)}
.dmz-media-thumb{width:32px;height:32px;border-radius:var(--dmz-radius-sm);background:var(--dmz-bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--dmz-text-tertiary)}

.dmz-table--nested{margin:0}.dmz-table--nested thead th{font-size:11px;padding:8px 12px}
.dmz-table--sm thead th{font-size:11px;padding:6px 10px}.dmz-table--sm td{padding:6px 10px;font-size:12px}
.dmz-table__col--check{width:40px}

div.dmz-table__row{display:flex;align-items:center;padding:0;border-bottom:1px solid var(--dmz-border);cursor:pointer;transition:background var(--dmz-transition)}
div.dmz-table__row:last-child{border-bottom:none}
div.dmz-table__row:hover{background:var(--dmz-bg-tertiary)}
div.dmz-table__row--header{cursor:default;border-bottom:1px solid var(--dmz-border)}
div.dmz-table__row--header:hover{background:transparent}
div.dmz-table__row--header .dmz-table__col{font-size:11px;font-weight:600;color:var(--dmz-text-tertiary);text-transform:uppercase;letter-spacing:0.04em;padding-top:10px;padding-bottom:10px}
div.dmz-table__col{flex:1;padding:12px 14px;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis}
div.dmz-table__col--action{flex:0 0 auto!important;text-align:right;white-space:nowrap}

.dmz-table__row{cursor:pointer;transition:background var(--dmz-transition)}
.dmz-table__row:hover{background:var(--dmz-bg-tertiary)}
.dmz-table__row--selected{background:var(--dmz-accent-subtle)!important}
@media(max-width:640px){div.dmz-table__row{flex-wrap:wrap}div.dmz-table__col{padding:8px 10px;font-size:12px}}

.dmz-avatar--gradient{background:hsl(var(--avatar-hue,30),55%,45%);color:#fff}

.dmz-mt-1{margin-top:4px}
.dmz-mb-2{margin-bottom:8px}
.dmz-mt-8{margin-top:32px}
.dmz-ml-3{margin-left:8px}

.dmz-text--normal{font-weight:400}
.dmz-text--warning{color:var(--dmz-warning)}
.dmz-text--uppercase{text-transform:uppercase}

.dmz-opacity-50{opacity:0.5}.dmz-opacity-60{opacity:0.6}.dmz-opacity-70{opacity:0.7}.dmz-opacity-80{opacity:0.8}

.dmz-border-t{border-top:1px solid var(--dmz-border)}
.dmz-border-b{border-bottom:1px solid var(--dmz-border)}

.dmz-pagination__btn--disabled{opacity:0.35;pointer-events:none}

.dmz-bulk-action{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--dmz-bg-tertiary);border-radius:var(--dmz-radius-md);margin-bottom:16px}
.dmz-bulk-action .dmz-text--sm{white-space:nowrap}

.dmz-address-block{font-size:13px;color:var(--dmz-text-secondary);line-height:1.6}
.dmz-address-block strong{color:var(--dmz-text-primary);font-weight:600}

.dmz-file-preview{width:100%;aspect-ratio:1;background:var(--dmz-bg-tertiary);border-radius:var(--dmz-radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px}
.dmz-file-preview img{width:100%;height:100%;object-fit:cover}

.dmz-tabs{display:flex;gap:4px;background:var(--dmz-bg-tertiary);border-radius:var(--dmz-radius-md);padding:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dmz-tabs::-webkit-scrollbar{display:none}
.dmz-tab{padding:8px 16px;border-radius:var(--dmz-radius-sm);border:none;background:transparent;color:var(--dmz-text-secondary);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color 0.15s ease,background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,opacity 0.15s ease,transform 0.15s ease;white-space:nowrap;flex-shrink:0}
.dmz-tab:hover{background:var(--dmz-bg-secondary);color:var(--dmz-text-primary)}
.dmz-tab--active{background:var(--dmz-bg-primary);color:var(--dmz-text-accent);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.dmz-tab svg{width:14px;height:14px;flex-shrink:0}
.dmz-tabs--vertical{flex-direction:column;border-radius:var(--dmz-radius-sm);padding:0;gap:2px;background:none;overflow-x:visible}
.dmz-tabs--vertical .dmz-tab{border-radius:var(--dmz-radius-sm);padding:6px 12px;font-size:12px}

.dmz-tabs--underline{background:none;padding:0;gap:16px;border-radius:0;border-bottom:1px solid var(--dmz-border)}
.dmz-tabs--underline .dmz-tab{border-radius:0;padding:8px 0;box-shadow:none;border-bottom:2px solid transparent;background:none}
.dmz-tabs--underline .dmz-tab:hover{background:none;color:var(--dmz-text-primary)}
.dmz-tabs--underline .dmz-tab--active{background:none;box-shadow:none;border-bottom-color:var(--dmz-accent);color:var(--dmz-text-accent)}
@media(max-width:640px){.dmz-tabs{flex-wrap:nowrap}.dmz-tabs--vertical{flex-direction:row;overflow-x:auto}}

.dmz-reply-box{border:1px solid var(--dmz-border);border-radius:var(--dmz-radius-md);padding:12px;background:var(--dmz-bg-tertiary)}
.dmz-reply-box textarea{width:100%;border:none;background:transparent;resize:vertical;min-height:60px;font:inherit;color:inherit}
.dmz-reply-box textarea:focus{outline:none}
.dmz-reply-box__footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}

.dmz-stock-input{width:70px;text-align:center;padding:4px 6px;font-size:13px}
.dmz-date-range{display:flex;align-items:center;gap:8px}
.dmz-date-range input[type="date"]{font-size:12px}

[dir="rtl"] .dmz-input-wrap svg{left:auto;right:12px}
[dir="rtl"] .dmz-input-wrap .dmz-input{padding-left:14px;padding-right:38px}
[dir="rtl"] .dmz-ml-3{margin-left:0;margin-right:8px}
[dir="rtl"] .dmz-flex-push{margin-left:0;margin-right:auto}
[dir="rtl"] .dmz-detail-panel{direction:rtl}
[dir="rtl"] .dmz-gallery-item__remove{right:auto;left:4px}
[dir="rtl"] .dmz-table__col--checkbox{padding-left:0!important;padding-right:16px!important}
[dir="rtl"] .dmz-dropdown__item{text-align:right}
[dir="rtl"] .dmz-sort-icon{margin-left:0;margin-right:4px}
[dir="rtl"] .dmz-text--right{text-align:left}

/* RTL: number/date inputs keep LTR direction internally — prevents the OS from
 * showing reversed digits in date pickers and lets number formatters behave
 * predictably. Visual layout is still RTL from the outer container. */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="datetime-local"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .dmz-code--inline,
[dir="rtl"] code,
[dir="rtl"] pre{direction:ltr;text-align:right;unicode-bidi:plaintext}

.dmz-callout{padding:10px 14px;border-radius:8px;border:1px solid transparent}
.dmz-callout--success{background:rgba(52,199,89,0.08);border-color:rgba(52,199,89,0.25);color:var(--dmz-success)}
.dmz-callout--warning{background:rgba(255,179,0,0.08);border-color:rgba(255,179,0,0.25);color:var(--dmz-warning)}
.dmz-callout--info{background:rgba(151,117,250,0.08);border-color:rgba(151,117,250,0.25);color:var(--dmz-info)}

/* ── Kanban board (Phase 3a.2.5.3) ──
 *
 * Horizontal-scroll layout. 6 columns × 280px + gap = ~1760px content
 * width. Scrolls sideways on anything narrower than desktop-wide.
 * Column bodies scroll independently so long columns don't push
 * everything else taller. Column headers stay sticky inside their
 * own body scroll containers (audit R1-H7).
 *
 * All spacing uses CSS vars so themes can tweak without touching JS.
 * --dmz-kanban-col-width is the single knob for column sizing. */

:root{
    --dmz-kanban-col-width: 280px;
    --dmz-kanban-col-gap: 14px;
    --dmz-kanban-col-body-max: 520px; /* col body scrolls past this */
}

.dmz-kanban{
    display:flex;
    gap:var(--dmz-kanban-col-gap);
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 4px 12px 4px; /* room for scrollbar + card shadows */
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
}

.dmz-kanban-col{
    flex:0 0 var(--dmz-kanban-col-width);
    max-width:var(--dmz-kanban-col-width);
    display:flex;
    flex-direction:column;
    background:var(--dmz-bg-secondary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-md);
    scroll-snap-align:start;
    max-height:var(--dmz-kanban-col-body-max);
}

.dmz-kanban-col__header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    background:var(--dmz-bg-secondary);
    border-bottom:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-md) var(--dmz-radius-md) 0 0;
}

.dmz-kanban-col__title{
    font-size:12px;
    font-weight:600;
    color:var(--dmz-text-secondary);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.dmz-kanban-col__count{
    font-size:11px;
    padding:2px 8px;
    border-radius:100px;
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-secondary);
    font-weight:600;
    min-width:20px;
    text-align:center;
}

.dmz-kanban-col__body{
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;
    flex:1 1 auto;
}

.dmz-kanban-col__empty{
    text-align:center;
    padding:16px 8px;
    border:1px dashed var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    color:var(--dmz-text-tertiary);
}

/* ── Kanban card ──
 *
 * Compact, consistent height to prevent column-reshuffle jitter when
 * scrolling / filtering. Title clamps to 2 lines. Meta row at bottom
 * shows assignee + optional reviewer. Priority indicator dot
 * top-right, urgent gets a red emphasis. */
.dmz-kanban-card{
    position:relative;
    padding:10px 12px;
    background:var(--dmz-bg-tertiary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    cursor:pointer;
    transition:border-color var(--dmz-transition),transform 0.15s ease,box-shadow var(--dmz-transition);
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:72px;
    color:var(--dmz-text-primary);
}
.dmz-kanban-card:hover{
    border-color:var(--dmz-accent);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.dmz-kanban-card:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:2px;
}
.dmz-kanban-card--muted{opacity:0.6}
.dmz-kanban-card--muted:hover{opacity:0.85}

.dmz-kanban-card__title{
    font-size:13px;
    line-height:1.35;
    font-weight:500;
    padding-right:16px; /* leave room for priority dot */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
}

.dmz-kanban-card__meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--dmz-text-secondary);
}

.dmz-kanban-card__assignee{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:160px;
}

.dmz-kanban-card__reviewer{
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:1px 6px;
    border-radius:100px;
    background:rgba(151,117,250,0.12);
    color:var(--dmz-info);
    font-size:10px;
    font-weight:500;
    max-width:120px;
    overflow:hidden;
}
.dmz-kanban-card__reviewer svg{flex-shrink:0}
.dmz-kanban-card__reviewer span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dmz-kanban-card__due{font-size:11px}

/* Priority indicator — dot top-right of card */
.dmz-kanban-card__prio{
    position:absolute;
    top:10px;
    right:10px;
    width:8px;
    height:8px;
    border-radius:100px;
}
.dmz-kanban-card__prio--low{background:var(--dmz-text-tertiary)}
.dmz-kanban-card__prio--medium{background:var(--dmz-info)}
.dmz-kanban-card__prio--high{background:var(--dmz-warning)}
.dmz-kanban-card__prio--urgent{
    background:var(--dmz-danger);
    box-shadow:0 0 0 2px rgba(239,68,68,0.25);
}

/* ── Drag-to-reorder states (Phase 3a.2.5 alpha 4) ── */

/* Card being dragged — visually faded to indicate it's in transit.
 * The browser draws a translucent drag image on top of the cursor
 * separately; this styling applies to the original slot in the DOM. */
.dmz-kanban-card--dragging{
    opacity:0.35;
    cursor:grabbing;
}

/* Per audit R2-C2: card with a pending server request. Drag is disabled,
 * shown with a subtle border pulse so user sees something is happening.
 * Click-to-edit is also suppressed (JS checks the class). */
.dmz-kanban-card--pending{
    opacity:0.7;
    cursor:wait;
    border-color:var(--dmz-accent) !important;
    box-shadow:var(--dmz-shadow-glow);
    pointer-events:none; /* prevents accidental re-clicks during request */
}

/* Column highlighted during drag-over. Subtle background shift — not
 * too loud since most hovers are over the source column anyway and we
 * don't want to distract. */
.dmz-kanban-col--drag-over{
    background:var(--dmz-bg-hover);
    transition:background-color var(--dmz-transition);
}
.dmz-kanban-col--drag-over .dmz-kanban-col__header{
    border-color:var(--dmz-accent);
}

/* Insertion indicator — thin accent-colored line between cards showing
 * where the dropped card will land. Replaces the visual gap that
 * drag-and-drop libraries typically create by shifting cards; cheaper
 * and simpler. */
.dmz-kanban-drop-indicator{
    height:3px;
    margin:3px 0;
    background:var(--dmz-accent);
    border-radius:2px;
    box-shadow:0 0 8px rgba(250,204,21,0.5);
    pointer-events:none;
    animation:dmzDropIndicatorIn 0.15s ease-out;
}
@keyframes dmzDropIndicatorIn{
    from{opacity:0;transform:scaleX(0.3)}
    to  {opacity:1;transform:scaleX(1)}
}

/* Grab cursor on idle cards — signals they're draggable */
.dmz-kanban-card{cursor:grab}
.dmz-kanban-card:active{cursor:grabbing}

/* ── Kanban move button (alpha 6 keyboard accessibility) ── */
.dmz-kanban-card__move-btn{
    position:absolute;
    top:8px;
    right:8px;
    width:22px;
    height:22px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--dmz-radius-sm);
    color:var(--dmz-text-tertiary);
    cursor:pointer;
    opacity:0;
    transition:opacity var(--dmz-transition),background-color var(--dmz-transition),color var(--dmz-transition),border-color var(--dmz-transition);
    z-index:2; /* above priority dot */
}
.dmz-kanban-card:hover .dmz-kanban-card__move-btn,
.dmz-kanban-card:focus-within .dmz-kanban-card__move-btn,
.dmz-kanban-card__move-btn:focus-visible{
    opacity:1;
}
.dmz-kanban-card__move-btn:hover{
    background:var(--dmz-bg-tertiary);
    border-color:var(--dmz-border);
    color:var(--dmz-text-primary);
}
.dmz-kanban-card__move-btn:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:1px;
}

/* Hide the priority dot when move button is active on hover so they
 * don't overlap visually (both sit at top-right). */
.dmz-kanban-card:hover .dmz-kanban-card__prio,
.dmz-kanban-card:focus-within .dmz-kanban-card__prio{
    opacity:0;
    transition:opacity 0.1s;
}

/* ── Move menu modal ── */
.dmz-kanban-move-menu{display:flex;flex-direction:column;gap:16px}
.dmz-kanban-move-menu__section{display:flex;flex-direction:column;gap:4px}
.dmz-kanban-move-menu__section-title{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--dmz-text-tertiary);
    margin:0 0 4px 0;
}
.dmz-kanban-move-menu__actions{display:flex;flex-direction:column;gap:4px}
.dmz-kanban-move-menu__item{
    width:100%;
    justify-content:flex-start;
    text-align:start;
}

/* ══════════════════════════════════════════════════════════════════
 * Phase 3a.2.6 alpha 2 — Subtasks
 * ══════════════════════════════════════════════════════════════════ */

/* Kanban card subtask progress indicator (R1-H10 color-coded states) */
.dmz-kanban-card__subtasks{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 6px 2px 4px;
    border-radius:var(--dmz-radius-pill);
    background:var(--dmz-bg-tertiary);
    font-size:10px;
    font-weight:600;
    color:var(--dmz-text-secondary);
    line-height:1;
}
.dmz-kanban-card__subtasks-svg{display:block;flex-shrink:0}
.dmz-kanban-card__subtasks-track{stroke:var(--dmz-border)}
.dmz-kanban-card__subtasks-arc{stroke:var(--dmz-accent);transition:stroke-dasharray var(--dmz-transition)}

.dmz-kanban-card__subtasks--done{color:var(--dmz-success)}
.dmz-kanban-card__subtasks--done .dmz-kanban-card__subtasks-arc{stroke:var(--dmz-success)}
.dmz-kanban-card__subtasks--mismatch{color:var(--dmz-warning)}
.dmz-kanban-card__subtasks--mismatch .dmz-kanban-card__subtasks-arc{stroke:var(--dmz-warning)}

/* ── Subtasks section in edit modal ── */

.dmz-subtasks-section{
    padding-top:16px;
    border-top:1px solid var(--dmz-border);
}
.dmz-subtasks-section__header{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px 0;
}
.dmz-subtasks-section__header>span:first-child{flex:1}
.dmz-subtasks-section__list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

/* Empty state inside list */
.dmz-subtask-empty{
    padding:12px;
    text-align:center;
    font-style:italic;
}

/* Subtask row in parent modal */
.dmz-subtask-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:var(--dmz-radius-sm);
    cursor:pointer;
    transition:background-color var(--dmz-transition),border-color var(--dmz-transition);
}
.dmz-subtask-row:hover{
    background:var(--dmz-bg-hover);
    border-color:var(--dmz-border);
}
.dmz-subtask-row:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:1px;
}

.dmz-subtask-row__status{
    flex-shrink:0;
    padding:2px 8px;
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-pill);
    background:var(--dmz-bg-tertiary);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.3px;
    cursor:pointer;
    min-width:72px;
    text-align:center;
    transition:background-color var(--dmz-transition),border-color var(--dmz-transition);
}
.dmz-subtask-row__status:not(:disabled):hover{
    background:var(--dmz-bg-secondary);
    border-color:var(--dmz-accent);
}
.dmz-subtask-row__status:disabled{
    cursor:not-allowed;
    opacity:0.8;
}
/* Status-specific coloring (matches status badge palette) */
.dmz-subtask-row__status--backlog{color:var(--dmz-text-tertiary)}
.dmz-subtask-row__status--todo{color:var(--dmz-text-secondary)}
.dmz-subtask-row__status--in_progress{color:var(--dmz-accent)}
.dmz-subtask-row__status--review{color:var(--dmz-info)}
.dmz-subtask-row__status--done{color:var(--dmz-success)}
.dmz-subtask-row__status--cancelled{color:var(--dmz-text-tertiary);text-decoration:line-through}

.dmz-subtask-row__title{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}
.dmz-subtask-row__assignee,
.dmz-subtask-row__due{flex-shrink:0}
.dmz-subtask-row__trash{
    flex-shrink:0;
    padding:4px;
    opacity:0;
    transition:opacity var(--dmz-transition);
    color:var(--dmz-text-tertiary);
    border:none;
    background:transparent;
    border-radius:var(--dmz-radius-sm);
    cursor:pointer;
}
.dmz-subtask-row:hover .dmz-subtask-row__trash,
.dmz-subtask-row:focus-within .dmz-subtask-row__trash{opacity:1}
.dmz-subtask-row__trash:hover{color:var(--dmz-danger);background:var(--dmz-bg-tertiary)}

/* Inline "+ Add subtask" form */
.dmz-subtask-add{margin-top:10px}
.dmz-subtask-add__form{
    display:flex;
    gap:6px;
    align-items:center;
}
.dmz-subtask-add__form>input{flex:1}

/* Parent breadcrumb above subtask modal form */
.dmz-subtask-breadcrumb{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    background:var(--dmz-bg-tertiary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    font-size:12px;
    color:var(--dmz-text-secondary);
}
.dmz-subtask-breadcrumb .dmz-btn--link{
    background:transparent;
    border:none;
    padding:0;
    color:var(--dmz-accent);
    cursor:pointer;
    font-size:inherit;
    font-weight:600;
}
.dmz-subtask-breadcrumb .dmz-btn--link:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════
 * Phase 3a.2.6 alpha 3 — List view subtask expansion
 * ══════════════════════════════════════════════════════════════════ */

/* Title cell with chevron; keep chevron + title on one flex line */
.dmz-task-title-cell{
    display:flex;
    align-items:center;
    gap:8px;
}

/* Chevron button on parent rows */
.dmz-task-chevron{
    flex-shrink:0;
    width:20px;
    height:20px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--dmz-radius-sm);
    color:var(--dmz-text-tertiary);
    cursor:pointer;
    transition:background-color var(--dmz-transition),color var(--dmz-transition),transform var(--dmz-transition);
}
.dmz-task-chevron:hover{
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-primary);
}
.dmz-task-chevron:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:1px;
}
.dmz-task-chevron--open{
    transform:rotate(180deg);
    color:var(--dmz-accent);
}

/* Placeholder to keep column alignment when row has no chevron */
.dmz-task-chevron-placeholder{
    display:inline-block;
    width:20px;
    height:20px;
    flex-shrink:0;
}

/* Subtask count badge next to parent title */
.dmz-subtask-count-badge{
    display:inline-block;
    padding:1px 6px;
    background:var(--dmz-bg-tertiary);
    border-radius:var(--dmz-radius-pill);
    font-weight:600;
    margin-inline-start:4px;
}

/* Parent row when expanded — subtle highlight + remove bottom border
 * so it visually connects to the subtask rows below */
.dmz-table__row--expanded td{
    background:var(--dmz-bg-secondary);
    border-bottom-color:transparent;
}

/* Indented subtask rows */
.dmz-task-subtask-row td{
    background:var(--dmz-bg-secondary);
    font-size:13px;
}
.dmz-task-subtask-row td:first-child{
    /* Visual tree: vertical hint line + indent */
    position:relative;
    padding-inline-start:20px;
}
.dmz-task-subtask-indent{
    display:inline-block;
    width:28px;
    height:1px;
    border-top:1px solid var(--dmz-border);
    margin-inline-end:8px;
    vertical-align:middle;
    flex-shrink:0;
}

/* Loading state when expanding a parent */
.dmz-task-subtask-loading td{
    background:var(--dmz-bg-secondary);
    padding:12px 16px;
}
.dmz-subtask-loading-cell{
    font-style:italic;
    text-align:center;
}

/* Trash-view subtask prefix (↳) */
.dmz-subtask-trash-prefix{
    display:inline-block;
    margin-inline-end:4px;
    font-weight:600;
    font-size:14px;
    color:var(--dmz-text-tertiary);
}

/* ══════════════════════════════════════════════════════════════════
 * Phase 3a.3 alpha 2 — Milestones section on project Overview
 * ══════════════════════════════════════════════════════════════════ */

.dmz-milestones-card{margin-bottom:16px}

/* Horizontal scrollable card strip */
.dmz-milestones-strip{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:4px; /* room for scrollbar */
    -webkit-overflow-scrolling:touch;
}
.dmz-milestones-strip::-webkit-scrollbar{height:6px}
.dmz-milestones-strip::-webkit-scrollbar-thumb{background:var(--dmz-border);border-radius:3px}

/* Individual milestone card */
.dmz-milestone-card{
    position:relative; /* v0.8.1 alpha 2 — anchor for absolute reorder buttons */
    flex:0 0 240px;
    min-width:240px;
    background:var(--dmz-bg-secondary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius);
    padding:14px;
    cursor:pointer;
    transition:background-color var(--dmz-transition),border-color var(--dmz-transition),transform var(--dmz-transition);
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dmz-milestone-card:hover{
    border-color:var(--dmz-accent);
    background:var(--dmz-bg-hover);
}
.dmz-milestone-card:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:1px;
}
.dmz-milestone-card--cancelled{opacity:0.6}

/* When reorder buttons are present, reserve space on the header's trailing
 * edge so the status pill + overdue badge don't overlap the buttons.
 * Uses :has() for a scoped rule — the padding only applies when reorder
 * controls exist. Graceful fallback: browsers without :has() just overlap
 * slightly (no functional breakage, only a cosmetic one in older Safari). */
.dmz-milestone-card:has([data-reorder-controls]) .dmz-milestone-card__header{
    padding-inline-end:54px; /* 22px button × 2 + 2px gap + 8px margin */
}

.dmz-milestone-card__header{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.dmz-milestone-card__status-pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:var(--dmz-radius-pill);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.3px;
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-secondary);
}
.dmz-milestone-card__status-pill--pending{color:var(--dmz-text-tertiary)}
.dmz-milestone-card__status-pill--in_progress{color:var(--dmz-accent);background:color-mix(in srgb, var(--dmz-accent) 15%, transparent)}
.dmz-milestone-card__status-pill--done{color:var(--dmz-success);background:color-mix(in srgb, var(--dmz-success) 15%, transparent)}
.dmz-milestone-card__status-pill--cancelled{color:var(--dmz-text-tertiary);text-decoration:line-through}

.dmz-milestone-card__overdue{
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:2px 6px;
    border-radius:var(--dmz-radius-pill);
    font-size:10px;
    font-weight:600;
    color:var(--dmz-warning);
    background:color-mix(in srgb, var(--dmz-warning) 15%, transparent);
}

.dmz-milestone-card__title{
    margin:0;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    color:var(--dmz-text-primary);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height:2.6em;
}

.dmz-milestone-card__progress{
    display:flex;
    align-items:center;
    gap:8px;
}
.dmz-milestone-card__progress--empty{
    padding:2px 0;
}
.dmz-milestone-card__progress-bar{
    flex:1;
    height:4px;
    background:var(--dmz-bg-tertiary);
    border-radius:2px;
    overflow:hidden;
}
.dmz-milestone-card__progress-fill{
    height:100%;
    background:var(--dmz-accent);
    transition:width var(--dmz-transition);
}
.dmz-milestone-card__progress--done .dmz-milestone-card__progress-fill{background:var(--dmz-success)}
.dmz-milestone-card__progress--mismatch .dmz-milestone-card__progress-fill{background:var(--dmz-warning)}
.dmz-milestone-card__progress-label{
    font-size:11px;
    font-weight:600;
    color:var(--dmz-text-secondary);
    flex-shrink:0;
    min-width:32px;
    text-align:end;
}

.dmz-milestone-card__dates{
    margin-top:auto;
    line-height:1.4;
}

/* Empty state when no milestones exist */
.dmz-empty-state--compact{
    padding:24px;
    text-align:center;
}
.dmz-empty-state--compact .dmz-empty-state__icon{
    color:var(--dmz-text-tertiary);
    margin-bottom:8px;
}
.dmz-empty-state--compact .dmz-empty-state__title{
    font-size:14px;
    font-weight:600;
    margin:0 0 4px 0;
}
.dmz-empty-state--compact .dmz-empty-state__desc{
    font-size:12px;
    color:var(--dmz-text-secondary);
    max-width:400px;
    margin:0 auto;
}

/* ── Phase 3a.3 alpha 4 — Milestone drag states ── */

/* Card being dragged: lower opacity + slight rotation for visual feedback */
.dmz-milestone-card--dragging{
    opacity:0.5;
    cursor:grabbing;
    transform:rotate(-1deg);
}

/* Drop target: blue accent left-border indicates "drop here" (the dragged
 * card will be inserted BEFORE this card). Uses ::before for a visual bar
 * that doesn't affect layout. */
.dmz-milestone-card--drop-target{
    position:relative;
}
.dmz-milestone-card--drop-target::before{
    content:'';
    position:absolute;
    top:-4px;
    inset-inline-start:-6px;
    width:3px;
    height:calc(100% + 8px);
    background:var(--dmz-accent);
    border-radius:2px;
    box-shadow:0 0 8px color-mix(in srgb, var(--dmz-accent) 50%, transparent);
}

/* Milestone card in draggable state gets grab cursor */
.dmz-milestone-card[draggable="true"]{cursor:grab}
.dmz-milestone-card[draggable="true"]:active{cursor:grabbing}

/* ── v0.8.1 alpha 3 — Inline milestone create in task modal ──
 *
 * The milestone <select> inside task modals is wrapped with a small "+"
 * button on its trailing edge for creating new milestones without leaving
 * the task modal. Flex layout so the select and button sit side-by-side. */
.dmz-milestone-field-wrap{
    display:flex;
    gap:6px;
    align-items:stretch;
}
.dmz-milestone-field-wrap > select{
    flex:1 1 auto;
    min-width:0; /* let the select shrink inside flex instead of overflowing */
}
.dmz-milestone-field-create{
    flex:0 0 auto;
    padding:0 10px;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ── v0.8.1 alpha 2 — Milestone reorder buttons ──
 *
 * Small ↑/↓ chevron buttons in the top-right corner of each milestone
 * card. Desktop: hidden by default, revealed on card hover/focus. Mobile
 * (≤640px): always visible since hover isn't available.
 *
 * Works alongside HTML5 drag (canDrag=true): buttons are an alternative
 * reorder mechanism for touch + keyboard users. Disabled state applies
 * to first card's ↑ and last card's ↓ to prevent no-op requests. */
.dmz-milestone-card__reorder{
    position:absolute;
    top:6px;
    inset-inline-end:6px;
    display:flex;
    flex-direction:column;
    gap:2px;
    z-index:2;
    opacity:0;
    transition:opacity var(--dmz-transition);
}
.dmz-milestone-card:hover .dmz-milestone-card__reorder,
.dmz-milestone-card:focus-within .dmz-milestone-card__reorder{
    opacity:1;
}
.dmz-milestone-card__reorder-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    background:var(--dmz-bg-primary);
    color:var(--dmz-text-secondary);
    cursor:pointer;
    transition:background-color var(--dmz-transition),color var(--dmz-transition),border-color var(--dmz-transition);
}
.dmz-milestone-card__reorder-btn:hover:not(:disabled){
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-primary);
    border-color:var(--dmz-accent);
}
.dmz-milestone-card__reorder-btn:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:1px;
    opacity:1;
}
.dmz-milestone-card__reorder-btn:disabled{
    opacity:0.3;
    cursor:not-allowed;
}
/* Mobile: always visible, slightly larger for touch target (aim for >=24px).
 * 26×26 hits the 44px-tap-recommended-area-via-touch-slop. */
@media(max-width:640px){
    .dmz-milestone-card__reorder{
        opacity:1;
    }
    .dmz-milestone-card__reorder-btn{
        width:26px;
        height:26px;
    }
    /* Reserve slightly more header space on mobile since buttons are larger. */
    .dmz-milestone-card:has([data-reorder-controls]) .dmz-milestone-card__header{
        padding-inline-end:62px; /* 26×2 + 2 + 8 */
    }
}

/* ── v0.8.1 — Milestone trash modal (3a.3 follow-up) ──
 *
 * Simple vertical list of trashed milestones inside the trash modal.
 * Each row shows title, metadata, deleted-at timestamp, and a restore
 * button on the trailing edge. Flex-row layout; wraps gracefully on
 * narrow viewports (mobile modal width). */
.dmz-trash-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dmz-trash-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-md);
    background:var(--dmz-bg-secondary);
    transition:border-color var(--dmz-transition);
}
.dmz-trash-row:hover{
    border-color:color-mix(in srgb, var(--dmz-border) 50%, var(--dmz-text-secondary));
}
.dmz-trash-row__main{
    flex:1 1 auto;
    min-width:0; /* allow text-overflow inside flex child */
}
.dmz-trash-row__title{
    font-size:14px;
    font-weight:600;
    color:var(--dmz-text-primary);
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.dmz-trash-row__meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px;
    font-size:12px;
    color:var(--dmz-text-secondary);
}
.dmz-trash-row__deleted-at{
    margin-top:4px;
    font-size:11px;
    color:var(--dmz-text-tertiary);
    font-style:italic;
}
/* Mobile: stack button under row content */
@media(max-width:480px){
    .dmz-trash-row{
        flex-direction:column;
        align-items:stretch;
    }
    .dmz-trash-row__main{
        width:100%;
    }
}

/* ── Phase 3a.3 alpha 6 — Task list Milestone column pill ── */

.dmz-task-milestone-pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:var(--dmz-radius-pill);
    font-size:11px;
    font-weight:500;
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-secondary);
    vertical-align:middle;
}

/* Status-based color variants (mirrors milestone card pills) */
.dmz-task-milestone-pill--pending{color:var(--dmz-text-tertiary)}
.dmz-task-milestone-pill--in_progress{
    color:var(--dmz-accent);
    background:color-mix(in srgb, var(--dmz-accent) 15%, transparent);
}
.dmz-task-milestone-pill--done{
    color:var(--dmz-success);
    background:color-mix(in srgb, var(--dmz-success) 15%, transparent);
}
.dmz-task-milestone-pill--cancelled{
    color:var(--dmz-text-tertiary);
    text-decoration:line-through;
}

/* Subtask inheritance — dim opacity signals the milestone came from parent */
.dmz-task-milestone-pill--inherited{
    opacity:0.55;
    font-style:italic;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Mobile responsive overrides (≤640px)
 * ═════════════════════════════════════════════════════════════════════════
 *
 * Desktop-first layouts break down on phones because fixed pixel widths
 * (min-width, flex-basis) tuned for wide viewports cause dead space,
 * word-breaks, and awkward wrapping on narrow screens. This block converts
 * the worst-offending patterns to mobile-appropriate layouts WITHOUT
 * touching desktop. Every rule is behind @media(max-width:640px).
 *
 * Scope:
 *   - Card headers: stack heading + hint vertically (fixes "Financials"
 *     word-break and similar)
 *   - Kanban boards: horizontal column scroll → vertical bucket stack
 *   - Empty kanban buckets: collapse to header-only strip via :has()
 *   - Milestones strip: horizontal scroll → vertical card stack
 *   - Project detail filter grid: every filter full-width for predictable
 *     rhythm
 *   - Project detail action row: status dropdown + delete button stack
 *
 * Rationale: see _plan_mobile_ui_pass.md for decision record.
 * ═════════════════════════════════════════════════════════════════════════ */

@media(max-width:640px){

    /* ── Card headers ──
     * Desktop has heading + hint side-by-side (flex row, space-between).
     * On narrow screens that squeezes the heading column narrow enough to
     * break words mid-character. Stack vertically with left alignment. */
    .dmz-card__header{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        padding:14px 16px;
    }

    /* ── Kanban: horizontal → vertical ──
     * Desktop: horizontal flex row of 280px columns the user scrolls.
     * Mobile: vertical stack where each status becomes a full-width row.
     * Drops the horizontal swipe but matches the mobile mental model
     * (vertical scroll is the default gesture). Also removes the 520px
     * nested-scroll cap on column body — nested scroll inside an already-
     * scrolling page is a mobile antipattern. */
    .dmz-kanban{
        flex-direction:column;
        overflow-x:hidden;
        overflow-y:visible;
        scroll-snap-type:none;
        padding:4px 0 12px 0;
    }
    .dmz-kanban-col{
        flex:1 1 auto;
        max-width:100%;
        max-height:none;
    }
    .dmz-kanban-col__body{
        max-height:none;
    }

    /* ── Empty kanban buckets: collapse ──
     * When a bucket has no tasks, collapse it to just the sticky header
     * (with the 0 count). Uses :has() which is broadly supported in
     * modern browsers (Safari 15.4+, Chrome 105+, Firefox 121+). Older
     * browsers fall back to full-height empty state — same behavior as
     * before this patch, so graceful degradation. */
    .dmz-kanban-col:has(.dmz-kanban-col__empty){
        max-height:42px;
        overflow:hidden;
    }
    .dmz-kanban-col:has(.dmz-kanban-col__empty) .dmz-kanban-col__body{
        display:none;
    }

    /* ── Milestones strip: horizontal → vertical ──
     * Same rationale as kanban. One milestone at 240px fixed width in a
     * ~332px content area leaves ~90px dead on the right. Vertical stack
     * with full-width cards eliminates that. */
    .dmz-milestones-strip{
        flex-direction:column;
        overflow-x:hidden;
        scroll-snap-type:none;
    }
    .dmz-milestone-card{
        flex:1 1 auto;
        min-width:0;
        max-width:100%;
        width:100%;
    }

    /* ── Project detail filter grid ──
     * Desktop uses inline min-width:180/200/140/160px on each filter label
     * which produces inconsistent wrapping on mobile (some full-width
     * stacked, some paired side-by-side). Override to make every filter
     * take its own row for predictable rhythm. The !important is required
     * to defeat the inline styles. */
    #dmz-pjd-tasks-filters > .dmz-label,
    #dmz-pjd-tasks-filters > label.dmz-label{
        min-width:0 !important;
        flex:1 1 100%;
    }
    /* Filter toolbar (List / Trash / + New task) — drop the ml-auto so it
     * flows with the rest of the filter content rather than pinning right. */
    #dmz-pjd-tasks-filters > .dmz-ml-auto{
        margin-left:0 !important;
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    /* ── Project detail action row (Status dropdown + Delete) ──
     * The inner flex row containing Status select and Delete button sits
     * to the right of the project title on desktop. On mobile it wraps
     * below the title but keeps horizontal layout, leaving dead space
     * between the narrow dropdown and the right-aligned Delete button.
     * Stack them vertically with each full-width. */
    .dmz-content-head > .dmz-flex{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }
    .dmz-content-head > .dmz-flex > *{
        width:100%;
    }
    .dmz-content-head > .dmz-flex .dmz-inline-select{
        display:flex;
        align-items:center;
        gap:8px;
    }
    .dmz-content-head > .dmz-flex .dmz-inline-select .dmz-input{
        flex:1 1 auto;
    }
    .dmz-content-head > .dmz-flex .dmz-btn{
        justify-content:center;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * Timeline view (Phase 3a.4)
 * ═════════════════════════════════════════════════════════════════════════
 *
 * Horizontal scrolling visualization of milestones + tasks against a date
 * axis. Layout uses CSS logical properties (inset-inline-start) so RTL
 * automatically mirrors the axis. Rendered entirely in HTML/DOM (no SVG)
 * for accessibility and native click targets.
 *
 * ── Structure ──
 *   .dmz-timeline
 *     ├─ .dmz-timeline__left-gutter   (fixed-width milestone label column)
 *     └─ .dmz-timeline__viewport      (horizontally scrolling)
 *           └─ .dmz-timeline__inner   (width = total days × px-per-day)
 *                 ├─ .dmz-timeline__header
 *                 │     ├─ .dmz-timeline__months
 *                 │     └─ .dmz-timeline__days
 *                 └─ .dmz-timeline__body
 *                       ├─ .dmz-timeline__today-line
 *                       ├─ .dmz-timeline-row-label (absolute, in gutter)
 *                       └─ .dmz-timeline-bar (one per milestone)
 * ═════════════════════════════════════════════════════════════════════════ */

.dmz-timeline-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--dmz-border);
}

.dmz-timeline-zoom{
    display:inline-flex;
    background:var(--dmz-bg-tertiary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    padding:2px;
    gap:2px;
}
.dmz-timeline-zoom__btn{
    padding:4px 10px;
    font-size:12px;
    font-weight:500;
    color:var(--dmz-text-secondary);
    background:transparent;
    border:none;
    border-radius:calc(var(--dmz-radius-sm) - 2px);
    cursor:pointer;
    transition:background-color var(--dmz-transition),color var(--dmz-transition);
}
.dmz-timeline-zoom__btn:hover{
    color:var(--dmz-text-primary);
}
.dmz-timeline-zoom__btn--on{
    background:var(--dmz-bg-primary);
    color:var(--dmz-text-primary);
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
}

/* Main timeline container. Left gutter + scrollable viewport. */
.dmz-timeline{
    position:relative;
    background:var(--dmz-bg-primary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-md);
    overflow:hidden;
}

.dmz-timeline__left-gutter{
    position:absolute;
    inset-inline-start:0;
    top:0;
    bottom:0;
    background:var(--dmz-bg-secondary);
    border-inline-end:1px solid var(--dmz-border);
    z-index:2;
    display:flex;
    flex-direction:column;
}
/* Gutter header spacer — height matches .dmz-timeline__header (48px)
 * so labels below it align with milestone rows on the right. */
.dmz-timeline__left-gutter-header{
    height:48px;
    border-bottom:1px solid var(--dmz-border);
    flex-shrink:0;
}
.dmz-timeline__left-gutter-body{
    position:relative;
    flex:1 1 auto;
}

.dmz-timeline__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}

.dmz-timeline__inner{
    position:relative;
    min-width:100%;
}

/* ── Header ── */

.dmz-timeline__header{
    position:sticky;
    top:0;
    z-index:3;
    background:var(--dmz-bg-secondary);
    border-bottom:1px solid var(--dmz-border);
    height:48px;
}

.dmz-timeline__months{
    position:relative;
    height:24px;
    border-bottom:1px solid var(--dmz-border-light);
}
.dmz-timeline__month{
    position:absolute;
    top:0;
    height:24px;
    display:flex;
    align-items:center;
    padding:0 10px;
    font-size:12px;
    font-weight:600;
    color:var(--dmz-text-primary);
    white-space:nowrap;
    overflow:hidden;
    border-inline-end:1px solid var(--dmz-border-light);
}

.dmz-timeline__days{
    position:relative;
    height:24px;
}
.dmz-timeline__day{
    position:absolute;
    top:0;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    color:var(--dmz-text-tertiary);
}
.dmz-timeline__day--weekstart{
    border-inline-start:1px solid var(--dmz-border-light);
}
.dmz-timeline__day--today{
    color:var(--dmz-accent);
    font-weight:700;
}

/* ── Body ── */

.dmz-timeline__body{
    position:relative;
    min-height:100px;
}

.dmz-timeline__today-line{
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:var(--dmz-accent);
    z-index:1;
    pointer-events:none;
    opacity:0.65;
}
.dmz-timeline__today-line::before{
    content:'';
    position:absolute;
    inset-inline-start:-5px;
    top:0;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--dmz-accent);
}

/* Row labels sit inside the fixed left gutter (Phase 3a.4 alpha 3+).
 * Positioned via `top` only, against .dmz-timeline__left-gutter-body
 * which is position:relative. No longer needs z-index overlap with
 * scrolling bars since the gutter is a sibling container. */
.dmz-timeline-row-label{
    position:absolute;
    inset-inline-start:0;
    inset-inline-end:0;
    height:28px;
    padding:0 12px;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    pointer-events:none;
}
.dmz-timeline-row-label > span{
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Milestone bars */
.dmz-timeline-bar{
    position:absolute;
    height:28px;
    background:var(--dmz-bg-tertiary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-sm);
    color:var(--dmz-text-primary);
    font-size:12px;
    font-weight:500;
    display:flex;
    align-items:center;
    padding:0 10px;
    cursor:pointer;
    overflow:hidden;
    transition:transform 0.15s ease,box-shadow var(--dmz-transition),border-color var(--dmz-transition);
    z-index:2;
    text-align:start;
}
.dmz-timeline-bar:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    border-color:var(--dmz-accent);
    z-index:2;
}
.dmz-timeline-bar:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:2px;
}
.dmz-timeline-bar__progress{
    position:absolute;
    inset-inline-start:0;
    top:0;
    bottom:0;
    background:color-mix(in srgb,var(--dmz-accent) 20%,transparent);
    pointer-events:none;
    transition:width 0.3s ease;
}
.dmz-timeline-bar__title{
    position:relative;
    z-index:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Status color variants — subtle left border + progress fill tint */
.dmz-timeline-bar--pending{
    border-color:var(--dmz-border);
}
.dmz-timeline-bar--pending .dmz-timeline-bar__progress{
    background:color-mix(in srgb,var(--dmz-text-tertiary) 15%,transparent);
}
.dmz-timeline-bar--in_progress{
    border-color:color-mix(in srgb,var(--dmz-accent) 40%,var(--dmz-border));
}
.dmz-timeline-bar--in_progress .dmz-timeline-bar__progress{
    background:color-mix(in srgb,var(--dmz-accent) 30%,transparent);
}
.dmz-timeline-bar--done{
    border-color:color-mix(in srgb,var(--dmz-success) 40%,var(--dmz-border));
}
.dmz-timeline-bar--done .dmz-timeline-bar__progress{
    background:color-mix(in srgb,var(--dmz-success) 25%,transparent);
    width:100% !important;
}
.dmz-timeline-bar--cancelled{
    opacity:0.55;
    text-decoration:line-through;
    border-style:dashed;
}

/* Overdue milestone — non-done milestones past their due_date. Subtle red
 * accent border + small overdue ring at the trailing edge. Using border-
 * inline-end so RTL flips correctly. (Phase 3a.4 alpha 5 / audit A10) */
.dmz-timeline-bar--overdue{
    border-color:var(--dmz-danger);
    box-shadow:inset 0 0 0 1px var(--dmz-danger);
}
.dmz-timeline-bar--overdue::after{
    content:'';
    position:absolute;
    inset-inline-end:4px;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--dmz-danger);
    box-shadow:0 0 0 2px rgba(239,68,68,0.25);
}

/* Inverted milestone — start_date > due_date (data integrity issue).
 * Dashed amber border flags the problem without hiding the bar.
 * (Audit A4) */
.dmz-timeline-bar--inverted{
    border-color:var(--dmz-warning);
    border-style:dashed;
}

/* ── Task dots (Phase 3a.4 alpha 3) ──
 *
 * Small circular markers rendered under each milestone row (and in the
 * Ungrouped row at the bottom). Positioned absolutely via inset-inline-start.
 * Clicking a dot opens the task edit modal.
 *
 * Color tracks priority (matches kanban card priority dots). Done tasks
 * get a checkmark-style inner cap. Overflow "+N" chip for same-day stacks
 * of 4+ tasks. */
.dmz-timeline-dot{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    border:1.5px solid var(--dmz-bg-primary);
    background:var(--dmz-text-tertiary);
    cursor:pointer;
    padding:0;
    transition:transform 0.15s ease,box-shadow var(--dmz-transition);
    z-index:2;
}
.dmz-timeline-dot:hover{
    transform:scale(1.4);
    z-index:4;
    box-shadow:0 0 0 2px rgba(255,255,255,0.15),0 2px 6px rgba(0,0,0,0.3);
}
.dmz-timeline-dot:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:2px;
}

/* Priority colors — match kanban card priority dot palette. */
.dmz-timeline-dot--low{background:var(--dmz-text-tertiary)}
.dmz-timeline-dot--medium{background:var(--dmz-info)}
.dmz-timeline-dot--high{background:var(--dmz-warning)}
.dmz-timeline-dot--urgent{
    background:var(--dmz-danger);
    box-shadow:0 0 0 2px rgba(239,68,68,0.25);
}

/* Done tasks — inner ring to visually distinguish completed from pending.
 * Using outline-offset + outline since box-shadow is used for urgency hint. */
.dmz-timeline-dot--done{
    background:var(--dmz-success);
    opacity:0.65;
}
.dmz-timeline-dot--done::after{
    content:'';
    position:absolute;
    inset:2px;
    border-radius:50%;
    background:var(--dmz-bg-primary);
}

/* Overdue task — non-done task with due_date in the past. Red ring halo
 * around the dot regardless of priority color. (Phase 3a.4 alpha 5 / A10) */
.dmz-timeline-dot--overdue{
    box-shadow:0 0 0 2px rgba(239,68,68,0.45);
}

/* Overflow chip — "+N" for same-day stacks of 4+ tasks */
.dmz-timeline-dot-more{
    position:absolute;
    height:16px;
    min-width:26px;
    padding:0 6px;
    border-radius:100px;
    border:1px solid var(--dmz-border);
    background:var(--dmz-bg-tertiary);
    color:var(--dmz-text-secondary);
    font-size:10px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    /* Offset up by 3px so it vertically aligns with the dots */
    margin-top:-3px;
    transition:border-color var(--dmz-transition),color var(--dmz-transition);
}
.dmz-timeline-dot-more:hover{
    border-color:var(--dmz-accent);
    color:var(--dmz-text-primary);
}
.dmz-timeline-dot-more:focus-visible{
    outline:2px solid var(--dmz-accent);
    outline-offset:2px;
}
/* Overflow chip with at least one overdue task inside — danger border
 * to tell the user the +N hides something actionable. (Audit A10) */
.dmz-timeline-dot-more--overdue{
    border-color:var(--dmz-danger);
    color:var(--dmz-danger);
}

/* Ungrouped row label variant — italic + dim to visually distinguish
 * from milestone rows (which have a colored bar next to their label). */
.dmz-timeline-row-label--ungrouped{
    font-style:italic;
}

/* Mobile — shrink the left gutter and row heights */
@media(max-width:640px){
    .dmz-timeline__left-gutter{
        width:110px !important;
    }
    .dmz-timeline__viewport{
        margin-inline-start:110px !important;
    }
    .dmz-timeline-row-label{
        padding:0 8px;
        font-size:11px;
    }
    .dmz-timeline-row-label > span{
        font-size:11px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * Alpha 10 — Accent color picker (Branding settings page)
 * ═══════════════════════════════════════════════════════════════ */

.dmz-accent-picker{
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid var(--dmz-border);
}
.dmz-accent-picker__header{margin-bottom:16px}
.dmz-accent-picker__header h3{margin-bottom:4px}

.dmz-accent-picker__swatches{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}

.dmz-accent-swatch{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 8px;
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-pill, var(--dmz-radius-full, 9999px));
    background:var(--dmz-bg-secondary);
    color:var(--dmz-text-primary);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--dmz-transition);
}
.dmz-accent-swatch:hover{
    border-color:var(--dmz-text-tertiary);
    background:var(--dmz-bg-tertiary);
}
.dmz-accent-swatch--active{
    border-color:var(--dmz-accent);
    box-shadow:0 0 0 2px var(--dmz-accent-medium);
    background:var(--dmz-bg-secondary);
}

.dmz-accent-swatch__dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--dmz-swatch-color, var(--dmz-accent));
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
    flex-shrink:0;
}
.dmz-accent-swatch__dot--custom{
    background:linear-gradient(135deg,#F06595 0%,#9775FA 50%,#339AF0 100%);
    /* Overridden inline when a custom color is actually selected */
}

.dmz-accent-picker__custom{
    padding:12px;
    background:var(--dmz-bg-tertiary);
    border-radius:var(--dmz-radius-md);
    margin-bottom:16px;
}
.dmz-accent-picker__custom[hidden]{display:none}

.dmz-accent-picker__personal{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    background:var(--dmz-bg-tertiary);
    border-radius:var(--dmz-radius-md);
    flex-wrap:wrap;
}
.dmz-accent-picker__personal p{margin:0;flex:1;min-width:220px}

.dmz-btn--sm{padding:5px 10px;font-size:12px}

/* RTL: swatches align right naturally via flex; no override needed.
 * Personal row stays flex-wrap so the button tucks below on narrow
 * viewports in either direction. */

@media(max-width:640px){
    .dmz-accent-picker__swatches{gap:8px}
    .dmz-accent-swatch{padding:5px 10px 5px 6px;font-size:12px}
    .dmz-accent-swatch__dot{width:14px;height:14px}
}

/* ═══════════════════════════════════════════════════════════════
 * Alpha 10.12 — Languages settings tab
 * ═══════════════════════════════════════════════════════════════ */

.dmz-lang-list{display:flex;flex-direction:column;gap:8px}

.dmz-lang-row{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    padding:12px 14px;
    background:var(--dmz-bg-secondary);
    border:1px solid var(--dmz-border);
    border-radius:var(--dmz-radius-md);
}

.dmz-lang-row__main{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:220px;
}

.dmz-lang-row__code{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:80px;
}

.dmz-lang-row__actions{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
}

.dmz-lang-add{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--dmz-border);
}

.dmz-lang-add h3{margin-bottom:0}

.dmz-input--sm{padding:6px 10px;font-size:13px}
.dmz-btn--ghost{
    background:transparent;
    border:1px solid var(--dmz-border);
    color:var(--dmz-text-primary);
}
.dmz-btn--ghost:hover:not(:disabled){background:var(--dmz-bg-tertiary)}
.dmz-btn--ghost:disabled{opacity:0.5;cursor:not-allowed}

@media(max-width:640px){
    .dmz-lang-row{flex-direction:column;align-items:stretch}
    .dmz-lang-row__main{min-width:0}
    .dmz-lang-row__actions{justify-content:space-between}
}