/* ============================================================
   Design System — Utilities (UIkit-inspired, density-aware)

   Spacing utilities read --re-space-* (density-aware), so margins,
   paddings and gaps rescale with <html data-density="...">.

   Naming: re- prefix. Numeric spacing scale 0..8 maps to the
   density-aware unit. Fractional widths like UIkit (re-w-1-2).

   Bağımlılık: redev-ui-base.css
   ============================================================ */
/* v2 A20 — utilities live in the LAST cascade layer, so a utility overrides a
   component default at equal specificity regardless of link/import order. */
@layer utilities {

/* ── Display ────────────────────────────────────────────────── */
.re-block{display:block}
.re-inline-block{display:inline-block}
.re-inline{display:inline}
.re-hidden{display:none}
.re-flex{display:flex}
.re-inline-flex{display:inline-flex}

/* ── Flex ───────────────────────────────────────────────────── */
.re-flex-row{flex-direction:row}
.re-flex-col{flex-direction:column}
.re-flex-wrap{flex-wrap:wrap}
.re-flex-nowrap{flex-wrap:nowrap}
.re-flex-1{flex:1 1 0%}
.re-flex-auto{flex:1 1 auto}
.re-flex-none{flex:none}
.re-shrink-0{flex-shrink:0}
.re-grow{flex-grow:1}

/* ── Align / Justify ────────────────────────────────────────── */
.re-items-start{align-items:flex-start}
.re-items-center{align-items:center}
.re-items-end{align-items:flex-end}
.re-items-stretch{align-items:stretch}
.re-items-baseline{align-items:baseline}
.re-justify-start{justify-content:flex-start}
.re-justify-center{justify-content:center}
.re-justify-end{justify-content:flex-end}
.re-justify-between{justify-content:space-between}
.re-justify-around{justify-content:space-around}
.re-self-start{align-self:flex-start}
.re-self-center{align-self:center}
.re-self-end{align-self:flex-end}

/* ── Gap (density-aware) ────────────────────────────────────── */
/* re-dim — present but out of focus. Written as a utility because it is one declaration and
   two components need it: data-fn-mode="dim" puts it on a filtered-out node (a graph must
   keep its shape, so a non-match greys instead of leaving), and it reads the same on anything
   else that stays visible while something beside it has the reader's attention.
   Not pointer-events:none — a dimmed node is still inspectable, which is the point of dimming
   rather than hiding. */
.re-dim{opacity:.32;filter:saturate(.35);transition:opacity .15s,filter .15s}

.re-gap-0{gap:0}
.re-gap-1{gap:var(--re-space-1)}
.re-gap-2{gap:var(--re-space-2)}
.re-gap-3{gap:var(--re-space-3)}
.re-gap-4{gap:var(--re-space-4)}
.re-gap-6{gap:var(--re-space-6)}
.re-gap-8{gap:var(--re-space-8)}
/* legacy aliases */
.re-gap-sm{gap:var(--re-space-2)}
.re-gap-md{gap:var(--re-space-4)}
.re-gap-lg{gap:var(--re-space-6)}

/* ── Margin (density-aware) ─────────────────────────────────── */
.re-m-0{margin:0}
.re-m-1{margin:var(--re-space-1)}.re-m-2{margin:var(--re-space-2)}.re-m-3{margin:var(--re-space-3)}.re-m-4{margin:var(--re-space-4)}.re-m-6{margin:var(--re-space-6)}.re-m-8{margin:var(--re-space-8)}
.re-mx-auto{margin-left:auto;margin-right:auto}
.re-mt-0{margin-top:0}.re-mt-1{margin-top:var(--re-space-1)}.re-mt-2{margin-top:var(--re-space-2)}.re-mt-3{margin-top:var(--re-space-3)}.re-mt-4{margin-top:var(--re-space-4)}.re-mt-6{margin-top:var(--re-space-6)}.re-mt-8{margin-top:var(--re-space-8)}
.re-mb-0{margin-bottom:0}.re-mb-1{margin-bottom:var(--re-space-1)}.re-mb-2{margin-bottom:var(--re-space-2)}.re-mb-3{margin-bottom:var(--re-space-3)}.re-mb-4{margin-bottom:var(--re-space-4)}.re-mb-6{margin-bottom:var(--re-space-6)}.re-mb-8{margin-bottom:var(--re-space-8)}
.re-ml-1{margin-left:var(--re-space-1)}.re-ml-2{margin-left:var(--re-space-2)}.re-ml-3{margin-left:var(--re-space-3)}.re-ml-4{margin-left:var(--re-space-4)}
.re-mr-1{margin-right:var(--re-space-1)}.re-mr-2{margin-right:var(--re-space-2)}.re-mr-3{margin-right:var(--re-space-3)}.re-mr-4{margin-right:var(--re-space-4)}
.re-my-0{margin-top:0;margin-bottom:0}
.re-mx-0{margin-left:0;margin-right:0}

/* ── Padding (density-aware) ────────────────────────────────── */
.re-p-0{padding:0}
.re-p-1{padding:var(--re-space-1)}.re-p-2{padding:var(--re-space-2)}.re-p-3{padding:var(--re-space-3)}.re-p-4{padding:var(--re-space-4)}.re-p-6{padding:var(--re-space-6)}.re-p-8{padding:var(--re-space-8)}
.re-px-2{padding-left:var(--re-space-2);padding-right:var(--re-space-2)}.re-px-3{padding-left:var(--re-space-3);padding-right:var(--re-space-3)}.re-px-4{padding-left:var(--re-space-4);padding-right:var(--re-space-4)}
.re-py-1{padding-top:var(--re-space-1);padding-bottom:var(--re-space-1)}.re-py-2{padding-top:var(--re-space-2);padding-bottom:var(--re-space-2)}.re-py-3{padding-top:var(--re-space-3);padding-bottom:var(--re-space-3)}.re-py-4{padding-top:var(--re-space-4);padding-bottom:var(--re-space-4)}

/* ── Grid ───────────────────────────────────────────────────────
   İki mod:
   1) Fixed columns — .re-grid + .re-cols-N (CSS grid, sabit kolon)
   2) Child-width — .re-grid + çocuklara .re-child-1-N (UIkit-style,
      flex wrap, gap-aware). Container bir child-width çocuğu görünce
      :has() ile otomatik flex'e geçer.
   Gap density-aware (--re-grid-gap → --re-space-*). Collapse = gap:0.
   ────────────────────────────────────────────────────────────── */
.re-grid{display:grid;--re-grid-gap:var(--re-space-4)}
/* Default gap via :where() → zero specificity, so a .re-gap-* utility on the same
   .re-grid wins instead of being silently overridden. */
:where(.re-grid){gap:var(--re-space-4)}
/* v6 V6-7 — `minmax(0,1fr)`, `1fr` DEĞİL: `1fr` aslında `minmax(auto,1fr)` olduğu için
   track, içindeki öğenin min-content genişliğinden küçülemiyor ve inatçı bir öğe
   (native `input[type=date]`, uzun bir kod parçası, taşan bir tablo) tüm ızgarayı
   taşırıyor. `minmax(0,1fr)` ile taşma öğenin kendi kutusunda kalır. */
.re-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.re-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.re-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.re-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.re-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.re-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.re-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.re-grid-auto{grid-template-columns:repeat(auto-fill,minmax(var(--re-col-min,220px),1fr))}

/* Gap sizes (her iki mod) */
.re-grid-sm{gap:var(--re-space-2);--re-grid-gap:var(--re-space-2)}
.re-grid-lg{gap:var(--re-space-6);--re-grid-gap:var(--re-space-6)}

/* Child-width mode — container flex'e geçer, gap-aware genişlik */
.re-grid:has(> [class*="re-child-"]){display:flex;flex-wrap:wrap;gap:var(--re-grid-gap)}
.re-child-1-1{width:100%}
.re-child-1-2{width:calc((100% - 1 * var(--re-grid-gap)) / 2)}
.re-child-1-3{width:calc((100% - 2 * var(--re-grid-gap)) / 3)}
.re-child-1-4{width:calc((100% - 3 * var(--re-grid-gap)) / 4)}
.re-child-1-5{width:calc((100% - 4 * var(--re-grid-gap)) / 5)}
.re-child-1-6{width:calc((100% - 5 * var(--re-grid-gap)) / 6)}
.re-child-auto{width:auto;flex:0 0 auto}
.re-child-expand{flex:1 1 0;min-width:0}

@media(max-width:768px){
  .re-cols-2,.re-cols-3,.re-cols-4,.re-cols-5,.re-cols-6{grid-template-columns:minmax(0,1fr)}
  .re-cols-md-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Width ──────────────────────────────────────────────────── */
.re-w-auto{width:auto}
.re-w-full{width:100%}
.re-w-1-2{width:50%}
.re-w-1-3{width:33.333%}
.re-w-2-3{width:66.667%}
.re-w-1-4{width:25%}
.re-w-3-4{width:75%}
.re-max-w-sm{max-width:24rem}
.re-max-w-md{max-width:36rem}
.re-max-w-lg{max-width:48rem}
.re-min-w-0{min-width:0}
/* Bleed a strip to the content column's edges: negative gutter margin + equal
   padding, both from --re-gutter so a bleeding row and the column stay aligned. */
.re-bleed-x{margin-left:calc(-1 * var(--re-gutter));margin-right:calc(-1 * var(--re-gutter));padding-left:var(--re-gutter);padding-right:var(--re-gutter)}
/* v8 §V8-3 — one link in a height-handover chain. A component that fills its parent
   (re-board, re-road) needs EVERY wrapper between it and re-main to pass the height down,
   and in a flex column that means min-height:0 as well as height:100% — one missing
   min-height:0 collapses the whole chain back to auto, silently. Put re-fill on each
   wrapper and re-main-fill on re-main. */
.re-fill{height:100%;min-height:0}

/* ── Position ───────────────────────────────────────────────── */
.re-relative{position:relative}
.re-absolute{position:absolute}
.re-fixed{position:fixed}
.re-sticky{position:sticky}
.re-inset-0{top:0;right:0;bottom:0;left:0}
.re-top-0{top:0}.re-right-0{right:0}.re-bottom-0{bottom:0}.re-left-0{left:0}
.re-z-dropdown{z-index:300}
.re-z-modal{z-index:400}
.re-z-toast{z-index:500}

/* ── Text color / typography ────────────────────────────────── */
.re-text-fg{color:var(--foreground)}
.re-text-muted{color:var(--muted-foreground)}
.re-text-primary{color:var(--primary)}
.re-text-success{color:var(--success)}
.re-text-warning{color:color-mix(in oklab,var(--warning) 70%,var(--foreground))}
.re-text-danger{color:var(--danger)}
.re-text-info{color:var(--info)}
.re-text-accent{color:var(--accent)}
.re-text-left{text-align:left}.re-text-center{text-align:center}.re-text-right{text-align:right}
.re-text-xs{font-size:calc(0.6875rem * var(--font-scale))}
.re-text-sm{font-size:calc(0.8125rem * var(--font-scale))}
.re-text-base{font-size:calc(0.875rem * var(--font-scale))}
.re-text-lg{font-size:calc(1rem * var(--font-scale))}
.re-text-xl{font-size:calc(1.125rem * var(--font-scale))}
.re-text-2xl{font-size:calc(1.375rem * var(--font-scale))}
/* Display scale — responsive (clamp), font-scale aware, tightened line-height */
.re-text-3xl{font-size:calc(var(--font-scale) * clamp(1.5rem, 2.5vw, 1.875rem));line-height:1.2}
.re-text-4xl{font-size:calc(var(--font-scale) * clamp(1.875rem, 4vw, 2.5rem));line-height:1.15}
.re-text-5xl{font-size:calc(var(--font-scale) * clamp(2.25rem, 5.5vw, 3.4rem));line-height:1.08}
.re-font-mono{font-family:var(--font-mono)}
.re-font-normal{font-weight:400}.re-font-medium{font-weight:500}.re-font-semibold{font-weight:600}.re-font-bold{font-weight:700}
/* Transform */
.re-text-uppercase{text-transform:uppercase;letter-spacing:.04em}
.re-tracking-tight{letter-spacing:-0.02em}
.re-tracking-tighter{letter-spacing:-0.03em}
.re-text-lowercase{text-transform:lowercase}
.re-text-capitalize{text-transform:capitalize}
.re-text-italic{font-style:italic}
/* Wrap */
.re-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-nowrap{white-space:nowrap}
.re-text-break{overflow-wrap:break-word;word-break:break-word}
/* Link decoration — re-no-underline removes the underline incl. hover (re-link hovers underlined) */
.re-no-underline,.re-no-underline:hover{text-decoration:none}
.re-underline{text-decoration:underline;text-underline-offset:2px}
/* Semantic text roles */
.re-text-lead{font-size:calc(1.125rem * var(--font-scale));line-height:1.7;color:color-mix(in oklab,var(--foreground) 82%,var(--muted-foreground))}
.re-text-meta{font-size:calc(0.75rem * var(--font-scale));font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground)}
.re-text-strong{color:var(--text-strong-muted)}   /* muted, higher-contrast; theme-aware */
.re-leading-relaxed{line-height:1.6}

/* ── Surface tint / opacity ─────────────────────────────────── */
.re-tint-primary{background:color-mix(in oklch,var(--primary) 8%,transparent)}
.re-tint-success{background:color-mix(in oklch,var(--success) 8%,transparent)}
.re-tint-warning{background:color-mix(in oklch,var(--warning) 8%,transparent)}
.re-tint-danger{background:color-mix(in oklch,var(--danger) 8%,transparent)}
.re-tint-info{background:color-mix(in oklch,var(--info) 8%,transparent)}
.re-tint-muted{background:var(--muted)}
.re-op-60{opacity:.6}.re-op-80{opacity:.8}

/* ── Border / radius helpers ────────────────────────────────── */
.re-border{border:1px solid var(--border)}
.re-border-t{border-top:1px solid var(--border)}
.re-border-b{border-bottom:1px solid var(--border)}
.re-rounded{border-radius:var(--radius)}
.re-rounded-sm{border-radius:var(--radius-sm)}
.re-rounded-lg{border-radius:var(--radius-lg)}
.re-rounded-full{border-radius:var(--radius-full)}

/* ── Visibility (responsive) ────────────────────────────────── */
.re-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:768px){.re-hidden-md-down{display:none}}
@media(min-width:769px){.re-visible-md-up{display:none}}
/* ── Line clamp ─────────────────────────────────────────────────────────────
   Truncate to N lines with an ellipsis. There was no utility for this and three
   components had the four-declaration incantation inline (re-note-title,
   re-task-card, re-note-body) — a consumer wanting two-line text had to copy it
   from a component's source. (labs §V32-3)

   `-webkit-line-clamp` AND `line-clamp`: the unprefixed property is the standard
   one and the prefixed one is what every current engine actually reads, so both
   are written. The `-webkit-box` display and `box-orient` are not optional —
   line-clamp does nothing without them, which is the whole reason this is a
   utility and not a one-liner people remember.

   Needs a width to clamp against, so it belongs on a block that has one.
     <p class="re-clamp-2">…</p>
     <p class="re-clamp" style="--re-clamp:5">…</p>
   ────────────────────────────────────────────────────────────────────────── */
.re-clamp,
.re-clamp-1,.re-clamp-2,.re-clamp-3,.re-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--re-clamp, 2);
  line-clamp: var(--re-clamp, 2);
  overflow: hidden;
}
.re-clamp-1 { --re-clamp: 1 }
.re-clamp-2 { --re-clamp: 2 }
.re-clamp-3 { --re-clamp: 3 }
.re-clamp-4 { --re-clamp: 4 }

}  /* @layer utilities */