/* stylelint-disable selector-class-pattern -- This file intentionally bridges audited v1 class names. */

/*
 * MoxSuite compatibility standard
 *
 * This is the shared visual contract for legacy screens while they move to
 * MoxUI v2. New screens use /mox-ui-v2.css and its semantic mox-* components.
 * Keep this file limited to suite-wide typography, controls, metrics and
 * responsive safety; feature geometry stays with the feature.
 *
 * Fonts are self-hosted: ui/tokens/fonts.css is the single source of the
 * @font-face rules and of --mox-font-sans / --mox-font-mono. The v1 names
 * (--ff-*) and the bridge names below are aliases of those two.
 */

@import url("/assets/ui/tokens/fonts.css?v=20261004-1");

:root {
  --mox-suite-font-sans: var(--mox-font-sans);
  --mox-suite-font-mono: var(--mox-font-mono);
  --ff-sans: var(--mox-font-sans);
  --ff-mono: var(--mox-font-mono);
  --mox-suite-text-xs: 0.625rem;
  --mox-suite-text-sm: 0.75rem;
  --mox-suite-text-body: 0.875rem;
  --mox-suite-text-title: 1.25rem;
  --mox-suite-nav-label: 0.625rem;
  --mox-suite-shell-title: 0.6875rem;
  --mox-suite-shell-meta: 0.625rem;
  --mox-suite-shell-nav: 0.625rem;
  --mox-suite-shell-letter: 0.06em;
  --mox-suite-line-normal: 1.4;
  --mox-suite-control-sm: 1.75rem;
  --mox-suite-control-md: 2.25rem;
  --mox-suite-touch: 2.75rem;
  --mox-suite-tab-height: 2.375rem;
  --mox-suite-icon-sm: 1rem;
  --mox-suite-icon-md: 1.25rem;
  --mox-suite-radius: 0.5rem;
}

/*
 * One compact shell typography contract across v1 and v2 modules. These are
 * intentionally unlayered so a feature cannot accidentally enlarge its main
 * toolbar or module-level navigation after loading the shared standard.
 */
body[data-module] :where(.toolbar-title, .header-title, .mox-toolbar__title, .tb-logo) {
  font-size: var(--mox-suite-shell-title);
  line-height: 1.2;
  letter-spacing: var(--mox-suite-shell-letter);
}

/* Modül adları ve logo yazıları [mox.suite] gibi tamamen küçük harf (lang="tr": İ→i). */
body[data-module] :where(.toolbar-title, .header-title, .mox-toolbar__title, .tb-logo, .sb-logo, .drawer-logo) {
  text-transform: lowercase;
}

body[data-module] :where(.toolbar-meta, .mox-toolbar__meta) {
  font-size: var(--mox-suite-shell-meta);
  line-height: 1.2;
}

body[data-module] :where(
  .tab-nav > .tab-btn,
  .prim-tabs > .tab-btn,
  .mox-tabs > .mox-tab
) {
  font-size: var(--mox-suite-shell-nav);
  letter-spacing: var(--mox-suite-shell-letter);
}

/*
 * Keep the bridge in the lowest shared cascade layer. Mature modules such as
 * Envanter and Panel retain their deliberately compact local measurements;
 * these rules are defaults for legacy pages, not forced overrides.
 */
@layer reset {
html {
  text-size-adjust: 100%;
}

body {
  font-family: var(--mox-suite-font-sans);
  font-size: var(--mox-suite-text-body);
  line-height: var(--mox-suite-line-normal);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Legacy button bridge. MoxUI v2 pages use .mox-button. */
.btn {
  min-height: var(--mox-suite-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--mox-suite-radius);
  font-family: var(--mox-suite-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.btn-sm {
  min-height: var(--mox-suite-control-sm);
  padding: 0.25rem 0.75rem;
  font-size: var(--mox-suite-text-sm);
}

.btn svg {
  width: var(--mox-suite-icon-sm);
  height: var(--mox-suite-icon-sm);
  flex: 0 0 auto;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.8;
}

.icon-btn {
  width: var(--mox-suite-control-md);
  height: var(--mox-suite-control-md);
  min-width: var(--mox-suite-control-md);
  min-height: var(--mox-suite-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--mox-suite-radius);
  line-height: 1;
}

.icon-btn svg {
  width: var(--mox-suite-icon-md);
  height: var(--mox-suite-icon-md);
  flex: 0 0 auto;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.8;
}

}

/* Explicit compact row-action intents override legacy unlayered controls. */
.icon-btn.icon-btn--compact {
  width: var(--mox-suite-control-sm);
  height: var(--mox-suite-control-sm);
  min-width: var(--mox-suite-control-sm);
  min-height: var(--mox-suite-control-sm);
}

.icon-btn.icon-btn--compact svg {
  width: var(--mox-suite-icon-sm);
  height: var(--mox-suite-icon-sm);
}

.icon-btn.icon-btn--info {
  color: var(--mox-color-info, var(--blue));
  /* stylelint-disable-next-line custom-property-pattern -- Existing v1 token fallback. */
  background: var(--mox-color-info-soft, var(--blueD));
}

.icon-btn.icon-btn--accent {
  color: var(--mox-color-accent, var(--accent));
  /* stylelint-disable-next-line custom-property-pattern -- Existing v1 token fallback. */
  background: var(--mox-color-accent-soft, var(--accentD));
}

@layer reset {
/* Legacy KPI bridge. Panel/Envanter naming remains supported. */
:where(.kpi-cell, .ozet-kpi-cell) {
  min-width: 0;
  padding: 0.625rem 0.5rem;
  border-radius: var(--mox-suite-radius);
  overflow: hidden;
}

:where(.kpi-val, .ozet-kpi-val) {
  font-family: var(--mox-suite-font-mono);
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

:where(.kpi-lbl, .ozet-kpi-lbl) {
  font-family: var(--mox-suite-font-mono);
  font-size: var(--mox-suite-text-xs);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(.kpi-delta) {
  font-family: var(--mox-suite-font-mono);
  font-size: var(--mox-suite-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

/* Shared responsive safety: 48rem tablet, 30rem compact mobile. */
@media (width < 48rem) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ozet-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tab-nav,
  .toolbar,
  .page-actions,
  .btn-group {
    max-width: 100%;
  }

  input:not([type="checkbox"], [type="radio"]),
  select,
  textarea {
    font-size: 1rem;
  }
}

@media (width >= 48rem) {
  .tab-btn {
    min-height: var(--mox-suite-tab-height);
    padding: 0.5rem 0.875rem;
    font-size: var(--mox-suite-text-xs);
    letter-spacing: 0.06em;
  }
}

@media (width < 30rem) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ozet-kpi-grid {
    gap: 0.25rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .btn:not(.btn-sm),
  .icon-btn {
    min-height: var(--mox-suite-touch);
  }

  .icon-btn {
    width: var(--mox-suite-touch);
    min-width: var(--mox-suite-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn {
    transition-duration: 0.01ms;
  }
}
}

/*
 * Bottom navigation standard (frontend/mox-bottom-nav.js, 2026-10): at most
 * five cells on phones — four items plus "Diğer". Overflow items stay in the
 * DOM, hidden in place; the sheet forwards taps to them. Page nav rules are
 * unlayered, so the two structural rules are layered !important declarations
 * (important declarations reverse layer order and win over unlayered rules).
 */
@layer reset {
  .is-bnav-overflow,
  .is-bnav-unavailable,
  .mox-bnav-proxy .bnav-badge[hidden],
  .mox-bnav-more[hidden] {
    /* stylelint-disable-next-line declaration-no-important -- see block comment */
    display: none !important;
  }

  .bnav-inner.has-bnav-overflow {
    /* stylelint-disable-next-line declaration-no-important -- see block comment */
    display: grid !important;
    /* stylelint-disable-next-line declaration-no-important -- see block comment */
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/*
 * Bottom navigation geometry (2026-10, owner decision): every phone bottom bar
 * looks like Panel's — equal cells, 22px stroke icon, 10px semibold uppercase
 * Mono label, 57px cell. Pages styled their bars separately (pdks 18px icons,
 * cari Sans labels, triage 23px), always in unlayered page rules, so these are
 * layered !important declarations like the floors above.
 */
/* stylelint-disable declaration-no-important -- see block comment */
@layer reset {
  @media (width < 48rem) {
    .bnav-inner {
      display: grid !important;
      grid-auto-columns: minmax(0, 1fr) !important;
      grid-auto-flow: column !important;
      grid-template-columns: none !important;
      padding: max(0.25rem, 4px) 0 max(0.125rem, 2px) !important;
    }

    /* No display here: pages hide cells by mode/permission with display: none. */
    .bnav-inner > .bnav-item {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: max(0.25rem, 4px) !important;
      min-width: 0 !important;
      min-height: max(3.25rem, 52px) !important;
      padding: max(0.125rem, 2px) max(0.125rem, 2px) max(0.9375rem, 15px) !important;
    }

    /* max(): cari sets a 14px root, where rem alone would shrink the bar. */
    .bnav-inner > .bnav-item > svg {
      flex: none !important;
      width: max(1.375rem, 22px) !important;
      height: max(1.375rem, 22px) !important;
      fill: none !important;
      stroke: currentcolor !important;
      stroke-width: 1.8 !important;
    }

    .bnav-inner > .bnav-item .bnav-lbl {
      max-width: 100% !important;
      overflow: hidden !important;
      font-family: var(--mox-font-mono) !important;
      font-size: max(0.625rem, 10px) !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
      letter-spacing: 0.02em !important;
      text-overflow: ellipsis !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }

    /* MoxUI v2 bar (musteri-takip, sevkiyat-sorunlari): this file's reset layer
       outranks the mox.* layers, so `button { font: inherit }` above had turned its
       labels into 14px body text. */
    .mox-bottom-nav__inner {
      display: grid !important;
      grid-auto-columns: minmax(0, 1fr) !important;
      grid-auto-flow: column !important;
      width: 100% !important;
      padding: 0.25rem 0 0.125rem !important;
    }

    .mox-bottom-nav__item.mox-tab {
      justify-content: flex-start !important;
      gap: 0.25rem !important;
      min-width: 0 !important;
      min-height: 3.25rem !important;
      padding: 0.125rem 0.125rem 0.9375rem !important;
      font-family: var(--mox-font-mono) !important;
      font-size: max(0.625rem, 10px) !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
      letter-spacing: 0.02em !important;
      text-transform: uppercase !important;
    }

    .mox-bottom-nav__item.mox-tab > svg {
      flex: none !important;
      width: 1.375rem !important;
      height: 1.375rem !important;
    }

    .mox-bottom-nav__item.mox-tab > span:not(.mox-bottom-nav__badge) {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /* Bar built by mox-bottom-nav.js from a page's top tabs (ikas, sayim, cari_mudur). */
    .mox-bnav-proxy {
      position: fixed !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      z-index: var(--z-bnav, 200) !important;
      display: block !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
      border-top: 0.0625rem solid var(--border, var(--mox-color-border)) !important;
      background: var(--surface, var(--mox-color-surface)) !important;
    }

    .mox-bnav-proxy-spacer {
      display: block !important;
      height: calc(4.25rem + env(safe-area-inset-bottom)) !important;
    }

    [data-bnav-source] {
      display: none !important;
    }
  }
}
/* stylelint-enable declaration-no-important */

.mox-bnav-proxy,
.mox-bnav-proxy-spacer {
  display: none;
}

.mox-bnav-proxy .bnav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  /* stylelint-disable-next-line custom-property-pattern -- Existing v1 token fallback. */
  color: var(--muted, var(--mox-color-text-subtle));
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mox-bnav-proxy .bnav-item.active {
  color: var(--accent, var(--mox-color-accent));
}

/* stylelint-disable-next-line no-descending-specificity -- independent component, not an .icon-btn */
.mox-bnav-more svg {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.mox-bnav-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 500) - 1);
  background: var(--mox-color-overlay, rgb(0 0 0 / 65%));
}

.mox-bnav-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal, 500);
  max-height: 70dvh;
  overflow-y: auto;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  /* stylelint-disable-next-line custom-property-pattern -- Existing v1 token fallback. */
  border-top: 0.0625rem solid var(--borderL, var(--mox-color-border-strong));
  border-radius: 0.875rem 0.875rem 0 0;
  background: var(--surface, var(--mox-color-surface));
}

.mox-bnav-sheet:focus {
  outline: none;
}

.mox-bnav-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-bottom: 0.0625rem solid var(--border, var(--mox-color-border));
}

.mox-bnav-sheet__title {
  color: var(--muted, var(--mox-color-text-subtle));
  font-family: var(--mox-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mox-bnav-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mox-suite-touch);
  height: var(--mox-suite-touch);
  border: 0;
  border-radius: var(--mox-suite-radius);
  background: transparent;
  color: var(--dim, var(--mox-color-text-muted));
}

.mox-bnav-sheet__list {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.mox-bnav-sheet__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--mox-suite-radius);
  background: transparent;
  color: var(--text, var(--mox-color-text));
  font-family: var(--mox-font-sans);
  font-size: 1rem;
  text-align: left;
}

.mox-bnav-sheet__item.is-active {
  /* stylelint-disable-next-line custom-property-pattern -- Existing v1 token fallback. */
  background: var(--accentD, var(--mox-color-accent-soft));
  color: var(--accent, var(--mox-color-accent));
}

/* stylelint-disable no-descending-specificity -- independent component, not an .icon-btn */
.mox-bnav-sheet__item svg,
.mox-bnav-sheet__close svg {
  width: var(--mox-suite-icon-md);
  height: var(--mox-suite-icon-md);
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* stylelint-enable no-descending-specificity */

/*
 * Phone safety floors (2026-10 mobile audit). Page <style> blocks are
 * unlayered and beat this file's layer, so every floor is a layered
 * !important declaration (important declarations reverse layer order). Floors
 * only raise minimum sizes on touch screens — never colours, layout or desktop.
 */
@layer reset {
  @media (pointer: coarse) {
    /* Pinch-zoom stays enabled; double-tap zoom on controls (fast scanning and
       tapping, e.g. etiket) does not, and taps fire without delay. */
    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [onclick] {
      touch-action: manipulation;
    }

    /* iOS Safari zooms the page when a field under 16px gets focus. */
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"], .date-picker),
    select,
    textarea {
      /* stylelint-disable-next-line declaration-no-important -- see block comment */
      font-size: max(1rem, 16px) !important;
      /* stylelint-disable-next-line declaration-no-important -- see block comment */
      min-height: 2.5rem !important;
    }

    /* Checkboxes and radios: at least the 24px WCAG target on touch screens. */
    input[type="checkbox"],
    input[type="radio"] {
      min-width: 1.5rem;
      min-height: 1.5rem;
    }

    /* Smallest readable label on phones is 10px. */
    .bnav-lbl,
    .bnav-badge,
    .kpi-lbl,
    .ozet-kpi-lbl,
    .kpi-delta,
    .sb-cell-lbl,
    .sec-lbl {
      /* stylelint-disable-next-line declaration-no-important -- see block comment */
      font-size: max(0.625rem, 10px) !important;
    }

    .bnav-lbl {
      /* stylelint-disable-next-line declaration-no-important -- keeps 10px labels inside five cells */
      letter-spacing: 0.02em !important;
    }

    /* Header home links keep their look but get a ~44px hit area. */
    :is(.static-header, .toolbar, .topbar, header) > a[href="/"] {
      position: relative;
    }

    :is(.static-header, .toolbar, .topbar, header) > a[href="/"]::after {
      position: absolute;
      inset: -0.75rem;
      content: "";
    }
  }
}

/*
 * Stacked tables (2026-10): below 48rem every row of a table.mox-stack-table
 * becomes a card and each cell shows its data-label as a caption; a cell with
 * the mox-stack-title class is the card heading and a header row inside the
 * body (tables without <thead>) carries mox-stack-head. Page table rules are
 * unlayered and often id-scoped, so the structural declarations are layered
 * !important; colours and fonts stay with the page.
 */
@layer reset {
  @media (width < 48rem) {
    /* stylelint-disable declaration-no-important -- structural stacked-table rules, see block comment */
    table.mox-stack-table,
    .mox-stack-table > tbody,
    .mox-stack-table > tbody > tr {
      display: block !important;
      width: auto !important;
      min-width: 0 !important;
    }

    .mox-stack-table > thead,
    .mox-stack-table > tbody > tr.mox-stack-head {
      display: none !important;
    }

    .mox-stack-table > tbody > tr {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 0.5rem !important;
      padding: 0.5rem 0.75rem !important;
      border: 0.0625rem solid var(--border, var(--mox-color-border)) !important;
      border-radius: var(--mox-suite-radius) !important;
    }

    .mox-stack-table > tbody > tr > td {
      display: grid !important;
      grid-template-columns: 6.5rem minmax(0, 1fr) !important;
      gap: 0.5rem !important;
      width: auto !important;
      padding: 0.25rem 0 !important;
      border: 0 !important;
      text-align: left !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    .mox-stack-table td:not([data-label]),
    .mox-stack-table td.mox-stack-title {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .mox-stack-table td.mox-stack-title {
      order: -1;
      font-weight: 600 !important;
    }

    .mox-stack-table td.mox-stack-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-end !important;
      gap: 0.375rem !important;
      padding-top: 0.5rem !important;
    }
    /* stylelint-enable declaration-no-important */

    .mox-stack-table td[data-label]:not(.mox-stack-title)::before {
      content: attr(data-label);
      color: var(--muted, var(--mox-color-text-subtle));
      font-family: var(--mox-font-sans);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
  }
}

/* Yetki kapısı (mox-v2.js moxApplyPermissionGates): izni olmayan kullanıcıdan gizlenen
   öğe, bileşenin kendi display kuralına rağmen görünmez. */
[data-requires-permission][hidden] {
  /* stylelint-disable-next-line declaration-no-important -- bileşenin display kuralını yenmeli */
  display: none !important;
}