@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sidebar-width: 300px;
  --sidebar-rail: 92px;
  --sidebar-gap: 24px;
  --report-sidebar-width: var(--sidebar-width);
  --report-sidebar-gap: 24px;
  /* Tek tema: graphite (light). Eski krem/sarı değerler kaldırıldı; bu
     defaultlar hem hard-refresh anındaki flash'ı hem de hiçbir palet
     tarafından override edilmeyen tokenları (ör. --surface-menu → popup
     arkaplanı) standart temaya sabitler. */
  --bg: #f3f5f7;
  --bg-mid: #fafafa;
  --bg-deep: #e5e9ee;
  --surface: rgba(250, 251, 252, 0.88);
  --surface-strong: #ffffff;
  --surface-panel: rgba(255, 255, 255, 0.95);
  --surface-card: rgba(255, 255, 255, 0.72);
  --surface-card-strong: rgba(255, 255, 255, 0.94);
  --surface-subtle: #eceff3;
  --surface-nav: rgba(255, 255, 255, 0.48);
  --surface-menu: rgba(255, 255, 255, 0.98);
  --surface-input: rgba(255, 255, 255, 0.95);
  --table-bg: #ffffff;
  --table-head: #eceff3;
  --table-alt: rgba(239, 242, 245, 0.72);
  --table-hover: rgba(223, 229, 235, 0.78);
  --table-calc: #e1e7ed;
  --table-selected: #e4edf8;
  --income-depth-1: #ffffff;
  --income-depth-2: #f3fbfb;
  --income-depth-3: #f4f7fe;
  --income-depth-4: #f6f8fa;
  --income-depth-5: #f8f5fe;
  --income-depth-6: #f4fbf7;
  --income-depth-1-hover: #eef1f4;
  --income-depth-2-hover: #ebf7f7;
  --income-depth-3-hover: #edf2fd;
  --income-depth-4-hover: #e9edf2;
  --income-depth-5-hover: #f2edfd;
  --income-depth-6-hover: #edf8f2;
  --line: rgba(31, 41, 55, 0.13);
  --text: #1f2937;
  --muted: #667085;
  --accent: #335c81;
  --accent-rgb: 51, 92, 129;
  --accent-gradient-end: #4f82ad;
  --accent-soft: rgba(51, 92, 129, 0.08);
  --accent-softer: rgba(51, 92, 129, 0.12);
  --accent-2: #8a5cf6;
  --accent-3: #d68438;
  --success: #2a9d8f;
  --success-soft: rgba(45, 106, 79, 0.12);
  --danger: #d62828;
  --danger-soft: rgba(174, 32, 18, 0.12);
  --on-accent: #ffffff;
  --report-green: #16a34a;
  --report-blue: #2f6fd6;
  --report-red: #d62828;
  --report-green-soft: #74c98c;
  --report-red-soft: #ea7777;
  --positive-bar-start: #60a5fa;
  --positive-bar-end: #2563eb;
  --negative-bar-start: #f87171;
  --negative-bar-end: #dc2626;
  --income-bar-start: #1d4ed8;
  --income-bar-end: #60a5fa;
  --expense-bar-start: #b42318;
  --expense-bar-end: #dc2626;
  --chart-grid: rgba(31, 41, 55, 0.13);
  --chart-axis: rgba(31, 41, 55, 0.28);
  --tooltip-bg: rgba(31, 41, 55, 0.92);
  --tooltip-text: #ffffff;
  --body-bg:
    radial-gradient(circle at top left, rgba(51, 92, 129, 0.11), transparent 30%),
    radial-gradient(circle at bottom right, rgba(138, 92, 246, 0.08), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 40%, var(--bg-deep));
  --modal-backdrop-bg: rgba(0, 0, 0, 0.22);
  --orb-a: rgba(51, 92, 129, 0.11);
  --orb-b: rgba(138, 92, 246, 0.08);
  --shadow: 0 20px 52px rgba(31, 41, 55, 0.11);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --text-main: #1f2937;
  --text-dim: #667085;
  --warn-row-rgb: 194, 65, 12;
  --warn-row-text: #c2410c;
  --favorite: #ca6702;
  --favorite-rgb: 202, 103, 2;
}

/* Derived from --muted: declared on `body` (not :root) so the var()
   resolves against the active theme/palette tokens, not the defaults. */
body {
  --faint: color-mix(in srgb, var(--muted) 62%, var(--surface-strong));
}

body[data-theme="dark"] {
  --bg: #0f1419;
  --bg-mid: #121a21;
  --bg-deep: #18222b;
  --surface: rgba(20, 27, 34, 0.86);
  --surface-strong: #18222b;
  --surface-panel: rgba(20, 27, 34, 0.88);
  --surface-card: rgba(24, 34, 43, 0.72);
  --surface-card-strong: rgba(24, 34, 43, 0.94);
  --surface-subtle: rgba(33, 45, 56, 0.76);
  --surface-nav: rgba(255, 255, 255, 0.07);
  --surface-menu: rgba(20, 27, 34, 0.98);
  --surface-input: rgba(15, 20, 25, 0.94);
  --table-bg: #111a22;
  --table-head: #18222b;
  --table-alt: rgba(33, 45, 56, 0.52);
  --table-hover: rgba(45, 61, 73, 0.62);
  --table-calc: #263341;
  --table-selected: #16353c;
  --income-depth-1: #121b23;
  --income-depth-2: #11252a;
  --income-depth-3: #14243a;
  --income-depth-4: #2a2118;
  --income-depth-5: #211b31;
  --income-depth-6: #17291f;
  --income-depth-1-hover: #1a2630;
  --income-depth-2-hover: #183039;
  --income-depth-3-hover: #1d304c;
  --income-depth-4-hover: #382b1d;
  --income-depth-5-hover: #2c2441;
  --income-depth-6-hover: #203629;
  --line: rgba(220, 229, 237, 0.12);
  --text: #eef4f7;
  --muted: #a9bbc8;
  --accent: #2a9db0;
  --accent-rgb: 42, 157, 176;
  --accent-gradient-end: #36c2c9;
  --accent-soft: rgba(42, 157, 176, 0.12);
  --accent-softer: rgba(42, 157, 176, 0.18);
  --accent-2: #f27f43;
  --accent-3: #ffb15f;
  --favorite: #f0a246;
  --favorite-rgb: 240, 162, 70;
  --success: #6bc89a;
  --success-soft: rgba(107, 200, 154, 0.14);
  --danger: #ff8a7a;
  --danger-soft: rgba(255, 138, 122, 0.14);
  --report-green: #5bcf83;
  --report-blue: #75a7ff;
  --report-red: #ff8a7a;
  --report-green-soft: #8ce2a5;
  --report-red-soft: #ffb0a5;
  --positive-bar-start: #75a7ff;
  --positive-bar-end: #3d75e8;
  --negative-bar-start: #ff9b91;
  --negative-bar-end: #ef5f51;
  --income-bar-start: #3d75e8;
  --income-bar-end: #7db7ff;
  --expense-bar-start: #d8574b;
  --expense-bar-end: #ff8a7a;
  --chart-grid: rgba(180, 196, 208, 0.16);
  --chart-axis: rgba(180, 196, 208, 0.28);
  --tooltip-bg: rgba(238, 244, 247, 0.94);
  --tooltip-text: #101820;
  --body-bg:
    radial-gradient(circle at top left, rgba(42, 157, 176, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(242, 127, 67, 0.14), transparent 26%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 42%, var(--bg-deep));
  --orb-a: rgba(42, 157, 176, 0.14);
  --orb-b: rgba(242, 127, 67, 0.12);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  --text-main: #eef4f7;
  --text-dim: #a9bbc8;
  --modal-backdrop-bg: rgba(0, 0, 0, 0.52);
  --warn-row-rgb: 251, 146, 60;
  --warn-row-text: #fb923c;
}

body[data-palette="white"][data-theme="light"] {
  --bg: #ffffff;
  --bg-mid: #ffffff;
  --bg-deep: #f4f7fa;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: #ffffff;
  --surface-panel: rgba(255, 255, 255, 0.96);
  --surface-card: rgba(255, 255, 255, 0.86);
  --surface-card-strong: #ffffff;
  --surface-subtle: #f3f6f8;
  --surface-nav: rgba(247, 250, 252, 0.92);
  --surface-menu: #ffffff;
  --surface-input: #ffffff;
  --table-bg: #ffffff;
  --table-head: #f6f8fa;
  --table-alt: #fbfcfd;
  --table-hover: #eef6f8;
  --table-calc: #eef2f6;
  --table-selected: #e7f4f7;
  --line: rgba(20, 35, 48, 0.12);
  --text: #17212b;
  --muted: #5f6f7a;
  --accent: #007f8c;
  --accent-rgb: 0, 127, 140;
  --accent-gradient-end: #14a5ad;
  --accent-soft: rgba(0, 127, 140, 0.08);
  --accent-softer: rgba(0, 127, 140, 0.13);
  --accent-2: #5266c7;
  --accent-3: #e28439;
  --body-bg: linear-gradient(135deg, #ffffff, #ffffff 45%, #f4f7fa);
  --modal-backdrop-bg: rgba(15, 23, 42, 0.22);
  --orb-a: rgba(0, 127, 140, 0.06);
  --orb-b: rgba(226, 132, 57, 0.06);
  --shadow: 0 18px 48px rgba(31, 45, 61, 0.08);
  --text-main: #17212b;
  --text-dim: #5f6f7a;
}

body[data-palette="white"][data-theme="dark"] {
  --bg: #111418;
  --bg-mid: #151a20;
  --bg-deep: #1c242c;
  --surface: rgba(21, 26, 32, 0.9);
  --surface-strong: #1c242c;
  --surface-panel: rgba(21, 26, 32, 0.94);
  --surface-card: rgba(28, 36, 44, 0.8);
  --surface-card-strong: #202a33;
  --surface-subtle: #202a33;
  --surface-nav: rgba(255, 255, 255, 0.07);
  --table-bg: #141a20;
  --table-head: #202a33;
  --table-alt: rgba(255, 255, 255, 0.045);
  --table-hover: rgba(255, 255, 255, 0.08);
  --table-calc: #28313c;
  --table-selected: #18343a;
  --line: rgba(226, 232, 240, 0.13);
  --accent: #35b4bf;
  --accent-rgb: 53, 180, 191;
  --accent-gradient-end: #72d3d9;
  --accent-2: #9aa7ff;
  --accent-3: #f4a66a;
  --body-bg: linear-gradient(135deg, #111418, #151a20 44%, #1c242c);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
}

body[data-palette="marine"][data-theme="light"] {
  --bg: #eef8f8;
  --bg-mid: #f7fbfb;
  --bg-deep: #d6ecef;
  --surface: rgba(248, 253, 253, 0.86);
  --surface-strong: #f8fdfd;
  --surface-panel: rgba(248, 253, 253, 0.94);
  --surface-card: rgba(255, 255, 255, 0.78);
  --surface-subtle: rgba(217, 237, 239, 0.76);
  --surface-nav: rgba(255, 255, 255, 0.58);
  --table-head: #e8f4f5;
  --table-alt: rgba(221, 240, 242, 0.55);
  --table-hover: rgba(199, 229, 232, 0.64);
  --table-calc: #dceff0;
  --table-selected: #cce9ee;
  --line: rgba(17, 94, 103, 0.14);
  --text: #102a2d;
  --muted: #5a7479;
  --accent: #007c89;
  --accent-rgb: 0, 124, 137;
  --accent-gradient-end: #11a7b4;
  --accent-2: #2f6fd6;
  --accent-3: #f08a4b;
  --body-bg:
    radial-gradient(circle at top left, rgba(0, 124, 137, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(47, 111, 214, 0.08), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 40%, var(--bg-deep));
  --orb-a: rgba(0, 124, 137, 0.12);
  --orb-b: rgba(47, 111, 214, 0.08);
  --shadow: 0 22px 60px rgba(11, 67, 74, 0.13);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.22);
}

body[data-palette="marine"][data-theme="dark"] {
  --bg: #081719;
  --bg-mid: #0d2024;
  --bg-deep: #123039;
  --surface: rgba(13, 32, 36, 0.88);
  --surface-strong: #123039;
  --surface-panel: rgba(13, 32, 36, 0.94);
  --surface-card: rgba(17, 42, 48, 0.78);
  --surface-subtle: rgba(23, 57, 64, 0.74);
  --table-bg: #0b1d21;
  --table-head: #123039;
  --table-alt: rgba(42, 88, 96, 0.34);
  --table-hover: rgba(47, 111, 121, 0.4);
  --table-calc: #173842;
  --table-selected: #124955;
  --line: rgba(185, 226, 231, 0.14);
  --accent: #35bfca;
  --accent-rgb: 53, 191, 202;
  --accent-gradient-end: #6be1e8;
  --accent-2: #85a7ff;
  --accent-3: #ffb16f;
  --body-bg:
    radial-gradient(circle at top left, rgba(53, 191, 202, 0.16), transparent 30%),
    radial-gradient(circle at bottom right, rgba(133, 167, 255, 0.11), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 42%, var(--bg-deep));
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
}

body[data-palette="forest"][data-theme="light"] {
  --bg: #f1f7f1;
  --bg-mid: #fbfdf8;
  --bg-deep: #dfeadd;
  --surface: rgba(252, 254, 249, 0.86);
  --surface-strong: #fcfef9;
  --surface-panel: rgba(252, 254, 249, 0.94);
  --surface-subtle: rgba(228, 238, 225, 0.78);
  --table-head: #edf5ea;
  --table-alt: rgba(231, 241, 228, 0.58);
  --table-hover: rgba(211, 229, 206, 0.66);
  --table-calc: #dfead7;
  --table-selected: #d7eadf;
  --line: rgba(42, 83, 54, 0.15);
  --text: #1a291b;
  --muted: #61705d;
  --accent: #28784f;
  --accent-rgb: 40, 120, 79;
  --accent-gradient-end: #45a66f;
  --accent-2: #7f5ab6;
  --accent-3: #ca8a35;
  --report-blue: #2f6fd6;
  --body-bg:
    radial-gradient(circle at top left, rgba(40, 120, 79, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(202, 138, 53, 0.1), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 40%, var(--bg-deep));
  --orb-a: rgba(40, 120, 79, 0.12);
  --orb-b: rgba(202, 138, 53, 0.1);
  --shadow: 0 22px 60px rgba(38, 75, 49, 0.13);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.22);
}

body[data-palette="forest"][data-theme="dark"] {
  --bg: #0d1711;
  --bg-mid: #132019;
  --bg-deep: #1d2d22;
  --surface: rgba(19, 32, 25, 0.88);
  --surface-strong: #1d2d22;
  --surface-panel: rgba(19, 32, 25, 0.94);
  --surface-card: rgba(25, 42, 32, 0.8);
  --surface-subtle: rgba(32, 55, 41, 0.75);
  --table-bg: #101b14;
  --table-head: #1d2d22;
  --table-alt: rgba(50, 76, 58, 0.34);
  --table-hover: rgba(59, 94, 70, 0.42);
  --table-calc: #293a2d;
  --table-selected: #194636;
  --line: rgba(204, 229, 211, 0.14);
  --accent: #66c58c;
  --accent-rgb: 102, 197, 140;
  --accent-gradient-end: #8de0a8;
  --accent-2: #b69cf0;
  --accent-3: #f0b769;
  --body-bg:
    radial-gradient(circle at top left, rgba(102, 197, 140, 0.15), transparent 30%),
    radial-gradient(circle at bottom right, rgba(240, 183, 105, 0.11), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 42%, var(--bg-deep));
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
}

body[data-palette="graphite"][data-theme="light"] {
  --bg: #f3f5f7;
  --bg-mid: #fafafa;
  --bg-deep: #e5e9ee;
  --surface: rgba(250, 251, 252, 0.88);
  --surface-strong: #ffffff;
  --surface-panel: rgba(255, 255, 255, 0.95);
  --surface-subtle: #eceff3;
  --table-head: #eceff3;
  --table-alt: rgba(239, 242, 245, 0.72);
  --table-hover: rgba(223, 229, 235, 0.78);
  --table-calc: #e1e7ed;
  --table-selected: #e4edf8;
  --line: rgba(31, 41, 55, 0.13);
  --text: #1f2937;
  --muted: #667085;
  --accent: #335c81;
  --accent-rgb: 51, 92, 129;
  --accent-gradient-end: #4f82ad;
  --accent-2: #8a5cf6;
  --accent-3: #d68438;
  --body-bg:
    radial-gradient(circle at top left, rgba(51, 92, 129, 0.11), transparent 30%),
    radial-gradient(circle at bottom right, rgba(138, 92, 246, 0.08), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 40%, var(--bg-deep));
  --orb-a: rgba(51, 92, 129, 0.11);
  --orb-b: rgba(138, 92, 246, 0.08);
  --shadow: 0 20px 52px rgba(31, 41, 55, 0.11);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.22);
}

body[data-palette="graphite"][data-theme="dark"] {
  --bg: #0e1116;
  --bg-mid: #151922;
  --bg-deep: #1f2630;
  --surface: rgba(21, 25, 34, 0.88);
  --surface-strong: #1f2630;
  --surface-panel: rgba(21, 25, 34, 0.94);
  --surface-card: rgba(28, 34, 44, 0.82);
  --surface-subtle: #252d38;
  --table-bg: #121720;
  --table-head: #1f2630;
  --table-alt: rgba(56, 65, 78, 0.34);
  --table-hover: rgba(70, 81, 97, 0.42);
  --table-calc: #2b3441;
  --table-selected: #1d3750;
  --line: rgba(226, 232, 240, 0.13);
  --accent: #7aa8d8;
  --accent-rgb: 122, 168, 216;
  --accent-gradient-end: #9fc7ef;
  --accent-2: #b9a1ff;
  --accent-3: #f0b16a;
  --body-bg:
    radial-gradient(circle at top left, rgba(122, 168, 216, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(185, 161, 255, 0.1), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg-mid) 42%, var(--bg-deep));
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  color: var(--text);
  background: var(--body-bg);
}

body[data-theme="dark"] {
  background: var(--body-bg);
}

body.auth-mode .shell {
  display: none;
}

.bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(12px);
  pointer-events: none;
  opacity: 0.8;
}

.orb-a {
  inset: 80px auto auto -60px;
  width: 240px;
  height: 240px;
  background: var(--orb-a);
}

.orb-b {
  inset: auto 120px 40px auto;
  width: 300px;
  height: 300px;
  background: var(--orb-b);
}

.shell {
  position: relative;
  width: calc(100% - 32px);
  margin: 16px auto;
  padding-left: calc(var(--sidebar-width) + var(--sidebar-gap));
  transition: padding-left 0.25s ease, padding-right 0.25s ease;
}

/* ===== Login Split Layout ===== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.login-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  width: 100%;
  min-height: 100vh;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.login-left {
  background: #f3f5f7;
  padding: 56px 88px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.login-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-lang-row {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.login-lang-row .acct-lang-btn {
  width: 42px;
  flex: none;
}

.login-favicon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.login-wordmark {
  line-height: 1.25;
}

.login-wordmark-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #667085;
  font-weight: 700;
  line-height: 1.2;
}

.login-wordmark-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2937;
  display: block;
}

#authPanel {
  margin: auto 0;
  max-width: 400px;
  width: 100%;
}

#authPanel .field {
  margin-bottom: 16px;
  gap: 6px;
}

#authPanel label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #374151;
  text-transform: uppercase;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

#authPanel input {
  height: 48px;
  border: 1px solid rgba(31, 41, 55, 0.18);
  background: #ffffff;
  border-radius: 11px;
  padding: 0 14px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  color: #1f2937;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#authPanel input:focus {
  outline: none;
  border-color: #335c81;
  box-shadow: 0 0 0 4px rgba(51, 92, 129, 0.12);
}

#authPanel .button.primary {
  height: 50px;
  background: #335c81;
  border-color: #335c81;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 11px;
}

#authPanel .button.primary:hover {
  background: #274e6e;
  border-color: #274e6e;
}

.login-form-h2 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1f2937;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.login-form-lede {
  color: #667085;
  font-size: 14.5px;
  margin: 0 0 32px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.login-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #667085;
  margin: 4px 0 22px;
}

.login-forgot {
  color: #335c81;
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
}

.login-right {
  position: relative;
  background:
    radial-gradient(circle at 78% 18%, rgba(51, 92, 129, 0.55), transparent 42%),
    radial-gradient(circle at 12% 92%, rgba(138, 92, 246, 0.32), transparent 45%),
    linear-gradient(155deg, #1d2d44 0%, #0e1116 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-right-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.login-right-logo {
  position: absolute;
  right: -120px;
  top: -60px;
  width: 720px;
  height: 720px;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

.login-right-caption {
  position: absolute;
  left: 56px;
  bottom: 56px;
  color: rgba(234, 243, 244, 0.85);
  z-index: 2;
  max-width: 380px;
}

.login-right-caption-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 243, 244, 0.55);
  font-weight: 700;
  margin-bottom: 12px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.login-right-caption-word {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: #fff;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.login-right-caption-word em {
  font-style: normal;
  color: #7aa8d8;
}

/* ── Login: dark mode overrides ─────────────────── */
body[data-theme="dark"] .login-left {
  background: #151922;
}

body[data-theme="dark"] .login-wordmark-eyebrow {
  color: #64748b;
}

body[data-theme="dark"] .login-wordmark-title {
  color: #e2e8f0;
}

body[data-theme="dark"] .login-form-h2 {
  color: #f1f5f9;
}

body[data-theme="dark"] .login-form-lede {
  color: #94a3b8;
}

body[data-theme="dark"] .login-form-row {
  color: #94a3b8;
}

body[data-theme="dark"] .login-forgot {
  color: #7aa8d8;
}

body[data-theme="dark"] #authPanel label {
  color: #94a3b8;
}

body[data-theme="dark"] #authPanel input {
  background: #1f2630;
  border-color: rgba(226, 232, 240, 0.18);
  color: #e2e8f0;
}

body[data-theme="dark"] #authPanel input:focus {
  border-color: #7aa8d8;
  box-shadow: 0 0 0 4px rgba(122, 168, 216, 0.14);
}

body[data-theme="dark"] #authPanel .button.primary {
  background: #7aa8d8;
  border-color: #7aa8d8;
  color: #0e1116;
}

body[data-theme="dark"] #authPanel .button.primary:hover {
  background: #9fc7ef;
  border-color: #9fc7ef;
}

.sidebar,
.report-sidebar,
.panel,
.topbar,
.hero {
  backdrop-filter: blur(18px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.sidebar,
.report-sidebar,
.sidebar-rail-toggle,
.report-sidebar-rail-toggle {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-strong);
}

body.app-booting .sidebar,
body.app-booting .sidebar-rail-toggle,
body.app-booting .report-sidebar,
body.app-booting .report-sidebar-rail,
body.app-booting .report-filter-clear-rail,
body.report-loading .sidebar,
body.report-loading .sidebar-rail-toggle,
body.report-loading .report-sidebar,
body.report-loading .report-sidebar-rail,
body.report-loading .report-filter-clear-rail {
  display: none !important;
}

body.app-booting .shell,
body.report-loading .shell {
  padding-left: 24px;
  padding-right: 24px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  border-radius: 0;
  padding: 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  z-index: 15;
  border-right: 0;
  transition: transform 0.25s ease, width 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle,
.sidebar-rail-toggle,
.report-sidebar-toggle,
.report-sidebar-rail,
.report-sidebar-rail-toggle,
.report-filter-clear-rail {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  z-index: 30;
}

body.has-admin-modal-open .sidebar-rail-toggle,
body.has-admin-modal-open .report-sidebar-rail,
body.has-admin-modal-open .report-filter-clear-rail {
  opacity: 0;
  pointer-events: none;
}

.sidebar-toggle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  top: 30px;
  right: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  z-index: 30;
  transition: color 0.15s ease,
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1), right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle:hover {
  color: var(--accent);
}

/* open: arrow flipped; collapsed: toggle centered under the brand mark */
body:not(.sidebar-collapsed) .sidebar-toggle svg {
  transform: rotate(180deg);
}

body.sidebar-collapsed .sidebar-toggle {
  top: 66px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.sidebar-rail-toggle {
  position: fixed;
  top: 16px;
  left: 0;
  width: 36px;
  height: 42px;
  padding-left: 0;
  border-radius: 0 10px 10px 0;
  transform: translateX(0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-left: 0;
  box-shadow: var(--shadow);
  transition: left 0.25s ease, transform 0.25s ease;
}

.report-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--report-sidebar-width);
  height: 100vh;
  border-radius: 0;
  padding: 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  z-index: 15;
  border-left: 0;
  transition: transform 0.25s ease;
}

#reportSidebarContent {
  padding-top: 0;
}

.report-sidebar-toggle {
  display: none;
}

.report-sidebar-rail {
  position: fixed;
  top: 16px;
  right: 0;
  width: auto;
  height: auto;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  transition: right 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.report-sidebar-rail-toggle {
  position: relative;
  width: 36px;
  height: 42px;
  padding-right: 0;
  border-radius: 10px 0 0 10px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-right: 0;
  box-shadow: var(--shadow);
  pointer-events: auto;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.report-sidebar-rail-toggle:not(.active) {
  background: var(--surface-strong);
  border-color: var(--line);
}

.report-sidebar-rail-toggle.active {
  width: 40px;
  color: var(--text);
  background: var(--accent-soft);
  border-color: transparent;
  transform: translateX(0);
}

.report-filter-clear-rail {
  position: fixed;
  top: 66px;
  right: 0;
  width: 40px;
  height: 42px;
  padding-right: 0;
  border-radius: 10px 0 0 10px;
  color: var(--danger);
  background: var(--danger-soft);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-right: 0;
  box-shadow: var(--shadow);
  z-index: 14;
  transition: right 0.25s ease, transform 0.25s ease, opacity 0.22s ease;
}

body.report-sidebar-no-filters .report-filter-clear-rail {
  top: 16px;
}

.rail-toggle-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

body.sidebar-collapsed .shell {
  padding-left: calc(var(--sidebar-rail) + var(--sidebar-gap));
}

/* Collapsed = on-screen icon rail (BOEMAR Sidebar design), not hidden */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-rail);
  transform: none;
  overflow: visible;
  padding: 16px 8px;
}

body.sidebar-collapsed .sidebar-rail-toggle:not(.hidden),
body:not(.sidebar-collapsed) .sidebar-rail-toggle:not(.hidden) {
  display: grid !important;
}

body.report-loading .sidebar-rail-toggle:not(.hidden),
body.app-booting .sidebar-rail-toggle:not(.hidden),
body.report-loading .report-sidebar-rail-toggle,
body.app-booting .report-sidebar-rail-toggle {
  display: none !important;
}

body.sidebar-collapsed .sidebar-rail-toggle.hidden {
  display: none !important;
}

body:not(.sidebar-collapsed) .sidebar-rail-toggle {
  left: calc(var(--sidebar-width) - 1px);
  transform: translateX(0);
  box-shadow: none;
}

body.report-sidebar-visible .shell {
  padding-right: calc(var(--report-sidebar-width) + var(--report-sidebar-gap));
}

body.report-sidebar-visible.report-sidebar-collapsed .shell,
body:not(.report-sidebar-visible) .shell {
  padding-right: 24px;
}

body.report-sidebar-visible.report-sidebar-collapsed .report-sidebar {
  transform: translateX(var(--report-sidebar-width));
}

body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-sidebar {
  transform: translateX(0);
}

body.report-sidebar-visible .report-sidebar.hidden {
  display: flex !important;
}

body.report-sidebar-collapsed .report-sidebar-rail:not(.hidden),
body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-sidebar-rail:not(.hidden) {
  display: grid !important;
}

.report-sidebar-rail.hidden,
.report-sidebar-rail-toggle.hidden {
  display: none !important;
}

body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-sidebar-rail {
  right: calc(var(--report-sidebar-width) - 1px);
  transform: translateX(0);
}

body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-filter-clear-rail {
  right: calc(var(--report-sidebar-width) - 1px);
  transform: translateX(40px);
  opacity: 0;
  pointer-events: none;
}

body.report-sidebar-visible.report-clear-rail-visible:not(.report-sidebar-collapsed) .report-filter-clear-rail {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.report-filter-clear-rail.hidden {
  display: grid !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(40px) !important;
}

body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-filter-clear-rail.hidden {
  transform: translateX(40px) !important;
}

body.report-sidebar-visible.report-clear-rail-visible.report-sidebar-collapsed .report-filter-clear-rail {
  width: 36px;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto;
  transition: right 0.25s ease !important;
}

body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-sidebar-rail-toggle {
  box-shadow: none;
}

body.report-sidebar-visible.report-clear-rail-visible .report-sidebar-rail-toggle[data-report-rail-tab="download"] {
  transform: translateY(50px) !important;
}

body.report-sidebar-visible.report-clear-rail-visible .report-sidebar-rail-toggle[data-report-rail-tab="mail"] {
  transform: translateY(50px) !important;
}

.brand,
.report-toolbar,
.filter-row,
.auth-grid,
.stat-grid,
.report-grid,
.admin-grid,
.table-actions,
.topbar-actions,
.session-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.brand {
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0 0 0 4px;
  min-height: 44px;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* open state: vertical divider between the logo and the wordmark */
body:not(.sidebar-collapsed) .brand-txt {
  border-left: 1px solid var(--line);
  padding-left: 13px;
}

/* horizontal divider only in the collapsed rail (under the header) */
.sidebar-divider {
  display: none;
}

body.sidebar-collapsed .sidebar-divider {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 0 14px 12px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-txt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}

.brand-eyebrow {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint, var(--muted));
  font-weight: 700;
}

.brand-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.report-page .eyebrow {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  /* Temel `.eyebrow` 0.14em veriyor; raporda etiketler 14px'e indiği için
     (blanket kural) bu ~2px harf aralığı demek ve fazla açık duruyordu. */
  letter-spacing: 0.04em;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
.kpi-value {
  font-family: Helvetica, Arial, sans-serif;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 18px 0 0;
  padding: 0 2px;
}

.nav button,
.button,
select,
input {
  font: inherit;
}

.button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  color: var(--on-accent);
  box-shadow: 0 16px 32px rgba(var(--accent-rgb), 0.22);
  transform: translateY(-1px);
}

/* ── Module nav (BOEMAR Sidebar design) ─────────────────────── */
.nav-sec {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  padding: 0 12px;
  margin: 2px 0 6px;
  white-space: nowrap;
}

.nav-item-wrap {
  position: relative;
  width: 100%;
}

.nav .nav-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 0.16s ease;
}

.nav .nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent-soft);
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: left center;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav .nav-item:hover {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.nav .nav-item:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav .nav-item.active {
  color: var(--accent);
  font-weight: 700;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.nav .nav-item.active::before {
  opacity: 1;
  transform: scaleX(1);
  background: var(--accent-softer);
}

.nav .nav-item.active::after {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-ico {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--faint);
  transition: color 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav .nav-item:hover .nav-ico {
  color: var(--accent);
  transform: translateX(2px);
}

.nav .nav-item.active .nav-ico {
  color: var(--accent);
}

.nav-lbl {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

.nav .nav-item.active .nav-lbl {
  font-weight: 700;
}

.nav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--faint);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav .nav-item.active .nav-count {
  background: var(--accent-softer);
  color: var(--accent);
}

.nav-chev {
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.22s ease;
}

.nav-count + .nav-chev {
  margin-left: 8px;
}

.nav-item.exp .nav-chev {
  transform: rotate(90deg);
}

/* expanding group tree (open state) */
.nav-subtree {
  margin: 2px 0 4px 30px;
  padding-left: 13px;
  border-left: 1.5px solid rgba(var(--accent-rgb), 0.18);
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, margin 0.2s ease;
}

.nav-subtree > div {
  min-height: 0;
}

.nav-item-wrap.exp .nav-subtree {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 4px;
  margin-bottom: 8px;
}

.nav .nav-grp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 12.5px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}

.grp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 24%, transparent);
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.18s ease;
}

.grp-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grp-count {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--faint);
}

.nav .nav-grp:hover {
  background: var(--accent-soft);
  color: var(--text);
  padding-left: 14px;
  box-shadow: none;
  transform: none;
}

.nav .nav-grp:hover .grp-dot {
  background: var(--accent);
  transform: scale(1.4);
}

.nav .nav-grp.active {
  background: var(--accent-softer);
  color: var(--accent);
  font-weight: 700;
  box-shadow: none;
  transform: none;
}

.nav .nav-grp.active .grp-dot {
  background: var(--accent);
}

/* collapsed-only elements are hidden in the open (default) state */
.nav-mini,
.nav-nbadge,
.nav-flyout {
  display: none;
}

.nav-fly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 2px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.nav-fly-meta {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--success);
  letter-spacing: 0.04em;
}

/* ── Collapsed icon rail (BOEMAR Sidebar design) ─────────── */
body.sidebar-collapsed .brand {
  justify-content: center;
  padding: 0;
  margin-bottom: 52px;
}

body.sidebar-collapsed .brand-txt {
  display: none;
}

body.sidebar-collapsed .nav {
  align-items: center;
  gap: 6px;
  padding: 0;
}

body.sidebar-collapsed .nav-sec {
  display: none;
}

body.sidebar-collapsed .nav-item-wrap {
  width: auto;
}

body.sidebar-collapsed .nav .nav-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 68px;
  height: auto;
  padding: 9px 0 7px;
  border-radius: 14px;
}

body.sidebar-collapsed .nav-ico {
  width: 22px;
  height: 22px;
}

body.sidebar-collapsed .nav .nav-item:hover .nav-ico {
  transform: none;
}

body.sidebar-collapsed .nav-lbl,
body.sidebar-collapsed .nav-count,
body.sidebar-collapsed .nav-chev {
  display: none;
}

body.sidebar-collapsed .nav-mini {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

body.sidebar-collapsed .nav-nbadge {
  display: grid;
  place-items: center;
  position: absolute;
  top: 5px;
  right: 11px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
}

body.sidebar-collapsed .nav .nav-item::before {
  transform: scale(0.92);
}

body.sidebar-collapsed .nav .nav-item:hover::before,
body.sidebar-collapsed .nav .nav-item.active::before {
  transform: scale(1);
}

body.sidebar-collapsed .nav .nav-item.active::after {
  left: 0;
  height: 26px;
}

body.sidebar-collapsed .nav-subtree {
  display: none;
}

/* hover flyout (groups only) */
body.sidebar-collapsed .nav-flyout {
  display: block;
  position: absolute;
  left: calc(100% + 14px);
  top: -6px;
  z-index: 60;
  width: 226px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px) scale(0.98);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.16s ease;
}

body.sidebar-collapsed .nav-flyout::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 14px;
}

body.sidebar-collapsed .nav-item-wrap:hover .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* account: avatar-only, menu opens to the right */
body.sidebar-collapsed .sidebar-footer {
  display: flex;
  justify-content: center;
}

body.sidebar-collapsed .acct {
  padding: 0;
}

body.sidebar-collapsed .acct:hover {
  background: transparent;
  border-color: transparent;
}

body.sidebar-collapsed .acct:hover .acct-av {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

body.sidebar-collapsed .acct-meta,
body.sidebar-collapsed .acct-kebab {
  display: none;
}

body.sidebar-collapsed .acct-menu {
  left: calc(100% + 8px);
  right: auto;
  bottom: 0;
  width: 214px;
  transform-origin: bottom left;
  transform: translateX(-8px) scale(0.98);
}

body.sidebar-collapsed .acct-menu::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}

body.sidebar-collapsed .acct-wrap:hover .acct-menu {
  transform: none;
}

.button.secondary {
  background: var(--accent-soft);
  color: var(--accent);
}

.button.warn {
  background: rgba(174, 32, 18, 0.08);
  color: var(--danger);
}

.button.slim {
  padding: 10px 12px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.button.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: button-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar-card,
.panel {
  border-radius: var(--radius-xl);
}

.sidebar-card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.content {
  display: grid;
  gap: 18px;
  padding-bottom: 24px;
  min-width: 0;
}

.panel {
  padding: 24px;
}

.report-grid,
.admin-grid,
.stat-grid,
.auth-grid {
  display: grid;
  gap: 16px;
}

.report-page .report-grid {
  gap: 20px;
}

.stat-grid,
.report-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-grid,
.auth-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metric,
.card,
.table-wrap,
.empty,
.auth-card {
  border: 1px solid var(--line);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
}

.metric,
.card,
.auth-card {
  padding: 18px;
  min-width: 0;
}

.report-page .metric,
.report-page .card {
  padding: 16px 20px;
}

.kpi-value {
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

.report-page .kpi-value {
  font-size: 16px;
}

.report-page .kpi-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;   /* .report-page .eyebrow ile aynı aralık */
}

.kpi-value.income {
  color: var(--success);
}

.kpi-value.expense {
  color: var(--danger);
}

.download-menu {
  position: relative;
  width: 136px;
  flex: 0 0 136px;
  padding-bottom: 8px;
  margin-bottom: -8px;
}

.download-menu-trigger {
  width: 100%;
  justify-content: center;
}

.download-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  width: 100%;
  padding: 2px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-menu);
  box-shadow: var(--shadow);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scaleY(0.9);
  transform-origin: top center;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.download-menu.open .download-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
}

.download-menu.open-up .download-menu-panel {
  transform: translateY(10px) scaleY(0.9);
}

.download-menu-trigger.is-downloading {
  opacity: 0.72;
  pointer-events: none;
  cursor: default;
}

.download-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.download-menu-item:first-child {
  border-top: 0;
}

.download-menu-item:hover {
  background: rgba(21, 141, 152, 0.08);
  color: var(--accent);
}

.amount-positive {
  color: var(--report-green);
  font-weight: 700;
}

.amount-negative {
  color: var(--report-red);
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.account-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 4px 12px;
}

.account-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(109, 89, 63, 0.14);
  padding-bottom: 14px;
}

.account-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.account-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(109, 89, 63, 0.1);
}

.account-row-top {
  align-items: start;
}

.account-label {
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
}

.account-value {
  color: var(--text-main);
  min-width: 0;
}

.account-edit-value input {
  width: min(440px, 100%);
}

.account-permissions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-permission-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-module-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-module-item {
  border-bottom: 1px solid rgba(109, 89, 63, 0.1);
  padding-bottom: 10px;
}

.account-module-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-module-item summary::-webkit-details-marker {
  display: none;
}

.account-module-item summary::before {
  content: "+";
  font-weight: 700;
  color: var(--muted);
}

.account-module-item[open] summary::before {
  content: "−";
}

.account-module-item .account-tag-list,
.account-module-item .muted {
  margin-top: 10px;
}

.account-subpermission {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-subpermission-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}

.account-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-card);
  border: 1px solid rgba(109, 89, 63, 0.14);
  font-size: 0.84rem;
  color: var(--text-main);
}

.account-tag.subtle {
  background: var(--surface-subtle);
}

.account-report-mail-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-card);
}

.account-report-mail-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.account-report-mail-table th,
.account-report-mail-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(109, 89, 63, 0.1);
  text-align: center;
  white-space: nowrap;
}

.account-report-mail-table th:first-child,
.account-report-mail-table td:first-child {
  text-align: left;
  min-width: 220px;
}

.account-report-mail-table th {
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.account-report-mail-table td:first-child strong,
.account-report-mail-table td:first-child span {
  display: block;
}

.account-report-mail-table td:first-child span {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin-top: 3px;
}

.account-report-mail-table tr:last-child td {
  border-bottom: 0;
}

.account-mail-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.account-mail-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.account-mail-check.is-disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.account-mail-check.is-disabled input {
  cursor: not-allowed;
}

.account-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-password-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-row {
  align-items: end;
  margin: 18px 0;
}

.report-toolbar-right,
.source-sync-block,
.source-sync-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.report-toolbar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.source-sync-block {
  justify-content: flex-end;
}

.source-sync-meta {
  justify-content: flex-end;
}

.source-sync-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.source-sync-pill.ok {
  background: var(--success-soft);
  color: var(--success);
}

.source-sync-pill.warn {
  background: rgba(174, 32, 18, 0.1);
  color: var(--danger);
}

.source-sync-text {
  color: var(--muted);
  font-size: 0.88rem;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 170px;
  flex: 1;
}

label {
  font-size: 0.9rem;
  color: var(--muted);
}

input,
select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  color: var(--text);
}

select option {
  background: var(--surface-menu);
  color: var(--text);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.88rem;
}

.table-wrap {
  overflow: auto;
}

.context-menu {
  position: fixed;
  z-index: 60;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface-menu);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.context-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.context-menu-item:hover {
  background: var(--accent-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.success {
  background: rgba(45, 106, 79, 0.14);
  color: var(--success);
}

.badge.warn {
  background: var(--danger-soft);
  color: var(--danger);
}

.card h4,
.auth-card h3 {
  margin-bottom: 10px;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 13px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}

.login-remember input {
  width: 16px;
  height: 16px;
  accent-color: #335c81;
}

body[data-theme="dark"] .login-remember {
  color: #94a3b8;
}

body[data-theme="dark"] .login-remember input {
  accent-color: #7aa8d8;
}

.login-submit {
  width: 100%;
  justify-content: center;
  height: 50px;
  font-size: 14.5px;
}

.theme-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.theme-inline-settings {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.theme-inline-settings h4 {
  margin: 0;
  white-space: nowrap;
}

.theme-inline-settings .theme-settings-row {
  margin-top: 0;
}

.theme-palette-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.theme-palette-pill,
.theme-mode-toggle {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.theme-palette-pill {
  padding: 0 14px;
}

.theme-palette-pill:hover,
.theme-palette-pill.active,
.theme-mode-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.1);
}

.theme-mode-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
}

.theme-mode-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-panel);
}

.sidebar-footer {
  margin-top: auto;
  display: block;
  padding-top: 14px;
}

/* Bildirimler maddesi footer'da, hesap kartının üstünde durur. `.nav` sarmalayıcısı
   nav-item stillerini (hover/active/daraltılmış rail) olduğu gibi devralmak için. */
.sidebar-footer .nav.sidebar-notif { margin: 0 0 8px; }
/* Daraltılmış rail'de footer flex-row olur (avatarı ortalamak için) — bildirim
   maddesi avatarın YANINA değil ÜSTÜNE gelsin diye sütuna çeviriyoruz. */
body.sidebar-collapsed .sidebar-footer { flex-direction: column; align-items: center; gap: 6px; }
body.sidebar-collapsed .sidebar-footer .nav.sidebar-notif { margin: 0; align-items: center; }

/* ── Account card (BOEMAR Sidebar design) ─────────────────── */
.acct-wrap {
  position: relative;
}

.acct {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.acct:hover {
  background: var(--surface-subtle);
  border-color: var(--line);
}

.acct-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
}

.acct-meta {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.25;
}

.acct-nm {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-rl {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}

.acct-kebab {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--faint);
}

.acct-kebab svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* upward hover menu */
.acct-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.16s ease;
}

.acct-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.acct-wrap:hover .acct-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.acct-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.acct-mi {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--faint);
  transition: color 0.14s ease;
}

.acct-mi svg {
  width: 100%;
  height: 100%;
  display: block;
}

.acct-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.acct-menu-item:hover .acct-mi {
  color: var(--accent);
}

.acct-menu-item.active {
  background: var(--accent-softer);
  color: var(--accent);
}

.acct-menu-item.active .acct-mi {
  color: var(--accent);
}

.acct-menu-item.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.acct-menu-item.danger:hover .acct-mi {
  color: var(--danger);
}

.acct-menu-sep {
  height: 1px;
  background: var(--line);
  margin: 5px 6px;
}

.acct-theme-row {
  display: flex;
  gap: 5px;
  padding: 5px 4px 3px;
}

.acct-theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.acct-theme-btn svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acct-theme-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.acct-theme-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.category-card {
  padding: 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(65, 38, 10, 0.12);
}

.report-list {
  display: grid;
  gap: 0;
}

.report-list-head,
.report-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.report-list-head {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.report-list-title {
  display: flex;
  align-items: center;
}

.report-list-action-head {
  text-align: center;
  min-width: 148px;
}

.report-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.report-row-main {
  display: grid;
  gap: 8px;
}

.report-row-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.report-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.report-show-field {
  display: flex;
  justify-content: center;
}

.report-show-field-wide {
  min-width: 148px;
}

.report-show-button {
  width: 100%;
  justify-content: center;
}

.report-filters-card {
  margin-bottom: 18px;
}

.report-filter-bar {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.report-filter-field {
  min-width: 180px;
  max-width: 220px;
  flex: 0 1 200px;
}

.report-filter-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.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;
}

.report-grid-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.net-sales-top-grid-pies {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 20px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--accent), var(--accent-gradient-end)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.portal-home-hero .eyebrow,
.portal-home-hero .muted {
  color: var(--on-accent);
}

.portal-home-copy {
  display: grid;
  gap: 14px;
}

.portal-home-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-home-badges .badge {
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-accent);
}

.portal-home-badges .badge.success {
  background: rgba(255, 255, 255, 0.24);
  color: var(--on-accent);
}

.portal-home-actions {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 220px;
}

.portal-home-toolbar {
  margin-top: 22px;
}

.portal-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.portal-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.portal-module-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 240px;
}

.portal-overview-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.portal-overview-card-wide {
  grid-column: 1 / -1;
}

.portal-module-primary {
  background:
    linear-gradient(180deg, var(--accent-soft), var(--surface-card)),
    var(--surface-card);
  border-color: rgba(var(--accent-rgb), 0.18);
}

.portal-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-module-meta span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 0.84rem;
}

.portal-user-meta,
.portal-user-pills,
.portal-access-list {
  display: grid;
  gap: 10px;
}

.portal-user-meta span {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--muted);
}

.portal-user-pills {
  display: flex;
  flex-wrap: wrap;
}

.portal-access-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-card);
  border: 1px solid var(--line);
}

.portal-access-item-static {
  background: var(--surface-subtle);
}

.portal-empty-home {
  min-height: calc(100vh - 120px);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.home-widget {
  grid-column: span 6;
}

.home-widget-full {
  grid-column: 1 / -1;
}

.home-widget-half {
  grid-column: span 6;
}

.home-widget-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.empty-home {
  padding: 28px;
}

.skeleton-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(135deg, var(--surface-card-strong), var(--surface-card));
}

.skeleton-kpi {
  min-height: 150px;
  align-content: start;
}

.skeleton-panel-table {
  min-height: 420px;
  align-content: start;
}

.skeleton-line,
.skeleton-bar,
.skeleton-cell,
.skeleton-input,
.skeleton-icon,
.skeleton-pill {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 95, 115, 0.1);
}

.skeleton-line::before,
.skeleton-bar::before,
.skeleton-cell::before,
.skeleton-input::before,
.skeleton-icon::before,
.skeleton-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.88) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: skeleton-wave 1.2s ease-in-out infinite;
}

.skeleton-line {
  display: block;
  height: 14px;
}

.skeleton-line-xs {
  width: 32%;
}

.skeleton-line-sm {
  width: 22%;
}

.skeleton-line-md {
  width: 48%;
  height: 18px;
}

.skeleton-line-lg {
  width: 58%;
}

.skeleton-chart {
  height: 260px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--line);
}

.skeleton-bar {
  width: 28px;
  min-height: 12px;
  border-radius: 12px 12px 0 0;
}

.skeleton-field {
  display: grid;
  gap: 8px;
  min-width: 180px;
}

.skeleton-input {
  height: 42px;
}

.skeleton-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.skeleton-pill {
  display: inline-block;
  width: 86px;
  height: 38px;
  border-radius: 999px;
}

.skeleton-pill-wide {
  width: 136px;
}

.skeleton-home-hero {
  align-items: center;
}

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

.skeleton-kpi-column {
  display: grid;
  gap: 0;
  align-content: stretch;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-card);
}

.skeleton-kpi-column-wide {
  grid-column: span 2;
}

.skeleton-kpi-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(80px, 0.35fr);
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.skeleton-kpi-row:last-child {
  border-bottom: 0;
}

.skeleton-income-table-card {
  padding: 0;
  overflow: hidden;
}

.skeleton-report-table-card {
  overflow: hidden;
}

.skeleton-balance-table-card {
  min-height: 430px;
}

.skeleton-section-heading {
  margin-bottom: 4px;
}

.skeleton-stat-grid {
  margin-bottom: 0;
}

.report-side-panel-skeleton .skeleton-input,
.report-side-panel-skeleton .skeleton-line {
  width: 100%;
}

.report-side-panel-skeleton .skeleton-field {
  min-width: 0;
}

.skeleton-income-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.skeleton-levels,
.skeleton-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.skeleton-actions .skeleton-input {
  width: 160px;
  height: 38px;
}

.skeleton-table-head,
.skeleton-table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) 140px 100px;
  gap: 16px;
}

.skeleton-table-rows {
  display: grid;
  gap: 12px;
}

.skeleton-cell {
  height: 16px;
}

.skeleton-cell-wide {
  width: 88%;
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Rapora özel iskelet yerleşimleri (güncel raporun iskeleti) */
.skeleton-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.skeleton-chart-duo {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.skeleton-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skeleton-controls-row .skeleton-pill {
  width: 92px;
  height: 34px;
}

.skeleton-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.skeleton-card-head .skeleton-line {
  margin: 0;
}

.skeleton-card-head-pills {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}

.skeleton-chart-tall {
  height: 320px;
}

.skeleton-selector-bar {
  padding: 16px 20px;
}

.skeleton-input-wide {
  width: 100%;
  max-width: 420px;
  height: 40px;
}

.report-chart-grid {
  align-items: start;
}

.report-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.report-update-indicator {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 9px 14px;
  border: 1px solid rgba(0, 95, 115, 0.16);
  border-radius: 999px;
  background: var(--surface-card-strong);
  color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 52, 64, 0.16);
  font-size: 0.88rem;
  font-weight: 800;
  pointer-events: none;
  transform: translateX(-50%);
}

.report-update-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 95, 115, 0.18);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: button-spin 0.75s linear infinite;
  flex: 0 0 auto;
}

.report-card-flat {
  border-radius: 18px;
  background: var(--surface-card);
  height: 100%;
  min-width: 0;
}

.income-statement-table-card {
  padding: 0;
  overflow: hidden;
  position: relative;
  transition:
    inset 0.22s ease,
    border-radius 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.income-statement-table-card .income-table-wrap {
  border: 0;
  border-radius: inherit;
  position: relative;
}

.income-statement-table-card.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  max-height: none;
  background: var(--surface-strong);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  overflow: hidden;
}

.income-statement-table-card.is-expanded.no-expand-animation {
  animation: none;
}

.income-statement-table-card.is-expanded.is-closing {
  animation: income-table-collapse-out 0.18s ease both;
}

.income-statement-table-card.is-expanded .income-table-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0;
  background: var(--surface-strong);
}

.income-fullscreen-header {
  display: none;
}

.income-statement-table-card.is-expanded .income-fullscreen-header {
  display: grid;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}

.income-statement-table-card.is-expanded .income-table-scroll {
  flex: 1;
  width: 100%;
  max-height: none;
  min-height: 0;
}

.income-statement-table-card.is-expanded .income-level-toolbar {
  border-radius: 0;
  background: var(--surface-card-strong);
}

.income-statement-table-card.is-expanded .income-table {
  min-width: 100%;
}

.income-table-expand-toggle {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 40;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.income-table-expand-toggle:hover {
  opacity: 1;
  transform: scale(1.05);
}

.income-table-expand-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Tek tablo "Excel'e indir" butonu */
.table-excel-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.table-excel-btn:hover {
  color: #1d7d46;
  border-color: #1d7d46;
  transform: scale(1.05);
}
.table-excel-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.table-excel-btn.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.kar-tab-bar .table-excel-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Trend (MoM/YoY) grafiklerinde bugünün düştüğü dönem işareti.
   İşaret çubuğun kutusunun (track) içine, üst-orta köşeye mutlak konumlanır;
   böylece grid akışını bozmaz ve overflow ile kırpılmaz. */
.ns-grouped-bars { position: relative; }
.trend-current-marker {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  color: var(--accent);
  pointer-events: none;
  animation: trendCurrentBob 1.6s ease-in-out infinite;
}
.trend-current-marker svg {
  width: 16px;
  height: 10px;
  fill: currentColor;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}
.is-current-period .vertical-chart-label > strong,
.is-current-period .waterfall-label > strong,
.is-current-period .ns-grouped-label > strong {
  color: var(--accent);
}
@keyframes trendCurrentBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(2px); }
}

.income-table-wrap .income-level-toolbar {
  padding-right: 52px;
}

@keyframes income-table-expand-in {
  from {
    opacity: 0.82;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes income-table-collapse-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.82;
    transform: scale(0.985);
  }
}

.vertical-chart {
  width: 100%;
  height: 382px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  min-width: 0;
  position: relative;
}

.vertical-chart::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(64px + 10px + var(--chart-zero-line, 220px));
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.vertical-chart-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, 1fr);
  gap: 16px;
  align-items: end;
  min-height: 376px;
  min-width: 100%;
  position: relative;
  z-index: 1;
}

.vertical-chart-grid-categories {
  grid-auto-columns: minmax(110px, 1fr);
}

.vertical-chart-item {
  display: grid;
  gap: 10px;
  align-items: end;
}

.vertical-chart-values {
  min-height: 44px;
  display: grid;
  gap: 4px;
  text-align: center;
  font-size: 0.86rem;
}

.vertical-chart-ratio {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.vertical-chart-bars {
  height: 220px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
}

.vertical-chart-bars-single {
  justify-content: center;
}

.vertical-chart-bars-axis {
  display: block;
  position: relative;
  border-bottom: 0;
}

.vertical-chart-bars-axis::after {
  content: none;
}

.vertical-chart-bars-axis.is-positive-only::after {
  top: auto;
  bottom: 0;
}

.vertical-chart-bar {
  display: block;
  width: 26px;
  min-height: 2px;
  border-radius: 12px 12px 0 0;
}

.vertical-chart-bars-axis .vertical-chart-bar {
  position: absolute;
  left: 50%;
  width: 26px;
  transform: translateX(-50%);
}

.vertical-chart-bars-axis .vertical-chart-bar.positive {
  bottom: 50%;
  border-radius: 12px 12px 0 0;
}

.vertical-chart-bars-axis.is-positive-only .vertical-chart-bar.positive {
  bottom: 0;
}

.vertical-chart-bars-axis .vertical-chart-bar.negative {
  top: 50%;
  border-radius: 0 0 12px 12px;
}

.vertical-chart-label {
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.88rem;
}

.vertical-chart-label-category {
  font-size: 0.82rem;
}

.net-sales-vertical-grid .vertical-chart-item {
  grid-template-rows: 64px 220px 72px;
  align-items: stretch;
}

.net-sales-vertical-grid .vertical-chart-values {
  min-height: 0;
  align-content: end;
}

.net-sales-vertical-grid .vertical-chart-label {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  line-height: 1.25;
}

.net-sales-vertical-grid .vertical-chart-label strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vertical-chart-income-report {
  overflow-x: auto;
  overflow-y: hidden;
}

.vertical-chart-grid-income-monthly,
.vertical-chart-grid-income-categories {
  min-width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, 1fr);
  width: max-content;
}

.vertical-chart-grid-income-monthly {
  gap: 10px;
}

.vertical-chart-grid-income-categories {
  gap: 12px;
}

.vertical-chart-grid-income-monthly .vertical-chart-values,
.vertical-chart-grid-income-categories .vertical-chart-values {
  min-height: 38px;
  font-size: 0.78rem;
}

.vertical-chart-grid-income-monthly .vertical-chart-bars,
.vertical-chart-grid-income-categories .vertical-chart-bars {
  height: 180px;
  padding: 0 4px;
}

.vertical-chart-grid-income-monthly .vertical-chart-bar,
.vertical-chart-grid-income-categories .vertical-chart-bar {
  width: 18px;
}

.vertical-chart-grid-income-monthly .vertical-chart-label {
  font-size: 0.78rem;
}

.vertical-chart-grid-income-categories .vertical-chart-label {
  font-size: 0.74rem;
}

.vertical-chart-grid-income-categories .table-subtext {
  display: block;
  font-size: 0.68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.income-bar {
  background: linear-gradient(135deg, var(--income-bar-start), var(--income-bar-end));
}

.expense-bar {
  background: linear-gradient(135deg, var(--expense-bar-start), var(--expense-bar-end));
}

.report-page {
  min-height: calc(100vh - 32px);
  font-size: 14px;
}

/* ── Rapor tipografisi: tek tip ölçek ───────────────────────────────────
   `.report-page` reportPanelEl'e eklenir → açılan rapor, yüklenme iskeleti
   ve "Hangi görünümle açılsın?" popup'ı aynı kapsamda normalize edilir.
     • Rapor ana başlığı + popup başlığı .......... 24px
     • Rapor içi başlıklar (h1–h6) + popup yazıları  16px
     • Geri kalan her metin (KPI değer/etiket dahil) 14px
   SVG metni hariç tutulur (font-size viewBox birimindedir; px verilirse
   grafik etiketleri devasa olur). */
.report-page :not(svg):not(svg *):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 14px !important;
}
.report-page :is(h1, h2, h3, h4, h5, h6) {
  font-size: 16px !important;
}
.report-page .report-shell-title h2,
.report-page .metric-view-modal h3 {
  font-size: 24px !important;
}
.report-page .metric-view-modal .eyebrow,
.report-page .metric-view-tile-label {
  font-size: 16px !important;
}
/* Görünüm sembolü (# ₺ %) ikonik öğedir — kendi boyutunu korur. */
.report-page .metric-view-tile-sym {
  font-size: 26px !important;
}

body.income-table-fullscreen {
  overflow: hidden;
}

body.cari-rontgen-invoice-fullscreen {
  overflow: hidden;
}

html.report-chart-fullscreen,
body.report-chart-fullscreen {
  overflow: hidden;
}

body.income-table-fullscreen .shell {
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.cari-rontgen-invoice-fullscreen .shell {
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.report-chart-fullscreen .shell {
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.income-table-fullscreen #reportPanel.report-page {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.cari-rontgen-invoice-fullscreen #reportPanel.report-page {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.report-chart-fullscreen #reportPanel.report-page {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.report-chart-overlay-host {
  /* Overlay body'ye eklenir, .report-page dışında kalır; oranın 14px'ini
     koru ki tam ekranda font (tablo/grafik) büyümesin. */
  font-size: 14px;
  position: fixed;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1210;
  overflow: hidden;
  background: var(--surface-strong);
  pointer-events: auto;
  padding: 0 24px 24px;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transform: none !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.chart-fullscreen-header-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.report-main-stack {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.report-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  position: relative;
}

.report-shell-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.report-shell-meta-editable {
  position: relative;
}

.report-shell-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-shell-meta strong {
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-shell-date-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(100vw - 120px, 680px);
}

.report-shell-date-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cari-rontgen-info-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
}

.cari-rontgen-info-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cari-rontgen-info-card strong {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cari-rontgen-info-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.report-date-edit-button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.report-date-edit-button:hover,
.report-date-edit-button.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.report-date-edit-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.report-shell-title {
  min-width: 0;
  text-align: center;
}

.report-shell-title h2 {
  margin: 0;
  font-size: 1.45rem;
}

.report-shell-brand {
  display: flex;
  justify-content: flex-end;
}

.report-shell-brand img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.report-side-panel {
  display: grid;
  gap: 0;
  padding-inline: 10px;
}

.report-side-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px 0 12px;
}

.report-side-tab {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card-strong);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.report-side-tab.active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--text);
}

.report-side-tab-panel.hidden {
  display: none;
}

.report-side-panel > * + * {
  border-top: 1px solid var(--line);
}

.report-side-section {
  padding: 12px 0;
}

.report-side-inline-clear {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.report-side-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.report-side-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.report-side-section-head h4 {
  font-size: 0.92rem;
}

.report-side-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.report-side-actions .download-menu,
.report-side-actions .download-menu-trigger,
.report-side-actions > .button {
  width: 100%;
}

.report-side-actions > .button {
  justify-content: center;
  min-height: 38px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.report-side-actions .download-menu-panel {
  width: 100%;
}

.report-side-meta {
  margin-top: 8px;
}

.report-filter-bar-sidebar,
.report-slicer-list {
  display: grid;
  gap: 10px;
}

/* Slicer toggle (checkbox) — ör. kar raporu "Hizmeti Dahil Et" */
.report-slicer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.report-slicer-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.report-slicer-toggle-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  transition: background 0.15s, border-color 0.15s;
}
.report-slicer-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.report-slicer-toggle input:checked + .report-slicer-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.report-slicer-toggle input:checked + .report-slicer-toggle-track::after {
  transform: translateX(18px);
}
.report-slicer-toggle input:focus-visible + .report-slicer-toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.report-slicer-toggle-text {
  font-size: 0.85rem;
  color: var(--muted);
}

.report-slicer-list-compact {
  margin-top: 10px;
}

.report-mail-frequency-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 12px;
}

.report-mail-frequency {
  justify-content: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card-strong);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.report-mail-frequency input {
  display: none;
}

.report-mail-frequency.is-checked {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--text);
}

.report-mail-frequency:not(.is-disabled):hover {
  transform: translateY(-1px);
}

.report-filter-actions-sidebar {
  margin-left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.report-slicer-apply-tray {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  margin-top: 8px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0), var(--surface-card) 34%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.report-slicer-apply-tray.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.report-slicer-apply-tray.is-visible:not(.no-enter) {
  animation: report-filter-apply-enter 220ms ease both;
}

.report-slicer-apply-tray.is-closing {
  opacity: 0;
  pointer-events: none;
  animation: report-filter-apply-exit 220ms ease both;
}

@keyframes report-filter-apply-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes report-filter-apply-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(18px);
  }
}

.report-slicer-apply-tray .button {
  width: 100%;
  justify-content: center;
}

.report-action-tray {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0), var(--surface-card) 34%);
}

.report-download-tray {
  grid-template-columns: minmax(0, 1fr);
}

.report-download-tray.has-clear {
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
}

.report-download-tray .download-menu,
.report-download-tray .download-menu-trigger {
  width: 100%;
}

.report-download-tray .download-menu {
  padding-bottom: 0;
  margin-bottom: 0;
}

.report-download-tray .download-menu-panel {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(10px) scaleY(0.9);
  transform-origin: bottom center;
}

.report-mail-action-tray {
  grid-template-columns: minmax(0, 1fr) 0fr;
  column-gap: 0;
  overflow: hidden;
  transition: grid-template-columns 220ms ease, column-gap 220ms ease;
}

.report-mail-action-tray.has-save {
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
  column-gap: 8px;
}

.report-mail-action-tray .button {
  width: 100%;
  justify-content: center;
  min-width: 0;
}

.report-mail-save-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.report-mail-action-tray.has-save .report-mail-save-button {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.report-mail-action-tray:not(.has-save) .report-mail-save-button {
  display: none;
}

.report-mail-action-tray.is-closing .report-mail-save-button {
  display: inline-flex;
  pointer-events: none;
  animation: report-mail-save-exit 220ms ease both;
}

@starting-style {
  .report-mail-action-tray.has-save:not(.no-enter) .report-mail-save-button {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes report-mail-save-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(18px);
  }
}

.income-date-filter-card {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 30;
  width: min(560px, calc(100vw - 56px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-card-strong);
  box-shadow: 0 18px 42px rgba(31, 42, 68, 0.14);
}

.income-header-date-editor {
  display: inline-grid;
  grid-template-columns: minmax(210px, auto) minmax(112px, 132px) 30px 30px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.income-header-date-editor.is-range {
  grid-template-columns: max-content minmax(112px, 132px) 30px 30px;
}

.income-header-currency-editor {
  grid-template-columns: minmax(92px, 104px) 30px 30px;
}

.income-header-date-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: max-content;
}

.income-header-date-editor input,
.income-header-date-editor select {
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card-strong);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 4px 10px;
  box-sizing: border-box;
}

.income-header-date-editor input[type="date"] {
  width: 142px;
}

.income-header-date-primary > select,
.income-header-date-primary > input:not([type="date"]) {
  width: 174px;
}

.income-header-date-mode {
  width: 100%;
}

.income-header-date-all {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card-strong);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.income-header-date-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--surface-card-strong);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.income-header-date-action.save {
  color: #16a34a;
}

.income-header-date-action.cancel {
  color: #d62828;
}

.income-header-date-action:hover {
  background: var(--accent-soft);
}

.income-header-date-action svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.income-date-filter-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 1fr)) minmax(96px, auto);
  gap: 10px;
  align-items: end;
}

.income-date-filter-controls .report-slicer-apply-tray {
  position: static;
  margin-top: 0;
  padding-top: 0;
  background: transparent;
}

.report-side-panel .field {
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.report-side-panel .report-filter-field {
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}

.report-side-panel label {
  font-size: 0.8rem;
}

.report-side-panel input,
.report-side-panel select,
.report-slicer-summary {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  min-height: 52px;
  box-sizing: border-box;
}

.report-side-panel select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23826E57' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
}

.report-slicer-multiselect {
  position: relative;
  margin: 0;
  z-index: 0;
  width: 100%;
  min-width: 0;
}

.report-slicer-multiselect[open] {
  z-index: 10;
}

.report-slicer-summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid rgba(17, 106, 137, 0.14);
  background: var(--surface-card-strong);
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 36px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.report-slicer-summary::-webkit-details-marker {
  display: none;
}

.report-slicer-summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23826E57' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform 160ms ease;
}

.report-slicer-multiselect[open] .report-slicer-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.report-slicer-summary-text {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-slicer-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid rgba(17, 106, 137, 0.14);
  border-radius: 14px;
  background: var(--surface-card-strong);
  box-shadow: 0 18px 36px rgba(31, 42, 68, 0.14);
  max-height: 300px;
  overflow: auto;
  padding: 0 5px 5px;
}

.report-slicer-options-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 4px;
  margin: 0 -5px 4px;
  padding: 5px 9px 6px;
  background: var(--surface-card-strong);
  border-bottom: 1px solid rgba(17, 106, 137, 0.08);
  border-radius: 14px 14px 0 0;
}

.report-slicer-search {
  width: 100%;
  padding: 6px 10px;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(17, 106, 137, 0.14);
  background: var(--surface-card-strong);
  font-size: 0.84rem;
}

.report-slicer-clear {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
}

.report-slicer-clear:hover:not(:disabled) {
  background: rgba(17, 106, 137, 0.08);
}

.report-slicer-clear:disabled {
  color: var(--muted);
  cursor: default;
}

.report-slicer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.88rem;
}

.report-slicer-option:hover {
  background: rgba(17, 106, 137, 0.08);
}

.report-slicer-option[hidden] {
  display: none;
}

.report-slicer-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

.report-slicer-option-single input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report-slicer-option-single {
  position: relative;
  padding-left: 10px;
}

.report-slicer-option-single:has(input:checked) {
  background: rgba(17, 106, 137, 0.1);
  color: var(--primary);
  font-weight: 700;
}

.report-side-panel .button {
  font-size: 0.88rem;
}

.report-side-panel .download-menu {
  width: 100%;
  flex: 0 0 auto;
}

.report-side-panel .download-menu:not(.open-up) .download-menu-panel {
  top: calc(100% + 1px);
  bottom: auto;
  transform-origin: top center;
}

.report-side-panel .download-menu.open-up .download-menu-panel {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom center;
}

.report-side-panel .download-menu-item {
  padding: 8px 12px;
}

.report-side-panel .source-sync-text {
  display: block;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-side-panel .muted {
  font-size: 0.82rem;
}

.net-sales-kpi-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Metric-gated: only the operational (quantity) column remains → full width. */
.net-sales-kpi-board-single {
  grid-template-columns: minmax(0, 1fr);
}

.horizontal-distribution-list {
  display: grid;
  gap: 16px;
  padding: 18px 0 4px;
  overflow: hidden;
}

.horizontal-distribution-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.22fr) minmax(0, 1fr) minmax(110px, auto);
  gap: 18px;
  align-items: center;
}

.horizontal-distribution-row.is-filterable {
  cursor: pointer;
}

.horizontal-distribution-row.is-dimmed {
  opacity: 0.3;
}

.horizontal-distribution-label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  min-width: 0;
}

.horizontal-distribution-label strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-distribution-label span,
.horizontal-distribution-value span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.horizontal-distribution-track {
  position: relative;
  height: 34px;
  border-radius: 0 999px 999px 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(25% - 0.5px),
      var(--chart-grid) calc(25% - 0.5px),
      var(--chart-grid) 25%
    );
}

.horizontal-distribution-track::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--chart-axis);
  z-index: 2;
}

.horizontal-distribution-gridline {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--chart-axis);
}

.horizontal-distribution-fill {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  border-radius: 0 999px 999px 0;
  min-width: 4px;
  background: linear-gradient(90deg, var(--positive-bar-start), var(--positive-bar-end));
}

.horizontal-distribution-fill.expense {
  background: linear-gradient(90deg, var(--negative-bar-start), var(--negative-bar-end));
}

/* Kâr (yeşil) — kâr şelale barının pozitif/kâr kısmı */
.horizontal-distribution-fill.profit {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

/* Kâr yatay barı: tam uzunluk = Ciro; yeşil = Kâr, kırmızı = Maliyet */
.ns-profit-fill {
  display: flex;
  background: transparent !important;
  /* Başlangıç (0 çizgisi) köşesi düz, sağ uç yuvarlak */
  border-radius: 0 999px 999px 0;
  overflow: hidden;
}
.ns-profit-seg { height: 100%; min-width: 0; }
.ns-profit-seg-profit { background: linear-gradient(90deg, #16a34a, #22c55e); }
.ns-profit-seg-cost { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Cari Matris — Kâr modunda satır renkleri: Satış mavi, Maliyet kırmızı, Kâr & Kâr Marjı yeşil */
.cari-rontgen-matrix-table tr.ns-matrix-row-satis td { color: #2f6fd6 !important; }
.cari-rontgen-matrix-table tr.ns-matrix-row-maliyet td { color: #dc2626 !important; }
.cari-rontgen-matrix-table tr.ns-matrix-row-kar td,
.cari-rontgen-matrix-table tr.ns-matrix-row-marj td { color: #16a34a !important; }
.vertical-chart-bar.profit-bar { background: linear-gradient(180deg, #22c55e, #16a34a); }
.vertical-chart-bar.loss-bar   { background: linear-gradient(180deg, #f87171, #dc2626); }

/* Stok dağılım/platform hover tooltip — çok satırlı (Ciro/Maliyet/Kâr/Marj) */
.stok-chart-tooltip { white-space: pre-line; line-height: 1.45; }

/* Depo dağılımı: sabit (sticky) toplam satırı — kaydırmada altta kalır */
.stok-depo-table tfoot.stok-depo-total td {
  position: sticky;
  bottom: 0;
  background: var(--surface-strong);
  font-weight: 700;
  border-top: 2px solid var(--line);
  z-index: 2;
}

/* Alış tablosu "Güncel" satırı vurgusu */
.stok-alis-guncel-row td { background: rgba(var(--accent-rgb), 0.06); }

/* ── Tümü trendi: Satış + Alış yan yana gruplu barlar ───────── */
.stok-tumu-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.stok-tumu-bar { width: 40%; max-width: 18px; border-radius: 6px 6px 0 0; min-height: 2px; }
.stok-tumu-bar.satis { background: linear-gradient(180deg, #4f8ff7, #2f6fd6); }
.stok-tumu-bar.alis  { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.stok-tumu-values { display: flex; gap: 6px; justify-content: center; font-size: 0.74rem; font-weight: 600; }
.stok-tumu-val.satis { color: #2f6fd6; }
.stok-tumu-val.alis  { color: #7c3aed; }
.stok-tumu-wrap { position: relative; }
/* Legend akıştan çıkar → "Tümü" sekmesi kart yüksekliğini artırmaz (Satış/Alış ile aynı kalır) */
.stok-tumu-legend { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; gap: 18px; justify-content: center; font-size: 0.8rem; color: var(--muted); pointer-events: none; }
.stok-tumu-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.stok-tumu-dot { width: 10px; height: 10px; border-radius: 50%; }
.stok-tumu-dot.satis { background: #2f6fd6; }
.stok-tumu-dot.alis  { background: #7c3aed; }

.horizontal-distribution-value {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.horizontal-distribution-axis-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.22fr) minmax(0, 1fr) minmax(110px, auto);
  gap: 18px;
  align-items: start;
}

.horizontal-distribution-axis {
  position: relative;
  height: 34px;
  border-top: 0;
}

.horizontal-distribution-axis-line {
  position: absolute;
  top: -100vh;
  height: calc(100vh + 10px);
  border-left: 0.5px solid var(--chart-grid);
}

.horizontal-distribution-value .amount-positive,
.vertical-chart-values .amount-positive {
  color: var(--report-blue);
}

.waterfall-values .amount-positive {
  color: var(--report-green);
}

.horizontal-distribution-axis-label {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.net-sales-trend-stack {
  display: grid;
  gap: 16px;
}

.report-chart-card {
  margin-bottom: 0;
}

.report-chart-fullscreen-card {
  position: relative;
}

.report-chart-expand-toggle {
  top: 10px;
  right: 12px;
}

.report-chart-fullscreen-card > .report-chart-expand-toggle {
  opacity: 0.88;
}

.report-chart-fullscreen-card > .section-heading,
.report-chart-fullscreen-card > .trend-card-head {
  padding-right: 48px;
}

.report-chart-fullscreen-card:hover > .report-chart-expand-toggle,
.report-chart-fullscreen-card.is-expanded > .report-chart-expand-toggle {
  opacity: 1;
}

.chart-fullscreen-report-header,
.chart-fullscreen-cari-header {
  display: none;
}

.report-chart-overlay-host .chart-fullscreen-report-header {
  display: grid;
  position: relative;
  z-index: 1;
  margin: 0 -24px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}

.report-chart-overlay-host .chart-fullscreen-cari-header {
  display: grid;
}

.report-chart-modal-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
}

.report-chart-modal-card > .section-heading,
.report-chart-modal-card > .trend-card-head {
  padding-right: 48px;
}

.report-chart-modal-card > .report-chart-expand-toggle {
  top: 12px;
  right: 16px;
}

.report-chart-modal-card .pie-card,
.report-chart-modal-card .horizontal-distribution-list,
.report-chart-modal-card .distribution-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.report-chart-modal-card .chart-with-axis {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  /* hidden (not auto): the 200vw axis grid-lines would otherwise create an empty
     horizontal scrollbar. The inner scroll containers handle data overflow. */
  overflow: hidden;
}

.report-chart-modal-card .trend-bar-scroll,
.report-chart-modal-card .waterfall-chart,
.report-chart-modal-card .vertical-chart {
  height: auto;
  min-height: 0;
  max-height: none;
}

.report-chart-fullscreen-card.is-expanded,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 24px 24px !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface-strong);
  box-shadow: none;
  box-sizing: border-box;
  transform: none !important;
  translate: none !important;
}

.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 112px 24px 24px !important;
  transform: none !important;
}

.report-chart-fullscreen-card.is-expanded.is-overlay-source {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  visibility: hidden;
}

.report-chart-fullscreen-card.is-expanded > .chart-fullscreen-report-header {
  display: grid;
  flex: 0 0 auto;
  margin: 0 -24px 20px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}

.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded > .chart-fullscreen-report-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1220;
  margin: 0;
  min-height: 92px;
}

.report-chart-fullscreen-card.is-expanded > .chart-fullscreen-cari-header {
  display: grid;
  flex: 0 0 auto;
  margin-bottom: 18px;
}

.report-chart-fullscreen-card.is-expanded > .report-chart-expand-toggle {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 1230;
}

.report-chart-fullscreen-card.is-expanded .chart-with-axis,
.report-chart-fullscreen-card.is-expanded .pie-card,
.report-chart-fullscreen-card.is-expanded .horizontal-distribution-list,
.report-chart-fullscreen-card.is-expanded .distribution-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.report-chart-fullscreen-card.is-expanded .chart-with-axis {
  min-height: 0;
}

.report-chart-fullscreen-card.is-expanded .pie-card {
  min-height: 0;
}

.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .chart-with-axis,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .pie-card,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .horizontal-distribution-list,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .distribution-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .trend-bar-scroll,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .waterfall-chart,
.report-chart-overlay-host .report-chart-fullscreen-card.is-expanded .vertical-chart {
  height: auto;
  min-height: 0;
  max-height: none;
}

.trend-card-full {
  padding: 16px;
}

.trend-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.trend-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.trend-card-head h4 {
  margin: 8px 0 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.trend-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
}

.trend-breadcrumb {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.trend-breadcrumb-static {
  cursor: default;
}

.trend-breadcrumb.active {
  color: var(--text);
}

.trend-breadcrumb-separator {
  color: var(--muted);
  font-weight: 700;
}

.trend-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding: 3px;
  background: var(--surface-input);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.trend-tab {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.trend-tab:not(.active):hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

.trend-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  color: var(--on-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.ie-trend-metric-row {
  display: flex;
  padding: 0 0 10px;
  overflow-x: auto;
}

.ie-trend-metric-control {
  flex-wrap: nowrap;
}

.report-bar-chart {
  min-height: 250px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0 4px;
}

.report-bar-axis {
  height: 220px;
  position: relative;
  color: var(--muted);
  font-size: 0.78rem;
}

.report-bar-axis-line {
  position: absolute;
  left: 64px;
  width: 200vw;
  border-top: 0.5px solid var(--chart-grid);
  pointer-events: none;
}

.report-bar-axis-label {
  position: absolute;
  left: 0;
  line-height: 1;
  transform: translateY(-50%);
}

.report-bar-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.report-bar-chart-inner {
  min-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.report-bar-item {
  flex: 0 0 var(--report-bar-width, 54px);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.report-bar-track {
  width: 100%;
  height: 220px;
  position: relative;
  border-radius: 18px;
  background: var(--surface-subtle);
  padding: 12px 10px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.report-bar-track::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: var(--chart-axis);
}

.report-bar-track.is-positive-only::after {
  top: auto;
  bottom: 0;
}

.report-bar-track:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
  z-index: 2;
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.16);
}

.report-bar-track.is-drillable {
  cursor: pointer;
}

.report-bar-track:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(96, 78, 59, 0.14);
  background: var(--surface-card-strong);
}

.report-bar {
  position: absolute;
  left: 10px;
  width: calc(100% - 20px);
  min-height: 8px;
}

.report-bar.positive {
  bottom: 50%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 122, 87, 0.72), rgba(30, 122, 87, 1));
}

.report-bar.negative {
  top: 50%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(180, 75, 51, 0.68), rgba(180, 75, 51, 1));
}

.report-bar-label {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.report-bar-track.is-positive-only .report-bar.positive {
  bottom: 0;
}

.chart-with-axis {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  overflow: hidden;
  position: relative;
}

.vertical-chart-with-axis .report-bar-axis {
  margin-top: 74px;
}

/* Kompakt dikey grafik (opsiyonel --vch yüksekliği) — eksen barlarla aynı boyda kalsın */
.vchart-compact .report-bar-axis { height: var(--vch, 220px); }

.waterfall-chart-with-axis .report-bar-axis {
  margin-top: 90px;
}

.trend-chart-with-axis .report-bar-axis {
  margin-top: 90px;
}

.trend-bar-scroll {
  height: 398px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  position: relative;
}

.trend-bar-scroll::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(80px + 10px + var(--chart-zero-line, 220px));
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.trend-bar-chart-inner {
  min-height: 392px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.trend-bar-item {
  flex: 1 0 var(--report-bar-width, 54px);
  grid-template-rows: 80px 220px 72px;
  align-items: stretch;
}

/* İlk satır (değerler) 64→80px büyütüldü; üstteki 18px güncel-dönem okuna ayrıldı.
   Tüm sütunlarda aynı olduğu için değerler dikeyde hizalı kalır; eksen margin-top
   da +16 güncellendiği için çubuklar eksen çizgileriyle hizalı kalır. */
.trend-bar-item .vertical-chart-values {
  min-height: 0;
  align-content: start;
  overflow: visible;
  position: relative;
  padding-top: 18px;
}

.trend-change-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.trend-change-up {
  color: var(--income-text, #186d3a);
  background: color-mix(in srgb, var(--income-text, #186d3a) 12%, transparent);
}

.trend-change-down {
  color: var(--expense-text, #8b1a1a);
  background: color-mix(in srgb, var(--expense-text, #8b1a1a) 12%, transparent);
}

.trend-change-flat {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.trend-report-bar-track {
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.trend-report-bar-track::after {
  content: none;
}

.trend-report-bar-track:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.trend-report-bar-track:hover::before {
  content: none;
  display: none;
}

.trend-report-bar-track .report-bar {
  left: 50%;
  width: 26px;
  transform: translateX(-50%);
}

.trend-report-bar-track .report-bar.positive {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, var(--income-bar-start, #1d4ed8), var(--income-bar-end, #60a5fa));
}

.trend-report-bar-track .report-bar.negative {
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, #ae2012, #e76f51);
}

/* Alış sekmesi: barlar mor (Tümü'deki Alış rengiyle aynı) */
.stok-trend-alis .trend-report-bar-track .report-bar.positive {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
}
/* Alış sekmesi: üstteki sayısal değerler de mor olsun */
.stok-trend-alis .vertical-chart-values .amount-positive {
  color: #7c3aed;
}

/* Toplam kolonu — bar yok, sadece değer + etiket; sol ayraç ile ayrılır */
.trend-total-bar-item {
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1.5px solid var(--line);
  box-sizing: border-box;
  /* Bar track satırını kaldır: sadece values (flex-grow) + label (auto) */
  grid-template-rows: 1fr auto;
}
.trend-total-bar-item .vertical-chart-values {
  align-content: center;
  font-size: 0.88rem;
}
.trend-total-bar-item .stok-tumu-values {
  flex-direction: column;
  gap: 4px;
}

/* Matrix negative — only red for count (adet) mode */
.cari-rontgen-matrix-neg-count {
  color: var(--report-red, #dc2626) !important;
}

.income-category-chart {
  display: grid;
  gap: 12px;
}

.income-category-breadcrumbs {
  margin-bottom: 6px;
}

.income-category-chart-with-axis .report-bar-axis {
  margin-top: 74px;
}

.income-category-bar-scroll {
  height: 382px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  position: relative;
}

.income-category-bar-scroll::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(64px + 10px + var(--chart-zero-line, 220px));
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.income-category-bar-inner {
  min-height: 376px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.income-category-bar-item {
  flex: 1 0 var(--report-bar-width, 88px);
  grid-template-rows: 64px 220px 72px;
  align-items: stretch;
}

.income-category-bar-item[data-income-category-key] {
  cursor: pointer;
}

.income-category-bar-item[data-income-category-key]:focus-visible {
  outline: 2px solid rgba(0, 109, 119, 0.45);
  outline-offset: 4px;
}

.income-category-bar-item .vertical-chart-values {
  min-height: 0;
  align-content: end;
}

.income-category-chart .vertical-chart-values .amount-positive {
  color: var(--report-green);
}

.income-category-chart .vertical-chart-values .amount-negative {
  color: var(--report-red);
}

.income-category-track {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  appearance: none;
}

.income-category-track::after,
.income-category-track:hover::before {
  content: none;
  display: none;
}

.income-category-track:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.income-category-track.is-drillable,
.income-category-track[data-income-category-key] {
  cursor: pointer;
}

.income-category-track .report-bar {
  left: 50%;
  width: 30px;
  transform: translateX(-50%);
}

.income-category-track .report-bar.positive {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #2d6a4f, #52b788);
}

.income-category-track .report-bar.negative {
  top: auto;
  bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #b42318, var(--report-red));
}

.income-category-comparison-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin: -2px 4px 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.income-category-comparison-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.income-category-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.income-category-legend-dot.old {
  background: var(--report-green-soft);
}

.income-category-legend-dot.current {
  background: var(--report-green);
}

.income-category-grouped-scroll {
  height: 392px;
}

.income-category-grouped-scroll::before {
  top: calc(72px + 10px + var(--chart-zero-line, 220px));
}

.income-category-grouped-inner {
  min-height: 386px;
}

.income-category-grouped-item {
  grid-template-rows: 72px 220px 72px;
}

.income-category-grouped-values {
  gap: 2px;
}

.income-category-grouped-value,
.income-category-grouped-diff {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.income-category-grouped-value {
  font-size: 0.78rem;
  font-weight: 850;
}

.income-category-grouped-value.old.positive {
  color: var(--report-green-soft);
}

.income-category-grouped-value.old.negative {
  color: var(--report-red-soft);
}

.income-category-grouped-value.current.positive {
  color: var(--report-green);
}

.income-category-grouped-value.current.negative {
  color: var(--report-red);
}

.income-category-grouped-diff {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.income-category-grouped-track {
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.income-category-grouped-track .report-bar {
  position: static;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: 24px;
  min-height: 0;
  align-self: flex-end;
}

.income-category-grouped-track .report-bar.old {
  background: linear-gradient(180deg, var(--report-green-soft), var(--report-green-soft));
}

.income-category-grouped-track .report-bar.old.negative {
  background: linear-gradient(180deg, var(--report-red-soft), var(--report-red-soft));
}

.income-category-grouped-track .report-bar.old.positive {
  background: linear-gradient(180deg, var(--report-green-soft), var(--report-green-soft));
}

.income-category-grouped-track .report-bar.current.positive {
  background: linear-gradient(135deg, #15803d, var(--report-green));
}

.income-category-grouped-track .report-bar.current.negative {
  background: linear-gradient(135deg, #b42318, var(--report-red));
}

.income-category-grouped-track .report-bar.positive,
.income-category-grouped-track .report-bar.negative {
  border-radius: 12px 12px 0 0;
}

.income-category-comparison-chart {
  display: grid;
  gap: 10px;
}

.income-category-comparison-head {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(88px, auto) minmax(240px, 1.6fr) minmax(88px, auto) minmax(68px, auto);
  align-items: center;
  gap: 14px;
  padding: 0 16px 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.income-category-comparison-head span:nth-child(2),
.income-category-comparison-head span:nth-child(4),
.income-category-comparison-head span:nth-child(5) {
  text-align: right;
}

.income-category-comparison-row {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-card);
  color: inherit;
  font: inherit;
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(88px, auto) minmax(240px, 1.6fr) minmax(88px, auto) minmax(68px, auto);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.income-category-comparison-row:hover {
  background: rgba(245, 250, 248, 0.96);
  border-color: rgba(0, 95, 115, 0.2);
}

.income-category-comparison-title {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.income-category-comparison-value,
.income-category-comparison-diff {
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.income-category-comparison-value.old {
  color: var(--muted);
  text-align: right;
}

.income-category-comparison-value.current {
  color: #2a9d8f;
}

.income-category-comparison-bars {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.income-category-comparison-half {
  height: 18px;
  position: relative;
}

.income-category-comparison-half.old {
  display: flex;
  justify-content: flex-end;
}

.income-category-comparison-zero {
  height: 42px;
  background: var(--chart-axis);
}

.income-category-comparison-bar {
  display: block;
  height: 18px;
  min-width: 4px;
}

.income-category-comparison-bar.old {
  border-radius: 10px 0 0 10px;
  background: linear-gradient(135deg, rgba(84, 100, 117, 0.62), rgba(84, 100, 117, 0.95));
}

.income-category-comparison-bar.current {
  border-radius: 0 10px 10px 0;
  background: linear-gradient(135deg, #2f8f83, #52b788);
}

.net-sales-kpi-column {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-card);
  overflow: hidden;
}

.net-sales-kpi-column-finance {
  grid-column: span 2;
  padding: 6px 0;
}

.net-sales-kpi-column-ops {
  grid-auto-rows: minmax(0, 1fr);
}

.net-sales-kpi-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.net-sales-kpi-column-ops .net-sales-kpi-line {
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 12px;
  padding: 16px 20px;
}

.net-sales-kpi-line.with-border {
  border-top: 1px solid var(--line);
}

.net-sales-kpi-line-heading {
  padding-top: 12px;
  padding-bottom: 12px;
}

.net-sales-kpi-label-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.net-sales-kpi-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}

.net-sales-kpi-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.net-sales-kpi-label,
.net-sales-kpi-finance-label {
  font-size: 0.98rem;
  font-weight: 700;
}

.net-sales-kpi-finance-label.tone-expense {
  color: #e6452f;
}

.net-sales-kpi-finance-label.tone-income {
  color: #4caf68;
}

.net-sales-kpi-finance-label.tone-accent {
  color: #2f6fd6;
}

.net-sales-kpi-finance-values strong.tone-expense {
  color: #d62828;
}

.net-sales-kpi-finance-values strong.tone-income {
  color: #2a9d8f;
}

.net-sales-kpi-finance-values strong.tone-accent {
  color: #2f6fd6;
}

.net-sales-kpi-finance-values strong.tone-neutral {
  color: var(--text);
}

.net-sales-kpi-finance-values .net-sales-kpi-ratio.tone-expense {
  color: #d62828;
}

.net-sales-kpi-finance-values .net-sales-kpi-ratio.tone-income {
  color: #2a9d8f;
}

.net-sales-kpi-finance-values .net-sales-kpi-ratio.tone-accent {
  color: #2f6fd6;
}

.net-sales-kpi-finance-values .net-sales-kpi-ratio.tone-neutral {
  color: var(--text);
}

/* Sol ops panelinde değer rengi (ör. Dönem Değişimi artış/azalış) */
.net-sales-kpi-values strong.tone-income { color: #2a9d8f; }
.net-sales-kpi-values strong.tone-expense { color: #d62828; }

/* Net Satış MoM/YoY raporu KPI tile grid */
.ns-trend-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.ns-trend-kpi-card {
  gap: 6px;
}
/* Başlık (+ alt dönem etiketi) üstte, değer altta sabit hizalı */
.ns-trend-kpi-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ns-trend-kpi-card .kpi-value {
  margin-top: auto;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.ns-trend-kpi-card .kpi-value.tone-income { color: #2a9d8f; }
.ns-trend-kpi-card .kpi-value.tone-expense { color: #d62828; }
.ns-trend-kpi-card .kpi-value.tone-accent { color: #2f6fd6; }
.ns-trend-kpi-card .kpi-value.tone-neutral { color: var(--text); }
.ns-trend-kpi-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

.net-sales-kpi-finance-label-heading {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.net-sales-kpi-values {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  justify-content: flex-end;
  text-align: right;
}

.net-sales-kpi-column-ops .net-sales-kpi-values {
  display: grid;
  grid-template-columns: 58px 58px;
  gap: 6px;
  align-items: center;
}

.net-sales-kpi-column-ops .net-sales-kpi-ratio {
  text-align: left;
}

.net-sales-kpi-column-ops .net-sales-kpi-ratio.is-empty {
  visibility: hidden;
}

.net-sales-kpi-column-ops .net-sales-kpi-values strong {
  text-align: right;
  min-width: 0;
}

.net-sales-kpi-values strong {
  font-size: 1.05rem;
  white-space: nowrap;
}

.net-sales-kpi-ratio {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.net-sales-kpi-finance-values {
  display: grid;
  grid-template-columns: 82px 148px;
  align-items: center;
  justify-items: end;
  column-gap: 14px;
  flex: 0 0 auto;
  text-align: right;
}

.net-sales-kpi-finance-values strong,
.net-sales-kpi-finance-values span {
  white-space: nowrap;
}

.net-sales-kpi-finance-values-heading {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-table-wrap {
  width: 100%;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-card-strong);
}

.report-table-wrap-lg {
  max-height: 520px;
}

.report-table-wrap-xl {
  max-height: 640px;
}

.income-table-wrap {
  --income-sticky-toolbar-height: 61px;
  max-height: none;
  overflow: hidden;
}

.income-table-scroll {
  max-height: calc(640px - var(--income-sticky-toolbar-height));
  overflow: auto;
}

.report-table {
  min-width: 100%;
  background: var(--table-bg);
}

.income-table {
  --income-value-cols: 1;
  --income-account-col: 340px;
  --income-percent-col: 92px;
  --income-value-col: 190px;
  --income-sticky-toolbar-height: 61px;
  --income-period-header-height: 32px;
  font-size: 0.9rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  min-width: calc(var(--income-account-col) + var(--income-percent-col) + (var(--income-value-cols) * var(--income-value-col)));
}

.income-table-comparison {
  min-width: calc(var(--income-account-col) + var(--income-percent-col) + (var(--income-value-cols) * var(--income-value-col)));
}

.income-table th,
.income-table td {
  padding: 10px 7px;
  border-bottom: 1px solid var(--line);
}

.report-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-head);
  box-shadow: inset 0 -1px 0 var(--line);
}

.report-table-wrap-xl .income-table thead th {
  top: var(--income-sticky-toolbar-height);
}

.income-table-scroll .income-table thead th {
  top: 0;
}

.income-table-scroll .income-table-comparison thead tr:first-child th {
  top: 0;
  z-index: 24;
  height: var(--income-period-header-height);
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 0;
  background: var(--table-head);
}

.income-table-scroll .income-table-comparison thead .income-period-heading {
  box-shadow: inset 0 -1px 0 var(--line);
}

.income-table-scroll .income-table-comparison thead tr:first-child .income-period-side-heading {
  z-index: 34;
  box-shadow: none;
}

.income-table-scroll .income-table-comparison thead tr:nth-child(2) th {
  top: var(--income-period-header-height);
  z-index: 22;
  padding-top: 7px;
  padding-bottom: 7px;
  border-top: 0;
  background: var(--table-head);
}

.income-table-scroll .income-table-comparison thead tr:nth-child(2) .income-account-heading,
.income-table-scroll .income-table-comparison thead tr:nth-child(2) .income-percent-heading,
.income-table-scroll .income-table-comparison thead tr:nth-child(2) .income-spacer-heading {
  z-index: 34;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 var(--line);
  background: var(--table-head);
}

.report-table tbody tr:nth-child(even) {
  background: var(--table-alt);
}

.report-table tbody tr:hover {
  background: var(--table-hover);
}

.selection-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 95, 115, 0.16);
  border-radius: 14px;
  background: rgba(0, 95, 115, 0.07);
  color: var(--text);
}

.income-table tbody tr.calc {
  background: var(--table-calc);
}

.income-table tbody tr {
  --income-row-bg: var(--table-bg);
  background: var(--income-row-bg);
}

.income-table tbody tr:nth-child(even) {
  --income-row-bg: var(--table-bg);
}

.income-table tbody tr[data-depth="1"] {
  --income-row-bg: var(--income-depth-1);
  --income-row-hover-bg: var(--income-depth-1-hover);
}

.income-table tbody tr[data-depth="2"] {
  --income-row-bg: var(--income-depth-2);
  --income-row-hover-bg: var(--income-depth-2-hover);
}

.income-table tbody tr[data-depth="3"] {
  --income-row-bg: var(--income-depth-3);
  --income-row-hover-bg: var(--income-depth-3-hover);
}

.income-table tbody tr[data-depth="4"] {
  --income-row-bg: var(--income-depth-4);
  --income-row-hover-bg: var(--income-depth-4-hover);
}

.income-table tbody tr[data-depth="5"] {
  --income-row-bg: var(--income-depth-5);
  --income-row-hover-bg: var(--income-depth-5-hover);
}

.income-table tbody tr[data-depth="6"] {
  --income-row-bg: var(--income-depth-6);
  --income-row-hover-bg: var(--income-depth-6-hover);
}

.income-table tbody tr:hover {
  --income-row-bg: var(--income-row-hover-bg, rgba(233, 221, 202, 0.5));
  background: var(--income-row-bg);
}

.income-table tbody tr.calc {
  background: var(--income-row-bg);
}

.income-table tbody tr.calc:hover {
  --income-row-bg: var(--income-row-hover-bg, var(--table-calc));
  background: var(--income-row-bg);
}

.income-table tbody tr.is-selected,
.income-table tbody tr.is-selected:hover {
  --income-row-bg: var(--table-selected);
  background: var(--income-row-bg);
}

.income-table tbody tr.is-selectable {
  cursor: pointer;
}

.income-table tbody tr.is-selected,
.income-table tbody tr.is-selected:hover {
  background: var(--income-row-bg);
}

.percentage-cell {
  white-space: nowrap;
  font-weight: 700;
}

.income-account-heading {
  position: sticky;
  left: 0;
  z-index: 7;
  width: var(--income-account-col);
  min-width: var(--income-account-col);
  max-width: var(--income-account-col);
}

.income-account-col {
  width: var(--income-account-col);
}

.income-table col:not(.income-account-col):not(.income-percent-col):not(.income-spacer-col) {
  width: var(--income-value-col);
}

.income-comparison-value-col {
  width: var(--income-value-col);
}

.income-spacer-col {
  width: auto;
}

.income-percent-col {
  width: var(--income-percent-col);
}

.income-number-heading,
.income-number-cell {
  text-align: right;
}

.income-account-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--income-account-col);
  min-width: var(--income-account-col);
  max-width: var(--income-account-col);
  vertical-align: middle;
}

.income-number-cell {
  white-space: nowrap;
  vertical-align: middle;
  font-size: 0.86rem;
}

.income-spacer-heading,
.income-spacer-cell {
  width: auto;
  min-width: 0;
  padding: 0;
  color: transparent;
}

.income-percent-heading,
.income-table td:last-child {
  position: sticky;
  right: 0;
  min-width: var(--income-percent-col);
  width: var(--income-percent-col);
  max-width: var(--income-percent-col);
}

.income-table thead .income-percent-heading {
  z-index: 11;
}

.income-table thead .income-account-heading {
  z-index: 12;
}

.income-table thead .income-spacer-heading {
  z-index: 10;
}

.income-table tbody td:last-child {
  z-index: 2;
}

.income-number-heading {
  font-size: 0.84rem;
  line-height: 1.12;
}

.income-period-heading {
  font-size: 0.9rem;
  text-align: center;
}

.income-number-cell.is-empty {
  color: transparent;
}

.income-table .is-level-hidden {
  color: transparent;
}

.income-table td.is-level-hidden {
  color: transparent;
}

.income-account-label {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.income-account-label.is-small {
  font-size: 1em;
}

.income-account-label.is-xsmall {
  font-size: 1em;
  letter-spacing: 0;
}

.income-table thead .income-account-heading,
.income-table thead .income-percent-heading,
.income-table thead .income-spacer-heading {
  background: var(--table-head);
}

.income-table tbody td {
  background: var(--income-row-bg);
}

.income-table tbody .income-account-cell,
.income-table tbody td:last-child,
.income-table tbody .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody tr:nth-child(even) .income-account-cell,
.income-table tbody tr:nth-child(even) td:last-child,
.income-table tbody tr:nth-child(even) .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody tr:hover .income-account-cell,
.income-table tbody tr:hover td:last-child,
.income-table tbody tr:hover .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody tr.calc .income-account-cell,
.income-table tbody tr.calc td:last-child,
.income-table tbody tr.calc .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody tr.calc:hover .income-account-cell,
.income-table tbody tr.calc:hover td:last-child,
.income-table tbody tr.calc:hover .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody tr.is-selected .income-account-cell,
.income-table tbody tr.is-selected td:last-child,
.income-table tbody tr.is-selected .income-spacer-cell,
.income-table tbody tr.is-selected:hover .income-account-cell,
.income-table tbody tr.is-selected:hover td:last-child,
.income-table tbody tr.is-selected:hover .income-spacer-cell {
  background: var(--income-row-bg);
}

.income-table tbody .income-account-cell {
  box-shadow: 1px 0 0 var(--line);
}

.income-table tbody td:last-child,
.income-table thead .income-percent-heading {
  box-shadow: -1px 0 0 var(--line);
}

.income-table-dynamic {
  --income-value-col: 170px;
  min-width: calc(var(--income-account-col) + var(--income-percent-col) + (var(--income-value-cols) * var(--income-value-col)));
}

.income-table-dynamic .income-dynamic-heading.is-drillable {
  color: var(--accent);
  cursor: pointer;
}

.income-table-dynamic .income-dynamic-heading.is-drillable:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.income-table-dynamic .income-number-heading,
.income-table-dynamic .income-number-cell {
  text-align: right;
}

.income-table-dynamic .income-number-cell.is-empty {
  color: transparent;
}

.income-table tbody tr.is-collapsed {
  display: none;
}

.income-level-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 13;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-card-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.income-level-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.income-comparison-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.income-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.income-dynamic-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.income-dynamic-grain-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.income-comparison-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.income-comparison-range-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.income-comparison-controls.is-disabled {
  opacity: 0.54;
}

.income-comparison-controls.is-disabled input,
.income-comparison-controls.is-disabled select {
  cursor: not-allowed;
}

.income-comparison-controls .field {
  margin: 0;
  min-width: 150px;
}

.income-comparison-range-fields .field {
  min-width: 138px;
}

.income-comparison-controls input,
.income-comparison-controls select {
  height: 38px;
  min-height: 38px;
  padding: 8px 12px;
}

.income-comparison-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 134px;
  min-height: 38px;
  white-space: nowrap;
}

.income-comparison-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.income-comparison-button.is-loading {
  opacity: 0.82;
}

.income-comparison-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(var(--accent-rgb), 0.22);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: income-comparison-spin 0.72s linear infinite;
}

.income-comparison-loading {
  font-size: 0.82rem;
  white-space: nowrap;
}

@keyframes income-comparison-spin {
  to {
    transform: rotate(360deg);
  }
}

.income-level-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-card);
  color: rgba(112, 91, 73, 0.68);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 7px 12px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, font-weight 0.18s ease, transform 0.18s ease;
}

.income-level-button:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(0, 95, 115, 0.07);
  color: var(--text);
  font-weight: 900;
  transform: translateY(-1px);
}

.income-level-button.active {
  border-color: rgba(0, 95, 115, 0.28);
  background: var(--accent-softer);
  color: var(--text);
  font-weight: 900;
  transform: translateY(-1px);
}

.income-level-button:disabled,
.income-level-button:disabled:hover {
  border-color: var(--line);
  background: var(--surface-card);
  color: rgba(112, 91, 73, 0.52);
  cursor: not-allowed;
  font-weight: 700;
  transform: none;
}

.balance-table tbody tr.is-collapsed {
  display: none;
}

.balance-table tbody tr.calc {
  background: var(--table-calc);
}

.balance-value-cell {
  white-space: nowrap;
  font-weight: 700;
}

.distribution-list {
  display: grid;
  gap: 14px;
}

.distribution-row {
  display: grid;
  gap: 8px;
}

.distribution-row-head,
.distribution-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.distribution-row-head strong,
.distribution-row-meta span:first-child {
  min-width: 0;
}

.distribution-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(36, 24, 13, 0.08);
  overflow: hidden;
}

.distribution-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.distribution-fill.income {
  background: linear-gradient(90deg, var(--positive-bar-start), var(--positive-bar-end));
}

.distribution-fill.expense {
  background: linear-gradient(90deg, var(--negative-bar-start), var(--negative-bar-end));
}

.distribution-row-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.net-sales-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.net-sales-top-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.net-sales-top-grid-pies {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.net-sales-test-top-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.pie-card,
.turkey-map-card {
  display: grid;
  gap: 16px;
}

.pie-card {
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  min-height: 240px;
  gap: 16px;
}

.pie-chart {
  width: min(240px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
}

.pie-chart-compact {
  width: min(242px, 100%);
  position: relative;
}

.pie-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 14px 24px rgba(0, 95, 115, 0.12));
}

.pie-chart-tooltip-floating {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(36, 24, 13, 0.92);
  color: #fffaf2;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease;
}

.pie-chart-tooltip-floating.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pie-slice {
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
  transform-origin: 50px 50px;
}

.pie-slice-group:hover .pie-slice {
  transform: scale(1.03);
  opacity: 0.94;
}

.pie-slice:hover {
  transform: scale(1.03);
  opacity: 0.94;
}

.pie-slice-label {
  fill: #fffaf2;
  font-size: 7.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(36, 24, 13, 0.35);
  stroke-width: 1px;
  stroke-linejoin: round;
  pointer-events: none;
}

.pie-legend,
.turkey-map-legend {
  display: grid;
  gap: 10px;
}

.pie-legend-inline {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
}

.pie-legend-detailed {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.pie-legend-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
}

.pie-legend-row-inline {
  grid-template-columns: 12px auto;
  justify-content: center;
  justify-items: center;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: center;
  min-width: 0;
}

.pie-legend-row-inline.is-filterable,
.pie-slice-group.is-filterable,
.vertical-chart-item.is-filterable,
.waterfall-item.is-filterable {
  cursor: pointer;
}

.pie-legend-row-inline.is-active,
.vertical-chart-item.is-active,
.waterfall-item.is-active {
  outline: 2px solid rgba(17, 106, 137, 0.22);
  outline-offset: 4px;
  border-radius: 12px;
}

.pie-slice-group.is-active .pie-slice {
  filter: drop-shadow(0 0 0.25rem rgba(17, 106, 137, 0.35));
}

.pie-legend-row-inline.is-dimmed,
.vertical-chart-item.is-dimmed,
.waterfall-item.is-dimmed {
  opacity: 0.34;
}

.pie-slice-group.is-dimmed .pie-slice,
.pie-slice-group.is-dimmed .pie-slice-label {
  opacity: 0.28;
}

.pie-leader-line {
  pointer-events: none;
}

.pie-leader-label {
  font-size: 7.5px;
  font-weight: 700;
  fill: var(--foreground, #1a0f00);
  paint-order: stroke;
  stroke: var(--surface-card, #fff);
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}

.pie-slice-group.is-dimmed .pie-leader-line,
.pie-slice-group.is-dimmed .pie-leader-label {
  opacity: 0.28;
}

.pie-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.pie-legend-dot.city {
  background: var(--accent-2);
}

.pie-legend-detail {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.turkey-map {
  position: relative;
  min-height: 360px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turkey-map-image {
  width: 100%;
  height: auto;
  display: block;
}

.turkey-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.turkey-city-region {
  fill: rgba(202, 103, 2, 0.28);
  stroke: rgba(202, 103, 2, 0.55);
  stroke-width: 0.35;
}

.turkey-city-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.turkey-city-dot {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(187, 62, 3, 0.88);
  box-shadow: 0 8px 18px rgba(187, 62, 3, 0.22);
}

.turkey-city-value {
  position: relative;
  z-index: 1;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #2d2d2d;
  transform: translateY(-18px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

.segmented-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-input);
  border: 1px solid var(--line);
  border-radius: 999px;
  flex-wrap: nowrap;
}

.net-sales-card-controls {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.net-sales-mode-card {
  display: grid;
  gap: 10px;
}

.segmented-chip {
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  line-height: 1.4;
}

.segmented-chip:not(.active):hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

.segmented-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  color: var(--on-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.net-sales-category-card {
  grid-column: 1 / -1;
}

.net-sales-category-card > #netSalesCategoryChart > .card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.net-sales-vertical-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.waterfall-chart {
  height: 398px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  position: relative;
}

.waterfall-step-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.waterfall-chart::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(64px + 10px + var(--chart-zero-line, 220px));
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.waterfall-grid {
  min-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  gap: 16px;
  min-height: 392px;
  position: relative;
  z-index: 1;
}

.waterfall-item {
  display: grid;
  grid-template-rows: 80px 220px 72px;
  gap: 10px;
  align-items: stretch;
}

.waterfall-values {
  min-height: 0;
  display: grid;
  gap: 4px;
  text-align: center;
  align-content: start;
  overflow: visible;
  position: relative;
  padding-top: 18px;
}

.waterfall-value {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.waterfall-value span:not(.trend-change-badge) {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
}

.waterfall-value strong {
  font-size: 0.82rem;
}

.waterfall-track {
  position: relative;
  height: 220px;
  width: 148px;
  margin: 0 auto;
}

.waterfall-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--zero-line);
  border-top: 1px solid var(--line);
}

.waterfall-bar {
  position: absolute;
  width: 28px;
  border-radius: 12px 12px 0 0;
}

.waterfall-bar-revenue {
  background: linear-gradient(135deg, var(--income-bar-start), var(--income-bar-end));
}

.waterfall-bar-revenue.is-negative {
  border-radius: 0 0 12px 12px;
}

.waterfall-bar-cost {
  background: linear-gradient(135deg, var(--expense-bar-start), var(--expense-bar-end));
  opacity: 0.92;
}

.waterfall-bar-profit {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

.waterfall-bar-profit.is-negative {
  background: linear-gradient(135deg, #b42318, #d62828);
  border-radius: 0 0 12px 12px;
}

.waterfall-bar-step {
  border-radius: 8px 8px 0 0;
}

.waterfall-bar-step.is-negative {
  border-radius: 0 0 8px 8px;
}

.waterfall-bar-step-revenue {
  background: linear-gradient(135deg, var(--income-bar-start), var(--income-bar-end));
}

.waterfall-bar-step-cost,
.waterfall-bar-step-expense {
  background: linear-gradient(135deg, var(--expense-bar-start), var(--expense-bar-end));
}

.waterfall-bar-step-other {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.waterfall-bar-step-profit {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

.waterfall-bar-step-profit.is-negative {
  background: linear-gradient(135deg, #b42318, #d62828);
}

.waterfall-step-connector {
  position: absolute;
  border-top: 2px solid rgba(36, 24, 13, 0.34);
}

.waterfall-connector {
  position: absolute;
  border-top: 2px solid rgba(36, 24, 13, 0.48);
}

.waterfall-label {
  text-align: center;
  min-height: 0;
  display: grid;
  gap: 4px;
  align-content: start;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.waterfall-label strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.waterfall-label .table-subtext {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.waterfall-label .table-subtext.amount-positive {
  color: var(--income);
}

.waterfall-label .table-subtext.amount-negative {
  color: var(--expense);
}

.net-sales-top-grid-pies .pie-card {
  min-height: 280px;
}

.net-sales-top-grid-pies .net-sales-horizontal-card {
  display: flex;
  flex-direction: column;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .section-heading {
  margin-bottom: 16px;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-list {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  align-items: center;
  gap: 0;
  padding: 0;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-list::before {
  content: "";
  position: absolute;
  left: calc(78px + 8px);
  top: 46px;
  bottom: 34px;
  width: 1px;
  background: var(--chart-axis);
  z-index: 2;
}

/* Bar sütununun min genişliği yok: kart daraldığında bar kısalır, sağdaki tutar
   sütunu kırpılmaz (liste overflow:hidden olduğu için taşarsa tutar kesiliyordu). */
.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-row,
.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-axis-row {
  grid-template-columns: minmax(78px, 0.16fr) minmax(0, 1fr) minmax(72px, auto);
  gap: 8px;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-track::before {
  display: none;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-axis-row {
  align-self: end;
}

.net-sales-top-grid-pies .net-sales-horizontal-card .horizontal-distribution-axis {
  height: 28px;
}

.tree-cell {
  --depth: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-left: calc((var(--depth) - 1) * 18px);
}

.tree-toggle,
.tree-toggle-placeholder {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
}

.tree-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1;
}

.pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(202, 103, 2, 0.12);
  color: var(--accent-2);
  font-size: 0.85rem;
}

.admin-tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 36px;
  margin: 8px 0 24px;
  border-bottom: 1px solid var(--line);
}

.admin-tab {
  border: 0;
  padding: 12px 4px 14px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  position: relative;
  transition: color 0.2s ease;
}

.admin-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, height 0.2s ease;
}

.admin-tab:hover {
  color: var(--text);
}

.admin-tab.active {
  color: var(--accent);
}

.admin-tab.active::after {
  height: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ===== Admin Users — compact list + side sheet ===== */
#adminPanel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
}

.admin-users-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.admin-users-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-users-search {
  flex: 1;
  min-width: 180px;
  position: relative;
}

.admin-users-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.admin-users-search input::placeholder { color: var(--muted); }

.admin-users-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.admin-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-fchip {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.admin-fchip:hover { background: var(--surface-strong); }

.admin-fchip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.admin-fchip .cnt {
  font-size: 10px;
  background: rgba(0, 0, 0, 0.10);
  color: inherit;
  padding: 1px 6px;
  border-radius: 999px;
}

.admin-pending-banner {
  background: linear-gradient(90deg, rgba(202, 103, 2, 0.10), rgba(202, 103, 2, 0.04));
  border: 1px solid rgba(202, 103, 2, 0.20);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}

.admin-pending-banner .ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(202, 103, 2, 0.15);
  color: #ca6702;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-pending-banner .ic svg { width: 16px; height: 16px; }
.admin-pending-banner strong { font-weight: 700; }
.admin-pending-banner .right { margin-left: auto; display: flex; gap: 8px; }

.admin-users-list {
  background: var(--surface-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-ulist-head {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr 0.8fr;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.admin-urow {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr 0.8fr;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: background 0.12s;
}

.admin-urow:last-child { border-bottom: none; }
.admin-urow:hover { background: rgba(var(--accent-rgb), 0.05); }
.admin-urow.selected {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-urow .name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-urow .u-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.admin-urow .u-email {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.admin-urow .u-company {
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}

.admin-urow .u-company small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}

.admin-urow .u-seen {
  font-size: 13px;
  color: var(--muted);
}

/* avatar circles */
.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.admin-avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

/* user type / status badges for admin */
.admin-ubadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-ubadge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.admin-ubadge.type-supplier { background: rgba(0, 109, 119, 0.10); color: #006d77; }
.admin-ubadge.type-dealer   { background: rgba(202, 103, 2, 0.10);  color: #bb3e03; }
.admin-ubadge.type-internal { background: rgba(123, 44, 191, 0.10); color: #5b2cbf; }
.admin-ubadge.status-active   { background: rgba(45, 157, 143, 0.12); color: #1f8a5b; }
.admin-ubadge.status-active .dot   { background: #2a9d8f; }
.admin-ubadge.status-pending  { background: rgba(214, 146, 10, 0.14); color: #a36b0a; }
.admin-ubadge.status-pending .dot  { background: #d6920a; }
.admin-ubadge.status-passive  { background: rgba(52, 39, 21, 0.06);  color: #9a8870; }
.admin-ubadge.status-passive .dot  { background: #9a8870; }

/* ===== Admin User Side Sheet ===== */
.admin-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 6, 0.48);
  z-index: 199;
  animation: backdrop-in 0.2s ease;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.admin-user-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(700px, 52vw);
  background: var(--surface-panel);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 80px rgba(30, 18, 6, 0.18);
  display: flex;
  flex-direction: column;
  z-index: 200;
  animation: sheet-slide-in 0.18s ease;
}

@keyframes sheet-slide-in {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.admin-sheet-head {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}

.admin-sheet-head-info { flex: 1; min-width: 0; }

.admin-sheet-head h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}

.admin-sheet-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-sheet-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
  flex-shrink: 0;
}

.admin-sheet-close:hover { background: var(--accent-soft); }
.admin-sheet-close svg { width: 14px; height: 14px; }

.admin-sheet-body {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

/* Make the Modül & Yetkiler section fill remaining body height */
.admin-sheet-section.perm-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-sheet-section h4 {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 10px;
}

.admin-sheet-section h4 span {
  float: right;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.admin-sheet-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
}

.admin-sheet-row label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.admin-sheet-row select,
.admin-sheet-row input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
}

/* Mini master-detail in sheet */
.admin-sheet-perm-split {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 210px 1fr;
  /* Satır yüksekliği içeriğe göre büyümesin → hücreler (liste/detay) kendi içinde kaydırılır. */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 260px;
  background: var(--surface-input);
}

.admin-sheet-mod-list {
  border-right: 1px solid var(--line);
  background: var(--surface-subtle);
  overflow-y: auto;
}

.admin-sheet-mod-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  user-select: none;
}

.admin-sheet-mod-row:last-child { border-bottom: none; }
.admin-sheet-mod-row:hover { background: rgba(var(--accent-rgb), 0.05); }

.admin-sheet-mod-row.active {
  background: var(--surface-input);
  border-left-color: var(--accent);
}

.admin-sheet-mod-nm {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.admin-sheet-mod-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.admin-sheet-mod-row.off .admin-sheet-mod-nm { color: var(--muted); font-weight: 500; }

/* Toggle switch */
.admin-toggle {
  width: 32px;
  height: 18px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.15s;
}

.admin-toggle::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 0.15s;
}

.admin-toggle.on { background: var(--accent); }
.admin-toggle.on::after { left: 16px; }

/* Right panel (detail) of module selection */
.admin-sheet-mod-detail {
  padding: 14px 16px;
  overflow-y: auto;
  min-height: 0;   /* grid hücresinin overflow-y:auto ile kaydırılabilmesi için (yoksa içerik taşar/kırpılır) */
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Detay içindeki bölümler (marka yetkileri vb.) sıkışıp kırpılmasın → içerik taşar, panel kaydırır. */
.admin-sheet-mod-detail > * { flex-shrink: 0; }
/* Ürün ekleme 3-durumlu satırı: dar alanda segment alta sarsın, "Açık" kırpılmasın. */
.admin-cap-row-tri { flex-wrap: wrap; }
.admin-cap-row-tri .admin-cap-info { flex: 1 1 180px; }
.admin-cap-row-tri .admin-tri { flex: 0 0 auto; }
.admin-brand-caps .admin-tri-btn { white-space: nowrap; }

.admin-sheet-mod-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.admin-sheet-mod-detail-title { font-size: 13px; font-weight: 700; color: var(--text); }
.admin-sheet-mod-detail-meta  { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.admin-sheet-mod-on-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}

.admin-sheet-perm-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}

.admin-sheet-perm-item:last-child { border-bottom: none; }

.admin-sheet-perm-nm {
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
}

.admin-sheet-perm-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.admin-sheet-perm-item select {
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 7px;
  padding: 5px 24px 5px 8px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236f5b46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  min-width: 120px;
}

.admin-sheet-mod-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 24px;
}

.admin-sheet-mod-empty strong {
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.admin-sheet-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

/* Status pill selector in side sheet */
.admin-status-pills {
  display: flex;
  gap: 6px;
}

.admin-spill {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-input);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.admin-spill.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.admin-spill:hover:not(.active) {
  background: var(--surface-strong);
  color: var(--text);
}

/* ── Admin sheet: redesigned Hesap section ──────────────── */
.admin-sheet-form2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 10px;
}

.admin-field-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 5px;
}

.admin-sheet-form2 select,
.admin-sheet-form2 input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 9px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  appearance: none;
}

.admin-sheet-form2 select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236f5b46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.admin-locked-inp {
  background: var(--surface-subtle) !important;
  color: var(--muted) !important;
}

.admin-sheet-pass-row {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

.admin-sheet-pass-row input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 9px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  margin-top: 5px;
}

/* ── Scope chips on report rows in module detail ─────────── */
.admin-sheet-rep-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.admin-sheet-rep-row:last-of-type { border-bottom: none; }

.admin-sheet-rep-row.off .admin-sheet-perm-nm { color: var(--muted); }

.admin-rep-scope-summary {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.admin-sc-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(52, 39, 21, 0.06);
  color: var(--text-secondary, #4a3a26);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.admin-sc-chip.sc-off { color: var(--muted); font-weight: 500; }
.admin-sc-chip.sc-all { color: var(--muted); font-weight: 500; }

.admin-sheet-scope-btn-row {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Scope sheet ──────────────────────────────────────────── */
.admin-sheet-crumb {
  margin-bottom: 4px;
}

.admin-scope-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.admin-scope-back-btn svg { width: 12px; height: 12px; }
.admin-scope-back-btn:hover { text-decoration: underline; }

.admin-scope-banner {
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12px;
  color: var(--text-secondary, #4a3a26);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-scope-banner-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-scope-banner-ic svg { width: 14px; height: 14px; }

.admin-scope-group-label {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 6px 2px 2px;
  flex-shrink: 0;
}

/* expandable report row */
.admin-rep-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
  flex-shrink: 0;
}

.admin-rep-row.open {
  border-color: rgba(var(--accent-rgb), 0.30);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.06);
}

.admin-rep-row.off { background: rgba(var(--surface-card, #fff), 0.55); }

.admin-rep-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
}

.admin-rep-row.open .admin-rep-head {
  border-bottom: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.03);
}

.admin-rep-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.admin-rep-row.off .admin-rep-name { color: var(--muted); }

.admin-rep-chev {
  color: var(--muted);
  width: 15px;
  height: 15px;
  transition: transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-rep-chev svg { width: 100%; height: 100%; }
.admin-rep-row.open .admin-rep-chev { transform: rotate(90deg); }

.admin-rep-body {
  display: none;
  padding: 14px;
  background: rgba(var(--surface-subtle, #f5efe4), 0.25);
}

.admin-rep-row.open .admin-rep-body { display: block; }

.admin-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-scope-span2 { grid-column: 1 / -1; }

.admin-scope-note {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 5px;
}

.admin-perm-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.admin-perm-toggle:last-child { border-bottom: none; }

.admin-perm-toggle-lab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.admin-perm-toggle-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* segment button group */
.admin-seg {
  display: inline-flex;
  background: rgba(52, 39, 21, 0.06);
  border-radius: 8px;
  padding: 2px;
}

.admin-seg button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 13px;
  border-radius: 6px;
  line-height: 1;
}

.admin-seg button.active {
  background: var(--surface-card, #fff);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.admin-seg-placeholder {
  font-size: 11.5px;
  color: var(--muted);
  padding: 4px 2px;
}

/* ── Scope: metric pill (multi-select) ─────────────────────── */
.admin-metric-pill {
  display: inline-flex;
  gap: 4px;
  background: rgba(52, 39, 21, 0.06);
  border-radius: 8px;
  padding: 3px;
}

.admin-metric-pill button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.admin-metric-pill button.active {
  background: var(--surface-card, #fff);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.admin-metric-pill button.base {
  cursor: default;
}

.admin-metric-pill button.base.active::after {
  content: " ●";
  font-size: 7px;
  vertical-align: middle;
  opacity: 0.5;
}

/* ── Report metric-view popup (which view to open) ─────────── */
.metric-view-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.metric-view-modal {
  text-align: center;
  width: 100%;
  max-width: 560px;
}

.metric-view-modal .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.metric-view-modal h3 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 26px;
}

.metric-view-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.metric-view-tile {
  background: var(--surface-card, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(30, 18, 6, 0.07);
  padding: 32px 18px 24px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: border-color 0.14s, transform 0.1s, box-shadow 0.14s;
}

.metric-view-tile:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0, 109, 119, 0.13);
}

.metric-view-tile:active { transform: translateY(-1px); }

.metric-view-tile.is-active { border-color: var(--accent); }

.metric-view-tile-sym {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", "Manrope", Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--accent-soft, rgba(0, 109, 119, 0.08));
  color: var(--accent);
  transition: background 0.14s, color 0.14s;
}

.metric-view-tile:hover .metric-view-tile-sym,
.metric-view-tile.is-active .metric-view-tile-sym {
  background: linear-gradient(135deg, var(--accent), var(--accent-end, #0a9396));
  color: #fff;
}

.metric-view-tile-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.metric-view-confidential-notice {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 7%, var(--surface-card));
  border-top: 3px solid var(--report-red, #dc2626);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.metric-view-confidential-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--report-red, #dc2626) 12%, transparent);
  color: var(--report-red, #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-view-confidential-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.metric-view-confidential-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--report-red, #dc2626);
}

.metric-view-confidential-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* Cumulative variant: contiguous segments that fill left→right like a progress bar. */
.admin-metric-cumulative {
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.admin-metric-cumulative button {
  border-radius: 0;
  background: var(--surface-input, transparent);
  color: var(--muted);
  box-shadow: none;
  position: relative;
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--line);
}

.admin-metric-cumulative button:last-child { border-right: none; }

.admin-metric-cumulative button.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

/* Subtle darker edge on the highest filled segment so the "fill level" reads clearly. */
.admin-metric-cumulative button.active + button:not(.active) {
  box-shadow: inset 2px 0 0 var(--accent);
}

.admin-scope-loading {
  font-size: 12px;
  color: var(--muted);
  padding: 9px 11px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-input);
}

/* ── Admin Modules Two-pane ──────────────────────────────── */
.admin-mods-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}
.admin-mods-pane {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-mods-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.admin-mods-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.admin-mod-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 11px 14px;
  align-items: center;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.admin-mod-row:hover { background: rgba(var(--accent-rgb), 0.04); }
.admin-mod-row.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-left-color: var(--accent);
}
.admin-mod-row .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.admin-mod-row .sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-mod-warn {
  font-size: 10px;
  font-weight: 700;
  color: #a36b0a;
  background: rgba(214,146,10,0.14);
  padding: 2px 7px;
  border-radius: 999px;
}
.admin-mod-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.admin-mod-icon svg { width: 18px; height: 18px; }
.admin-mod-icon.lg { width: 44px; height: 44px; border-radius: 12px; }
.admin-mod-icon.lg svg { width: 22px; height: 22px; }
.admin-mod-icon.teal   { background: linear-gradient(135deg, #006d77, #0a9396); }
.admin-mod-icon.warm   { background: linear-gradient(135deg, #bb3e03, #ca6702); }
.admin-mod-icon.violet { background: linear-gradient(135deg, #5b2cbf, #7b2cbf); }
.admin-mod-icon.green  { background: linear-gradient(135deg, #1f8a5b, #2a9d8f); }
.admin-mod-icon.amber  { background: linear-gradient(135deg, #b06b00, #d6920a); }
.admin-mod-icon.slate  { background: linear-gradient(135deg, #485866, #6f8290); }
.admin-mod-icon.dim    { background: rgba(52,39,21,0.10); color: var(--muted); }
.health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.health-dot.ok   { background: #2a9d8f; box-shadow: 0 0 0 3px rgba(42,157,143,0.18); }
.health-dot.warn { background: #d6920a; box-shadow: 0 0 0 3px rgba(214,146,10,0.18); }
.health-dot.fail { background: #bb3e03; box-shadow: 0 0 0 3px rgba(187,62,3,0.18); }
.health-dot.off  { background: var(--muted); }
.admin-detail-pane {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-detail-head {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.admin-detail-head h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.012em;
  color: var(--text);
}
.admin-detail-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-detail-meta strong { color: var(--text); font-weight: 700; }
.admin-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.admin-subtabs {
  display: flex;
  gap: 2px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
}
.admin-subtab {
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.1s;
}
.admin-subtab.active {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}
.admin-subtab .cnt {
  font-size: 10px;
  background: var(--surface-subtle);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.admin-subtab.active .cnt {
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
}
.admin-detail-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.admin-rt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.admin-rt th {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
}
.admin-rt td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
.admin-rt tr:hover td { background: rgba(var(--accent-rgb), 0.03); }
.admin-rt .name-cell { font-weight: 600; }
.admin-rt .name-cell .sub {
  font-weight: 500;
  color: var(--muted);
  font-size: 10.5px;
  margin-top: 2px;
}
.admin-rt-select {
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: 7px;
  padding: 5px 24px 5px 8px;
  font: inherit;
  font-size: 11.5px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236f5b46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  color: var(--text);
}
.admin-source-path {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-rt .icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.admin-rt .icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-rt .icon-btn svg { width: 13px; height: 13px; }
.admin-sync-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.admin-sync-stamp { color: var(--muted); }
.admin-sync-stamp.fail { color: #bb3e03; font-weight: 700; }
.admin-rt tr.is-refreshing td { opacity: 0.6; }
.admin-rt .icon-btn.is-refreshing { pointer-events: none; color: var(--accent); }
.admin-rt .icon-btn.is-refreshing svg { animation: button-spin 0.75s linear infinite; }
.admin-sync-fail-label {
  font-size: 10px;
  color: #bb3e03;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Settings / Account page redesign ──────────────────── */
.settings-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.settings-hero {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.settings-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0a9396);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  flex-shrink: 0;
}
.settings-avatar-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.settings-avatar-edit svg { width: 12px; height: 12px; }
.settings-hero-name {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.012em;
  color: var(--text);
}
.settings-hero-meta {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.settings-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(123,44,191,0.10);
  color: #5b2cbf;
}
.settings-hero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2a9d8f;
  box-shadow: 0 0 0 3px rgba(42,157,143,0.18);
  display: inline-block;
}
.settings-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 22px;
  border-left: 1px solid var(--line);
  padding-left: 22px;
}
.settings-hero-stat .lab {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.settings-hero-stat .val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.settings-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  overflow-y: auto;
  padding-bottom: 24px;
}
.settings-card-new {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.settings-card-new.full { grid-column: 1 / -1; }
.settings-card-new h4 {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 14px;
}
.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.settings-form-group label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.settings-pref-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-pref-row:last-child { border-bottom: none; }
.settings-pref-row .lab {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-pref-row .sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.settings-card-foot {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.settings-sessions {
  width: 100%;
  font-size: 12.5px;
}
.settings-sessions td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.settings-sessions tr:last-child td { border-bottom: none; }
.settings-sessions td:first-child { width: 40px; }
.settings-dev-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.settings-dev-ic svg { width: 14px; height: 14px; }
.settings-sessions .nm { font-weight: 600; color: var(--text); }
.settings-sessions .current {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
  font-weight: 700;
  background: rgba(45,157,143,0.12);
  padding: 2px 7px;
  border-radius: 999px;
}
.settings-sessions .dev-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.settings-mode-row {
  display: flex;
  gap: 8px;
}
.settings-mode-card {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  cursor: pointer;
  background: var(--surface-input);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.12s;
}
.settings-mode-card.active {
  border-color: var(--accent);
  border-width: 2px;
  padding: 11px;
  background: var(--accent-soft);
}
.settings-mode-preview {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.settings-mode-preview.light { background: linear-gradient(135deg, #f8f4ec, #fff); }
.settings-mode-preview.dark  { background: linear-gradient(135deg, #18222b, #0f1419); }
.settings-mode-nm { font-size: 13px; font-weight: 700; color: var(--text); }
.settings-mode-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.settings-palette-row {
  display: flex;
  gap: 8px;
}
.settings-palette-btn {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--surface-input);
  text-align: center;
  font: inherit;
  transition: border-color 0.12s;
}
.settings-palette-btn.active {
  border-color: var(--accent);
  border-width: 2px;
  padding: 9px 11px;
  background: var(--accent-soft);
}
.settings-palette-btn .nm {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.settings-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.settings-password-fields {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-module-detail-section-title {
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 10px;
}

/* ── Rapor Ayarları: vade hatırlatma maili (modül yönetimi modalı) ─────────── */
.admin-settings-subtitle {
  margin: 22px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.admin-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 600;
}
.admin-inline-check input { width: 16px; height: 16px; cursor: pointer; }
.admin-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.admin-vade-warning {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(179, 38, 30, .22);
  background: rgba(179, 38, 30, .06);
  color: var(--text);
}
/* Gönderim günleri — çoklu seçim pill'leri */
.admin-weekday-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.admin-weekday-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.admin-weekday-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.admin-weekday-pill:hover { border-color: var(--accent); }
.admin-weekday-pill.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  border-color: var(--accent);
  color: #fffdf8;
}

/* Vade maili test adresi satırı: yazılan adrese cari + takipçi maili örneği. */
.admin-vade-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-input);
}
.admin-vade-sample-label { font-size: 12.5px; font-weight: 600; }
.admin-vade-sample-input {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 13px;
}
.admin-vade-sample-help { flex: 1 0 100%; margin: 0; }

.admin-vade-cari-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
}
.admin-vade-cari-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-input);
}
.admin-vade-cari-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.admin-vade-cari-row:last-child { border-bottom: 0; }
.admin-vade-cari-row:hover { background: rgba(var(--accent-rgb), .05); }
.admin-vade-cari-row input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
/* Takipçi seçimi: cari kutucuğunun tıklama alanı yalnız sol bölüm (label). */
.admin-vade-cari-pick { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.admin-vade-follower {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  max-width: 42%;
}
.admin-vade-follower-names {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
  word-break: break-word;
}
/* Panel AKIŞ İÇİNDE (position:absolute DEĞİL): .admin-vade-cari-list bir kaydırma
   kabı (max-height + overflow-y) olduğu için mutlak konumlu panel alt satırlarda
   KIRPILIRDI. Akışta durunca satırı büyütür, listeyle birlikte kayar. */
.admin-vade-follower-panel {
  margin-top: 4px;
  width: 240px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.admin-vade-follower-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.admin-vade-follower-panel label:hover { background: rgba(var(--accent-rgb), .08); }
.admin-vade-follower-panel input { margin-top: 0; }
.admin-vade-follower-passive { color: var(--muted); font-size: 11px; }
.admin-vade-cari-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-vade-cari-name { font-weight: 600; font-size: 13px; }
.admin-vade-cari-meta { font-size: 11.5px; color: var(--muted); }
.admin-vade-result {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: 12.5px;
  line-height: 1.7;
}
.admin-vade-result-error { color: var(--report-red); font-weight: 600; }

/* Master Data ERP dışa aktarım yapılandırması (modül yönetimi modalı) */
.admin-erp-recipient { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.admin-erp-email { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-input); color: var(--text); font-size: .86rem; }
.admin-erp-recipient button[data-erp-recipient-remove] { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 12px; }
.admin-erp-manual-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.admin-erp-manual-name, .admin-erp-manual-value { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-input); color: var(--text); font-size: .86rem; }
.admin-erp-manual-row button[data-erp-manual-remove] { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 12px; }
.admin-erp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.admin-erp-tab { padding: 9px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .84rem; font-weight: 600; }
.admin-erp-tab:hover { color: var(--text); }
.admin-erp-tab.active { border-bottom-color: var(--accent); background: transparent; color: var(--accent); }
.admin-erp-pane { display: none; }
.admin-erp-pane.active { display: block; }
.admin-erp-cols { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.admin-erp-col { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); }
.admin-erp-col.dragging { opacity: .5; }
.admin-erp-col-grip { cursor: grab; color: var(--muted); font-size: .95rem; user-select: none; flex: 0 0 auto; }
.admin-erp-col-lbl { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 9px; font-size: .85rem; cursor: pointer; }
/* Global input{width:100%} checkbox'ı geriyordu → etiket sağa kaçıyordu. */
.admin-erp-col-lbl input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.admin-erp-col-ord { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.admin-erp-col-ord button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: .62rem; line-height: 1; padding: 1px 4px; }
.admin-erp-col-ord button:hover { color: var(--accent); }
/* Ortak listede manuel sabit sütun öğesi (ad + değer düzenlenebilir) */
.admin-erp-col-manual { background: var(--accent-soft, rgba(37,99,235,.06)); }
.admin-erp-manual-badge { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--accent, #2563eb); color: #fff; font-size: .68rem; font-weight: 700; }
.admin-erp-col-manual .admin-erp-manual-name { flex: 1 1 40%; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.admin-erp-col-manual .admin-erp-manual-value { flex: 1 1 40%; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.admin-erp-col-manual button[data-erp-manual-remove] { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.admin-erp-col-lbl { flex: 1; min-width: 0; font-size: .85rem; color: var(--text); }
.admin-erp-col button[data-erp-col-remove] { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 9px; }
.admin-erp-cols-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Sağ çekmece: eklenmemiş sütun havuzu + manuel ekleme */
.admin-erp-drawer { position: fixed; inset: 0; z-index: 3400; display: flex; justify-content: flex-end; }
.admin-erp-drawer[hidden] { display: none !important; }   /* [hidden], display:flex'i ezmesin */
.admin-erp-drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.admin-erp-drawer-panel { position: relative; z-index: 1; width: min(420px, 92vw); height: 100%; background: var(--surface-card, #fff); border-left: 1px solid var(--line); box-shadow: -12px 0 34px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.admin-erp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.admin-erp-drawer-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.admin-erp-pool-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-input); color: var(--text); font-size: .85rem; }
.admin-erp-pool { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-erp-pool-chip { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); color: var(--text); cursor: pointer; font-size: .8rem; }
.admin-erp-pool-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, rgba(37,99,235,.08)); }
.admin-erp-drawer-manual { border-top: 1px solid var(--line); padding-top: 12px; }
.admin-erp-manual-add-row { display: flex; gap: 7px; flex-wrap: wrap; }
.admin-erp-manual-add-row .admin-erp-manual-name, .admin-erp-manual-add-row .admin-erp-manual-value { flex: 1 1 40%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
/* Ürün notu görünümü (detay) */
.md-note-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; color: var(--text); font-size: .9rem; }
.md-note-html { line-height: 1.5; color: var(--text); font-size: .9rem; }
.md-note-html img { max-width: 100%; height: auto; }
.md-note-html a { color: var(--accent); }
.md-note-html table { border-collapse: collapse; }
.md-note-html td, .md-note-html th { border: 1px solid var(--line); padding: 4px 8px; }
/* Tamamlanmış ithalat fiyatları tablosu (ürün detay) */
.md-imp-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.md-imp-table th, .md-imp-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.md-imp-table th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.md-imp-table td.md-num { text-align: right; font-variant-numeric: tabular-nums; }
.md-imp-table tr.md-imp-warn td { background: rgba(214,69,61,.10); }
/* Kategori-bazlı marj yapısı çubuğu (Parametreler > Marj Yapısı) */
.md-catstruct-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle, rgba(0,0,0,.02)); }
.md-catstruct-bar > .md-fld { flex: 1 1 220px; margin: 0; }
.md-catstruct-add { display: flex; gap: 6px; align-items: center; }
.md-catstruct-add select { min-width: 180px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input); color: var(--text); font-size: .84rem; }

.admin-table-wrap {
  border-radius: 20px;
  overflow: visible;
}

.admin-table {
  min-width: 960px;
}

.admin-table th,
.admin-table td {
  vertical-align: middle;
}

.admin-path-cell {
  max-width: 360px;
  white-space: normal;
  word-break: break-word;
  font-size: 0.9rem;
  color: var(--muted);
}

.admin-path-item {
  display: grid;
  gap: 2px;
}

.admin-path-item + .admin-path-item {
  margin-top: 10px;
}

.admin-path-item strong {
  color: var(--text);
  font-size: 0.88rem;
}

.admin-path-link {
  width: fit-content;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.admin-path-link:hover {
  text-decoration: underline;
}

.admin-module-detail-table {
  width: 100%;
  min-width: 0;
}

.admin-inline-select {
  min-width: 130px;
  padding: 8px 12px;
  border-radius: 12px;
}

.admin-inline-input {
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--text);
  font: inherit;
}

.admin-refresh-schedule {
  display: grid;
  gap: 8px;
  min-width: 270px;
}

.admin-refresh-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-refresh-line.hidden {
  display: none;
}

.admin-refresh-schedule .table-subtext {
  margin-top: 0;
}

.admin-mail-settings {
  display: grid;
  gap: 6px;
  min-width: 250px;
}

.admin-mail-setting-row {
  display: grid;
  gap: 6px;
}

.admin-mail-setting-row.is-disabled {
  opacity: 0.5;
}

.admin-mail-setting-line {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 96px;
  align-items: center;
  gap: 8px;
}

.admin-mail-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}

.admin-mail-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.admin-mail-setting-extra.hidden {
  display: none;
}

.admin-mail-setting-extra .admin-inline-select {
  width: 100%;
}

.table-subtext {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.table-actions-cell {
  text-align: right;
}

.report-page .section-heading .eyebrow,
.report-page .trend-card-head .eyebrow {
  display: none;
}

.with-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.counter-pill {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(174, 32, 18, 0.14);
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 32px 24px;
  background: var(--modal-backdrop-bg);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--surface-menu);
  box-shadow: var(--shadow);
}

.modal-card-lg {
  width: min(1320px, calc(100vw - 24px));
}

.modal-card-user-manage,
.modal-card-report-permissions {
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 760px);
}

.modal-card-user-manage .modal-body,
.modal-card-report-permissions .modal-body {
  flex: 1 1 auto;
  align-content: start;
}

.modal-card-user-manage .modal-footer,
.modal-card-report-permissions .modal-footer {
  margin-top: auto;
}

.modal-header,
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 0;
}

.modal-body {
  padding: 24px;
  display: grid;
  gap: 18px;
}

.modal-footer {
  padding: 0 24px 24px;
}

.modal-footer-split {
  align-items: center;
}

.modal-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-card);
  display: grid;
  gap: 16px;
}

.modal-actions {
  justify-content: flex-end;
}

.compact-empty-state {
  padding: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-card {
  height: 100%;
  align-content: start;
}

.settings-card-theme,
.settings-card-sharepoint {
  min-height: 0;
}

.settings-card .section-heading {
  align-items: flex-start;
}

.settings-card .badge {
  flex-shrink: 0;
}

.account-settings-card {
  max-width: none;
}

.settings-card-sharepoint .table-actions {
  margin-top: 16px;
}

.settings-card .muted {
  line-height: 1.55;
}

.span-full {
  grid-column: 1 / -1;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.permission-groups {
  display: grid;
  gap: 12px;
}

.permission-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card-strong);
  overflow: visible;
}

.calc-row {
  background: var(--table-calc);
}

.calc-row-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

.permission-group summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
}

.permission-group summary::-webkit-details-marker {
  display: none;
}

.permission-group[open] summary {
  border-bottom: 1px solid var(--line);
}

.permission-group .checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: visible;
}

.nested-table-wrap {
  padding: 8px 10px 10px;
}

.report-table-groups .permission-group {
  box-shadow: none;
}

.permission-count {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-card);
}

.permission-group .checkbox-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.permission-group .checkbox-grid > .checkbox-row,
.permission-report-row {
  border-bottom: 1px solid var(--line);
}

.permission-group .checkbox-grid > .checkbox-row:last-child,
.permission-report-row:last-child {
  border-bottom: 0;
}

.checkbox-row input {
  width: auto;
  margin: 0;
}

.permission-report-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content;
  gap: 10px;
  align-items: center;
  padding: 0;
}

.permission-report-checkbox {
  min-width: 0;
}

.permission-inline-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 14px 0 0;
}

.permission-inline-controls {
  display: grid;
  grid-template-columns: minmax(160px, 220px) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.permission-download-checkbox {
  white-space: nowrap;
  padding: 0;
}

.permission-inline-filter-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.permission-inline-filter.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.permission-inline-filter .report-slicer-multiselect {
  width: min(220px, 100%);
}

.permission-inline-filter .report-slicer-summary {
  min-height: 34px;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1;
}

.permission-group summary:focus {
  outline: none;
}

.permission-group summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 900px) {
  .permission-report-row {
    grid-template-columns: 1fr;
  }

  .permission-inline-filter {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px 14px;
  }

  .permission-inline-controls {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .permission-inline-filter .report-slicer-multiselect {
    width: 100%;
  }
}

.empty-state {
  padding: 28px;
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: var(--surface-card);
}

.field-disabled {
  opacity: 0.72;
}

.email-input-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.email-input-wrap input {
  width: 100%;
}

.field-email-split input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.email-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-left: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: var(--surface-card);
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .shell {
    padding-left: 24px;
  }

  .sidebar {
    width: min(var(--sidebar-width), calc(100vw - 52px));
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .report-grid-wide {
    grid-template-columns: 1fr;
  }

  .portal-home-hero {
    grid-template-columns: 1fr;
  }

  .portal-home-actions {
    min-width: 0;
  }

  .portal-modules-grid {
    grid-template-columns: 1fr;
  }

  .portal-overview-grid {
    grid-template-columns: 1fr;
  }

  .net-sales-top-grid {
    grid-template-columns: 1fr;
  }

  .income-date-filter-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-shell-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .report-shell-meta,
  .report-shell-title,
  .report-shell-brand {
    justify-items: center;
    justify-content: center;
  }

  .cari-rontgen-info-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .net-sales-kpi-board {
    grid-template-columns: 1fr;
  }

  .net-sales-kpi-column-finance {
    grid-column: auto;
  }

  .net-sales-top-grid-pies {
    grid-template-columns: 1fr;
  }

  .net-sales-test-top-grid {
    grid-template-columns: 1fr;
  }

  .horizontal-distribution-row {
    grid-template-columns: 1fr;
  }

  .net-sales-kpi-line {
    grid-template-columns: 1fr;
  }

  .report-bar-chart {
    grid-template-columns: 1fr;
  }

  .chart-with-axis {
    grid-template-columns: 1fr;
  }

  .report-bar-axis {
    display: none;
  }

  .trend-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trend-tab-group {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .net-sales-kpi-finance-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .pie-card {
    grid-template-columns: 1fr;
  }

  .turkey-map {
    min-height: 280px;
  }

  .report-toolbar-right,
  .source-sync-block,
  .source-sync-meta {
    width: 100%;
    justify-content: flex-start;
  }

  .report-row {
    grid-template-columns: 1fr;
  }

  .report-list-head {
    display: none;
  }

  .report-row-actions,
  .report-show-field-wide {
    width: 100%;
  }

  .report-side-panel {
    position: static;
    order: 2;
  }

  .report-sidebar {
    width: min(var(--report-sidebar-width), calc(100vw - 52px));
  }

  body.report-sidebar-visible .shell,
  body.report-sidebar-visible.report-sidebar-collapsed .shell,
  body:not(.report-sidebar-visible) .shell {
    padding-right: 24px;
  }

  .report-filter-field,
  .report-filter-actions {
    width: 100%;
    max-width: none;
  }

  .report-filter-actions {
    margin-left: 0;
    justify-content: flex-start;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-widget,
  .home-widget-full,
  .home-widget-half {
    grid-column: auto;
  }

  .login-split {
    grid-template-columns: 1fr;
  }

  .login-right {
    display: none;
  }

  .login-left {
    padding: 40px 32px;
    min-height: 100vh;
  }

}

@media (max-width: 680px) {
  .shell {
    width: min(100% - 20px, 1440px);
    margin: 10px auto;
    padding-left: 20px;
  }

  .sidebar,
  .panel {
    padding: 18px;
    border-radius: 22px;
  }

  .source-sync-text {
    width: 100%;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-chip {
    flex: 1 1 auto;
    text-align: center;
  }

  .income-date-filter-controls {
    grid-template-columns: 1fr;
  }

  th,
  td {
    padding: 12px 10px;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .modal-header,
  .modal-footer,
  .modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-tabs {
    width: 100%;
    gap: 18px;
  }

  .vertical-chart-grid {
    grid-auto-columns: minmax(82px, 1fr);
    min-height: 280px;
  }

  .account-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .account-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .account-password-grid {
    grid-template-columns: 1fr;
  }
}

.cari-rontgen-empty {
  min-height: 220px;
}

.cari-rontgen-picker {
  display: grid;
  grid-template-columns: minmax(520px, 920px) 170px;
  gap: 16px;
  align-items: end;
  margin-top: 18px;
  max-width: 1110px;
}

.cari-rontgen-picker .report-filter-field {
  max-width: none;
}

.cari-rontgen-initial-field {
  position: relative;
  z-index: 8;
}

.cari-rontgen-initial-options {
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: 300px;
}

.cari-rontgen-initial-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  font-size: 17px;
}

.cari-rontgen-initial-selected {
  display: grid;
  gap: 8px;
  grid-column: 1;
}

.cari-rontgen-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
  font: inherit;
}

.cari-rontgen-picker .button {
  grid-column: 2;
  grid-row: 1;
}

/* "Uygula" düğmesi input alanıyla AYNI yükseklikte olsun (önce 48px ile
   arama kutusundan yüksek duruyordu). align-items:end ile alt hizalı. */
.cari-rontgen-picker .button {
  min-height: 0;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* 120 KPI ızgarası: görünürde 4 kutu, ama ızgara 8 BİRİM — normal kart 2 birim,
   "yarım" kart (Tanımlı İskonto / Tanımlı Vade) 1 birim kaplar. Böylece iki yarım
   kart yan yana tam olarak üstündeki tek kutu kadar yer tutar.
   320 ızgarası hariç tutulur; o kendi 5 kolonluk düzenini kullanır. */
.cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  /* Tüm satırlar eşit yükseklik → yarım kartlar da diğerleriyle aynı boyda olur
     (yoksa 2 satıra sarılan etiket/değer o satırı diğerlerinden uzun yapar).
     `align-items: stretch` şart: .stat-grid'den gelen `center` kartı içeriğine
     göre boyutlayıp satır içinde ortalıyor, o yüzden satırlar eşit olsa bile
     KART yükseklikleri farklı kalıyordu. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) > .cari-rontgen-kpi {
  grid-column: span 2;
  min-width: 0;
}
.cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) > .cari-rontgen-kpi-half {
  grid-column: span 1;
}
/* Yarım kartın puntosu ve dolgusu diğer kartlarla AYNIDIR — sadece daralan
   genişliğe sığabilmesi için etiket/değerin satır kırmasına izin verilir.
   (Punto küçültme denendi ama kartlar diğerlerinden farklı görünüyordu.) */
/* Yarım kartta YATAY dolgu kısılır (punto değil): 120px kartın 40px'i dolgu olunca
   iç genişlik 80px'e düşüyor ve "Güncel: %15,00" tek satıra sığmıyordu. Dikey dolgu
   ve punto diğer kartlarla aynı kalır. */
.cari-rontgen-kpi-half {
  padding-left: 11px !important;
  padding-right: 11px !important;
}
/* NOT: `overflow-wrap: break-word` KULLANILMAZ — "%15,00" değerini ortadan bölüp
   "%1 / 5,00" gibi okunuyordu. Yalnız boşluktan kırılsın; "TANIMLI İSKONTO" ve
   "Güncel: %15,00" böylece anlamlı yerden ikiye ayrılır. */
.cari-rontgen-kpi-half .eyebrow {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.cari-rontgen-kpi-half .kpi-value,
.cari-rontgen-kpi-half .kpi-value.kpi-value-small {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
/* Yarım kartta "Güncel: %x · Ortalama: %x" tek satıra sığmaz; ayraç gizlenip her
   parça alt alta yazılır. Seçicide ızgara sınıfı da var: aşağıdaki
   `.cari-rontgen-kpi .kpi-value > .cari-rontgen-discount-value` kuralı AYNI
   özgüllükte ve dosyada DAHA SONRA geldiği için 3 sınıflı seçici nowrap'i
   yenemiyordu — 4 sınıf ile sıra bağımsız kazanır. */
.cari-rontgen-kpi-grid .cari-rontgen-kpi-half .kpi-value > .cari-rontgen-discount-value {
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
  gap: 0;
}
.cari-rontgen-kpi-grid .cari-rontgen-kpi-half .kpi-value > .cari-rontgen-discount-value > span {
  flex: 0 0 100%;
  min-width: 0;
  /* "Güncel: %15,00" yarım kartın 80px'lik iç genişliğine tek satırda sığmaz;
     etiketle yüzde arasındaki BOŞLUKTAN kırılır (punto diğer kartlarla aynı). */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.cari-rontgen-kpi-half .cari-rontgen-discount-sep {
  display: none;
}
/* Değer iki satıra çıkabildiği için kırpılmasın. */
.cari-rontgen-kpi-half .kpi-value {
  overflow: visible;
}

/* 320 (Satıcılar) cari görünümü: 5 KPI tek sırada. */
.cari-rontgen-320-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cari-rontgen-kpi .kpi-value {
  font-size: 16px;
}

.vertical-chart-bar.accent-bar {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, var(--income-bar-start, #1d4ed8), var(--income-bar-end, #60a5fa));
}

.cari-rontgen-info-table-card {
  padding: 0 !important;
  grid-column: 1 / -1;
  display: block;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.cari-rontgen-info-table-card .table-wrap {
  width: 100%;
  display: block;
}
.cari-rontgen-info-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: transparent;
}
.cari-rontgen-info-table thead th {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 16px 24px 8px 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cari-rontgen-info-table thead th:first-child { padding-left: 20px; }
.cari-rontgen-info-table tbody td {
  border: none;
  padding: 6px 24px 16px 20px;
  font-weight: 500;
  white-space: nowrap;
}
.cari-rontgen-info-table tbody td:first-child { padding-left: 20px; }
.cari-rontgen-info-table tbody tr:hover td { background: transparent; }

.cari-rontgen-kpi-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cari-rontgen-kpi-clickable:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.trend-day-sublabel {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
}

.cari-rontgen-overdue-total {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--report-red, #dc2626);
}

.cari-rontgen-kpi .kpi-value.kpi-value-small {
  font-size: clamp(0.75rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.4;
}

.cari-rontgen-kpi .kpi-value.cari-rontgen-discount-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: nowrap;
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
  font-weight: 500;
  white-space: nowrap;
}
.cari-rontgen-discount-label {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}
.cari-rontgen-discount-sep {
  color: var(--muted);
  font-weight: 400;
}

/* Ödeme Vade Skoru: "78/100 · İyi" — kpi-value içinde satır içi span. */
.cari-rontgen-kpi .kpi-value > .cari-rontgen-discount-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Satırlı KPI kutuları: cari bazlı Brüt Kar (Brüt Malzeme Karı / Brüt Toplam
   Kar) ve Genel Görünüm'ün Net Satış (Net Malzeme / Net Hizmet / Toplam) +
   Brüt Kar kutuları. Etiket solda soluk, tutar sağda. Punto blanket 14px
   kuralı yüzünden !important ile küçültülür. */
.cari-rontgen-kpi-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
/* Satır SARILABİLİR flex (eskiden `max-content minmax(0,1fr)` grid'di).
   NEDEN: etiket track'i `max-content` olduğu için küçülemiyordu ve tutar da
   `nowrap`; etiket uzayınca (ör. "Brüt Malzeme Karı" + değerin içinde marj)
   ikisi 1024px'lik ekranda kartın 192px'ine sığmayıp ÜST ÜSTE BİNİYORDU
   (ölçüm: 259px gerekli / 192px var). Flex + `flex-wrap` ile sığmadığında tutar
   alt satıra iner ve sağa yaslı kalır — hiçbir şey kırpılmaz, hiçbir şey
   binmez. Kırpma/ellipsis tercih edilmedi: tutar da etiket de okunmalı. */
.cari-rontgen-kpi-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
}
/* Punto seçicileri ÜÇ sınıflı: blanket `.report-page :not(...)` kuralının
   özgüllüğü (0,1,8) — tek sınıflı `!important` onu YENEMEZ, sınıf sayısı (b)
   önce karşılaştırıldığı için 3 sınıf kazanır. */
.cari-rontgen-kpi .cari-rontgen-kpi-line .cari-rontgen-kpi-line-label {
  font-size: 11px !important;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.cari-rontgen-kpi .cari-rontgen-kpi-line .cari-rontgen-kpi-line-value {
  font-size: 13px !important;
  font-weight: 600;
  /* flex'te `justify-self` yok sayılır; tutarı sağa yaslamak için auto margin.
     Satır sarıldığında da tutar kendi satırının sağında kalır. */
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* Birleşik ("duo") KPI kutusu: "Tanımlı" (İskonto | Vade) ve "Ödeme"
   (Vade Skoru | Alışkanlık). İki eski kutu tek kartta: ortak ön ek kutu
   başlığında, yarılar dikey çizgiyle ayrılır. Punto kuralları 3 sınıf +
   !important — blanket 14px kuralını (0,1,8) yenmek için (yukarıdaki
   kpi-line kurallarıyla aynı gerekçe). */
.cari-rontgen-kpi .kpi-value .cari-rontgen-kpi-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  align-items: start;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-kpi-duo-half {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-kpi-duo-half + .cari-rontgen-kpi-duo-half {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-kpi-duo-label {
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-kpi-duo-value {
  font-size: 13px !important;
  font-weight: 600;
  /* "%15,00" ortadan bölünmesin: yalnız boşluktan kırılır (yarım kart
     kuralındaki NOT ile aynı gerekçe). */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
/* Skor bileşiği ("78/100 · İyi") ve iskonto çifti ("Güncel: … · Ortalama: …")
   duo yarısında dar kalır: nowrap yerine boşluktan sarmaya izin verilir,
   ayraç noktası gizlenip parçalar alt alta yazılır (yarım kart deseniyle aynı). */
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-discount-value {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  white-space: normal;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-discount-value > span {
  flex: 0 0 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.cari-rontgen-kpi .cari-rontgen-kpi-duo .cari-rontgen-discount-sep {
  display: none;
}

/* Yukarıdaki iki kural `.cari-rontgen-kpi`ye (cari bazlı kart) bağlı olduğu için
   Genel Görünüm kartlarını (`.cari-rontgen-general-kpi-card`) KAPSAMIYOR.
   Aşağıdakiler İKİ kartı da açıkça sayar → her iki görünümde de geçerli.
   Özgüllük üç sınıf: blanket 14px kuralını (0,1,8) yenmesi gerekiyor.
   NOT: bu seçiciler eskiden `.report-kpi-grid` ızgara işaretçisine bağlıydı;
   o işaretçi KPI tasarım sistemiyle geldi ve sistem geri alındığı için kartlar
   doğrudan sayılır (b5943d3 → KPI tasarımı geri alma). */
.report-page .cari-rontgen-kpi .cari-rontgen-kpi-line-label,
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line-label {
  font-size: 11px !important;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.report-page .cari-rontgen-kpi .cari-rontgen-kpi-line-value,
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line-value {
  font-size: 13px !important;
  font-weight: 600;
  /* `margin-left: auto` hem grid hem flex satır düzeninde tutarı sağa yaslar
     (`justify-self` flex'te YOK SAYILIR). Satır sarılırsa tutar kendi
     satırının sağında kalır. */
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* Kapanış satırı (Toplam / Brüt Toplam Kar) kalın üst çizgiyle vurgulanır.
   DEĞERİN RENGİ EZİLMEZ — kutunun tonunu (yeşil/kırmızı) miras alması
   gerekiyor; yalnız etiket koyulaşır ve değer büyür. Seçiciler dört sınıflı,
   yani yukarıdaki üç sınıflı kuralları kaynak sırasından bağımsız yener. */
.report-page .cari-rontgen-kpi .cari-rontgen-kpi-line-total,
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line-total {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding-top: 7px;
}
.report-page .cari-rontgen-kpi .cari-rontgen-kpi-line-total .cari-rontgen-kpi-line-label,
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line-total .cari-rontgen-kpi-line-label {
  color: var(--text);
  font-weight: 700;
}
.report-page .cari-rontgen-kpi .cari-rontgen-kpi-line-total .cari-rontgen-kpi-line-value,
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line-total .cari-rontgen-kpi-line-value {
  /* Eskiden `var(--kpi-fs-row-strong)`; o token KPI tasarım sistemiyle geldi ve
     sistem geri alındı — değer sabitlendi (token o an 17px'e denk geliyordu). */
  font-size: 17px !important;
  font-weight: 700;
}

/* "/100" eki. NOT: tek sınıflı seçici blanket kuralı yenmiyordu (yukarıdaki
   özgüllük açıklamasına bakın) — kart sınıfıyla birlikte yazılır. */
.cari-rontgen-kpi .kpi-value .cari-rontgen-score-max {
  font-size: 11px !important;
  font-weight: 400;
  color: var(--muted);
}

/* Mutabakat Mektubu düğmesi — cari künye kartının sağ üstü.
   Görünüm KOL modülündeki "Yeni KOL" (.kol-new-btn) ile birebir aynı. */
/* Aktif filtre çipleri + Mutabakat düğmesi AYNI satırda: çipler solda
   (margin-right:auto ile), düğme sağda. Çip yoksa düğme yine sağda kalır. */
.report-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.report-actions-row .report-filter-chips {
  margin-right: auto;
}
.cari-mutabakat-menu {
  width: auto;
  flex: 0 0 auto;
}
.cari-mutabakat-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 12.5px !important; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; color: #fffdf8;
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  border: 1px solid var(--accent);
  box-shadow: 0 2px 7px rgba(0, 109, 119, .22);
  transition: background .12s, transform .06s, border-color .12s;
}
.cari-mutabakat-btn:hover { transform: translateY(-1px); }
.cari-mutabakat-btn:disabled { opacity: .72; cursor: default; transform: none; }
.cari-mutabakat-btn-ic { width: 15px; height: 15px; display: inline-grid; place-items: center; }
.cari-mutabakat-btn-ic svg { width: 100%; height: 100%; }
.cari-mutabakat-menu .download-menu-panel {
  min-width: 100%;
  width: max-content;
}

.cari-rontgen-kpi .tone-income {
  color: var(--report-green);
}

.cari-rontgen-kpi .tone-expense {
  color: var(--report-red);
}

.cari-rontgen-kpi .tone-accent {
  color: var(--report-blue);
}

.cari-rontgen-overview-grid {
  grid-template-columns: 1.6fr 1fr 1fr;
}

.cari-rontgen-wide {
  grid-column: 1 / -1;
}

.cari-rontgen-general-selector-card {
  padding: 16px 20px;
  margin-bottom: 4px;
}

.cari-rontgen-account-mode-bar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 14px;
}

.cari-rontgen-account-mode .segmented-chip {
  min-width: 64px;
  font-weight: 600;
}

.cari-rontgen-general-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.cari-rontgen-general-kpi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.cari-rontgen-general-kpi-card .kpi-label {
  margin: 0;
  /* Başlık iki satıra SARAR (basis 4em ≈ 64px) — tek satıra yayılırsa 89px
     kapıp yanındaki değer bloğuna 141px bırakıyordu ve kırılımlı kutularda
     tutar taşıyordu. `min-width` VERİLMEZ: 0 yapılırsa "Sipariş Adedi"
     başlığı en-kısa-kelimenin altına inip kırpılıyor. */
  flex: 0 1 4em;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  /* `.report-page .kpi-label` ile aynı aralık. Bu kural AYNI özgüllükte
     (2 sınıf) ve dosyada DAHA SONRA geldiği için onu yeniyor — burada da
     güncellenmezse Genel Görünüm etiketleri geniş aralıkta kalır. */
  letter-spacing: 0.04em;
}
.cari-rontgen-general-kpi-card .kpi-value {
  margin: 0;
  text-align: right;
  /* Kart flex-row (başlık solda / değer sağda). `flex-shrink: 0` iken değer
     küçülemiyordu ve kırılımlı kutularda (Net Satış / Brüt Kar) satır
     kartın DIŞINA taşıyordu — ölçüm: gereken 276px / iç genişlik 242px.
     Shrink + `min-width: 0` ile değer daralır, içindeki
     `.cari-rontgen-kpi-line` (flex-wrap) sığmayan tutarı alt satıra indirir.
     Tek satırlık kutular (Satış/Sipariş Adedi) zaten sığdığı için etkilenmez. */
  /* Değer bloğu kalan genişliği DOLDURUR: iç satır etiketleri kartın başlığına
     yaklaşır (ölçüm: etiket sol boşluğu 133px → 77px) ve tutara azami yer
     kalır. `min-width: 0` olmadan flex öğesi içerik genişliğinin altına inemez. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Genel Görünüm kırılımlı kutuları (Net Satış / Brüt Kar): tutar ALT SATIRA
   İNMEZ — satır sarmaz, tutar sığacak puntoda kalır (kullanıcı isteği).
   Ölçüm (282px kart → satıra 169px): kısa etiket + 8px boşluk + tutar
   "Toplam" 39 + 8 + 118(13px) = 165 ✓ ; "Malzeme" 45 + 8 + 109(12px) = 162 ✓
   Uzun etiketlerle bu satır hiçbir puntoda sığmıyordu; etiketler bu yüzden
   markup'ta kısaltıldı (tam adlar kartın `title` ipucunda).
   Cari bazlı kart (`.cari-rontgen-kpi`) BU KURALLARIN DIŞINDA — orada satır
   daha geniş, uzun etiketler ve sarma davranışı korunur. */
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-line {
  flex-wrap: nowrap;
}
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-lines .cari-rontgen-kpi-line-value {
  font-size: 12px !important;
}
.report-page .cari-rontgen-general-kpi-card .cari-rontgen-kpi-lines .cari-rontgen-kpi-line-total .cari-rontgen-kpi-line-value {
  font-size: 13px !important;
}

.cari-rontgen-general-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cari-rontgen-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 46px; /* sağ üst köşedeki büyüt/küçült butonuna yer aç */
}

.cari-rontgen-invoice-table-shell {
  min-height: 0;
}

.cari-rontgen-invoice-table-card {
  position: relative;
}

.cari-rontgen-invoice-table-card.is-expanded,
.cari-rontgen-profit-table-card.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none;
  margin: 0 !important;
  gap: 0;
  border-radius: 0;
  border: 0;
  padding: 0;
  background: var(--surface-strong);
  box-shadow: none;
  overflow: hidden;
}

.cari-rontgen-fullscreen-header {
  display: grid;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}

.cari-rontgen-invoice-table-card.is-expanded .section-heading,
.cari-rontgen-profit-table-card.is-expanded .section-heading {
  flex: 0 0 auto;
  padding: 16px 24px;
}

.cari-rontgen-invoice-table-card.is-expanded .report-table-wrap,
.cari-rontgen-profit-table-card.is-expanded .report-table-wrap {
  flex: 1;
  max-height: none;
  min-height: 0;
  border-radius: 0;
}

.cari-rontgen-invoice-expand-toggle {
  position: static;
  flex: 0 0 auto;
}

.cari-rontgen-matrix-card.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none;
  margin: 0 !important;
  gap: 0;
  border-radius: 0;
  border: 0;
  padding: 0;
  background: var(--surface-strong);
  box-shadow: none;
  overflow: hidden;
}

.cari-rontgen-matrix-card.is-expanded .section-heading {
  padding: 12px 20px;
  flex-shrink: 0;
}

.cari-rontgen-matrix-card.is-expanded .cari-rontgen-matrix-wrap {
  flex: 1;
  max-height: none;
  overflow-y: auto;
}

.cari-rontgen-table-card .report-table-wrap {
  max-height: 360px;
  overflow: auto;
}

.cari-rontgen-clickable-row {
  cursor: pointer;
}

.cari-rontgen-clickable-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cari-rontgen-table-card td {
  vertical-align: top;
}

.cari-rontgen-warning-row td {
  background: rgba(var(--warn-row-rgb, 234, 88, 12), 0.07);
}

.cari-rontgen-row-danger td {
  background: rgba(220, 38, 38, 0.08) !important;
}

.cari-rontgen-row-no-cost td {
  background: rgba(234, 88, 12, 0.07) !important;
}

.cari-rontgen-breakdown-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-right: 46px; /* sağ üst köşedeki büyüt/küçült butonuna yer aç */
}

.cari-rontgen-product-detail-name {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Column sort + filter (Stock-style) ─────────────────────── */
.col-hdr { position: relative; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
th.num-cell .col-hdr-cell { justify-content: flex-end; }

.col-hdr-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.col-sort-btn,
.col-filter-btn {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.col-sort-btn {
  opacity: 0.55;
  transition: opacity 0.18s ease;
  line-height: 1;
}
.col-sort-btn:hover,
.col-sort-btn.active { opacity: 1; }
.col-sort-btn.active { color: var(--accent); }

.col-sort-arrows {
  display: inline-block;
  min-width: 16px;
  font-size: 0.8rem;
  letter-spacing: -0.08em;
}
/* Fiyat değişikliği onayları (Onaylar & Talepler → Fiyat Onayları sekmesi) */
.md-pr-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.md-pr-card { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); }
.md-pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.md-pr-meta b { font-size: .92rem; }
.md-pr-meta small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.md-pr-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.md-pr-items { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border, #e5e7eb); display: flex; flex-direction: column; gap: 5px; }
.md-pr-items li { font-size: .84rem; }
.md-pr-chg { color: var(--muted); font-size: .8rem; }
/* Master tablo: sıralama oklarını sütun tipinden bağımsız TEK biçimde göster.
   Metin sütunları (Helvetica) daha ince, sayı sütunları (Space Grotesk) daha kalın
   çiziyordu; hepsini sayı sütunlarındaki (KDV vb.) kalın görünüme sabitle. */
.md-table .col-sort-arrows { font-family: "Space Grotesk", Manrope, Helvetica, sans-serif; }

.col-filter-btn {
  font-weight: 600;
  white-space: nowrap;
}
.col-filter-btn.active { color: var(--accent); }

.col-filter-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: super;
  margin-left: 2px;
}

/* Filter dropdown */
.col-filter-menu {
  /* --surface-strong is fully opaque: #fff (light) / #18222b (dark) */
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  padding: 10px;
  min-width: 220px;
  max-width: 280px;
  display: grid;
  gap: 6px;
  text-align: left;
}

.col-filter-list {
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.col-filter-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  user-select: none;
  text-align: left;
}

.col-filter-option input[type="checkbox"] {
  /* Global "input { width:100% }" makes checkboxes full-width — override */
  width: auto !important;
  flex-shrink: 0;
  order: 0;
  margin: 0;
  cursor: pointer;
}
.col-filter-option:hover { background: rgba(var(--accent-rgb), 0.06); }

.col-filter-select-all {
  font-weight: 700;
  font-size: 0.88rem;
}

.col-filter-divider {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

.col-filter-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-input);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 10px;
  outline: none;
}
.col-filter-search:focus { border-color: var(--accent); }
.col-filter-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 12px;
  outline: none;
}
.col-filter-input:focus { border-color: var(--accent); }
.col-filter-actions { display: flex; gap: 6px; }
.col-filter-apply, .col-filter-clear {
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: opacity 0.12s;
}
.col-filter-apply { background: var(--accent); color: var(--on-accent); flex: 1; }
.col-filter-apply:hover { opacity: 0.85; }
.col-filter-clear { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.col-filter-clear:hover { background: rgba(var(--accent-rgb), 0.18); }
/* ─────────────────────────────────────────────────────────────── */

.cari-rontgen-matrix-wrap {
  overflow-x: auto;
}

.cari-rontgen-matrix-table {
  min-width: max-content;
  width: 100%;
}

.cari-rontgen-matrix-table .cari-rontgen-matrix-dim {
  min-width: 140px;
  max-width: 220px;
  text-align: left;
  font-weight: 500;
}

.cari-rontgen-matrix-table .cari-rontgen-matrix-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 90px;
}

.cari-rontgen-matrix-table th.cari-rontgen-matrix-drillable {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

.cari-rontgen-matrix-table th.cari-rontgen-matrix-drillable:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cari-rontgen-matrix-table tfoot th {
  font-weight: 700;
  border-top: 2px solid var(--line);
}

.cari-rontgen-matrix-total-col {
  background: rgba(var(--accent-rgb), 0.05);
  font-weight: 600;
}

.cari-rontgen-matrix-neg {
  color: var(--report-red, #dc2626) !important;
}

.cari-rontgen-overdue-row td {
  background: rgba(220, 38, 38, 0.18) !important;
}

.cari-rontgen-overdue-row td:first-child {
  border-left: 3px solid rgba(220, 38, 38, 0.55);
}

.cari-rontgen-overdue-day {
  color: var(--report-red, #dc2626);
  font-weight: 700;
}

.cari-rontgen-matrix-pct {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}

/* Matrix profit mode: group header rows */
.cari-rontgen-matrix-group-header td,
.cari-rontgen-matrix-group-header th {
  background: var(--surface-subtle, rgba(0,0,0,0.05));
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 7px 12px;
  border-top: 2px solid var(--line);
  color: var(--text, inherit);
}

.cari-rontgen-matrix-genel-toplam td,
.cari-rontgen-matrix-genel-toplam th {
  border-top: 2px solid var(--line);
}

/* Sub-rows: compact height, colored by row type */
.cari-rontgen-matrix-profit-subrow td,
.cari-rontgen-matrix-profit-subrow th {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875em;
  border-top: none;
}

.cari-rontgen-matrix-subrow-label {
  font-weight: 500;
  padding-left: 14px !important;
}

/* Satış row: blue */
.cari-rontgen-matrix-satis-row td,
.cari-rontgen-matrix-satis-row th {
  color: var(--report-blue, #2f6fd6);
}

/* Maliyet row: red */
.cari-rontgen-matrix-maliyet-row td,
.cari-rontgen-matrix-maliyet-row th {
  color: var(--report-red, #dc2626);
  opacity: 0.9;
}

/* Kar row: green, bolder, bottom separator */
.cari-rontgen-matrix-kar-row td,
.cari-rontgen-matrix-kar-row th {
  color: var(--report-green, #16a34a);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

/* Kar Marjı row: green, italic */
.cari-rontgen-matrix-kar-marji-row td,
.cari-rontgen-matrix-kar-marji-row th {
  color: var(--report-green, #16a34a);
  font-style: italic;
  border-bottom: 2px solid var(--line);
}

/* Footer sub-rows: bold */
.cari-rontgen-matrix-foot-subrow th {
  font-weight: 700;
}

.cari-rontgen-matrix-table td.cari-rontgen-matrix-num .muted,
.cari-rontgen-matrix-table td.cari-rontgen-matrix-num span.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

.cari-rontgen-row-warning {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--warn-row-rgb, 234, 88, 12), 0.35);
  border-radius: 999px;
  background: rgba(var(--warn-row-rgb, 234, 88, 12), 0.12);
  color: var(--warn-row-text, #c2410c);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.cari-rontgen-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.cari-rontgen-sort-button span:last-child {
  color: var(--muted);
  font-size: 0.82rem;
}

.cari-rontgen-sort-button.active span:last-child {
  color: var(--accent);
}

.cari-rontgen-invoice-modal-backdrop {
  z-index: 1300;
}

.cari-rontgen-invoice-modal {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 980px);
}

.cari-rontgen-invoice-modal .modal-body {
  min-height: 0;
}

.cari-rontgen-invoice-modal .modal-header {
  align-items: flex-start;
}

.cari-rontgen-invoice-title {
  min-width: 0;
}

.cari-rontgen-invoice-title h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cari-rontgen-invoice-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-weight: 800;
}

.cari-rontgen-invoice-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.cari-rontgen-invoice-close:hover {
  color: var(--text);
}

.cari-rontgen-invoice-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.44fr);
  gap: 18px;
}

.cari-rontgen-invoice-meta-column {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cari-rontgen-invoice-meta-column.align-right {
  justify-self: end;
  justify-items: start;
  text-align: left;
  width: 340px;
  max-width: 100%;
}

.cari-rontgen-invoice-meta-column.align-right p,
.cari-rontgen-invoice-total-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

.cari-rontgen-invoice-meta-column.align-right strong,
.cari-rontgen-invoice-total-item strong {
  justify-self: end;
  text-align: right;
}

.cari-rontgen-invoice-meta p,
.cari-rontgen-invoice-total-item {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.cari-rontgen-invoice-meta span {
  color: var(--muted);
  font-weight: 800;
}

/* Toplam kutuları: etiket SİYAH KALIN, tutar SİYAH İNCE ve sağa hizalı.
   Renk yalnız anlam taşıyanlarda — Maliyet kırmızı, Kar yeşil, kalanı mavi. */
.cari-rontgen-invoice-total-item .cr-total-label {
  color: var(--text);
  font-weight: 800;
}
.cari-rontgen-invoice-total-item .cr-total-value {
  justify-self: end;
  text-align: right;
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
}
.cari-rontgen-invoice-total-item.cr-total-info .cr-total-value { color: var(--report-blue); }
.cari-rontgen-invoice-total-item.cr-total-cost .cr-total-value { color: var(--report-red); }
.cari-rontgen-invoice-total-item.cr-total-profit .cr-total-value { color: var(--report-green); }

.cari-rontgen-invoice-detail-table-wrap {
  max-width: 100%;
  max-height: min(46vh, 460px);
  overflow: auto;
}

.cari-rontgen-invoice-detail-table {
  width: max-content;
  min-width: max(100%, 2760px);
  table-layout: auto;
}

.cari-rontgen-invoice-detail-table th,
.cari-rontgen-invoice-detail-table td {
  padding: 12px 16px;
}

.cari-rontgen-invoice-detail-table th:nth-child(1),
.cari-rontgen-invoice-detail-table td:nth-child(1) {
  min-width: 190px;
}

.cari-rontgen-invoice-detail-table th:nth-child(2),
.cari-rontgen-invoice-detail-table td:nth-child(2) {
  min-width: 320px;
}

.cari-rontgen-invoice-detail-table th:nth-child(3),
.cari-rontgen-invoice-detail-table td:nth-child(3) {
  min-width: 160px;
}

.cari-rontgen-invoice-detail-table th:nth-child(4),
.cari-rontgen-invoice-detail-table td:nth-child(4) {
  min-width: 170px;
}

.cari-rontgen-invoice-detail-table th:nth-child(5),
.cari-rontgen-invoice-detail-table td:nth-child(5),
.cari-rontgen-invoice-detail-table th:nth-child(6),
.cari-rontgen-invoice-detail-table td:nth-child(6),
.cari-rontgen-invoice-detail-table th:nth-child(7),
.cari-rontgen-invoice-detail-table td:nth-child(7) {
  min-width: 170px;
}

.cari-rontgen-invoice-detail-table th:nth-child(8),
.cari-rontgen-invoice-detail-table td:nth-child(8) {
  min-width: 90px;
}

.cari-rontgen-invoice-detail-table th:nth-child(n+9),
.cari-rontgen-invoice-detail-table td:nth-child(n+9) {
  min-width: 155px;
  white-space: nowrap;
}

.cari-rontgen-invoice-detail-table th:nth-child(12),
.cari-rontgen-invoice-detail-table td:nth-child(12),
.cari-rontgen-invoice-detail-table th:nth-child(14),
.cari-rontgen-invoice-detail-table td:nth-child(14) {
  min-width: 185px;
}

.cari-rontgen-invoice-detail-table th:nth-child(n+7),
.cari-rontgen-invoice-detail-table td:nth-child(n+7) {
  text-align: right;
}

.cari-rontgen-cell-clamp {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.cari-rontgen-invoice-total-grid {
  display: grid;
  gap: 7px;
  justify-items: start;
  margin-left: auto;
  max-width: 100%;
  width: 340px;
}

.cari-rontgen-invoice-total-item {
  min-width: 0;
}

@media (max-width: 760px) {
  .cari-rontgen-invoice-meta {
    grid-template-columns: 1fr;
  }

  .cari-rontgen-invoice-meta-column.align-right {
    justify-items: start;
    text-align: left;
    width: 100%;
  }

  .cari-rontgen-invoice-total-grid {
    margin-left: 0;
    width: 100%;
  }
}

/* ── Fatura Detay Modalı (Cari Röntgen + Kar Raporu ortak) ────────────────────
   Tek tasarım iki raporda kullanılır: solda kalem tablosu + künye + açıklama
   şeridi, sağda daraltılabilir toplam sütunu. Sınıflar `inv-` önekli ve rapora
   bağımsızdır; yukarıdaki `.cari-rontgen-invoice-detail-table*` blokları ürün
   detayı ve vadesi geçmiş modallarında hâlâ kullanıldığı için duruyor. */
.inv-modal {
  --inv-loss-tint: rgba(214, 40, 40, 0.055);
  --inv-loss-tint-hover: rgba(214, 40, 40, 0.1);
  width: min(1520px, calc(100vw - 24px));
  height: min(880px, calc(100vh - 64px));
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Koyu temada 0.055 alfa görünmüyor; zebra satırların üstünde okunacak kadar
   yükseltilir. */
body[data-theme="dark"] .inv-modal {
  --inv-loss-tint: rgba(239, 68, 68, 0.14);
  --inv-loss-tint-hover: rgba(239, 68, 68, 0.22);
}

.inv-modal .modal-header {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.inv-title {
  min-width: 0;
}

.inv-title .eyebrow {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Tasarımda evrak no monospace; panelde tek yazı tipi kilidi (dosya sonundaki
   global Helvetica !important bloğu) var, o yüzden kod hissi harf aralığı ve
   tabular rakamlarla verilir. Aynı gerekçe .mono için de geçerli. */
.inv-title h3 {
  margin: 0;
  font-size: 1.32rem;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-hactions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.inv-chip.ok {
  color: var(--success);
  border-color: rgba(42, 157, 143, 0.32);
  background: rgba(42, 157, 143, 0.1);
}

.inv-chip.warn {
  color: var(--accent-3);
  border-color: rgba(214, 132, 56, 0.32);
  background: rgba(214, 132, 56, 0.1);
}

.inv-chip.name {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

.inv-close,
.inv-toggle {
  flex: none;
}

.inv-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.inv-close:hover {
  color: var(--text);
  background: var(--surface-subtle);
}

.inv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-input);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.inv-toggle:hover {
  background: var(--surface-subtle);
  color: var(--text);
}

.inv-toggle svg {
  transition: transform 0.28s ease;
}

.inv-modal.collapsed .inv-toggle svg {
  transform: rotate(180deg);
}

.inv-modal .modal-body {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 340px: en uzun etiket ("Toplam Malzeme Karı") + marj rozeti + tutar tek
     satıra sığsın. 300px'te etiket iki satıra kırılıyordu. */
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 16px 0 0;
  transition: grid-template-columns 0.28s ease;
}

.inv-modal.collapsed .modal-body {
  grid-template-columns: minmax(0, 1fr) 0px;
}

.inv-modal.collapsed .inv-totals {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.inv-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 18px 24px;
}

.inv-metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.84rem;
}

.inv-metabar p {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  min-width: 0;
}

.inv-metabar span {
  color: var(--muted);
  font-weight: 600;
}

.inv-metabar strong {
  font-weight: 700;
}

.inv-metabar .mono,
.inv-table .mono {
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.inv-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--table-bg);
}

.inv-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  table-layout: auto;
}

.inv-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-head);
  box-shadow: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  vertical-align: middle;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.inv-table td {
  padding: 9px 12px;
  height: 44px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
  color: var(--text);
}

.inv-table tbody tr:last-child td {
  border-bottom: 0;
}

.inv-table tbody tr:nth-child(even) {
  background: var(--table-alt);
}

.inv-table tbody tr:hover {
  background: var(--table-hover);
}

.inv-table .num,
.inv-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inv-clamp {
  display: block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-table .pos {
  color: var(--report-green);
}

.inv-table .neg {
  color: var(--report-red);
  font-weight: 600;
}

/* Maliyet altı satış: hafif kırmızı zemin + sol kenarda kırmızı şerit. */
.inv-table tr.inv-loss td {
  background: var(--inv-loss-tint);
}

.inv-table tr.inv-loss:hover td {
  background: var(--inv-loss-tint-hover);
}

.inv-table tr.inv-loss td:first-child {
  box-shadow: inset 3px 0 0 var(--report-red);
}

/* Maliyetsiz hizmet kalemi silik; "Hizmeti Dahil Et" kapalıyken ayrıca italik. */
.inv-table tr.inv-svc td {
  color: var(--muted);
}

.inv-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--muted);
}

.inv-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.inv-totals {
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-card);
  padding: 4px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: auto;
  transition: opacity 0.2s ease, padding 0.28s ease;
}

/* Satır düzeni: etiket solda, sağda (kar satırlarında) marj rozeti + tutar.
   Etiket `margin-right:auto` ile ittiği için marj ve tutar yan yana kalır. */
.inv-titem {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.inv-titem > span:first-child {
  margin-right: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}

.inv-titem strong {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

/* Kar tutarının SOLUNDAKİ marj rozeti. */
.inv-marj {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}

/* Maliyet satırı kırmızı, kar satırları yeşil — etiket ve tutar birlikte
   renklenir. Kar negatifse kırmızıya döner: yeşil "kar var" demek olduğu için
   zararı yeşil göstermek yanıltıcı olurdu. */
.inv-titem.cost > span:first-child,
.inv-titem.cost strong {
  color: var(--report-red);
}

.inv-titem.profit > span:first-child,
.inv-titem.profit strong,
.inv-titem.profit .inv-marj {
  color: var(--report-green);
}

.inv-titem.profit .inv-marj {
  background: rgba(22, 163, 74, 0.1);
}

.inv-titem.profit.neg > span:first-child,
.inv-titem.profit.neg strong,
.inv-titem.profit.neg .inv-marj {
  color: var(--report-red);
}

.inv-titem.profit.neg .inv-marj {
  background: rgba(214, 40, 40, 0.1);
}

/* Ara/nihai toplam satırları (KDV hariç net ve KDV dahil ödenecek tutar) mavi:
   kırmızı-maliyet ile yeşil-kar arasında "sonuç satırı" olarak okunur.
   Eski Cari Röntgen modalındaki `cr-total-info` ile aynı renk. */
.inv-titem.info > span:first-child,
.inv-titem.info strong {
  color: var(--report-blue);
}

.inv-tsec {
  margin: 16px 0 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Vurgu kutusu kaldırıldığı için ilk bölüm başlığı sütunun tepesinde durur. */
.inv-totals > .inv-tsec:first-child {
  margin-top: 6px;
}

/* Dar ekranda toplam sütunu tablonun altına iner. İki bölüm sabit yükseklikte
   yan yana sığmadığı için grid bırakılır ve modalın kendisi dikey kayar —
   grid'de `auto` satır tüm boyu alıp tabloyu sıfıra ezdiği için. Daraltma
   düğmesi burada anlamsız kaldığı için gizlenir, collapsed kalıntısı da
   etkisizleştirilir. */
@media (max-width: 1080px) {
  .inv-modal {
    height: auto;
    max-height: min(880px, calc(100vh - 64px));
    overflow: auto;
  }

  .inv-modal .modal-body,
  .inv-modal.collapsed .modal-body {
    display: block;
    padding: 16px 0 0;
  }

  .inv-toggle {
    display: none;
  }

  .inv-main {
    padding: 0 20px 18px;
  }

  /* Tablo kendi kabında hem yatay hem dikey kayar; modalın tamamını
     itip uzatmaması için sınırlanır. */
  .inv-table-wrap {
    max-height: 58vh;
  }

  .inv-totals,
  .inv-modal.collapsed .inv-totals {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 4px 20px 20px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }
}

.cari-rontgen-line-chart {
  width: 100%;
  overflow-x: auto;
}

.cari-rontgen-line-chart svg {
  min-width: 620px;
  display: block;
}

.cari-rontgen-trend-line-chart svg {
  min-width: 720px;
}

.cari-line-grid {
  stroke: color-mix(in srgb, var(--border) 86%, transparent);
  stroke-width: 1;
}

.cari-line-axis-label,
.cari-line-x-label {
  fill: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.cari-line-path {
  fill: none;
  stroke: var(--report-blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cari-line-point {
  fill: var(--surface);
  stroke: var(--report-blue);
  stroke-width: 2.4;
}

.cari-line-hit-area {
  fill: transparent;
  stroke: transparent;
}

.cari-line-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.cari-line-tooltip rect {
  fill: var(--text);
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.16));
}

.cari-line-tooltip text {
  fill: var(--surface);
  font-size: 10px;
  font-weight: 800;
}

.cari-trend-line-point-group.is-drillable {
  cursor: pointer;
}

.cari-trend-line-point-group:hover .cari-line-tooltip {
  opacity: 1;
}

.cari-trend-line-point-group.is-drillable:hover .cari-line-point {
  fill: var(--report-blue);
  stroke: var(--surface);
}

@media (max-width: 980px) {
  .cari-rontgen-kpi-grid,
  .cari-rontgen-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 120 ızgarası birim-tabanlı: satırda 2 normal kart = 4 birim. Seçici yukarıdaki
     `:not(...)` kuralı kadar özgül olmalı, yoksa 8 kolon tablette de kalır. */
  .cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Telefon: global `.stat-grid` kuralı (max-width:768px) KPI şeridini yatay
   kaydırılabilir yapar (grid-auto-flow: column). Birim-tabanlı kolonlarımız ve
   span'lerimiz o düzeni bozar — burada etkisizleştirilir. Bu blok 980px bloğundan
   SONRA gelmeli, aksi halde aynı özgüllükte olan o kural kazanır. */
@media (max-width: 768px) {
  .cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) {
    grid-template-columns: none;
  }
  .cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) > .cari-rontgen-kpi,
  .cari-rontgen-kpi-grid:not(.cari-rontgen-320-kpi-grid) > .cari-rontgen-kpi-half {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .cari-rontgen-kpi-grid,
  .cari-rontgen-overview-grid {
    grid-template-columns: 1fr;
  }


  .cari-rontgen-picker {
    grid-template-columns: 1fr;
  }

  .cari-rontgen-initial-selected,
  .cari-rontgen-picker .button {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ===== Foreign Trade Module ===== */

/* A. Page layout */

.ft-main {
  padding: 24px 32px 48px;
  max-width: none;
  overflow-x: hidden;
}

.ft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.ft-head-l {
  display: flex;
  flex-direction: column;
}

.ft-head-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Dış Ticaret ekranları taşmasın: panel flex-child'ı içerik kadar büyümesin,
   geniş ürünler tablosu kendi içinde yatay kaysın. */
#dashboardPanel:has(.ft-main) { min-width: 0; }
.ft-main { min-width: 0; }
.ft-head-l { min-width: 0; }
.ft-main .dt-table-wrap { max-width: 100%; overflow-x: auto; }

.ft-eyebrow {
  display: inline-flex;
  gap: 8px;
  font-size: 0.76rem;          /* matches site .eyebrow */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 7px;
  align-items: center;
}

.ft-eyebrow-pill {
  background: linear-gradient(135deg, #006d77, #0a9396);
  color: #fffdf8;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
}

.ft-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.5rem;           /* ~25.5px, matches site h2 scale */
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}

.ft-title-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--accent);
  background: rgba(0, 109, 119, 0.08);
  padding: 3px 10px;
  border-radius: 8px;
}

.ft-sub {
  font-size: 0.88rem;          /* matches site th size */
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 64ch;
}

.ft-back {
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* B. Buttons */

.ft-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font: inherit;               /* inherits site's 17px Helvetica */
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  transition: opacity 0.15s, box-shadow 0.15s;
}

.ft-btn.ghost {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-card);
}

.ft-btn.outline {
  color: var(--accent);
  border-color: rgba(0, 109, 119, 0.30);
  background: rgba(0, 109, 119, 0.06);
}

.ft-btn.primary {
  color: #fffdf8;
  background: linear-gradient(135deg, #006d77, #0a9396);
  border-color: #006d77;
  box-shadow: 0 2px 8px rgba(0, 109, 119, 0.24);
}

.ft-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* C. KPIs */

.ft-kpis {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 14px;
}

.ft-kpi {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}

.ft-kpi.accent {
  background: linear-gradient(145deg, var(--accent-soft), rgba(var(--accent-rgb), 0.04)), var(--surface-card-strong);
  border-color: var(--accent-softer);
}

.ft-kpi-label {
  font-size: 0.76rem;          /* matches site .eyebrow */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.ft-kpi-val {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem); /* matches site .kpi-value scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--text);
}

.ft-kpi-val-multi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-kpi-val-multi > div:first-child {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}

.ft-kpi-multi-sub {
  display: flex;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

.ft-kpi-sub {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: auto;
  align-items: center;
}

.ft-kpi-sub .dt {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.ft-kpi-sub .dt.teal { background: #006d77; }
.ft-kpi-sub .dt.amber { background: #d6920a; }

.ft-kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin-top: auto;
}

.ft-kpi-bars span {
  flex: 1;
  background: rgba(0, 109, 119, 0.18);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

.ft-kpi-bars span.on {
  background: linear-gradient(180deg, #0a9396, #006d77);
}

.ft-kpi-pipe-row {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.pipe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  flex: 1;
}

.pipe-item .dt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pipe-item b {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.pipe-sep {
  width: 14px;
  height: 1px;
  background: rgba(52, 39, 21, 0.14);
  margin-top: 6px;
}

/* D. Tabs row */

.ft-tabs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ft-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
}

.ft-tabs .tab {
  height: 34px;
  padding: 0 14px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font: inherit;               /* inherits site's 17px */
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ft-tabs .tab.active {
  background: var(--surface-card-strong);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tab-n {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(52, 39, 21, 0.08);
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--muted);
}

.tab.active .tab-n {
  background: rgba(0, 109, 119, 0.14);
  color: var(--accent);
}

.tab-n.warn {
  background: rgba(187, 62, 3, 0.14);
  color: #bb3e03;
}

.ft-search {
  margin-left: auto;
  flex: 0 0 260px;
  position: relative;
}

.ft-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: var(--radius-md);
  font: inherit;               /* inherits site's 17px */
  font-size: 0.88rem;
  color: var(--text);
  box-sizing: border-box;
}

.ft-search input::placeholder { color: #9a8870; }

.ft-search .si {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a8870;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
}

.ft-search .si svg { width: 100%; height: 100%; }

/* E. Table */

.ft-table-wrap {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.ft-table-scroll {
  overflow: auto;
  border-radius: 14px;
}
/* GTİP tablosu: ekranı aşınca dikey kaydır, başlık yapışkan; satırlar 2 satıra klemplenir. */
.ft-table-scroll:has(.ft-table.gtip) { max-height: calc(100vh - 300px); }
.ft-table.gtip thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-panel, #fff); }
.gtip-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.9em; line-height: 1.4; }
.ft-table.gtip td { vertical-align: top; }

.ft-table-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.ft-table-scroll::-webkit-scrollbar-track { background: rgba(245, 239, 228, 0.4); }
.ft-table-scroll::-webkit-scrollbar-thumb { background: rgba(52, 39, 21, 0.18); border-radius: 999px; border: 2px solid rgba(245, 239, 228, 0.4); }

.ft-table {
  width: 100%;
  min-width: 1400px;
  border-collapse: collapse;
  font-size: 0.88rem;          /* matches site th baseline */
}

.ft-table.stock { min-width: 1300px; }

.ft-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ft-table thead th {
  text-align: left;
  font-size: 0.72rem;          /* small label, matches .eyebrow feel */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  padding: 12px 14px;          /* matches site th padding */
  border-bottom: 1px solid var(--line);
  background: var(--table-head);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.ft-table thead th.num { text-align: right; }

.ft-table tbody td {
  padding: 13px 14px;          /* closer to site's 14px 16px */
  border-bottom: 1px solid rgba(52, 39, 21, 0.06);
  vertical-align: middle;
}

.ft-table tbody tr:hover { background: rgba(0, 109, 119, 0.03); cursor: pointer; }

.ft-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ft-table .num.strong { font-weight: 700; color: var(--text); }
.ft-table .num.muted { color: var(--muted); }
.ft-table .mono-sm { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; color: #4a3a26; }
.ft-table .muted-dash { color: #b6a48b; }

.incoterm-cell { font-size: 0.82rem; color: #4a3a26; font-weight: 600; }

/* F. Cell components */

.cell-code { display: flex; flex-direction: column; gap: 2px; }
.code-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.code-meta { font-size: 0.76rem; color: #9a8870; }

.cell-dates { display: flex; flex-direction: column; gap: 2px; }
.date-main { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.date-sub { font-size: 0.76rem; color: #9a8870; }

.sup-cell { display: flex; align-items: center; gap: 9px; }
.sup-avatar { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 0.76rem; font-weight: 700; color: #fffdf8; flex-shrink: 0; }
.sup-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.sup-country { font-size: 0.76rem; color: #9a8870; }

.landed-pct-cell { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.landed-pct-bar { height: 5px; border-radius: 3px; background: rgba(52, 39, 21, 0.08); overflow: hidden; }
.landed-pct-bar-fill { height: 100%; background: linear-gradient(90deg, #ca6702, #d6920a); border-radius: 3px; }
.landed-pct-val { font-size: 0.8rem; font-weight: 700; color: var(--text); }

.docs-ladder { display: flex; gap: 3px; align-items: center; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; }
.dl-dot.filled { background: var(--accent); }
.dl-dot.empty { background: rgba(52, 39, 21, 0.10); }

.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }

.prog-bar { height: 4px; border-radius: 2px; background: rgba(52, 39, 21, 0.08); overflow: hidden; margin-top: 4px; min-width: 60px; }
.prog-bar-fill { height: 100%; background: linear-gradient(90deg, #006d77, #0a9396); border-radius: 2px; }

.more-btn { width: 24px; height: 24px; display: inline-grid; place-items: center; color: #9a8870; cursor: pointer; border-radius: 6px; }
.more-btn:hover { background: rgba(52, 39, 21, 0.06); color: var(--text); }
.more-btn svg { width: 16px; height: 16px; }

.ft-table tbody tr.empty-row td,
.ft-loading-row { padding: 28px 16px; text-align: center; color: var(--muted); font-style: italic; }

/* G. Intake view */

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: start;
}

.intake-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intake-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(52, 39, 21, 0.06);
  border: 1px solid rgba(52, 39, 21, 0.10);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.meta-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  flex: 1;
}

.meta-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(52, 39, 21, 0.08);
  overflow: hidden;
  min-width: 60px;
}

.meta-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #006d77, #0a9396);
  border-radius: 2px;
}

.intake-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);  /* matches site .card */
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intake-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.intake-card-eyebrow {
  font-size: 0.76rem;          /* matches .eyebrow */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px;
}

.intake-card-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.intake-card-counter {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(52, 39, 21, 0.06);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.dropzones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dropzone {
  border: 1.5px dashed rgba(52, 39, 21, 0.16);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  min-height: 90px;
}

.dropzone:hover {
  border-color: rgba(0, 109, 119, 0.40);
  background: rgba(0, 109, 119, 0.03);
}

.dz-head { display: flex; align-items: center; justify-content: space-between; }

.dz-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.dz-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 5px;
  text-transform: uppercase;
}

.dz-tag.ci   { background: rgba(0, 109, 119, 0.12); color: #006d77; }
.dz-tag.decl { background: rgba(91, 44, 191, 0.12); color: #5b2cbf; }
.dz-tag.tax  { background: rgba(202, 103, 2, 0.12); color: #ca6702; }
.dz-tag.exp  { background: rgba(31, 138, 91, 0.12); color: #1f8a5b; }

.dz-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 109, 119, 0.12);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
}

.dz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #9a8870;
  font-size: 0.82rem;
  text-align: center;
  padding: 6px 0;
  flex: 1;
  justify-content: center;
}

.dz-empty small { font-size: 0.76rem; color: #b6a48b; }
.dz-empty u { cursor: pointer; color: var(--accent); }

.dz-files { display: flex; flex-direction: column; gap: 4px; }

.dz-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  background: rgba(245, 239, 228, 0.6);
  border-radius: 7px;
}

.dz-file-ic {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.dz-file-ic.pdf { background: rgba(202, 103, 2, 0.12); color: #ca6702; }
.dz-file-ic.xls { background: rgba(31, 138, 91, 0.12); color: #1f8a5b; }
.dz-file-ic svg { width: 13px; height: 13px; }

.dz-file-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dz-file-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-file-size { font-size: 0.72rem; color: #9a8870; }

.dz-add {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 0;
}

.extract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.extract-field { display: flex; flex-direction: column; gap: 4px; }
.extract-field.big { }

.ex-label {
  font-size: 0.76rem;          /* matches .eyebrow */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.ex-value {
  font-size: 0.95rem;          /* slightly larger than body for emphasis */
  font-weight: 600;
  color: var(--text);
}

.ex-source {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #9a8870;
  font-weight: 600;
}

.ex-src-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a8870;
}

.extract-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(187, 62, 3, 0.07);
  border: 1px solid rgba(187, 62, 3, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #bb3e03;
  font-weight: 600;
  grid-column: 1 / -1;
}

.items-section { display: flex; flex-direction: column; gap: 8px; }
.items-section-head { display: flex; align-items: center; justify-content: space-between; }
.items-table { width: 100%; border-collapse: collapse; }
.items-row td { padding: 8px 12px; border-bottom: 1px solid rgba(52, 39, 21, 0.06); font-size: 0.85rem; color: var(--text); }
.item-desc { font-weight: 600; }

/* H. Stock view */

.stock-summary {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 4px;
}

.ss-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 16px;
}

.ss-label {
  font-size: 0.76rem;          /* matches .eyebrow */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.ss-val {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ss-sub {
  font-size: 0.76rem;
  color: #9a8870;
  font-weight: 500;
}

.ss-sep {
  width: 1px;
  height: 36px;
  background: rgba(52, 39, 21, 0.10);
  flex-shrink: 0;
  align-self: center;
}

.ss-spacer { flex: 1; }

.ss-card.warn .ss-val { color: #bb3e03; }

.ss-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  margin-top: 4px;
}

.ss-mini-bars span {
  flex: 1;
  background: rgba(0, 109, 119, 0.16);
  border-radius: 1px 1px 0 0;
  min-height: 3px;
}

.ss-mini-bars span.on {
  background: linear-gradient(180deg, #0a9396, #006d77);
}

.ss-search {
  flex: 0 0 220px;
  position: relative;
}

.ss-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  box-sizing: border-box;
}

.ss-search .si {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a8870;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
}

.cell-sku { display: flex; flex-direction: column; gap: 2px; }

.sku-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(0, 109, 119, 0.10);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

.sku-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.stock-desc {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}

.landed-bar-cell { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }

.landed-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(52, 39, 21, 0.08);
  overflow: visible;
  position: relative;
}

.landed-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ca6702, #d6920a);
  border-radius: 3px;
  position: relative;
}

.landed-bar-mark {
  position: absolute;
  top: -3px;
  height: 12px;
  width: 1.5px;
  background: rgba(52, 39, 21, 0.30);
  border-radius: 1px;
}

.landed-bar-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 700;
}

.trend.up { color: #1f8a5b; }
.trend.down { color: #bb3e03; }
.trend.flat { color: #9a8870; }

/* I. Form */

.ft-form-card { padding: 24px 28px; max-width: 720px; }

.ft-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.ft-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ft-form-field-full { grid-column: 1 / -1; }

.ft-form-field-split {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
  grid-column: span 2;
  align-items: end;
}

.ft-form-field-split > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ft-form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ft-required { color: var(--accent-3, #ca6702); }

.ft-input {
  padding: 10px 14px;          /* matches site input: 12px 14px */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);  /* matches site: 14px */
  background: var(--surface-input);
  color: var(--text);
  font: inherit;               /* inherits site's 17px Helvetica */
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.ft-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 109, 119, 0.12);
}

.ft-textarea { resize: vertical; min-height: 72px; }

.ft-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ft-form-error {
  color: #e05252;
  font-size: 0.86rem;
  margin-top: 8px;
  text-align: right;
}

.ft-form-back-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* GTİP listesi */

.gtip-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.ft-table.gtip { min-width: 0; }
.ft-table.gtip thead th.gtip-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ft-table.gtip thead th.gtip-sortable:hover { color: var(--accent); }
.gtip-sort-ind { margin-left: 4px; color: var(--accent); }
.ft-table.gtip th.gtip-actions-col { width: 84px; }

.gtip-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.gtip-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-card, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.gtip-act svg { width: 15px; height: 15px; }
.gtip-act:hover { color: var(--accent); border-color: var(--accent); }
.gtip-act.danger:hover { color: var(--danger); border-color: var(--danger); }
.gtip-act:disabled { opacity: 0.5; cursor: default; }

/* GTİP modal formu — aranabilir katalog + seçilenler */
.gtip-tax-section { margin-top: 18px; }

.gtip-sel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  margin-left: 4px;
}

.gtip-desc-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.gtip-desc-line { margin-top: 0; min-height: 0; }
.gtip-desc-cell { white-space: normal; line-height: 1.4; }

.gtip-sel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gtip-sel-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.gtip-sel-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle, transparent);
}
.gtip-sel-main { display: flex; align-items: center; gap: 10px; }
.gtip-sel-atr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.gtip-sel-atr input { width: 15px; height: 15px; }
/* GTİP "ADR'li mi?" işareti — dış ticaret modülünde kullanılır. */
.gtip-adr-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
}
.gtip-adr-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
/* GTİP izin verilen gümrükler — çip çoklu seçim */
.gtip-office-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 22px; }
.gtip-office-empty { font-size: 0.8rem; color: var(--muted); }
.gtip-office-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft, #eef2ff); color: var(--accent, #3b5bdb);
  border: 1px solid var(--accent, #c7d2fe); border-radius: 20px;
  padding: 2px 6px 2px 10px; font-size: 0.82rem;
}
.gtip-office-chip button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.gtip-atr-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 6px;
  vertical-align: middle;
}
.gtip-sel-name { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.gtip-sel-name b { font-size: 0.86rem; color: var(--text); }
.gtip-sel-name small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtip-sel-row .ft-input[data-sel-value] { flex: 0 0 96px; width: 96px; margin-top: 0; text-align: right; }
.gtip-sel-row .ft-input[data-sel-unit] { flex: 0 0 104px; width: 104px; margin-top: 0; padding-right: 6px; }

.gtip-cat-search {
  position: relative;
  margin-top: 8px;
}
.gtip-cat-search .si {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}
.gtip-cat-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input);
  color: var(--text);
  font-size: 0.9rem;
}
.gtip-cat-search input:focus { outline: none; border-color: var(--accent); }

.gtip-cat-list {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card, transparent);
}
.gtip-cat-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.gtip-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
}
.gtip-cat-item:last-child { border-bottom: none; }
.gtip-cat-item:hover { background: rgba(var(--accent-rgb), 0.08); }
.gtip-cat-code {
  flex: 0 0 52px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.82rem;
}
.gtip-cat-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtip-cat-pasif {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-subtle, rgba(0,0,0,0.05));
  padding: 2px 6px;
  border-radius: 6px;
}
.gtip-cat-plus { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; color: var(--accent); }

@media (max-width: 720px) {
  .gtip-sel-row { flex-wrap: wrap; }
  .gtip-sel-name { flex: 1 0 100%; }
}

/* J. Detail view */

.ft-detail-card {
  padding: 24px 28px;
  max-width: 640px;
}

.ft-detail-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 0;
}

.ft-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-detail-row-full { grid-column: 1 / -1; }

.ft-detail-row dt {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ft-detail-row dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  word-break: break-word;
}

/* K. Responsive */

@media (max-width: 900px) {
  .ft-kpis { grid-template-columns: 1fr 1fr; }
  .ft-kpi-pipe { grid-column: span 2; }
}

@media (max-width: 680px) {
  .ft-main { padding: 16px 16px 40px; }
  .ft-kpis { grid-template-columns: 1fr 1fr; }
  .ft-form-grid,
  .ft-detail-list { grid-template-columns: 1fr; }
  .ft-form-field-split { grid-template-columns: 1fr 90px; grid-column: 1; }
  .ft-form-card,
  .ft-detail-card { padding: 18px 16px; }
  .intake-grid { grid-template-columns: 1fr; }
}

/* ── Dış Ticaret: Sipariş oluşturucu ─────────────────────── */
.dt-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dt-choice-card {
  text-align: left; padding: 18px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-card);
  cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s;
}
.dt-choice-card:not(:disabled):hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,109,119,0.14); }
.dt-choice-card:disabled { opacity: 0.5; cursor: not-allowed; }
.dt-choice-ic { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }
.dt-choice-t { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.dt-choice-s { font-size: 0.82rem; color: var(--text-muted, #7a6f5f); }

.dt-form-top { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.dt-field { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.dt-field[hidden] { display: none !important; }
.dt-field > span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #7a6f5f); }
.dt-field select {
  height: 38px; padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-card); font: inherit; font-size: 0.9rem;
}
.dt-static {
  height: 38px; display: flex; align-items: center; padding: 0 12px;
  border-radius: var(--radius-md); background: rgba(0,109,119,0.06);
  border: 1px solid var(--line); font-weight: 600;
}

.dt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.dt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 900px; }
.dt-table th, .dt-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #7a6f5f); background: rgba(52,39,21,0.03); }
.dt-table th.num, .dt-table td.num { text-align: right; }
.dt-table td.strong { font-weight: 700; }
.dt-name-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dt-empty td { text-align: center; color: var(--text-muted, #7a6f5f); padding: 22px; }
.dt-num-input, .dt-sku-input {
  width: 100%; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface, #fff); font: inherit; font-size: 0.85rem;
}
.dt-num-input { text-align: right; max-width: 92px; }
.dt-sku-input { min-width: 130px; }
.dt-price-hi { border-color: #d1495b !important; color: #d1495b; background: rgba(209,73,91,0.06); }
.dt-price-lo { border-color: #1f8a5b !important; color: #1f8a5b; background: rgba(31,138,91,0.06); }
.dt-dp-hint { font-size: 0.68rem; color: var(--text-muted, #7a6f5f); margin-top: 2px; text-align: right; }
.dt-rm-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card); color: #9d174d; cursor: pointer; }
.dt-rm-btn:hover { background: rgba(157,23,77,0.08); }
.dt-table-foot { margin: 12px 0 18px; }

.dt-summary { display: flex; flex-wrap: wrap; gap: 22px; justify-content: flex-end;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(0,109,119,0.04); }
.dt-sum-item { display: flex; flex-direction: column; gap: 3px; text-align: right; min-width: 120px; }
.dt-sum-item > span { font-size: 0.74rem; color: var(--text-muted, #7a6f5f); }
.dt-sum-item > b { font-size: 1rem; }
.dt-sum-item.total > b { color: var(--accent); font-size: 1.15rem; }
/* Beyanname oynama: özet kaleminin yanındaki kalem ikonu + satır içi düzenleyici */
.dt-sum-edit { display: inline-flex; align-items: center; margin-left: 5px; padding: 0; border: 0;
  background: none; cursor: pointer; color: inherit; opacity: 0.5; vertical-align: middle; }
.dt-sum-edit:hover, .dt-sum-edit.on { opacity: 1; color: var(--accent); }
.dt-sum-edit svg { width: 12px; height: 12px; }
.dt-sum-item.editing { min-width: 172px; }
.dt-sum-edit-box { display: flex; gap: 6px; align-items: stretch; }
.dt-sum-edit-box > input { flex: 1 1 auto; min-width: 0; text-align: right; }

.dt-import-hint { font-size: 0.85rem; color: var(--text-muted, #7a6f5f); margin: 0 0 12px; }
.dt-radio-row { display: flex; gap: 18px; align-items: center; }
.dt-radio-row label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; cursor: pointer; }
.dt-import input[type="file"] {
  padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--surface-card); font: inherit; font-size: 0.85rem;
}
.dt-import-result:not(:empty) { margin-top: 14px; }
.dt-imp-ok { color: #1f8a5b; font-weight: 600; font-size: 0.88rem; }
.dt-imp-err { color: #d1495b; font-weight: 600; font-size: 0.88rem; }
.dt-imp-missing { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(202,103,2,0.10); color: #9a4b00; font-size: 0.82rem; }

/* ── Firmalar & Adresler ─────────────────────────────────── */
.dt-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dt-mini-btn { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card); color: var(--text); cursor: pointer; font: inherit; font-size: 0.78rem; }
.dt-mini-btn:hover { border-color: var(--accent); }
.dt-mini-btn.ok { color: #1f8a5b; border-color: rgba(31,138,91,0.4); }
.dt-mini-btn.ok:hover { background: rgba(31,138,91,0.08); }
.dt-mini-btn.danger { color: #9d174d; }
.dt-mini-btn.danger:hover { border-color: #9d174d; background: rgba(157,23,77,0.06); }

.dt-pform { display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; padding: 2px; }
.dt-pform .dt-field { min-width: 0; }
.dt-pform input:not([type="checkbox"]):not([type="radio"]), .dt-pform textarea, .dt-pform select {
  height: 38px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface, #fff); font: inherit; font-size: 0.9rem; width: 100%;
}
.dt-pform textarea { height: auto; padding: 8px 10px; resize: vertical; }
.dt-pform input[type="checkbox"], .dt-pform input[type="radio"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
/* checkbox listelerinde metin sola yaslı, satır dolu genişlik */
.dt-check-opt { justify-content: flex-start; width: 100%; }
.dt-check-opt > input { order: -1; }
.dt-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dt-pform-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.dt-pform-err:not(:empty) { color: #d1495b; font-size: 0.85rem; font-weight: 600; padding: 4px 0; }

.dt-phone-row { display: flex; gap: 8px; }
.dt-phone-code { flex: 0 0 auto; max-width: 180px; }
.dt-phone-num { flex: 1 1 auto; }

.dt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-card);
  cursor: pointer; font: inherit; font-size: 0.83rem; color: var(--text); transition: all 0.12s; }
.dt-chip.on { background: var(--accent); color: #fffdf8; border-color: var(--accent); }

.dt-combo { position: relative; }
.dt-combo-input { width: 100%; }
.dt-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 3px;
  max-height: 220px; overflow-y: auto; background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.14); }
.dt-combo-opt { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent;
  cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--text); }
.dt-combo-opt:hover { background: rgba(0,109,119,0.08); }
.dt-combo-empty { padding: 10px 12px; color: var(--text-muted, #7a6f5f); font-size: 0.85rem; }

.dt-hours { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; }
.dt-hour-row { display: flex; align-items: center; gap: 14px; }
.dt-hour-chk { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; font-weight: 500; cursor: pointer; }
.dt-hour-times { display: inline-flex; align-items: center; gap: 8px; }
.dt-hour-times input[type="time"] { height: 32px; width: auto; }

.dt-mini-table { display: flex; flex-direction: column; gap: 6px; }
.dt-mini-row { display: grid; grid-template-columns: 1fr 90px 32px; gap: 8px; align-items: center; }
.dt-check-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.dt-check-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; }
.dt-check-opt:hover { background: rgba(0,109,119,0.06); }
/* Tutar + para birimi (döviz/TL) alanı */
.dt-warn-box { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600;
  color: #8a4b00; background: rgba(202,105,2,0.10); border: 1px solid rgba(202,105,2,0.28); }
.dt-warn-box b { font-weight: 800; }
.dt-amt-cur { display: flex; gap: 6px; align-items: stretch; }
/* flex-basis (0 / sabit px) .dt-pform'daki width:100%'ü ezer — input büyür, döviz seçici dar kalır. */
.dt-amt-cur > input { flex: 1 1 0; width: auto; min-width: 0; }
.dt-amt-cur > select { flex: 0 0 82px; width: 82px; min-width: 82px; }
/* Sabit "TL" etiketi (para birimi seçici yerine) — TL-only tutar alanları */
.dt-cur-fixed { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #6b5b47; background: #f3f1ea; border: 1px solid #e0d9c8; border-radius: 6px; }
.dt-mini-row .dt-cur-fixed { width: 100%; box-sizing: border-box; }
.dt-mini-row select.dt-cur-mini { width: 100%; min-width: 0; }
/* Ek masraf aranabilir dropdown (combobox) */
.dt-combo { position: relative; }
.dt-combo-input { width: 100%; box-sizing: border-box; }
.dt-combo-pop { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0; max-height: 220px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px -14px rgba(0,0,0,0.4); }
.dt-combo-opt { padding: 8px 10px; font-size: 0.86rem; cursor: pointer; }
.dt-combo-opt:hover { background: rgba(0,109,119,0.08); }
.dt-combo-empty { padding: 8px 10px; font-size: 0.82rem; color: var(--muted); }
.dt-calc-hint { font-size: 0.78rem; color: var(--accent); margin-top: 4px; font-weight: 600; }
.dt-calc-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.dt-calc-row .dt-calc-hint { margin-top: 0; }
.dt-calc-row .ft-btn { height: 30px; padding: 0 12px; font-size: 0.8rem; }
.dt-calc-warn { font-size: 0.8rem; color: #ca6702; margin-top: 4px; font-weight: 600; }
.dt-calc-warn:empty { display: none; }
.dt-approval-banner { margin-bottom: 14px; padding: 12px 16px; border-radius: var(--radius-md);
  background: rgba(31,138,91,0.10); color: #1f6f4b; font-size: 0.9rem; border: 1px solid rgba(31,138,91,0.25); }
.dt-adj-foot td { background: rgba(0,109,119,0.06); border-top: 2px solid var(--line); }
.dt-adj-foot .strong { color: var(--accent); }
.dt-customs-box { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.dt-customs-title { font-weight: 700; margin-bottom: 8px; }
.dt-adj-warn { color: #ca6702; font-size: 1.05rem; cursor: help; }
.dt-section-title { font-size: 1.05rem; font-weight: 700; margin: 22px 0 10px; color: var(--text); }
.dt-import-detail { display: flex; flex-direction: column; gap: 4px; }
.dt-import-detail .dt-info-grid { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); margin-bottom: 8px; }
.dt-imp-sub { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #7a6f5f); margin: 14px 0 6px; }
.dt-imp-sub:first-child { margin-top: 4px; }
.dt-tracker-auto { font-size: 0.78rem; color: var(--text-muted, #7a6f5f); font-style: italic; align-self: center; }
.modal-card:has(#dtSplitBody) { max-width: 760px; width: 94vw; }
.modal-card:has(#dpcUpdate) { max-width: 920px; width: 94vw; }
.modal-card:has(#dpcUpdate) .dt-table { min-width: 0; }
.modal-card:has(#dpcUpdate) .dt-table .dt-name-cell { white-space: normal; }

/* Sipariş Aksiyon Çubuğu (tasarım 6c): birincil buton(lar) + İşlemler menüsü */
.dt-actionbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.dt-actions-menu { position: relative; }
.dt-am-toggle { display: inline-flex; align-items: center; gap: 7px; }
.dt-am-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 250px;
  background: var(--surface-strong, #fff); border: 1px solid rgba(52,39,21,0.12); border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgba(36,24,13,0.45); padding: 8px; }
.dt-am-pop[hidden] { display: none; }
.dt-am-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: #a8967f; padding: 4px 11px; }
.dt-am-item { display: flex; width: 100%; border: 0; background: none; border-radius: 9px; padding: 9px 11px;
  font: inherit; font-size: 0.85rem; color: var(--text, #24180d); cursor: pointer; text-align: left; }
.dt-am-item:hover { background: rgba(0,109,119,0.08); }
.dt-am-item.danger { color: #c0392b; }
.dt-am-item.danger:hover { background: rgba(192,57,43,0.08); }
.dt-am-sep { height: 1px; background: rgba(52,39,21,0.1); margin: 6px 8px; }

/* S5: Ödeme planı editörü */
.dt-payplan { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dt-pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-pay-pct, .dt-pay-days { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted, #7a6f5f); }
.dt-pay-pct input { width: 70px; }
.dt-pay-days input { width: 64px; }
.dt-pay-row select { min-width: 150px; }
.dt-payplan-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.dt-payplan-sum { font-size: 0.85rem; font-weight: 600; }
.dt-payplan-sum.ok { color: #1f8a5b; }
.dt-payplan-sum.bad { color: #d1495b; }
.dt-cell-pallet { color: var(--text, #24180d); font-weight: 600; }

/* T11: sipariş oluşturma ürün tablosu — daha ferah + yatay kaydırılabilir */
/* ── Siparişler KPI matrisi ─────────────────────────────────────────────
   Marka satırları × durum sütunları; sağda satır toplamı, altta sütun
   toplamı, sol altta genel toplam. Vurgu dolgu bloklarıyla değil kenar
   çizgisi + tipografik hiyerarşiyle veriliyor (site tablo diliyle aynı). */
.dt-kpi-card { margin: 0 0 18px; background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.dt-kpi-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.dt-kpi-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.dt-kpi-hint { font-size: 0.74rem; color: var(--muted); }
.dt-kpi-scroll { overflow-x: auto; }
.dt-kpi-table { border-collapse: collapse; width: 100%; min-width: 620px; }
.dt-kpi-table th, .dt-kpi-table td { padding: 12px 18px; text-align: left; vertical-align: top; }
.dt-kpi-table thead th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding-top: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-kpi-table td.num, .dt-kpi-table th.num { text-align: right; }
.dt-kpi-table tbody td, .dt-kpi-table tbody th { border-bottom: 1px solid rgba(var(--accent-rgb), 0.07); }
.dt-kpi-table tbody tr:last-child td, .dt-kpi-table tbody tr:last-child th { border-bottom: 0; }
.dt-kpi-table tbody tr:hover td, .dt-kpi-table tbody tr:hover th { background: rgba(var(--accent-rgb), 0.03); }
.dt-kpi-rowhead { font-size: 0.86rem; font-weight: 600; color: var(--text); white-space: nowrap; }
/* Toplam sütunu: dolgu yok, yalnız ince ayırıcı */
.dt-kpi-table .dt-kpi-tot-col { border-left: 1px solid var(--line); }
/* Toplam satırı */
.dt-kpi-table tfoot th, .dt-kpi-table tfoot td { border-top: 1px solid var(--line); padding-top: 13px; padding-bottom: 14px; }
.dt-kpi-table tfoot { background: rgba(var(--accent-rgb), 0.04); }
/* Sol alt: genel toplam — sayfanın çıpası */
.dt-kpi-grand { white-space: nowrap; }
.dt-kpi-grand-lbl { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dt-kpi-grand .dt-mstack-l { font-size: 1.02rem; font-weight: 700; color: var(--accent); }
/* Adet — ikincil satır; tutar birincil */
.dt-kpi-n { font-size: 0.71rem; color: var(--muted); margin-top: 3px; }
.dt-kpi-void { color: var(--muted); opacity: 0.45; }
.dt-kpi-empty { color: var(--muted); font-size: 0.85rem; text-align: center; }
/* Para birimleri alt alta, kompakt; kolonlarda hizalı rakamlar */
.dt-mstack { display: flex; flex-direction: column; gap: 2px; }
.dt-mstack-l { font-size: 0.89rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
/* Aktif filtre çubuğu */
.dt-filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
  font-size: 0.78rem; color: var(--muted); }
.dt-orders-table th.col-hdr { white-space: nowrap; }

/* Ürün tablosu görünüm seçici (Sipariş / SDH) */
.dt-view-pills { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.dt-view-pill { padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-card); color: var(--muted); }
.dt-view-pill:hover { border-color: var(--accent); color: var(--accent); }
.dt-view-pill.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.dt-view-note { font-size: 0.74rem; color: var(--muted); margin-left: 6px; }
.dt-builder-table { min-width: 1280px; }
/* SDH görünümü 19 kolon — sayısal hücrelerde daha dar padding, yatay kaydırma azalsın */
.dt-builder-sdh th.num, .dt-builder-sdh td.num { padding-left: 8px; padding-right: 8px; }
.dt-builder-sdh th.num { white-space: nowrap; font-size: 0.68rem; }
.dt-builder-table th, .dt-builder-table td { padding: 10px 14px; }
.dt-builder-table .dt-sku-input { min-width: 150px; }
.dt-builder-table .dt-name-cell { min-width: 220px; white-space: normal; }
.dt-builder-table .dt-num-input { min-width: 78px; }
.dt-builder-table .dt-price-input { min-width: 92px; }

/* T3: fatura oynama birim fiyat info ikonu */
.dt-info-ic { cursor: help; color: #006d77; font-size: 0.85rem; }
/* T5: detay ürün tablosu max yükseklik + kaydırma */
.dt-detail-scroll { max-height: 460px; overflow-y: auto; }
/* Kaydırırken tablo başlığı sabit kalsın. --surface-card yarı saydam olduğundan
   opak --bg üzerine bindirilir; yoksa altından kayan satırlar görünür. */
.dt-sticky-head .dt-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(var(--surface-card), var(--surface-card)), var(--bg, #fff);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* T10: Master Data tedarikçi split ödeme planı editörü */
.md-payplan-section { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.md-payplan-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.md-payplan-head > span:first-child { font-weight: 700; font-size: 0.95rem; }
.md-payplan-hint { font-size: 0.78rem; color: var(--text-muted, #7a6f5f); }
/* Ödeme vadesi satırı: diğer form alanları gibi etiketli, tek satırda yan yana */
.md-pay-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; flex-wrap: nowrap; }
.md-pay-row .md-fld { font-size: .9rem; }
.md-pay-row .md-fld > span { font-size: .82rem; }
.md-pay-row .md-fld input, .md-pay-row .md-fld select { font-size: .95rem; padding: 9px 11px; }
.md-pay-stage { flex: 1 1 auto; min-width: 150px; }
.md-pay-stage select { width: 100%; }
.md-pay-pct { flex: 0 0 96px; }
.md-pay-days { flex: 0 0 96px; }
.md-pay-pctwrap { display: flex; align-items: center; gap: 4px; }
.md-pay-pctwrap input { width: 100%; min-width: 0; }
.md-pay-suffix { font-size: .95rem; color: var(--text); font-weight: 600; }
.md-pay-rm { flex: 0 0 auto; height: 40px; width: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: #c0392b; font-size: 1rem; cursor: pointer; }
.md-pay-rm:hover { background: rgba(192,57,43,0.08); border-color: #c0392b; }
@media (max-width: 560px) { .md-pay-row { flex-wrap: wrap; } .md-pay-stage { flex: 1 1 100%; } }

/* S7: Faturayı böl sayfası hücresi (adet + Tümü) */
.dt-split-cell { white-space: nowrap; }
.dt-split-cell .dt-mini-btn { margin-left: 6px; vertical-align: middle; }
.dt-import-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.dt-info-item { display: flex; flex-direction: column; gap: 3px; }
.dt-info-item > span { font-size: 0.74rem; color: var(--text-muted, #7a6f5f); }
.dt-info-item > b { font-size: 0.95rem; }
.dt-tax-cell { font-size: 0.76rem; white-space: nowrap; }
.dt-tax-break { color: var(--text-muted, #7a6f5f); line-height: 1.35; }
/* ── Beyanname Oluştur ürün tablosu ─────────────────────────────────────
   Satır yüksekliği sabit iki satırlık; metin 2 satıra kadar sarar, taşarsa
   "…" ile kısalır ve tamamı hover'da (title) görünür. */
/* Satır yüksekliği = 2 satır metin (2 × 1.4em) + td dikey padding (2 × 8px).
   `height` satırda alt sınır gibi davranır; içerik clamp'lendiği için hiçbir
   satır bunu aşmaz → tüm satırlar aynı yükseklikte kalır. */
.dt-decl-table tbody tr { height: calc(2.8em + 16px); }
.dt-decl-table tbody td { vertical-align: middle; }
.dt-decl-table tbody td, .dt-decl-table tbody th { white-space: normal; }
.dt-clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; overflow-wrap: anywhere;
  /* min = max: kutu her zaman tam 2 satır → satırlar yazı uzunluğundan bağımsız
     olarak aynı yükseklikte (px yerine em; zoom/tema ölçeğiyle birlikte büyür). */
  height: 2.8em; max-height: 2.8em;
}
.dt-decl-table .dt-name-cell { max-width: 260px; }
/* İst. Kıymet hücresi — değer + kalem ikonu, oynandıysa accent */
/* İst. Kıymet hücresi: görüntü ve düzenleme aynı yükseklikte (2 satırlık kutu),
   böylece düzenlerken satır zıplamaz. İpucu title ile hover'da. */
.dt-cif-view, .dt-cif-edit { height: 2.8em; }
.dt-cif-view { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.dt-cif-cell.on .dt-cif-view > b { color: var(--accent); }
.dt-cif-edit { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.dt-cif-edit > input { width: 108px; min-width: 0; text-align: right; }
.dt-cif-edit > .dt-cur-fixed { flex: 0 0 40px; }

/* ── Matrah zinciri (Beyanname Oluştur) ─────────────────────────────────
   Tasarım: 5 aşamalı yatay zincir. Her kart girdilerini taşır, altında
   dashed ayırıcıyla çıktısı durur; aralarda ok. Son kart (KDV) accent dolgu.
   Renkler tema token'larından gelir (açık/koyu tema uyumlu). */
/* Beyanname tarih/kur özeti — salt okunur; kaynağı Gümrük İşlemleri */
.dt-decl-meta { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-card); font-size: 0.86rem; color: var(--text); }
.dt-decl-meta > span { display: inline-flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.dt-decl-meta > span > b { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.dt-decl-meta-src { margin-left: auto; font-size: 0.74rem; color: var(--muted); }

.dt-sect-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; }
.dt-sect-head .dt-section-title { margin: 0; }
.dt-sect-ln { flex: 1; height: 1px; background: var(--line); }
.dt-sect-hint { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }

.dt-flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding: 10px 2px 2px; }
/* min-width düşük: 5 kart + oklar tipik masaüstü genişliğinde yan yana sığsın
   (daha darda kendi konteynerinde yatay kayar, sayfa gövdesi kaymaz). */
.dt-flow-st { flex: 1 1 0; min-width: 146px; position: relative; display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 13px; }
.dt-flow-st.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dt-flow-n { position: absolute; top: -9px; left: 14px; background: var(--surface-card-strong, var(--surface-card));
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.dt-flow-st h4 { margin: 7px 0 0; font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.dt-flow-kv { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.dt-flow-kv > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-flow-kv > div > span { display: flex; align-items: center; gap: 2px; font-size: 0.73rem; color: var(--muted); line-height: 1.3; }
.dt-flow-kv > div > b { font-size: 0.82rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-flow-kv .kv-ovr.on > b { color: var(--accent); }
/* Çıktı bloğu — kartın altına yapışır, dashed ayırıcı */
.dt-flow-out { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dt-flow-out > small { display: flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.dt-flow-out > b { font-size: 0.98rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.015em; }
.dt-flow-st.on .dt-flow-out > b { color: var(--accent); }
.dt-flow-badge { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; }
/* Son kart — sonuç */
.dt-flow-st.hl { background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  border-color: transparent; }
.dt-flow-st.hl h4, .dt-flow-st.hl .dt-flow-kv > div > b, .dt-flow-st.hl .dt-flow-out > b { color: var(--on-accent, #fff); }
.dt-flow-st.hl .dt-flow-kv > div > span, .dt-flow-st.hl .dt-flow-out > small { color: color-mix(in srgb, var(--on-accent, #fff) 72%, transparent); }
.dt-flow-st.hl .dt-flow-out { border-top-color: color-mix(in srgb, var(--on-accent, #fff) 30%, transparent); }
.dt-flow-st.hl .dt-flow-n { background: var(--on-accent, #fff); border-color: transparent; color: var(--accent); }
/* Aralardaki ok */
.dt-flow-arw { align-self: center; flex: none; color: var(--muted); opacity: 0.55; }
.dt-flow-arw svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Kart içi kalem ikonu + satır içi düzenleyici */
.dt-flow-edit { display: inline-flex; align-items: center; padding: 0; margin-left: 2px; border: 0;
  background: none; cursor: pointer; color: inherit; opacity: 0.5; }
.dt-flow-edit:hover, .dt-flow-edit.on { opacity: 1; color: var(--accent); }
.dt-flow-edit svg { width: 11px; height: 11px; }
.dt-flow-st.hl .dt-flow-edit:hover { color: var(--on-accent, #fff); }
.dt-flow-in { display: inline-flex; align-items: center; gap: 5px; }
.dt-flow-in > input { width: 96px; min-width: 0; height: 24px; padding: 0 7px; text-align: right;
  font-size: 0.8rem; line-height: 1; }
.dt-flow-in.big > input { width: 116px; height: 27px; font-size: 0.88rem; font-weight: 700; }
.dt-flow-in > em { font-style: normal; font-size: 0.64rem; font-weight: 700; color: var(--muted); }
/* Zincir altı notlar */
.dt-flow-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.dt-flow-note { font-size: 0.74rem; color: var(--muted); }
.dt-flow-note > b { font-weight: 700; color: var(--text); }
.dt-flow-note.off > b { color: var(--muted); }

/* Ürün tablosu: İst. Kıymet chip'i + toplam satırı */
.dt-cif-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-card);
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-cif-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.dt-cif-chip.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft); color: var(--accent); }
.dt-cif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.dt-cif-ico { display: inline-flex; opacity: 0.45; }
.dt-cif-ico svg { width: 11px; height: 11px; }
.dt-cif-chip:hover .dt-cif-ico, .dt-cif-chip.on .dt-cif-ico { opacity: 1; }
.dt-decl-table tr.dt-decl-foot td { background: var(--table-head, var(--surface-card));
  font-weight: 700; border-top: 1px solid var(--line); }
.dt-decl-table tr.dt-decl-foot .dt-tax-line > span { font-weight: 700; color: var(--text); }

/* Beyanname vergi kırılımı: isim solda, tutar sağda */
.dt-tax-line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.dt-tax-line > b { font-weight: 600; color: var(--text, inherit); font-variant-numeric: tabular-nums; }
.dt-export-menu { display: flex; flex-direction: column; gap: 16px; }
.dt-export-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-export-group > span { min-width: 140px; font-weight: 600; font-size: 0.88rem; }
.dt-history-wrap { margin-top: 18px; }
.dt-history { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.dt-hist-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dt-hist-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: 0 0 auto; }
.dt-hist-head { font-size: 0.88rem; }
.dt-hist-time { color: var(--text-muted, #9a8870); font-size: 0.78rem; margin-left: 6px; }
.dt-hist-detail { font-size: 0.82rem; color: var(--text-muted, #7a6f5f); margin-top: 2px; }
.dt-table { min-width: 900px; }
.dt-table-wrap:has(.dt-table) { overflow-x: auto; }

/* ── Dış Ticaret redesign (tasarım handoff): sevkiyat ekseni + tracker + sekmeler + sihirbaz ── */

/* Sevkiyat aşama pill'i */
.dt-stage-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.dt-stage-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

/* Liste: sevkiyat filtre pill'leri */
.dt-fpills { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 12px; }
.dt-fpill { border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted, #6f5b46); background: var(--surface-card); cursor: pointer; transition: border-color .15s, color .15s; }
.dt-fpill:hover { border-color: var(--accent); color: var(--text); }
.dt-fpill.on { background: #24180d; color: #fffdf8; border-color: #24180d; }
.dt-fpill-n { opacity: 0.7; font-family: "Space Grotesk", sans-serif; margin-left: 2px; }
.dt-list-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-muted, #6f5b46); }
.dt-foot-total { font-family: "Space Grotesk", sans-serif; }
.dt-foot-total strong { color: var(--text); }
.dt-mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; }

/* Hızlı bakış modalı */
.dt-qv { display: flex; flex-direction: column; gap: 14px; }
.dt-qv-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.dt-qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dt-qv-cell { background: var(--surface-card); padding: 12px 14px; }
.dt-qv-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #8a7660); }
.dt-qv-v { font-size: 0.9rem; color: var(--text); margin-top: 3px; }
.dt-qv-item .dt-qv-k { margin-bottom: 3px; }
.dt-qv-foot { display: flex; gap: 10px; }
.dt-qv-foot .ft-btn { flex: 1; justify-content: center; }

/* Aşama adım çubuğu (quick view) */
.dt-stagebar { display: flex; gap: 6px; }
.dt-stagebar-seg { flex: 1; text-align: center; }
.dt-stagebar-bar { height: 4px; border-radius: 2px; }
.dt-stagebar-lbl { font-size: 0.62rem; margin-top: 5px; }

/* Aşama seçim listesi (durum güncelle modalı) */
.dt-stage-list { display: flex; flex-direction: column; gap: 8px; }
.dt-stage-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 13px; cursor: pointer; border: 1.5px solid var(--line); background: var(--surface-card); }
.dt-stage-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(52,39,21,0.28); display: grid; place-items: center; flex: 0 0 auto; }
.dt-stage-radio > span { width: 8px; height: 8px; border-radius: 50%; }
.dt-stage-opt .dt-stage-dot { width: 8px; height: 8px; }
.dt-stage-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }

/* Detay: sevkiyat tracker'ı */
.dt-tracker-card { margin: 6px 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-card); }
.dt-tracker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.dt-tracker-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dt-tracker-next { font-size: 0.9rem; color: var(--text); margin-top: 3px; }
.dt-tracker { display: flex; align-items: flex-start; gap: 4px; }
.dt-mile { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dt-mile-line { display: flex; align-items: center; width: 100%; }
.dt-mile-line > span:not(.dt-mile-ring) { height: 3px; flex: 1; }
.dt-mile-ring { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 2px solid; }
.dt-mile-lbl { font-size: 0.68rem; font-weight: 600; margin-top: 7px; line-height: 1.2; }
.dt-mile-date { font-size: 0.64rem; color: var(--text-muted, #8a7660); margin-top: 1px; }

/* Detay: sekmeler */
.dt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.dt-tab { border: 0; background: none; padding: 10px 16px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text-muted, #8a7660);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.dt-tab:hover { color: var(--text); }
.dt-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.dt-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px; margin-bottom: 6px; }
.dt-history-inline { margin-top: 4px; }

/* Detay: belge kartları */
.dt-doc-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); margin-bottom: 8px; }
.dt-doc-ext { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; }
.dt-doc-info { flex: 1; min-width: 0; }
.dt-doc-name { font-size: 0.88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-doc-meta { font-size: 0.74rem; color: var(--text-muted, #8a7660); margin-top: 1px; }
.dt-doc-add { margin-top: 4px; width: 100%; border: 1.5px dashed rgba(52,39,21,0.24); border-radius: 12px; padding: 12px; font: inherit;
  font-size: 0.85rem; font-weight: 600; color: var(--accent); background: none; cursor: pointer; }
.dt-doc-add:hover { border-color: var(--accent); background: rgba(0,109,119,0.05); }
.dt-doc-drop { border: 1.5px dashed rgba(52,39,21,0.24); border-radius: 14px; padding: 24px; text-align: center; cursor: pointer; background: var(--surface-panel, rgba(255,255,255,0.4)); }
.dt-doc-drop.over { border-color: var(--accent); background: rgba(0,109,119,0.06); }
.dt-doc-drop-t { font-size: 0.86rem; font-weight: 600; color: var(--text); margin-top: 8px; }
.dt-doc-drop-s { font-size: 0.76rem; color: var(--text-muted, #8a7660); margin-top: 2px; }
.dt-doc-drop-name { font-size: 0.8rem; color: var(--accent); font-weight: 600; margin-top: 8px; }
.dt-milestone-next { padding: 14px; border-radius: 13px; background: rgba(0,109,119,0.09); border: 1px solid rgba(0,109,119,0.18); }
.dt-milestone-next > div { font-size: 0.74rem; color: var(--text-muted, #6f5b46); }
.dt-milestone-next > b { font-size: 0.98rem; color: var(--text); }

/* Yeni sipariş sihirbazı */
.dt-wiz-steps { display: flex; align-items: center; margin: 6px 0 20px; }
.dt-wiz-step { display: flex; align-items: center; flex: 1; }
.dt-wiz-node { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.dt-wiz-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-size: 0.82rem; font-weight: 700; border: 2px solid; }
.dt-wiz-lbl { font-size: 0.66rem; font-weight: 600; text-align: center; line-height: 1.15; max-width: 90px; }
.dt-wiz-line { flex: 1; height: 2px; margin: 0 4px 18px; }
.dt-wiz-panel { margin-bottom: 8px; }
.dt-wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.dt-wiz-review { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; max-width: 560px; }
.dt-wiz-rrow { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.dt-wiz-rrow:last-child { border-bottom: 0; }
.dt-wiz-rrow > span { color: var(--text-muted, #6f5b46); }
.dt-wiz-rrow.total { background: rgba(0,109,119,0.08); }
.dt-wiz-rrow.total > span { color: var(--accent); font-weight: 700; }
.dt-wiz-rrow.total > b { font-family: "Space Grotesk", sans-serif; }

/* Navlun onay girişi (5b) — iki kolon + özet kartı */
.modal-card.kol-modal:has(.dt-fm) { max-width: 720px; width: 720px; }
.dt-fm { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; max-height: 74vh; overflow-y: auto; padding: 2px; }
.dt-fm-form { display: flex; flex-direction: column; gap: 12px; }
.dt-fm .dt-field { min-width: 0; }
.dt-fm input:not([type=checkbox]):not([type=radio]), .dt-fm textarea, .dt-fm select { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-panel, #fff); font: inherit; font-size: 0.88rem; color: var(--text); }
.dt-fm-side { display: flex; flex-direction: column; }
.dt-fm-summary { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface-panel, rgba(255,255,255,0.42)); }
.dt-fm-sumhead { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #8a7660); margin-bottom: 12px; }
.dt-fm-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 0.82rem; }
.dt-fm-row > span { color: var(--text-muted, #6f5b46); }
.dt-fm-row > b { color: var(--text); text-align: right; }
.dt-fm-sep { height: 1px; background: var(--line); margin: 8px 0; }
.dt-fm-total { margin-top: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(145deg, #006d77, #0a9396); color: #eefbf8; }
.dt-fm-total-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.dt-fm-total-v { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; }

/* Segmented kontrol (iç nakliye) */
.dt-seg { display: flex; gap: 8px; }
.dt-seg-btn { flex: 1; border: 1px solid var(--line); background: var(--surface-card); color: var(--text-muted, #8a7660); border-radius: 12px; padding: 10px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.dt-seg-btn.on { border-color: var(--accent); background: rgba(0,109,119,0.12); color: var(--accent); }

@media (max-width: 720px) {
  .modal-card.kol-modal:has(.dt-fm) { max-width: 96vw; width: 96vw; }
  .dt-fm { grid-template-columns: 1fr; }
}

/* ── Report update: not-allowed cursor on interactive elements ── */
body.report-is-updating button,
body.report-is-updating a,
body.report-is-updating select,
body.report-is-updating input,
body.report-is-updating summary,
body.report-is-updating label {
  cursor: not-allowed !important;
}

/* ── Download "Mevcut filtreyi uygula" button ── */
.report-download-apply-filter {
  margin-bottom: 12px;
}

.report-download-apply-filter .full-width {
  width: 100%;
  justify-content: center;
}

/* ── Stok Durum Raporu ────────────────────────────────────────── */

/* KPI grid */
/* ── Stok KPI single-row layout (4 cards) ─────────────────────── */
.stok-kpi-row {
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  align-items: stretch;
}
/* SKU Adedi + Stok Durumu birleşik → 3 kart */
.stok-kpi-row-3 { grid-template-columns: 1.1fr 1.1fr 1fr; }
@media (max-width: 900px) {
  .stok-kpi-row { grid-template-columns: 1fr 1fr; }
  .stok-kpi-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stok-kpi-row { grid-template-columns: 1fr; }
  .stok-kpi-row-3 { grid-template-columns: 1fr; }
}
/* SKU Adedi kartındaki toplam satırı + Stok kartındaki tutar satırı: üstte ince ayraç */
.stok-kpi-status-total,
.stok-kpi-pair-tutar {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding-top: 5px;
}
.stok-kpi-status-total .stok-kpi-status-label,
.stok-kpi-status-total .stok-kpi-status-val { font-weight: 700; color: var(--text); }

.stok-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stok-kpi-card .eyebrow { margin: 0; }
.stok-kpi-card .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }

/* SKU detay KPI kartları: içerik ÜSTTEN alta hizalı (yayılmaz). Tüm kartların
   satırları, Alış/Satış/Stok tablosundaki satırlarla aynı hizadan başlar; kısa
   kartlar (Stok Yaşı) yalnızca üstteki satırlarla hizalı kalır. */
.stok-sku-kpi-row .stok-kpi-card { justify-content: flex-start; }
.stok-kpi-pair { display: flex; flex-direction: column; gap: 6px; }
.stok-kpi-pair-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.stok-kpi-pair-label { font-size: 0.78rem; color: var(--muted); }
.stok-kpi-pair-val   { font-size: 1.05rem; font-weight: 700; }

/* Card 3: Stok Durumları */
.stok-kpi-status-list { display: flex; flex-direction: column; gap: 5px; }
.stok-kpi-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.stok-kpi-status-label { font-size: 0.8rem; color: var(--muted); }
.stok-kpi-status-val   { font-size: 0.95rem; font-weight: 700; }

.stok-kpi-status-val.stok-status-pasif       { color: #6b7280; }
.stok-kpi-status-val.stok-status-hareket-yok { color: #b45309; }
.stok-kpi-status-val.stok-status-stok-yok    { color: #dc2626; }
.stok-kpi-status-val.stok-status-stok-var    { color: #16a34a; }

[data-theme="dark"] .stok-kpi-status-val.stok-status-pasif       { color: #9ca3af; }
[data-theme="dark"] .stok-kpi-status-val.stok-status-hareket-yok { color: #fbbf24; }
[data-theme="dark"] .stok-kpi-status-val.stok-status-stok-yok    { color: #f87171; }
[data-theme="dark"] .stok-kpi-status-val.stok-status-stok-var    { color: #4ade80; }

/* Card 4: Uyarılar */
.stok-kpi-warn-list { display: flex; flex-direction: column; gap: 6px; }
.stok-kpi-warn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
}
.stok-kpi-warn-row.stok-warn-kritik { background: #fef2f2; color: #991b1b; }
.stok-kpi-warn-row.stok-warn-fazla  { background: #eff6ff; color: #1e40af; }
.stok-kpi-warn-row.stok-kpi-warn-zero { opacity: 0.4; }
[data-theme="dark"] .stok-kpi-warn-row.stok-warn-kritik { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .stok-kpi-warn-row.stok-warn-fazla  { background: #1e3a8a; color: #93c5fd; }
.stok-kpi-warn-label { flex: 1; }
.stok-kpi-warn-val   { white-space: nowrap; }
.stok-kpi-no-warn {
  font-size: 0.85rem;
  color: #16a34a;
  font-weight: 600;
  margin-top: 4px;
}
[data-theme="dark"] .stok-kpi-no-warn { color: #4ade80; }

/* Legacy — keep but override with new row */
.stok-kpi-grid { margin-bottom: 0; }

/* Chart controls card */
.stok-chart-controls-card { }
.stok-chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Table section */
.stok-table-section { }

/* Sortable table — capped height with vertical scroll; header stays sticky
   (see .report-table thead th { position: sticky }). */
.stok-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
}
.stok-table { min-width: 1200px; }

/* ── Sola sabitlenebilir sütun (freeze-left) ─────────────────── */
.stok-th-cell { position: relative; }
/* Başlıklar arası görünmez ayraç — hover'da/aktifken belirginleşir, tıklanabilir */
.stok-col-freeze-handle {
  position: absolute;
  top: 0; right: -3px;
  width: 8px; height: 100%;
  cursor: col-resize;
  z-index: 6;
}
.stok-col-freeze-handle::after {
  content: "";
  position: absolute;
  right: 3px; top: 12%; bottom: 12%;
  width: 2px; border-radius: 2px;
  background: transparent;
  transition: background 0.12s ease;
}
.stok-col-freeze-handle:hover::after,
.stok-col-freeze-handle.is-frozen::after { background: var(--accent); }

/* Donmuş sütunlar: TAM OPAK arka plan (kaydırmada arkası görünmesin) + üstte kalsın.
   Banded (şerit) ve hover renkleri yarı saydam olduğundan, opak --surface-strong
   üzerine linear-gradient overlay ile bindirilip opak sonuç elde edilir. */
.stok-table thead th.stok-col-frozen { z-index: 5; background: var(--table-head); }
.stok-table tbody td.stok-col-frozen { z-index: 3; background: var(--surface-strong); }
.stok-table tbody tr:nth-child(even) td.stok-col-frozen {
  background: linear-gradient(var(--table-alt), var(--table-alt)), var(--surface-strong);
}
.stok-table tbody tr:hover td.stok-col-frozen {
  background: linear-gradient(var(--table-hover), var(--table-hover)), var(--surface-strong);
}
.stok-table .stok-col-frozen-edge { box-shadow: 6px 0 8px -6px rgba(0,0,0,0.35); }
/* Açıklama sütunu: daha geniş, en fazla 2 satır, taşarsa "…" */
.stok-table .stok-td-aciklama { min-width: 240px; max-width: 320px; vertical-align: middle; }
.stok-table .stok-td-aciklama .sd-clamp2 { max-width: 320px; }
/* Tüm satırlar en fazla 2 satır yüksekliğinde, dikey ortalı */
.stok-table tbody td { vertical-align: middle; }

.stok-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 0.78rem;
}
.stok-th:hover { background: rgba(var(--accent-rgb), 0.06); }
.stok-th-active { color: var(--accent); }
.stok-th-num { text-align: right; white-space: nowrap; }
.stok-td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-nowrap   { white-space: nowrap; }
.sort-dir { font-size: 0.7em; opacity: 0.7; }

/* DP değişim */
.dp-up   { color: var(--success); }
.dp-down { color: var(--danger); }

/* Stok durum badge */
.stok-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.stok-badge-stockout  { background: #374151; color: #f9fafb; }
.stok-badge-kritik    { background: #fef2f2; color: #991b1b; }
.stok-badge-dusuk     { background: #fff7ed; color: #9a3412; }
.stok-badge-normal    { background: #f0fdf4; color: #166534; }
.stok-badge-fazla     { background: #eff6ff; color: #1e40af; }
.stok-badge-hareketsiz{ background: #f5f3ff; color: #5b21b6; }

[data-theme="dark"] .stok-badge-stockout  { background: #374151; color: #d1d5db; }
[data-theme="dark"] .stok-badge-kritik    { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .stok-badge-dusuk     { background: #7c2d12; color: #fdba74; }
[data-theme="dark"] .stok-badge-normal    { background: #14532d; color: #86efac; }
[data-theme="dark"] .stok-badge-fazla     { background: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .stok-badge-hareketsiz{ background: #4c1d95; color: #c4b5fd; }

/* ── Stok Durum — column filter & sort redesign ─────────────── */

/* ── Stok Durum table header (mirrors StockTrading design) ─────── */

/* <th> with filter menu: position relative so menu anchors to it */
.stok-filter-header { position: relative; }

/* Header cell: label + sort button side by side */
.stok-header-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Sort button — matches the standard .col-sort-btn used across all report tables.
   Scoped to both the main stok table and the SKU-detail (sd) tables. */
.stok-table .sort-button,
.sd-detail-table .sort-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
  opacity: 0.55;
  line-height: 1;
  transition: opacity 0.18s ease;
}
.stok-table .sort-button:hover,
.stok-table .sort-button.active,
.sd-detail-table .sort-button:hover,
.sd-detail-table .sort-button.active { opacity: 1; }
.stok-table .sort-button.active,
.sd-detail-table .sort-button.active { color: var(--accent); }

/* Sort arrows span */
.stok-table .sort-arrows,
.sd-detail-table .sort-arrows {
  display: inline-block;
  min-width: 16px;
  letter-spacing: -0.08em;
  font-size: 0.8rem;
}

/* Filter button (column label for filterable cols) — matches .col-filter-btn */
.stok-table .filter-button,
.sd-detail-table .filter-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stok-table .filter-button:hover,
.sd-detail-table .filter-button:hover { color: var(--accent); }

/* Active filter indicator dot */
.stok-filter-active-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Inline filter menu — same structure as StockTrading .filter-menu */
/* Position is set to fixed via JS after moving to document.body */
.stok-filter-menu {
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  overflow: hidden;
}

/* Head: "Hepsini Seç" + search */
.stok-filter-head {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

/* "Hepsini Seç" row: inside head, so no extra padding (parent already pads) */
.stok-filter-head .filter-option {
  padding: 0;
  font-weight: 600;
}
.stok-filter-head .filter-option:hover { background: transparent; }

/* Option rows in the scrollable list */
.stok-filter-menu .filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  user-select: none;
  font-size: 0.83rem;
}
.stok-filter-menu .filter-option:hover { background: rgba(var(--accent-rgb), 0.06); }
/* Override global `input { width: 100% }` — checkbox must be its natural size */
.stok-filter-menu .filter-option input[type="checkbox"] {
  width: auto !important;
  min-width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.stok-filter-search-input {
  width: 100% !important;
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface-input);
  color: var(--text);
  box-sizing: border-box;
}
.stok-filter-search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.stok-filter-options-list { max-height: 220px; overflow-y: auto; padding: 4px 0; }

.stok-filter-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Active sort column highlight */
.stok-th-sort-active { color: var(--accent); }

/* Empty state */
.stok-table-empty { padding: 32px; text-align: center; }

/* Stok Durum empty-state cell */
.stok-empty-cell {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Stok Durum — new badge & KPI styles ─────────────────────── */

/* Status badges — 4 primary categories */
.stok-badge-pasif        { background: #f3f4f6; color: #6b7280; }
.stok-badge-hareket-yok  { background: #fffbeb; color: #92400e; }
.stok-badge-stockout     { background: #fef2f2; color: #991b1b; }
.stok-badge-normal       { background: #f0fdf4; color: #166534; }

[data-theme="dark"] .stok-badge-pasif        { background: #374151; color: #d1d5db; }
[data-theme="dark"] .stok-badge-hareket-yok  { background: #78350f; color: #fde68a; }
[data-theme="dark"] .stok-badge-stockout     { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .stok-badge-normal       { background: #14532d; color: #86efac; }

/* Warning badges */
.stok-badge-kritik   { background: #fef2f2; color: #991b1b; }
.stok-badge-fazla    { background: #eff6ff; color: #1e40af; }

[data-theme="dark"] .stok-badge-kritik  { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .stok-badge-fazla   { background: #1e3a8a; color: #93c5fd; }

/* Status KPI row (4 cards) */
.stok-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .stok-status-grid { grid-template-columns: repeat(2, 1fr); }
}

.stok-status-card .kpi-value  { font-size: 1.6rem; }
.stok-status-pasif       .kpi-value { color: #6b7280; }
.stok-status-hareket-yok .kpi-value { color: #b45309; }
.stok-status-stok-yok    .kpi-value { color: #dc2626; }
.stok-status-stok-var    .kpi-value { color: #16a34a; }

[data-theme="dark"] .stok-status-pasif       .kpi-value { color: #9ca3af; }
[data-theme="dark"] .stok-status-hareket-yok .kpi-value { color: #fbbf24; }
[data-theme="dark"] .stok-status-stok-yok    .kpi-value { color: #f87171; }
[data-theme="dark"] .stok-status-stok-var    .kpi-value { color: #4ade80; }

/* Warning alert row */
.stok-warn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.stok-warn-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}
.stok-warn-kritik { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.stok-warn-fazla  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
[data-theme="dark"] .stok-warn-kritik { background: #7f1d1d; color: #fecaca; border-color: #991b1b; }
[data-theme="dark"] .stok-warn-fazla  { background: #1e3a8a; color: #93c5fd; border-color: #1e40af; }
.stok-warn-label { opacity: 0.8; }
.stok-warn-value { font-size: 1rem; }

/* ── Stok Durum — SKU Selector (sidebar) ─────────────────────── */
/* SKU selector — now a full-width card in the page content */
.stok-sku-selector-bar { padding: 14px 18px; margin-bottom: 0; }
.stok-sku-field { position: relative; }
.stok-sku-search-input {
  width: 100% !important;
  max-width: 480px;
  font-size: 0.88rem !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}
/* Dropdown panel */
.stok-sku-options { z-index: 200; max-width: 480px; }

/* Option rows — extend .report-slicer-option with two-line layout */
.stok-sku-option {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}
.stok-sku-option-code {
  font-size: 0.84rem;
  font-weight: 600;
  color: inherit;
}
.stok-sku-option-desc {
  font-size: 0.77rem;
  color: var(--muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── SKU Detail View ─────────────────────────────────────────── */
.stok-sku-detail { display: flex; flex-direction: column; gap: 16px; }

.stok-sku-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 4px;
}
/* Başlık kaldırıldı — sadece "Tüm Ürünler" butonu, sağa yaslı */
.stok-sku-detail-header--bare { justify-content: flex-end; padding-bottom: 0; }
.stok-sku-detail-title { font-size: 1.3rem; font-weight: 700; margin: 2px 0 0; line-height: 1.2; }
.stok-sku-detail-code  { font-size: 0.8rem; color: var(--muted); }

/* SKU KPI row — slightly different column ratios */
.stok-sku-kpi-row { grid-template-columns: 1fr 1fr 1.8fr 0.8fr; }

/* Güncel Fiyatlar: 2 sütunlu ızgara */
.stok-kpi-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
}

/* Alış/Satış/Stok tablosu (Card 1) */
.stok-kpi-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stok-kpi-table th {
  color: var(--muted); font-size: 0.75rem; font-weight: 600;
  text-align: left; padding: 2px 0 5px;
}
.stok-kpi-table th.stok-td-num, .stok-kpi-table td.stok-td-num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.stok-kpi-table td { padding: 4px 0; }
.stok-kpi-table td:first-child { color: var(--muted); }
.stok-kpi-table td.stok-td-num { font-weight: 600; }
.stok-kpi-table tbody tr + tr td { border-top: 1px solid var(--line); }
.stok-kpi-table-stok td:first-child { color: inherit; font-weight: 700; }
.stok-kpi-table-stok td.stok-td-num { color: var(--accent); }
.stok-kpi-marj-accent { color: var(--accent); }
/* Vurgulu son satırda dp-up/dp-down (ör. Toplam Hareket Kârı) accent'i geçsin — +yeşil / −kırmızı */
.stok-kpi-table-stok td.stok-td-num.dp-up   { color: var(--success); }
.stok-kpi-table-stok td.stok-td-num.dp-down { color: var(--danger); }
/* R / GR — Stok'un KIRILIMI, denklemin terimi değil: ayırt edilsin diye soluk,
   küçük ve ayırıcı çizgisiz (Stok satırına bağlı görünmeli). */
.stok-kpi-table-sub td { font-size: 0.78rem; opacity: 0.75; padding-top: 2px; padding-bottom: 2px; }
.stok-kpi-table tbody tr.stok-kpi-table-sub td { border-top: 0; }
.stok-kpi-table-sub td:first-child { padding-left: 8px; }
/* Dağılım kartı toplamının yanındaki "net negatif dahil" açıklaması */
.stok-hdist-total-note { font-size: 0.72rem; font-weight: 500; cursor: help; }
.stok-kpi-period-row td { font-size: 0.8rem; }
.stok-kpi-period-row td:first-child { color: var(--accent); font-weight: 600; }
.stok-kpi-period-inline { font-size: 0.75em; color: var(--accent); font-weight: 500; opacity: 0.85; white-space: nowrap; }
/* Invisible spacer that exactly matches the height of .stok-kpi-table thead */
.stok-kpi-thead-spacer { font-size: 0.75rem; padding: 2px 0 5px; line-height: 1.4; display: block; }

/* Seçili ürün chip'inde stok kodu (adın solunda) */
.stok-sku-chip-code { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Charts row */
.stok-sku-charts {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .stok-sku-charts { grid-template-columns: 1fr; } }
.stok-sku-chart-card { }

/* Pie chart */
.stok-pie-wrap { display: flex; align-items: center; gap: 16px; }
.stok-pie-svg  { width: 120px; height: 120px; flex-shrink: 0; }
.stok-pie-legend { display: flex; flex-direction: column; gap: 5px; }
.stok-pie-legend-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.stok-pie-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stok-pie-label { flex: 1; }
.stok-pie-pct   { font-weight: 600; white-space: nowrap; }

/* Tables row — Alış/Satış geniş (2fr), Depo Dağılımı dar (1fr); chart-main-row ile aynı oran */
.stok-sku-tables {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .stok-sku-tables { grid-template-columns: 1fr; } }

/* Yükseklik sınırı + tablo içi dikey kaydırma (başlık sticky kalır) */
.stok-sku-table-scroll {
  max-height: 320px;
  overflow-y: auto;
}

/* SKU detay tablo sekmeleri + para-birimi seçicileri artık standart
   .segmented-control / .segmented-chip pill tasarımını kullanıyor. */
.sd-tables-head {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* Detay sort/filter tabloları çok kolonlu olabilir → yatay kaydırma serbest */
.sd-detail-table { width: 100%; }

/* ── SKU detail chart layout update ─────────────────────────── */
/* Platform chart: full width, own row */
/* Chart section: single row, platform 2/3 + pies 1/3 */
.stok-sku-charts { display: flex; flex-direction: column; gap: 14px; }

.stok-sku-chart-main-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: start;   /* dağılım kartı tek-satır yüksekliğinde kalsın, pastalara uzamasın */
}
@media (max-width: 900px) {
  .stok-sku-chart-main-row { grid-template-columns: 1fr; }
}

/* Dağılım kartı (Platform/Cari Grup/Cari Sektör) + kontroller */
.stok-dim-controls,
.stok-trend-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.stok-dim-card .sd-tables-head,
.stok-trend-card .trend-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.stok-sku-platform-card { } /* no extra styles needed */

/* Pies: stacked vertically in the 1/3 column */
.stok-sku-pies-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stok-sku-pies-col .stok-sku-chart-card { flex: 1; }

/* ── General stok charts: platform (2/3) + pie (1/3) ────────── */
.stok-general-chart-row {
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
}

/* Güncel Stok / Toplam Satış dağılımı */
/* gap=0 + her row'a padding → track'ler bitişik, gradient kesintisiz devam eder */
.stok-chart-card .stok-hdist-list {
  gap: 0;
  padding: 0 14px 0 0;   /* sağda scroll bar payı — değer yazısının üstüne gelmesin */
  max-height: 360px;
  overflow-y: auto;
}
.stok-chart-card .stok-hdist-list .horizontal-distribution-row {
  padding: 8px 0;
}
/* Sürekli düz dikey gridline'lar: track'ler bitişik olduğundan gradient aralıksız görünür */
.stok-chart-card .horizontal-distribution-track {
  background: repeating-linear-gradient(
    90deg,
    var(--chart-grid) 0,
    var(--chart-grid) 0.5px,
    transparent 0.5px,
    transparent 25%
  );
}

/* ── Bağlantılı dağılım paneli: kontroller + iki grafik tek kutu hissi ── */
.stok-dist-panel { padding: 0; overflow: hidden; height: auto; }
.stok-dist-panel-controls {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.stok-dist-panel .report-chart-grid {
  gap: 0;
  margin: 0;
  align-items: start;
}
.stok-dist-panel .stok-chart-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px 20px;
  min-width: 0;
  align-self: start;
  height: auto;
}
/* İki grafik arası dikey ayraç (bağlı oldukları belli olsun) */
.stok-dist-panel .report-chart-grid > .stok-chart-card + .stok-chart-card {
  border-left: 1px solid var(--line);
}

/* ── Genel rapor layout: dağılım grafikleri (sol) + depo tablosu (sağ) ─── */
.stok-genel-layout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 20px;
  align-items: stretch;
}
/* İki dağılım grafiği alt alta (Güncel Stok üstte, Toplam Satış altta) */
.stok-dist-panel .report-chart-grid.stok-dist-stacked {
  grid-template-columns: 1fr;
}
.stok-dist-panel .report-chart-grid.stok-dist-stacked > .stok-chart-card + .stok-chart-card {
  border-left: 0;
  border-top: 1px solid var(--line);
}

/* Depo stok tablosu — alttaki ürün tablosu ile aynı tasarım (report-table).
   İçerik absolute → kart grid satır yüksekliğini şişirmez; yükseklik soldaki
   grafik kutusu tarafından belirlenir, tablo o yüksekliğe sığıp kayar. */
.stok-depo-genel-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
}
.stok-depo-genel-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}
.stok-depo-genel-inner .section-heading { margin-bottom: 12px; flex: 0 0 auto; }
.stok-depo-genel-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
/* Yazı boyutu normalizasyonu artık `.report-page` kapsamında (bkz. yukarısı) —
   tüm raporlar için geçerli. Stok Röntgen'e özel sadece hizalama kalır. */

/* Grafik/tablo üst başlıkları: başlık + seçim pilleri + büyütme ikonu dikey ortalı.
   Başlık bandı, büyütme ikonuyla aynı yükseklik/konumda (kart padding-top = 16px,
   ikon top = 16px, band 38px) → merkezler çakışır. */
.stok-rontgen-page .section-heading,
.stok-rontgen-page .sd-tables-head,
.stok-rontgen-page .trend-card-head {
  align-items: center;
  min-height: 38px;
}
.stok-rontgen-page .report-chart-fullscreen-card > .report-chart-expand-toggle { top: 16px; }

/* ── Net Satış MoM/YoY: yazı boyutu `.report-page` kapsamında normalize edilir;
   burada sadece başlık bandı hizalaması kalır. ── */
.ns-trend-typography .section-heading,
.ns-trend-typography .trend-card-head {
  align-items: center;
  min-height: 38px;
}

/* ── MoM/YoY kırılımlı (gruplu) eğilim grafiği ── */
.ns-grouped-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.ns-grouped-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.ns-grouped-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ns-grouped-plot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ns-grouped-yaxis {
  position: relative;
  width: 56px;
  flex: 0 0 auto;
}
.ns-grouped-yaxis span {
  position: absolute;
  right: 8px;
  transform: translateY(50%);
  color: var(--muted);
  white-space: nowrap;
}
.ns-grouped-scroll {
  position: relative;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}
.ns-grouped-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  min-width: 100%;
  padding: 0 8px;
  position: relative;
}
.ns-grouped-gridlines {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  z-index: 0;
  pointer-events: none;
}
.ns-grouped-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--chart-axis);
}
.ns-grouped-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Az dönem varsa gruplar büyüyüp alanı doldurur; çok dönemde min-width ile kayar. */
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.ns-grouped-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.ns-grouped-bar {
  width: 26px;
  border-radius: 6px 6px 0 0;
  align-self: flex-end;
  transition: opacity 160ms ease;
}
.ns-grouped-bar:hover { opacity: 0.82; }
.ns-grouped-label {
  text-align: center;
  font-weight: 700;
}

/* Dönem × Kırılım alım-satım matris tablosu — cari matris ile aynı mantık */
.stok-matris-wrap { overflow: auto; max-height: 520px; }
.stok-matris-table { width: 100%; min-width: max-content; }
.stok-matris-table th.stok-matris-drillable { cursor: pointer; color: var(--accent); user-select: none; }
.stok-matris-table th.stok-matris-drillable:hover { text-decoration: underline; text-underline-offset: 3px; }
.stok-matris-group td { font-weight: 700; background: var(--surface-subtle); }
.stok-matris-meas .stok-matris-meas-label { padding-left: 20px; white-space: nowrap; }
.stok-matris-table .stok-matris-total { font-weight: 600; }
.stok-matris-table .trend-day-sublabel { display: block; font-size: 0.78em; color: var(--text-muted); }

/* Tüm satırlara OPAK arka plan → sabit sütunlar hareket eden hücrelerle BİREBİR
   aynı renkte olur (kaydırınca ne arka görünür ne de renk farkı oluşur).
   Ölçü satırı = düz; grup/genel-toplam = hafif gri ton; başlık = table-head. */
.stok-matris-table tbody td { background: var(--surface-strong); }
.stok-matris-table .stok-matris-group td,
.stok-matris-grand td {
  background: linear-gradient(rgba(0,0,0,0.045), rgba(0,0,0,0.045)), var(--surface-strong);
}
.stok-matris-table thead th {
  background: linear-gradient(var(--table-head), var(--table-head)), var(--surface-strong);
}
/* Sabit (sticky) sol kırılım + sağ Toplam sütunu — arka plan satırdan (td) gelir,
   sadece konum + üst katman + ayraç gölgesi verilir. */
.stok-matris-table .stok-matris-sticky-left  { position: sticky; left: 0;  z-index: 2; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.18); }
.stok-matris-table .stok-matris-sticky-right { position: sticky; right: 0; z-index: 2; box-shadow: -2px 0 5px -2px rgba(0,0,0,0.18); }
.stok-matris-table thead th.stok-matris-sticky-left,
.stok-matris-table thead th.stok-matris-sticky-right { z-index: 3; }
.stok-matris-grand td { font-weight: 700; border-top: 2px solid var(--line); }

/* Tam ekranda matris + ürün-detay tabloları kutu yüksekliğini doldursun (kısa
   kalmasın). max-height yalnızca üst sınır → flex:1 ile modal kartı doldur. */
.report-chart-modal-card .stok-matris-wrap,
.report-chart-modal-card .stok-sku-table-scroll,
.report-chart-modal-card .stok-yasi-wrap,
.report-chart-modal-card .stok-depo-genel-wrap,
.report-chart-modal-card .stok-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Ölçü renkleri: Alış mor, Satış mavi, Maliyet kırmızı, Kâr yeşil */
.stok-matris-c-alis    td.stok-td-num { color: #7c3aed; }
.stok-matris-c-satis   td.stok-td-num { color: #2563eb; }
.stok-matris-c-maliyet td.stok-td-num { color: var(--danger); }
.stok-matris-c-kar     td.stok-td-num { color: var(--success); }
.stok-matris-c-alis    .stok-matris-meas-label { color: #7c3aed; }
.stok-matris-c-satis   .stok-matris-meas-label { color: #2563eb; }
.stok-matris-c-maliyet .stok-matris-meas-label { color: var(--danger); }
.stok-matris-c-kar     .stok-matris-meas-label { color: var(--success); }

/* Kırılım (Marka/Kategori) özet tablosu */
.stok-grouped-table { min-width: 720px; }
.stok-grouped-table .stok-td-group { font-weight: 600; white-space: nowrap; }
.stok-grouped-table .stok-group-count { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }

/* Stok Yaşı (fatura bazlı) tablosu */
.stok-yasi-card { display: flex; flex-direction: column; min-height: 0; }
.stok-yasi-wrap { flex: 1; min-height: 0; max-height: 360px; overflow-y: auto; }
.stok-yasi-table { width: 100%; font-size: 13px; table-layout: fixed; }
.stok-yasi-table th { white-space: nowrap; }
.stok-yasi-table .stok-yasi-tarih { width: 84px; white-space: nowrap; }
/* Fatura no: dar, en fazla 2 satır, taşarsa "…" → kalan stok & yaş hep görünür */
.stok-yasi-table .stok-yasi-belgeno { max-width: 0; }
.stok-yasi-table .stok-yasi-belgeno .sd-clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all; line-height: 1.25;
}
.stok-yasi-table th.stok-th-num, .stok-yasi-table td.stok-td-num { width: 92px; }

/* Depo/SKU grafik kartı başlığındaki toggle, büyütme butonunun altında kalmasın */
.stok-depo-genel-card .section-heading,
.stok-sku-chart-card .section-heading { padding-right: 40px; }

/* B2B/B2C yatay grafik: kutuyu dikeyde doldur — barlar eşit yayılır, eksen altta sabit */
.stok-sku-chart-card { display: flex; flex-direction: column; }
.stok-sku-chart-card .stok-hdist-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stok-sku-chart-card .stok-hdist-list .horizontal-distribution-row { flex: 1 1 0; }
.stok-sku-chart-card .stok-hdist-list .horizontal-distribution-axis-row { flex: 0 0 auto; margin-top: 4px; }

/* Genel rapor B2B/B2C kartı: ürün detayındaki gibi içerik kutu yüksekliğini doldursun */
.stok-b2b-genel-card { display: flex; flex-direction: column; }
.stok-b2b-genel-card .stok-hdist-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.stok-b2b-genel-card .stok-hdist-list .horizontal-distribution-row { flex: 1 1 0; }
.stok-b2b-genel-card .stok-hdist-list .horizontal-distribution-axis-row { flex: 0 0 auto; margin-top: 4px; }

/* B2B/B2C yatay grafiği (eksenli): etiket + değer sütunlarını daralt → bar alanı
   (track) sağa kadar uzasın, son gridline ile değer arası boşluk kalmasın.
   Satır ve eksen-satırı aynı kolon şablonunu kullanır → gridline'lar hizalı kalır. */
.stok-hdist-axis .horizontal-distribution-row,
.stok-hdist-axis .horizontal-distribution-axis-row {
  grid-template-columns: minmax(96px, 0.16fr) minmax(0, 1fr) minmax(52px, auto);
  gap: 10px;
}
/* İşlem tipi / kanal pastası: kutuyu doldur, daha büyük çiz */
.stok-sku-chart-card .pie-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.stok-sku-chart-card .pie-chart-compact { width: 100%; max-width: 300px; margin: 0 auto; }

/* Güncel kur > MSRP kuru uyarı kutusu */
.stok-kur-uyari {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(var(--danger-rgb, 220, 38, 38), 0.10);
  border: 1px solid rgba(var(--danger-rgb, 220, 38, 38), 0.30);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.3;
}
.stok-kur-uyari-icon { font-size: 14px; flex: 0 0 auto; }

/* Dağılım grafiği toplam başlığı */
.stok-hdist-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 14px 10px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.stok-hdist-total-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stok-hdist-total-val { font-size: 16px; font-weight: 700; color: var(--text); }

.stok-depo-genel-table { width: 100%; }
/* Tıklanabilir depo satırı + dağılım barı */
.stok-depo-row-clickable { cursor: pointer; transition: background 0.12s ease; }
.stok-depo-row-clickable:hover td { background: rgba(var(--accent-rgb), 0.08); }
.stok-hdist-row-clickable { cursor: pointer; border-radius: 8px; transition: background 0.12s ease; }
.stok-hdist-row-clickable:hover { background: rgba(var(--accent-rgb), 0.06); }
.stok-depo-genel-table tfoot.stok-depo-total td {
  font-weight: 700;
  border-top: 2px solid var(--line);
  position: sticky;
  bottom: 0;
  background: var(--surface-strong);
}

/* Geçmiş alış (Alışlar) tablosu */
.stok-alis-belgeno { font-size: 14px; color: var(--text); }
.stok-alis-aralik  { font-size: 14px; white-space: nowrap; }
.stok-alis-aralik strong { color: var(--accent); }

/* Tüm sütunlar 2 satıra kadar sarar, taşarsa "…" ile kesilir.
   min-height ile her hücre 2 satır yüksekliğinde olur → tüm satırlar eşit. */
.stok-sku-table-card--alis .report-table tbody td { vertical-align: middle; }
.stok-sku-table-card--alis .stok-alis-belgeno .sd-clamp2,
.stok-sku-table-card--alis td:nth-child(3) .sd-clamp2,
.stok-sku-table-card--alis td:nth-child(4) .sd-clamp2 { max-width: 260px; }

/* Tam ekran modunda tablo kartı dikey olarak tam yüksekliği doldurur */
.stok-sku-table-card.is-expanded .stok-sku-table-scroll,
.stok-sku-table-card.is-expanded .sd-detail-wrap {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}
.sd-clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: calc(1.3em * 2);   /* her zaman 2 satır → eşit satır yüksekliği */
  max-width: 170px;
  word-break: break-word;
}

/* ── Stok SKU multi-select picker ───────────────────────────── */
.stok-sku-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
/* Input + Uygula button in a row */
.stok-sku-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.stok-sku-input-row .stok-sku-field { flex: 1; }
.stok-sku-input-row #applyStokSku   { flex-shrink: 0; white-space: nowrap; }
.stok-sku-picker #stokSkuSearchInput {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(17,106,137,.14));
  background: var(--surface-card-strong, #fff);
  font: inherit;
  font-size: 0.88rem;
}
.stok-sku-picker .stok-sku-options { max-width: 100%; }
.stok-sku-selected-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Aktif filtre chip bar (raporların üstünde) ── */
.report-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px;
}

.report-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 20px;
  padding: 4px 6px 4px 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 260px;
}

.report-filter-chip-label {
  font-weight: 600;
  color: var(--accent);
}

.report-filter-chip-value {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.report-filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--accent);
  transition: background 0.15s;
}

.report-filter-chip-remove:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.report-filter-chip-remove svg {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

/* ─── B2B Satış Raporu ──────────────────────────────────────────────────── */

.b2b-top-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .b2b-top-pair-grid {
    grid-template-columns: 1fr;
  }
}

.b2b-scroll-list {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.b2b-combo-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ─── B2B KPI Groups ──────────────────────────────────────────────────────── */

.b2b-rate-banner {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #888);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* ─── Satış Sonrası Hizmetler (SSH) ─────────────────────────────────────── */
.ssh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 0;
  align-items: stretch;
}

.ssh-kpi-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px;
  justify-content: center;
}

/* Durum kartı — alt alta 3'lü (devam eden / sonuçlanan / genel toplam) */
.ssh-status-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.ssh-status-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ssh-status-item .kpi-value {
  margin-top: 0;
}

.ssh-status-sep {
  height: 1px;
  width: 100%;
  background: var(--line);
}

/* KPI değerleri 16px (SSH raporu). SSH KPI'ları fitKpiValues otomatik
   ölçeklemesinden hariç tutulduğu için, `.report-page :not(...)` blanket
   14px kuralını yenmek üzere !important gerekir. */
.ssh-kpi-grid .kpi-value {
  font-size: 16px !important;
}

/* Ortalama geçen süre kartı — 2 sütun departman + tablo toplamı */
.ssh-dur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 18px;
  margin-top: 8px;
}

.ssh-dur-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.ssh-dur-name {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssh-dur-val {
  font-weight: 600;
  white-space: nowrap;
}

.ssh-dur-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 13px;
}

.ssh-pie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* CN Talep pie (sol) + marka/kategori kırılım bar grafiği (sağ) yan yana */
.ssh-cn-hier-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  align-items: start;
}

/* Servis nedeni + Verilen hizmet yan yana */
.ssh-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .ssh-cn-hier-grid,
  .ssh-two-col-grid {
    grid-template-columns: 1fr;
  }
}

.b2b-kpi-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .b2b-kpi-group-grid {
    grid-template-columns: 1fr;
  }
}

.b2b-kpi-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px;
}

.b2b-kpi-group--spread {
  justify-content: center;
}

.b2b-kpi-group--spread .b2b-kpi-item {
  padding: 8px 0;
}

.b2b-kpi-group--row {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.b2b-kpi-group--row .b2b-kpi-item {
  flex: 1;
  padding: 8px 20px;
  min-width: 0;
}

.b2b-kpi-divider-vertical {
  width: 1px;
  min-height: 40px;
  background: var(--border, rgba(0,0,0,0.08));
  align-self: stretch;
  margin: 12px 0;
  flex-shrink: 0;
}

.ecfs-chart-pair-grid {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 700px) {
  .b2b-kpi-group--row {
    flex-direction: column;
  }
  .b2b-kpi-divider-vertical {
    width: auto;
    height: 1px;
    min-height: 0;
    margin: 0;
  }
  .ecfs-chart-pair-grid {
    grid-template-columns: 1fr;
  }
}

.b2b-kpi-item {
  padding: 8px 0;
}

.b2b-kpi-item-total {
  padding-top: 10px;
}

.b2b-kpi-divider {
  height: 1px;
  background: var(--border, rgba(0,0,0,0.08));
  margin: 0;
}

.b2b-kpi-divider-indent {
  height: auto;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 6px 12px;
  font-size: 13px;
  border-left: 2px solid var(--border, rgba(0,0,0,0.1));
  margin: 2px 0 2px 8px;
}

.b2b-kpi-isk-label {
  color: var(--text-muted, #888);
  font-size: 12px;
  flex: 1;
}

.b2b-kpi-isk-val {
  font-weight: 600;
  font-size: 14px;
}

.b2b-kpi-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-expense-subtle, rgba(239,68,68,0.1));
  color: var(--color-expense, #ef4444);
  padding: 1px 6px;
  border-radius: 10px;
}

.b2b-kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.b2b-kpi-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-expense, #ef4444);
}

.b2b-kpi-item .eyebrow {
  margin-bottom: 2px;
}

.b2b-kpi-item .kpi-value {
  font-size: 22px;
}

.b2b-kpi-item-total .kpi-value {
  font-size: 24px;
}

.b2b-kpi-item-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.b2b-kpi-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-subtle, rgba(0,0,0,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #555);
}

.b2b-kpi-icon svg {
  width: 18px;
  height: 18px;
}

.b2b-kpi-item-icon .kpi-value {
  font-size: 20px;
  line-height: 1.2;
}

.b2b-kpi-item .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Rapor Merkezi (reports home) ──────────────────────────── */
.rapor-merkezi {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4px 0 48px;
}

.rh-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.rh-hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}

.rh-hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.rh-hero-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.5;
}

.rh-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.rh-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rh-meta-sep {
  opacity: 0.4;
}

.rh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.rh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  max-width: 100%;
  padding: 11px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-input);
  color: var(--muted);
}

.rh-search input {
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  width: 100%;
}

.rh-section {
  margin-bottom: 38px;
}

.rh-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.rh-section-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}

.rh-section-icon svg {
  width: 22px;
  height: 22px;
}

.rh-fav-icon {
  color: var(--favorite);
  background: rgba(var(--favorite-rgb), 0.14);
}

.rh-section-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rh-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-card);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 999px;
}

.rh-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.rh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}

.rh-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-nav);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.rh-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-card-strong);
}

.rh-chip.active {
  border-color: transparent;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  box-shadow: 0 8px 20px -12px var(--accent);
}

/* Kategori içi marka kutuları — tek sıra, taşarsa yatay kaydırma. */
.rh-brands {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  /* Kutuların toplam genişliği üst kapsayıcıya SIZMAMALI: .content grid track'i
     içeriğe göre büyüyüp tüm sayfayı yatay kaydırmalı hâle getiriyordu.
     inline-size containment ile şerit "boş" gibi ölçülür, kaydırma içeride kalır. */
  contain: inline-size;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
  margin-bottom: 18px;
}

.rh-brands::-webkit-scrollbar {
  height: 6px;
}

.rh-brands::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
}

.rh-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 172px;
  padding: 11px 16px 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.rh-brand:hover {
  border-color: var(--accent);
  background: var(--surface-card-strong);
}

.rh-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rh-brand-ini {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
}

.rh-brand-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rh-brand-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.rh-brand-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.rh-brand.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  box-shadow: 0 10px 24px -14px var(--accent);
}

.rh-brand.active .rh-brand-ini {
  color: var(--accent);
  background: var(--on-accent);
}

.rh-brand.active .rh-brand-name,
.rh-brand.active .rh-brand-count {
  color: var(--on-accent);
}

.rh-brand.active .rh-brand-count {
  opacity: 0.82;
}

.rh-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.rh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-card);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.rh-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface-card-strong);
  box-shadow: var(--shadow);
}

.rh-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rh-card.fav {
  border-color: rgba(var(--favorite-rgb), 0.28);
}

.rh-card.fav:hover {
  border-color: var(--favorite);
}

.rh-fav-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-nav);
  color: var(--muted);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.rh-fav-btn:hover {
  border-color: var(--favorite);
  color: var(--favorite);
  background: var(--surface-card-strong);
}

.rh-fav-btn.on {
  border-color: transparent;
  background: rgba(var(--favorite-rgb), 0.16);
  color: var(--favorite);
}

.rh-card-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--favorite);
}

.rh-card-title {
  margin: 0;
  padding-right: 42px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rh-card-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  flex: 1;
}

.rh-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.rh-card-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--muted);
}

.rh-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.rh-empty {
  padding: 48px 24px;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line);
  background: var(--surface-subtle);
}

.rh-empty h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.rh-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Chevron toggle inside the Raporlar nav item */
.nav-chev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 3px;
  margin-right: -3px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.nav-chev-btn:hover {
  background: var(--accent-soft);
}
.nav-chev-btn .nav-chev {
  margin-left: 0;
}
/* ===================== KOL Module ===================== */
.kol-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPI cards — mirror .ft-kpi */
.kol-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.kol-kpi {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}
.kol-kpi-val {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--text);
}
.kol-kpi-lbl { font-size: 0.76rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kol-kpi-sub { color: var(--accent); font-size: 12px; font-weight: 600; }

.kol-dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.kol-detail-cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); gap: 14px; }
.kol-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.kol-card h4 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.kol-card h5 { margin: 16px 0 8px; font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kol-listrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.kol-listrow:last-child { border-bottom: none; }
.kol-listrow-actions { display: flex; gap: 6px; flex-shrink: 0; }
.kol-muted { color: var(--muted); font-size: 13px; }
.kol-text-bad { color: #d1453b; font-weight: 600; }

/* Tables — mirror site report tables */
.kol-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card-strong); }
.kol-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kol-table th, .kol-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.kol-table thead th { background: var(--surface-soft); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; position: sticky; top: 0; }
.kol-table tbody tr:last-child td { border-bottom: none; }
.kol-table.compact th, .kol-table.compact td { padding: 7px 10px; }
.kol-row { cursor: pointer; transition: background 0.12s ease; }
.kol-row:hover { background: var(--accent-soft); }
.kol-nowrap { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Status badges */
.kol-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.kol-badge-new { background: rgba(var(--accent-rgb), 0.10); color: var(--accent); }
.kol-badge-info { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.kol-badge-warn { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.kol-badge-ok { background: rgba(16, 185, 129, 0.16); color: #047857; }
.kol-badge-bad { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

/* Forms */
.kol-form { max-width: 880px; }
.kol-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kol-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.kol-form .field > span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.kol-form-actions, .kol-inline-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.kol-form input, .kol-form select, .kol-form textarea,
.kol-modal input, .kol-modal select, .kol-modal textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input, var(--surface-card-strong));
  color: var(--text);
  width: 100%;
}
.kol-form input:focus, .kol-form select:focus, .kol-form textarea:focus,
.kol-modal input:focus, .kol-modal select:focus, .kol-modal textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kol-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface-card); transition: border-color 0.12s ease, background 0.12s ease; }
.kol-chip:hover { border-color: var(--accent); }
.kol-chip input { width: auto; }
.kol-platform-row { display: grid; grid-template-columns: 1fr 1.4fr 110px 40px; gap: 8px; margin-bottom: 8px; }

/* Detail view */
.kol-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.kol-dl dt { color: var(--muted); font-weight: 600; }
.kol-dl dd { margin: 0; color: var(--text); }
.kol-ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.kol-action-block { padding: 14px 0; border-top: 1px solid var(--line); }
.kol-action-block:first-of-type { border-top: none; padding-top: 4px; }
.kol-action-pending { background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 12px; padding: 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.25); }
.kol-warn { color: #b45309; background: rgba(245, 158, 11, 0.14); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.kol-reject-meter { font-size: 13px; margin: 10px 0; color: var(--text); }

/* Modal */
.kol-modal { max-width: 660px; width: 92%; }
.kol-product-results { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.kol-product-opt { text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-card); cursor: pointer; font-size: 13px; color: var(--text); }
.kol-product-opt:hover { background: var(--accent-soft); border-color: var(--accent); }
.kol-sharedate-row { display: block; padding: 13px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.kol-content-row { display: grid; grid-template-columns: 1fr 1fr 70px 40px; gap: 8px; margin-bottom: 8px; }
.kol-builder-h { font-size: 13px; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
.kol-builder-h:first-child { margin-top: 0; }

/* Admin KOL settings (inside Modül Yönetimi → KOL) — v2 */
/* Keep old selectors for any leftover references */
.kol-admin-subtabs { display: inline-flex; gap: 4px; margin-bottom: 18px; background: var(--surface-soft); padding: 4px; border-radius: 12px; }
.kol-subtab { padding: 8px 16px; border: none; border-radius: 9px; background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; }
.kol-subtab.active { background: var(--surface-card-strong); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.kol-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kol-chip-edit { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--accent-soft); color: var(--text); border-radius: 999px; font-size: 13px; }
.kol-chip-edit button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.kol-chain { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; background: var(--surface-card); }
.kol-chain-head { margin-bottom: 8px; }
.kol-chain-stage { padding: 8px 0; border-top: 1px dashed var(--line); }
.kol-step-pill { display: inline-block; padding: 4px 11px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-size: 12px; font-weight: 600; }

/* ── Tab bar ── */
.kol-admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.kol-atab { padding: 11px 18px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; white-space: nowrap; }
.kol-atab:hover { color: var(--text); }
.kol-atab.active { color: var(--accent); border-bottom-color: var(--accent); }
.kol-admin-body { }

/* ── Form Seçenekleri tab ── */
.kol-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.kol-opt-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; background: var(--surface-card); display: flex; flex-direction: column; gap: 0; }
.kol-opt-card-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.kol-opt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kol-dot-teal   { background: var(--accent); }
.kol-dot-amber  { background: var(--accent-3, #f4a261); }
.kol-dot-green  { background: #28784f; }
.kol-dot-purple { background: var(--accent-2, #7b2cbf); }
.kol-opt-card-title { font-size: 0.95rem; font-weight: 600; flex: 1; }
.kol-opt-count { font-family: "Space Grotesk", sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--muted); background: var(--surface-subtle, rgba(52,39,21,0.07)); padding: 2px 9px; border-radius: 999px; }
.kol-opt-hint { margin: 0 0 12px; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.kol-opt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; flex: 1; }
.kol-opt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card-strong, rgba(255,255,255,0.9)); font-size: 0.82rem; }
.kol-opt-chip-lbl { font-weight: 500; }
.kol-opt-chip-rm { display: grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(52,39,21,0.08); color: var(--muted); cursor: pointer; font-size: 0.64rem; line-height: 1; transition: background .12s, color .12s; }
.kol-opt-chip-rm:hover { background: rgba(214,40,40,0.16); color: #d62828; }
.kol-opt-add-row { display: flex; gap: 8px; }
.kol-opt-input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-input, rgba(255,255,255,0.95)); font-size: 0.84rem; color: var(--text); outline: none; font-family: inherit; transition: border-color .14s; }
.kol-opt-input:focus { border-color: var(--accent); }
.kol-opt-add-btn { border: none; border-radius: 10px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; color: var(--on-accent, #fff); background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, #0a9396)); cursor: pointer; white-space: nowrap; font-family: inherit; }

/* ── Ürün Filtresi tab ── */
.kol-pf-wrap { display: flex; flex-direction: column; gap: 16px; }
.kol-pf-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.kol-pf-count { white-space: nowrap; font-size: 0.82rem; color: var(--muted); background: var(--surface-subtle, rgba(52,39,21,0.06)); padding: 6px 12px; border-radius: 10px; }
.kol-pf-count strong { color: var(--accent); }
.kol-pf-card { display: flex; flex-direction: column; gap: 4px; }
.kol-pf-rules { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.kol-pf-rule { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kol-pf-sel { flex: 1; min-width: 130px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input, rgba(255,255,255,0.95)); font-size: 0.82rem; color: var(--text); font-family: inherit; outline: none; transition: border-color .14s; }
.kol-pf-sel:focus { border-color: var(--accent); }
.kol-pf-rm { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card); color: var(--muted); cursor: pointer; font-size: 0.78rem; transition: background .12s, color .12s, border-color .12s; }
.kol-pf-rm:hover { background: rgba(214,40,40,0.12); color: #d62828; border-color: rgba(214,40,40,0.4); }
.kol-pf-add { align-self: flex-start; border: 1px dashed var(--line); border-radius: 9px; padding: 7px 14px; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: transparent; cursor: pointer; font-family: inherit; transition: border-color .14s, background .14s; }
.kol-pf-add:hover { border-color: var(--accent); background: var(--accent-soft, rgba(10,147,150,0.08)); }
.kol-pf-sku-search { position: relative; }
.kol-pf-check { display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 12px; font-size: 0.88rem; cursor: pointer; }
.kol-pf-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.kol-pf-depots { display: flex; flex-wrap: wrap; gap: 7px; }
.kol-pf-depot { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card); color: var(--text); font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, color .12s; }
.kol-pf-depot:hover { border-color: var(--accent); }
.kol-pf-depot.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* ── Onay Zincirleri tab ── */
.kol-chain-v2 { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; background: var(--surface-card); }
.kol-chain-v2-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kol-chain-v2-name { font-size: 1rem; font-weight: 600; }
.kol-chain-v2-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--muted); background: var(--surface-subtle, rgba(52,39,21,0.06)); padding: 2px 8px; border-radius: 7px; margin-left: 8px; }
.kol-chain-edit-btn { border: 1px solid var(--line); border-radius: 9px; padding: 6px 13px; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: var(--surface-card-strong, rgba(255,255,255,0.8)); cursor: pointer; font-family: inherit; transition: border-color .14s; white-space: nowrap; }
.kol-chain-edit-btn:hover { border-color: var(--accent); }
.kol-stage-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.kol-stage-wrap { display: flex; align-items: center; gap: 8px; }
.kol-stage-card { min-width: 164px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card-strong, rgba(255,255,255,0.85)); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.kol-stage-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.kol-stage-mode { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.kol-mode-all  { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.kol-mode-any  { background: color-mix(in srgb, var(--accent-3, #f4a261) 18%, transparent); color: #ca6702; }
.kol-mode-info { background: color-mix(in srgb, var(--accent-2, #7b2cbf) 14%, transparent); color: var(--accent-2, #7b2cbf); }
.kol-stage-approvers { display: flex; flex-direction: column; gap: 6px; }
.kol-stage-approver { display: flex; align-items: center; gap: 8px; }
.kol-stage-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.62rem; color: #fff; flex-shrink: 0; }
.kol-stage-approver-name { font-size: 0.84rem; }
.kol-stage-arrow { color: var(--muted); opacity: .6; flex-shrink: 0; }

/* ── Hatırlatma & Mail tab ── */
.kol-rem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .kol-rem-grid { grid-template-columns: 1fr; } }
.kol-setting-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; background: var(--surface-card); }
.kol-setting-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.kol-setting-card-title { margin: 0 0 2px; font-size: 0.97rem; font-weight: 600; }
.kol-setting-card-hint { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; max-width: 36ch; }
/* Toggle switch */
.kol-toggle { flex-shrink: 0; position: relative; width: 44px; height: 25px; border: none; border-radius: 999px; cursor: pointer; background: rgba(52,39,21,0.18); transition: background .18s; padding: 0; }
.kol-toggle.on { background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, #0a9396)); }
.kol-toggle-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.22); transition: left .18s; }
.kol-toggle.on .kol-toggle-knob { left: 22px; }
/* Settings rows */
.kol-setting-rows { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
.kol-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(52,39,21,0.06); }
.kol-setting-row:last-child { border-bottom: none; }
.kol-setting-row-lbl { font-size: 0.86rem; }
.kol-setting-row-ctrl { display: flex; align-items: center; gap: 6px; }
.kol-num-input { width: 64px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input, rgba(255,255,255,0.95)); font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.86rem; color: var(--text); text-align: center; outline: none; transition: border-color .14s; }
.kol-num-input:focus { border-color: var(--accent); }
.kol-num-input:disabled { opacity: .45; cursor: not-allowed; }
.kol-setting-unit { font-size: 0.82rem; color: var(--muted); }
/* Mail card extras */
.kol-setting-mail-body { margin-top: 14px; }
.kol-setting-lbl-sm { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.kol-mail-tpl { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle, rgba(245,239,228,0.7)); padding: 12px; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
/* Save button */
.kol-settings-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.kol-save-btn { border: none; border-radius: 11px; padding: 9px 22px; font-size: 0.88rem; font-weight: 600; color: var(--on-accent, #fff); background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, #0a9396)); cursor: pointer; font-family: inherit; transition: opacity .14s; }
.kol-save-btn:hover { opacity: .88; }
.kol-save-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Risk Skoru tab ── */
.kol-risk-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .kol-risk-grid { grid-template-columns: 1fr; } }
.kol-slider-block { margin-bottom: 18px; }
.kol-slider-block:last-of-type { margin-bottom: 0; }
.kol-slider-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.kol-slider-lbl { font-size: 0.86rem; font-weight: 600; }
.kol-slider-val { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--accent); }
.kol-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(52,39,21,0.14); cursor: pointer; accent-color: var(--accent); outline: none; }
.kol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
.kol-slider-note { margin: 8px 0 0; font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
/* Risk preview card */
.kol-risk-preview-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle, rgba(245,239,228,0.7)); padding: 18px; }
.kol-risk-preview-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kol-risk-scenario { margin: 9px 0 16px; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.kol-risk-prob-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.kol-risk-prob { font-family: "Space Grotesk", sans-serif; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.kol-risk-lbl { font-size: 0.78rem; font-weight: 700; color: #fff; padding: 4px 11px; border-radius: 999px; }
.kol-risk-lbl-high { background: #d62828; }
.kol-risk-lbl-mid  { background: #e08b00; }
.kol-risk-lbl-low  { background: #2a9d8f; }
.kol-risk-bar-track { height: 9px; border-radius: 999px; background: rgba(52,39,21,0.1); overflow: hidden; }
.kol-risk-bar-fill { height: 100%; border-radius: 999px; transition: width .2s ease; }
.kol-risk-bar-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.68rem; color: var(--muted); }
.kol-risk-note { margin: 16px 0 0; font-size: 0.75rem; color: var(--muted); line-height: 1.5; }

/* Rejection-probability model editor + simulator (#9) */
.kol-model-grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 16px; align-items: start; }
@media (max-width: 1040px) { .kol-model-grid { grid-template-columns: 1fr; } }
.kol-model-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kol-model-row:last-child { border-bottom: none; }
.kol-model-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kol-model-lbl { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.kol-model-hint { font-size: 0.7rem; color: var(--muted); line-height: 1.35; }
.kol-model-row .kol-num-input { width: 92px; }
.kol-sim-card { position: sticky; top: 12px; }
.kol-sim-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.kol-sim-field .kol-num-input { width: 130px; text-align: left; }
.kol-textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-input, rgba(255,255,255,0.95)); font-family: inherit; font-size: 0.88rem; color: var(--text); outline: none; resize: vertical; }
.kol-textarea:focus { border-color: var(--accent); }
.kol-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: kolspin .7s linear infinite; vertical-align: -2px; }
/* İşlem yapan (aria-busy) butonlar: soluk görünüm + tıklanamaz imleç (withButtonBusy). */
button[aria-busy="true"] { opacity: 0.55 !important; filter: grayscale(0.15); cursor: not-allowed !important; pointer-events: auto !important; box-shadow: none !important; }
button[aria-busy="true"] * { pointer-events: none; }
button[aria-busy="true"] .kol-spinner { border-top-color: currentColor; }
@keyframes kolspin { to { transform: rotate(360deg); } }

/* ===================== KOL Module · v2 (dashboard + wizard) ===================== */
.kol-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:"Space Grotesk","Manrope",sans-serif; font-weight:700; font-size:0.82rem; color:#fff; flex-shrink:0; }
.kol-avatar.lg { width:46px; height:46px; font-size:1rem; }
.kol-avatar.xl { width:60px; height:60px; font-size:1.3rem; }

/* KPI attention card */
.kol-kpi-attn { border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); background: color-mix(in srgb, var(--accent-3) 9%, var(--surface-card)); }
.kol-kpi-attn .kol-kpi-val { color: color-mix(in srgb, var(--accent-3) 78%, var(--text)); }

/* Dashboard grid + cards */
.kol-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kol-card-accent { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.kol-card-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kol-card-head h4 { margin:0; font-size:0.95rem; font-weight:700; color:var(--text); }
.kol-count { font-family:"Space Grotesk",sans-serif; font-size:0.7rem; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:999px; margin-left:auto; }
.kol-count-plain { color:var(--muted); background:var(--surface-soft); }
.kol-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.kol-dot-accent { background:var(--accent); }
.kol-dot-bad { background:#d1453b; }
.kol-dot-warn { background:var(--accent-3); }
.kol-dot-ok { background:#2a9d8f; }
.kol-text-ok { color:#1f7d72; }

/* Approval rows */
.kol-appr-row { display:flex; align-items:center; gap:11px; padding:11px 12px; margin-top:8px; border-radius:14px; border:1px solid var(--line); background:var(--surface-card); cursor:pointer; transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.kol-appr-row:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 24px -18px rgba(0,0,0,0.4); }
.kol-appr-meta { min-width:0; flex:1; }
.kol-appr-meta strong { font-size:0.93rem; }
.kol-appr-actions { display:flex; gap:7px; flex-shrink:0; }

/* Share filter chips + rows */
.kol-fchips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.kol-fchip { border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:0.8rem; font-weight:600; color:var(--muted); background:var(--surface-card); cursor:pointer; transition:border-color .12s ease, color .12s ease; }
.kol-fchip:hover { border-color:var(--accent); color:var(--text); }
.kol-fchip.active { color:var(--on-accent); border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-gradient-end)); }
.kol-share-row { display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--line); }
.kol-share-meta { min-width:0; flex:1; }
.kol-share-meta strong { font-size:0.9rem; }

/* Table preview cards */
.kol-card-link { cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.kol-card-link:hover { border-color:var(--accent); box-shadow:0 18px 38px -28px rgba(0,0,0,0.5); }
.kol-link-cta { display:inline-flex; align-items:center; gap:5px; font-size:0.82rem; font-weight:600; color:var(--accent); margin-left:auto; }
.kol-preview-table { margin-top:4px; }
.kol-preview-table th { background:var(--surface-soft); }

/* Approval modal */
.kol-approval-modal { max-width:680px; width:min(680px,94%); }
.kol-approval-modal .modal-body { padding:0; }
.kol-modal-head { display:flex; align-items:flex-start; gap:13px; padding:22px 24px 16px; border-bottom:1px solid var(--line); }
.kol-modal-head h3 { margin:0; font-size:1.25rem; font-weight:600; letter-spacing:-0.01em; }
.kol-modal-sub { display:flex; align-items:center; gap:8px; margin-top:6px; }
.kol-modal-x { width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-card); color:var(--muted); cursor:pointer; font-size:14px; }
.kol-modal-grid { padding:20px 24px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.kol-modal-label { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.kol-modal-pfs { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.kol-modal-pf { display:flex; align-items:center; justify-content:space-between; font-size:0.86rem; padding:7px 11px; border-radius:10px; background:var(--surface-card); border:1px solid var(--line); }
.kol-modal-pf strong { font-family:"Space Grotesk",sans-serif; }
.kol-modal-offer { padding:0 24px 18px; }
.kol-modal-offer .kol-modal-label { display:block; margin-bottom:10px; }
/* D1 · tablo kartları — tasarımdaki gibi kenarlıklı yuvarlak kutu + başlık şeridi */
.kol-modal-tbl { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.kol-modal-tbl .kol-table { font-size:13px; }
.kol-modal-tbl .kol-table.compact th, .kol-modal-tbl .kol-table.compact td { padding:10px 13px; }
.kol-modal-tbl .kol-table thead th { background:var(--surface-subtle); }
.kol-modal-tbl .kol-table tfoot td { background:var(--surface-nav); border-top:1px solid var(--line); border-bottom:none; font-weight:600; }
.kol-modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 24px 22px; border-top:1px solid var(--line); }
.kol-modal-foot .button { display:inline-flex; align-items:center; gap:7px; }
.kol-modal-foot .button svg { width:15px; height:15px; flex:none; }
/* D1/E2 footer butonları — influencer ekranındaki da-btn (Bilgileri Düzenle/Süreci
   Sil/Yeni KOL) ile aynı görünüm; renkler site token'larıyla. */
.kol-modal-foot .da-btn, .kolb-foot .da-btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13.5px; font-weight:700; border-radius:11px; padding:10px 15px; cursor:pointer; border:1px solid transparent; transition:border-color .15s, color .15s, background .15s, box-shadow .15s, transform .15s; white-space:nowrap; }
.kol-modal-foot .da-btn svg, .kolb-foot .da-btn svg { width:16px; height:16px; flex:none; }
.kol-modal-foot .da-btn.outline, .kolb-foot .da-btn.outline { background:var(--surface-strong); border-color:var(--line); color:var(--text); }
.kol-modal-foot .da-btn.outline:hover, .kolb-foot .da-btn.outline:hover { border-color:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); }
.kol-modal-foot .da-btn.outline.danger, .kolb-foot .da-btn.outline.danger { color:var(--danger); }
.kol-modal-foot .da-btn.outline.danger:hover, .kolb-foot .da-btn.outline.danger:hover { border-color:color-mix(in srgb, var(--danger) 40%, transparent); color:var(--danger); }
.kol-modal-foot .da-btn.primary, .kolb-foot .da-btn.primary { color:var(--on-accent); background:linear-gradient(135deg, var(--accent), var(--accent-gradient-end)); box-shadow:0 6px 16px rgba(var(--accent-rgb), .24); }
.kol-modal-foot .da-btn.primary:hover, .kolb-foot .da-btn.primary:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(var(--accent-rgb), .3); }
.kol-modal-foot .da-btn:disabled, .kolb-foot .da-btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
.kol-btn-danger { background: color-mix(in srgb, #d62828 8%, transparent); color:#c62828; border:1px solid color-mix(in srgb,#d62828 38%,transparent); }

/* ── KOL Teklif Oluştur / Revize Et (E2) — katalog + stepper + toplam ── */
.kolb-modal { width:min(720px,96vw); }
.kolb-modal .modal-body { padding:0; display:block; }
.kolb-head { padding:22px 24px 16px; border-bottom:1px solid var(--line); }
.kolb-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.kolb-title { margin:5px 0 0; font-size:1.3rem; font-weight:600; letter-spacing:-0.02em; color:var(--text); }
.kolb-body { padding:20px 24px; }
.kolb-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 24px 20px; border-top:1px solid var(--line); background:var(--surface-nav); }
.kolb-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.kolb-label:not(:first-child) { margin-top:22px; }
.kolb-search { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-input); margin-bottom:10px; }
.kolb-search svg { width:17px; height:17px; color:var(--muted); flex-shrink:0; }
.kolb-modal .kolb-search input { border:0; padding:0; background:transparent; font-size:0.9rem; }
.kolb-modal .kolb-search input:focus { box-shadow:none; }
.kolb-filters { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.kolb-modal .kolb-filters select { font-size:0.82rem; color:var(--muted); }
.kolb-catalog { border:1px solid var(--line); border-radius:14px; overflow:hidden; overflow-y:auto; max-height:246px; background:var(--surface-card); }
.kolb-cat-row { display:flex; align-items:center; gap:14px; padding:12px 15px; border-bottom:1px solid var(--line); background:var(--surface-strong); }
.kolb-cat-row:nth-child(even) { background:var(--surface-card); }
.kolb-cat-row:last-child { border-bottom:0; }
.kolb-cat-row.added { opacity:0.6; }
.kolb-cat-info { flex:1; min-width:0; }
.kolb-cat-name { font-size:0.9rem; font-weight:700; color:var(--text); }
.kolb-cat-crumb { font-size:0.7rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.kolb-cat-price { text-align:right; white-space:nowrap; }
.kolb-cat-amt { font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:0.9rem; color:var(--text); }
.kolb-cat-amt span { font-size:0.7rem; color:var(--muted); font-weight:600; }
.kolb-cat-stock { font-size:0.7rem; color:var(--muted); margin-top:2px; }
.kolb-cat-stock b { font-family:"Space Grotesk",sans-serif; color:var(--text); }
.kolb-add-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent); border-radius:11px; padding:8px 15px; font:inherit; font-size:0.83rem; font-weight:600; color:var(--accent); background:var(--surface-strong); cursor:pointer; transition:background .12s,border-color .12s; }
.kolb-add-btn svg { width:13px; height:13px; }
.kolb-add-btn:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent); }
.kolb-add-btn:disabled { border-style:solid; border-color:var(--line); color:var(--muted); cursor:default; }
.kolb-count { font-size:0.78rem; color:var(--muted); margin-top:8px; }
.kolb-picked { display:flex; flex-direction:column; gap:8px; }
.kolb-pick-row { display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:14px; border:1px solid var(--line); background:var(--surface-strong); }
.kolb-pick-info { flex:1; min-width:0; }
.kolb-pick-sub { font-size:0.8rem; color:var(--muted); margin-top:3px; }
.kolb-pick-sub b { font-family:"Space Grotesk",sans-serif; color:var(--text); font-weight:700; }
.kolb-low { color:var(--danger); }
.kolb-stepper { display:flex; align-items:center; border-radius:10px; border:1px solid var(--line); background:var(--surface-strong); overflow:hidden; }
.kolb-stepper button { width:34px; height:32px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; }
.kolb-stepper button:hover { background:var(--accent-soft); color:var(--accent); }
.kolb-stepper span { min-width:26px; text-align:center; font-family:"Space Grotesk",sans-serif; font-size:0.9rem; font-weight:600; color:var(--text); }
.kolb-pick-x { flex-shrink:0; width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface-card); color:var(--muted); cursor:pointer; }
.kolb-pick-x:hover { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); }
.kolb-total { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-radius:12px; background:var(--accent-soft); margin-top:12px; }
.kolb-total > span { font-size:0.85rem; font-weight:600; color:var(--text); }
.kolb-total-v { font-family:"Space Grotesk",sans-serif; color:var(--accent); font-size:1.05rem; font-weight:700; }
.kolb-add { border:1px solid var(--line); border-radius:11px; padding:8px 14px; font:inherit; font-size:0.83rem; font-weight:600; color:var(--accent); background:var(--surface-card); cursor:pointer; margin-top:2px; }
.kolb-add:hover { border-color:var(--accent); }
.kolb-summary { margin-top:16px; }
.kolb-muted { color:var(--muted); font-size:0.85rem; }
.kolb-pad { padding:14px; margin:0; text-align:center; }
/* Yazı boyutu 14px + paylaşım planı satırı hizası */
.kolb-modal .kolb-search input, .kolb-modal .kolb-filters select,
.kolb-cat-name, .kolb-pick-info .kolb-cat-name,
.kolb-body .kol-content-row select, .kolb-body .kol-content-row input { font-size:14px; }
.kolb-body .kol-content-row { grid-template-columns:1fr 1fr 70px 32px; align-items:center; }
.kolb-body .kol-content-row .kolb-pick-x { width:32px; height:38px; }

/* Wizard */
.kol-wizard { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; }
.kol-stepper { display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-bottom:22px; }
.kol-step { display:flex; align-items:center; gap:9px; }
.kol-step-c { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:0.82rem; flex-shrink:0; }
.kol-step-c.active { color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-gradient-end)); }
.kol-step-c.done { color:#fff; background:#2a9d8f; }
.kol-step-c.todo { color:var(--muted); background:var(--surface-card); border:1px solid var(--line); }
.kol-step-lbl { font-size:0.86rem; font-weight:600; color:var(--muted); }
.kol-step.current .kol-step-lbl { color:var(--text); }
.kol-step-bar { width:34px; height:2px; background:var(--line); margin:0 14px; }
.kol-wstep-card { border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface-card); padding:22px; min-height:300px; }
.kol-step-title { margin:0 0 4px; font-size:1.05rem; font-weight:600; }
.kol-wgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kol-wfield { display:flex; flex-direction:column; gap:6px; }
.kol-wfield > span { font-size:0.82rem; font-weight:600; color:var(--muted); }
.kol-wfield input, .kol-wfield select { padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface-input, var(--surface-card-strong)); color:var(--text); font-size:0.9rem; outline:none; width:100%; }
.kol-wfield input:focus, .kol-wfield select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.kol-wlabel { display:block; font-size:0.82rem; font-weight:600; color:var(--muted); margin-bottom:10px; }
.kol-areachips { display:flex; flex-wrap:wrap; gap:8px; }
.kol-areachip { padding:8px 14px; border-radius:999px; border:1px solid var(--line); font-size:0.85rem; color:var(--muted); background:var(--surface-card); cursor:pointer; transition:border-color .12s ease; }
.kol-areachip:hover { border-color:var(--accent); }
.kol-areachip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600; }
.kol-wpf-row { display:grid; grid-template-columns:1.2fr 0.8fr auto; gap:10px; margin-bottom:10px; }
.kol-wpf-row select, .kol-wpf-row input { padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface-input, var(--surface-card-strong)); color:var(--text); font-size:0.9rem; outline:none; }
.kol-wpf-x { border:1px solid var(--line); border-radius:11px; padding:0 14px; color:var(--muted); background:var(--surface-card); cursor:pointer; }
.kol-wizard-foot { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:12px; }
.kol-step-count { font-family:"Space Grotesk",sans-serif; font-size:0.8rem; font-weight:600; color:var(--muted); }

/* Live preview aside */
.kol-wizard-aside { border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface-card); padding:22px; position:sticky; top:20px; }
.kol-prev-label { font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.kol-prev-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 8px 14px; text-align:center; }
.kol-prev-name { margin:6px 0 0; font-size:1.05rem; font-weight:600; }
.kol-prev-areas { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.kol-prev-area { font-size:0.74rem; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:3px 10px; border-radius:999px; }
.kol-prev-pf { display:flex; align-items:center; justify-content:space-between; font-size:0.84rem; padding:8px 0; border-top:1px solid var(--line); }
.kol-prev-pf strong { font-family:"Space Grotesk",sans-serif; }
.kol-prev-total { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.kol-prev-total strong { font-family:"Space Grotesk",sans-serif; font-size:1.15rem; font-weight:700; color:var(--accent); }
.kol-prev-empty { display:flex; flex-direction:column; align-items:center; gap:13px; padding:26px 8px 16px; text-align:center; }
.kol-prev-empty-ic { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:var(--surface-soft); }
.kol-prev-empty-t { margin:0; font-size:0.92rem; font-weight:600; color:var(--muted); }
.kol-prev-stats { border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.kol-prev-stats > div { display:flex; align-items:center; justify-content:space-between; }
.kol-prev-stats span { font-size:0.82rem; color:var(--muted); }
.kol-prev-stats strong { font-family:"Space Grotesk",sans-serif; color:var(--muted); }

@media (max-width: 900px) {
  .kol-dash-grid { grid-template-columns:1fr; }
  .kol-wizard { grid-template-columns:1fr; }
  .kol-wizard-aside { position:static; }
  .kol-wgrid { grid-template-columns:1fr; }
}

/* ── Kar Raporu tab bar — sola yaslı pill'ler ────────────────────────────────
   Excel butonu mutlak konumlu (sağ uçta durur), bu yüzden pill'lerin altına
   kaymaması için barın sağında yer bırakılır. */
.kar-tab-bar {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-right: 56px;
  margin-bottom: 18px;
}
.kar-tab {
  background: var(--surface-input);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kar-tab:hover:not(.active) { border-color: var(--accent); color: var(--text); }
.kar-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  border-color: var(--accent);
  color: #fffdf8;
}

/* ── Kar Raporu table cell helpers ───────────────────────────────────────── */
.kar-raporu-table td {
  height: 56px;          /* iki satırlık sabit yükseklik */
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}
.kar-nowrap { white-space: nowrap; }
.kar-text-cell { max-width: 200px; }
.kar-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.kar-neg { color: var(--danger); }
.kar-invoice-detail-table { font-size: 14px; }
.kar-invoice-detail-table td { height: 56px; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.kar-row-danger td { background-color: rgba(214, 40, 40, 0.09) !important; }
.kar-row-warn td   { background-color: rgba(230, 126, 34, 0.10) !important; }

/* Tablo içi dikey scroll — başlık satırı sabit kalır (sticky thead zaten tanımlı) */
.kar-table-scroll {
  max-height: calc(100vh - 280px);
  min-height: 220px;
  overflow: auto;
}

/* Geniş tablo iki ayrı GRID katmanını birlikte taşırıyordu:
     main.content        → grid item `.panel`
     .report-main-stack  → grid item `.report-section`
   İkisinin de varsayılan `min-width:auto` değeri, `nowrap` para hücrelerinden
   gelen büyük min-content genişliğine kilitleniyordu; sağ rapor paneli açılınca
   sayfa sıkışmıyor, yatayda kayıyordu. SADECE `.panel`'i kısmak yetmez —
   `.report-section` kısılmazsa tablo kartın dışına taşar. İkisi birlikte:
   tablo kendi kabında (.kar-table-scroll) kayar, kart ve sayfa sabit kalır. */
.panel:has(.kar-table-scroll),
.report-section:has(.kar-table-scroll) { min-width: 0; }

/* =====================================================================
   Language switcher (profile menu) — desktop sidebar footer + mobile sheet
   ===================================================================== */
.acct-lang-row {
  display: flex;
  gap: 5px;
  padding: 0 4px 5px;
}
.acct-lang-btn {
  flex: 1;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.acct-lang-btn:hover { color: var(--accent); }
.acct-lang-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

/* =====================================================================
   Mobile chrome — bottom tab bar, bottom sheet, filter FAB.
   Hidden on desktop entirely; shown only under the mobile breakpoint.
   Themed purely with existing tokens so graphite + dark mode just work.
   ===================================================================== */
.mobile-tabbar,
.mobile-sheet,
.mobile-scrim,
.mobile-filter-fab { display: none; }

.mobile-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab svg { width: 23px; height: 23px; }
.mtab-lbl { font-size: 10px; font-weight: 600; }
.mobile-tab.active { color: var(--accent); }
.mobile-tab.active .mtab-lbl { font-weight: 700; }
.mtab-av {
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #14a89f));
}
.mobile-tab.active .mtab-av {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.mobile-filter-fab {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 50px; height: 50px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.mobile-filter-fab svg { width: 22px; height: 22px; }

.mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 12, 4, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mobile-scrim.open { opacity: 1; }

.mobile-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 71;
  max-height: 86vh;
  overflow-y: auto;
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-sheet.open { transform: translateY(0); }
.mobile-sheet-grab {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 4px auto 14px;
}

/* Mobile profile sheet contents */
.msheet-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.msheet-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #14a89f));
  flex-shrink: 0;
}
.msheet-id { min-width: 0; }
.msheet-id strong { display: block; font-size: 17px; font-weight: 700; }
.msheet-id span { font-size: 12.5px; color: var(--muted); }
.msheet-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 6px 2px 8px;
}
.msheet-seg {
  display: flex; gap: 6px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px;
}
.msheet-seg button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.msheet-seg button svg { width: 17px; height: 17px; }
.msheet-seg button.on { background: var(--accent-soft); color: var(--accent); }
.msheet-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden; margin: 6px 0 12px;
}
.msheet-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 0; background: none;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer;
}
.msheet-list .msheet-row + .msheet-row { border-top: 1px solid var(--line); }
.msheet-row.danger {
  width: 100%; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: var(--radius-md); color: var(--danger); justify-content: center;
}
.msheet-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.msheet-ic svg { width: 18px; height: 18px; }
.msheet-row.danger .msheet-ic { background: transparent; color: var(--danger); width: 18px; height: 18px; }

@media (max-width: 768px) {
  /* Reveal mobile chrome (respecting the [hidden] attribute toggled by JS) */
  .mobile-tabbar:not([hidden]) { display: flex; align-items: stretch; }
  .mobile-filter-fab:not([hidden]) { display: grid; }
  .mobile-scrim:not([hidden]) { display: block; }
  .mobile-sheet:not([hidden]) { display: block; }

  /* Hide desktop chrome */
  .sidebar,
  .report-sidebar,
  .report-sidebar-rail,
  .sidebar-rail-toggle,
  .report-filter-clear-rail { display: none !important; }

  /* Override the high-specificity body-state rules that force the rails visible
     (e.g. `body.report-sidebar-collapsed .report-sidebar-rail:not(.hidden)`).
     Matching specificity + later source order wins. */
  body.report-sidebar-collapsed .report-sidebar-rail:not(.hidden),
  body.report-sidebar-visible:not(.report-sidebar-collapsed) .report-sidebar-rail:not(.hidden),
  body.report-sidebar-visible .report-filter-clear-rail:not(.hidden),
  body.report-sidebar-collapsed .report-filter-clear-rail:not(.hidden) { display: none !important; }

  /* Full-bleed shell + room for the tab bar */
  .shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .content { padding: 0 !important; }
  .panel { padding: 16px 14px !important; border-radius: 0 !important; }

  /* Tables scroll horizontally instead of overflowing the viewport */
  .table-wrap,
  .ft-table-wrap,
  .kol-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* KPI / stat strips: let them scroll horizontally rather than squash */
  .stat-grid { grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The login split collapses to a single column on phones */
  .login-split { grid-template-columns: 1fr !important; }
  .login-right { display: none !important; }
}

/* =====================================================================
   Mobile page designs (home launcher, compact reports list, report tweaks)
   ===================================================================== */

/* =====================================================================
   Home module launcher (desktop + mobile) — from "BOEMAR Anasayfa" design.
   Replaces the empty widget dashboard on the home screen with module cards.
   ===================================================================== */
.home-launcher { max-width: 1280px; margin: 0 auto; padding-top: 8px; }
.home-launcher .hl-head { margin: 0 2px 26px; }
.home-launcher .hl-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.home-launcher .hl-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--text); }
.home-launcher .hl-sub { font-size: 14px; color: var(--muted); margin-top: 8px; }
.home-launcher .hl-group-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 4px 2px 14px; }
.home-launcher .mod-grid + .hl-group-label { margin-top: 30px; }

/* auto-fill keeps cards a consistent size across the favourites / all groups */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 22px; }
.mod-card-wrap { position: relative; display: flex; }
.mod-fav {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-nav); color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mod-fav svg { width: 17px; height: 17px; }
.mod-fav:hover { color: var(--favorite, #ca6702); border-color: var(--favorite, #ca6702); }
.mod-fav.on { color: var(--favorite, #ca6702); border-color: transparent; background: rgba(var(--favorite-rgb, 202 103 2), 0.16); }
.mod-card {
  flex: 1; min-width: 0;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 28px 24px; min-height: 216px;
  display: flex; flex-direction: column;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mod-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 10px 30px rgba(65,38,10,0.10); }
body[data-theme="dark"] .mod-card:hover { box-shadow: 0 12px 34px rgba(0,0,0,0.4); }
.mod-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; margin-bottom: 22px; }
.mod-icon svg { width: 26px; height: 26px; }
.mod-icon.teal { background: linear-gradient(135deg, #006d77, #0a9396); }
.mod-icon.warm { background: linear-gradient(135deg, #bb3e03, #ca6702); }
.mod-icon.amber { background: linear-gradient(135deg, #b06b00, #d6920a); }
.mod-icon.green { background: linear-gradient(135deg, #1f8a5b, #2a9d8f); }
.mod-icon.violet { background: linear-gradient(135deg, #5b2cbf, #7b2cbf); }
.mod-icon.slate { background: linear-gradient(135deg, #485866, #6f8290); }
.mod-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 7px; padding-right: 38px; letter-spacing: -.01em; color: var(--text); }
.mod-card .mod-sub { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.mod-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.mod-foot .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); flex-shrink: 0; }
.mod-foot .arr { margin-left: auto; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.mod-foot .arr svg { width: 15px; height: 15px; }
/* report-list row icon + chevron: mobile-only (hidden on the desktop card grid) */
.rh-row-ic, .rh-row-chev { display: none; }

@media (max-width: 768px) {
  /* tighter launcher on phones */
  .home-launcher .hl-head { margin-bottom: 16px; }
  .home-launcher .hl-title { font-size: 27px; }
  .mod-card { min-height: 0; padding: 16px 16px 14px; border-radius: 14px; }
  .mod-icon { width: 44px; height: 44px; margin-bottom: 12px; }

  /* Reports directory → compact, list-like rows */
  .rapor-merkezi .rh-hero { display: block; }
  .rapor-merkezi .rh-hero-title { font-size: 26px; }
  .rapor-merkezi .rh-search { width: 100%; margin-top: 12px; }
  .rapor-merkezi .rh-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  }
  .rapor-merkezi .rh-chips::-webkit-scrollbar { height: 0; }
  .rapor-merkezi .rh-chip { flex-shrink: 0; }
  /* marka kutuları: kenardan kenara kaydırılabilir, daha kompakt */
  .rapor-merkezi .rh-brands {
    margin: 0 -14px 14px; padding-left: 14px; padding-right: 14px;
  }
  .rapor-merkezi .rh-brands::-webkit-scrollbar { height: 0; }
  .rapor-merkezi .rh-brand { min-width: 0; padding: 9px 14px 9px 10px; }
  /* card grid → single bordered list with divided rows (icon · name/meta · chevron) */
  .rapor-merkezi .rh-grid {
    grid-template-columns: 1fr; gap: 0;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
  }
  .rapor-merkezi .rh-card {
    display: grid; grid-template-columns: 36px 1fr 18px; align-items: center;
    column-gap: 12px; row-gap: 2px;
    padding: 13px 14px; min-height: 0;
    border: 0; border-radius: 0; background: transparent;
  }
  .rapor-merkezi .rh-card:hover { transform: none; box-shadow: none; border: 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .rapor-merkezi .rh-card + .rh-card { border-top: 1px solid var(--line); }
  .rapor-merkezi .rh-card-cat,
  .rapor-merkezi .rh-card-desc,
  .rapor-merkezi .rh-fav-btn,
  .rapor-merkezi .rh-open { display: none; }
  .rapor-merkezi .rh-row-ic {
    display: grid; place-items: center; grid-row: 1 / 3; grid-column: 1;
    width: 36px; height: 36px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  }
  .rapor-merkezi .rh-row-ic svg { width: 18px; height: 18px; }
  .rapor-merkezi .rh-card-title {
    grid-row: 1; grid-column: 2; padding-right: 0; margin: 0;
    font-size: 14.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rapor-merkezi .rh-card-foot {
    grid-row: 2; grid-column: 2; margin: 0; padding: 0; border: 0;
    justify-content: flex-start; gap: 6px;
  }
  .rapor-merkezi .rh-card-updated { font-size: 11.5px; color: var(--faint); }
  .rapor-merkezi .rh-row-chev {
    grid-row: 1 / 3; grid-column: 3; display: grid; place-items: center;
    width: 18px; height: 18px; color: var(--faint);
  }
  .rapor-merkezi .rh-row-chev svg { width: 18px; height: 18px; }

  /* In-report page: keep the report's own chart/table designs, just fit width */
  .report-main-stack { gap: 12px; }
  .report-main-stack table { min-width: max-content; }
  .report-main-stack .table-wrap,
  .report-main-stack [class*="table-wrap"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   Mobile responsiveness for module pages (foreign trade, etc.)
   Desktop layouts use wide multi-column grids; stack them on mobile so
   nothing forces the page wider than the viewport. Wide tables scroll.
   ===================================================================== */
@media (max-width: 768px) {
  /* let grid/flex children shrink instead of forcing the page wide */
  .content, .panel, .ft-main, .report-main-stack { min-width: 0; }

  /* Foreign Trade */
  .ft-main { padding: 16px 14px 40px !important; }
  .ft-head { flex-direction: column; gap: 12px; }
  .ft-head-r { width: 100%; flex-wrap: wrap; }
  .ft-kpis { grid-template-columns: 1fr !important; }
  .ft-kpi, .ft-kpi.accent, .ft-kpi-pipe { grid-column: auto !important; }
  .ft-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .ft-table-wrap table { min-width: max-content; }
}

/* Report / settings / admin grids — stack or scroll on mobile so report
   content keeps its chart designs but fits the screen (no page overflow). */
@media (max-width: 768px) {
  /* KPI card grids → swipeable horizontal strip (matches the mobile report design) */
  .cari-rontgen-kpi-grid,
  .cari-rontgen-general-kpi-grid {
    display: flex !important; grid-template-columns: none !important;
    gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -14px 14px; padding: 0 14px 4px;
  }
  .cari-rontgen-kpi-grid::-webkit-scrollbar,
  .cari-rontgen-general-kpi-grid::-webkit-scrollbar { height: 0; }
  .cari-rontgen-kpi-grid > *,
  .cari-rontgen-general-kpi-grid > * { flex: 0 0 auto; min-width: 150px; }

  /* other report grids stack */
  .net-sales-category-grid,
  .skeleton-net-sales-kpi,
  .income-date-filter-controls,
  .settings-hero-stats { grid-template-columns: 1fr !important; }

  /* admin user "table" (grid rows) scrolls horizontally instead of overflowing */
  .admin-users-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-ulist-head, .admin-urow { min-width: 600px; }
}

/* ===================== KOL Detay kartı — Tasarım A2 (Birleşik) ===================== */
.kol-detail-a2{
  --card:#fffdf9; --line:rgba(52,39,21,.10); --line-2:rgba(52,39,21,.07);
  --ok:#2a9d8f; --ok-bg:rgba(42,157,143,.12);
  --warm:#ca6702; --warm-bg:rgba(202,103,2,.10);
  --faint:#9a8870; --bad:#bb3e03; --bad-bg:rgba(187,62,3,.10); --accent-end:#0a9396;
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; color:var(--text);
}
.kol-detail-a2 svg{display:block;}

/* topbar */
.kol-detail-a2 .da-topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.kol-detail-a2 .da-bc{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--faint);}
.kol-detail-a2 .da-bc svg{width:14px; height:14px;} .kol-detail-a2 .da-bc b{color:var(--text); font-weight:700;} .kol-detail-a2 .da-bc span{font-weight:600;}
.kol-detail-a2 .da-back{width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); cursor:pointer; display:grid; place-items:center; margin-right:4px;}
.kol-detail-a2 .da-back svg{width:17px; height:17px;} .kol-detail-a2 .da-back:hover{color:var(--accent); border-color:rgba(0,109,119,.3);}
.kol-detail-a2 .da-actions{display:flex; align-items:center; gap:9px;}
.kol-detail-a2 .da-btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13.5px; font-weight:700; border-radius:11px; padding:10px 15px; cursor:pointer; border:1px solid transparent; transition:all .15s; white-space:nowrap;}
.kol-detail-a2 .da-btn svg{width:16px; height:16px;}
.kol-detail-a2 .da-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-end)); color:#fff; box-shadow:0 6px 16px rgba(0,109,119,.24);}
.kol-detail-a2 .da-btn.primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,109,119,.3);}
.kol-detail-a2 .da-btn.outline{background:var(--card); border-color:var(--line); color:var(--text);} .kol-detail-a2 .da-btn.outline:hover{border-color:rgba(0,109,119,.3); color:var(--accent);}
.kol-detail-a2 .da-btn.outline.danger{color:var(--bad);} .kol-detail-a2 .da-btn.outline.danger:hover{border-color:rgba(187,62,3,.4); color:var(--bad);}
.kol-detail-a2 .da-btn.ghost{background:transparent; color:var(--muted);} .kol-detail-a2 .da-btn.ghost:hover{background:rgba(52,39,21,.05); color:var(--text);}
.kol-detail-a2 .da-btn.sm{padding:8px 13px; font-size:12.5px;}

/* teal identity header */
.kol-detail-a2 .a2-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-radius:20px; padding:24px 26px; color:#eef6f5;
  background:radial-gradient(circle at 92% -30%, rgba(202,103,2,.3), transparent 50%), linear-gradient(150deg,#0a8a90,#006d77 55%,#024e56);
  box-shadow:0 16px 44px rgba(0,109,119,.22);}
.kol-detail-a2 .a2-head-main{display:flex; gap:18px; min-width:0;}
.kol-detail-a2 .a2-av{flex-shrink:0; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:22px; font-weight:800; color:var(--accent); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18);}
.kol-detail-a2 .a2-name-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.kol-detail-a2 .a2-name-row h1{font-size:25px; font-weight:700; letter-spacing:-.02em; margin:0; color:#fff;}
.kol-detail-a2 .a2-status{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff;}
.kol-detail-a2 .a2-status .dot{width:7px; height:7px; border-radius:50%; background:#fff;}
.kol-detail-a2 .a2-status.warm{background:rgba(255,196,120,.24); color:#ffe6c6;} .kol-detail-a2 .a2-status.warm .dot{background:#ffcf8e;}
.kol-detail-a2 .a2-status.ok{background:rgba(173,255,221,.22); color:#cffae6;} .kol-detail-a2 .a2-status.ok .dot{background:#8ef0c4;}
.kol-detail-a2 .a2-status.bad{background:rgba(255,170,150,.22); color:#ffd9cd;} .kol-detail-a2 .a2-status.bad .dot{background:#ff9f86;}
.kol-detail-a2 .a2-neg{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#ffe6c6; background:rgba(255,196,120,.18); padding:5px 11px; border-radius:999px;} .kol-detail-a2 .a2-neg svg{width:13px; height:13px;}
.kol-detail-a2 .a2-contact{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:11px;}
.kol-detail-a2 .a2-c{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.85); text-decoration:none;} .kol-detail-a2 .a2-c svg{width:14px; height:14px; color:rgba(255,255,255,.6);} .kol-detail-a2 a.a2-c:hover{color:#fff;}
.kol-detail-a2 .a2-areas{display:flex; align-items:center; gap:7px; margin-top:13px; flex-wrap:wrap;}
.kol-detail-a2 .a2-area{font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,.15); padding:4px 11px; border-radius:999px;}
.kol-detail-a2 .a2-id-num{font-size:12px; color:rgba(255,255,255,.6); margin-left:4px;}
.kol-detail-a2 .a2-reach{display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end;}
.kol-detail-a2 .a2-reach-tile{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:74px; padding:12px 10px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);}
.kol-detail-a2 .a2-reach-tile.total{background:rgba(255,255,255,.92); color:var(--accent);}
.kol-detail-a2 .a2-reach-ic{width:20px; height:20px; color:rgba(255,255,255,.8); margin-bottom:2px;} .kol-detail-a2 .a2-reach-tile.total .a2-reach-ic{color:var(--accent);} .kol-detail-a2 .a2-reach-ic svg{width:20px; height:20px;}
.kol-detail-a2 .a2-reach-tile b{font-size:17px; font-weight:800; letter-spacing:-.01em; color:#fff;} .kol-detail-a2 .a2-reach-tile.total b{color:var(--accent);}
.kol-detail-a2 .a2-reach-tile small{font-size:10.5px; font-weight:600; color:rgba(255,255,255,.65);} .kol-detail-a2 .a2-reach-tile.total small{color:var(--accent);}

/* pipeline */
.kol-detail-a2 .da-pipe{display:flex; align-items:flex-start; gap:0; margin:18px 0 20px; padding:18px 22px; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow-x:auto;}
.kol-detail-a2 .da-stage{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:90px;}
.kol-detail-a2 .da-stage-dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800; background:rgba(52,39,21,.07); color:var(--faint); border:1.5px solid transparent; z-index:1;}
.kol-detail-a2 .da-stage-dot svg{width:15px; height:15px;}
.kol-detail-a2 .da-stage-l{font-size:11.5px; font-weight:600; color:var(--faint); text-align:center; line-height:1.25;}
.kol-detail-a2 .da-stage-line{position:absolute; top:15px; left:50%; width:100%; height:2px; background:rgba(52,39,21,.1); z-index:0;}
.kol-detail-a2 .da-stage.done .da-stage-dot{background:var(--ok); color:#fff;} .kol-detail-a2 .da-stage.done .da-stage-l{color:var(--muted);} .kol-detail-a2 .da-stage.done .da-stage-line{background:var(--ok);}
.kol-detail-a2 .da-stage.cur .da-stage-dot{background:var(--accent); color:#fff; border-color:rgba(0,109,119,.25); box-shadow:0 0 0 4px rgba(0,109,119,.14);} .kol-detail-a2 .da-stage.cur .da-stage-l{color:var(--accent); font-weight:800;}

/* grid + tabs */
.kol-detail-a2 .a2-grid{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start;}
.kol-detail-a2 .da-col-main{min-width:0;}
.kol-detail-a2 .da-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.kol-detail-a2 .da-tab{position:relative; font:inherit; font-size:14px; font-weight:700; color:var(--muted); background:none; border:none; padding:11px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color .15s;}
.kol-detail-a2 .da-tab-c{font-size:11px; font-weight:800; color:var(--faint); background:rgba(52,39,21,.07); padding:1px 7px; border-radius:999px;}
.kol-detail-a2 .da-tab:hover{color:var(--text);}
.kol-detail-a2 .da-tab.on{color:var(--accent);} .kol-detail-a2 .da-tab.on .da-tab-c{background:rgba(0,109,119,.12); color:var(--accent);}
.kol-detail-a2 .da-tab.on::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2.5px; border-radius:3px; background:var(--accent);}
.kol-detail-a2 .da-tabbody{display:flex; flex-direction:column; gap:16px;}

.kol-detail-a2 .da-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px;}
.kol-detail-a2 .da-card.active{border-color:rgba(0,109,119,.28); box-shadow:0 0 0 3px rgba(0,109,119,.06);}
.kol-detail-a2 .da-card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.kol-detail-a2 .da-h{font-size:15px; font-weight:700; margin:0;}
.kol-detail-a2 .da-note{font-size:14px; line-height:1.6; color:var(--muted); margin:0;}
.kol-detail-a2 .da-offer-sum{display:flex; gap:30px; padding:4px 0 14px; flex-wrap:wrap;}
.kol-detail-a2 .da-offer-sum div{display:flex; flex-direction:column; gap:3px;} .kol-detail-a2 .da-offer-sum small{font-size:11.5px; color:var(--faint); font-weight:600;} .kol-detail-a2 .da-offer-sum b{font-size:19px; font-weight:800; letter-spacing:-.01em;}
.kol-detail-a2 .da-content-mini{font-size:13px !important; font-weight:600 !important; color:var(--muted);}
.kol-detail-a2 .da-review-note{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--muted); background:rgba(0,109,119,.05); border:1px solid rgba(0,109,119,.14); border-radius:11px; padding:11px 13px; margin:0 0 14px;} .kol-detail-a2 .da-review-note svg{width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--accent);}
.kol-detail-a2 .da-offer-actions{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.kol-detail-a2 .da-link{font:inherit; font-size:13px; font-weight:700; color:var(--accent); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:0;} .kol-detail-a2 .da-link svg{width:14px; height:14px;} .kol-detail-a2 .da-link:hover{gap:7px;}
.kol-detail-a2 .da-cur-tag{font-size:10.5px; font-weight:800; color:var(--accent); background:rgba(0,109,119,.12); padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;}
.kol-detail-a2 .da-offer-date{font-size:12.5px; color:var(--faint); font-weight:600;}
.kol-detail-a2 .da-table{width:100%; border-collapse:collapse; font-size:13px;}
.kol-detail-a2 .da-table th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:0 10px 10px; border-bottom:1px solid var(--line);}
.kol-detail-a2 .da-table td{padding:11px 10px; border-bottom:1px solid var(--line-2);}
.kol-detail-a2 .da-table tr:last-child td{border-bottom:none;}
.kol-detail-a2 .da-table .num{text-align:right;} .kol-detail-a2 .da-table .mono{font-family:ui-monospace,Menlo,monospace; color:var(--muted); font-size:12px;}
.kol-detail-a2 .da-offer-foot{display:flex; align-items:center; justify-content:space-between; margin:14px 0; padding-top:14px; border-top:1.5px solid var(--line); font-size:13px; color:var(--muted); gap:12px; flex-wrap:wrap;} .kol-detail-a2 .da-offer-foot b{font-size:16px; font-weight:800; color:var(--text);}

.kol-detail-a2 .da-plan{display:flex; flex-direction:column; gap:10px;}
.kol-detail-a2 .da-plan-row{display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px;}
.kol-detail-a2 .da-plan-ic{width:30px; height:30px; color:var(--accent);} .kol-detail-a2 .da-plan-ic svg{width:24px; height:24px;}
.kol-detail-a2 .da-plan-info b{font-size:14px; font-weight:700; display:block;} .kol-detail-a2 .da-plan-info small{font-size:12px; color:var(--faint);}
.kol-detail-a2 .da-plan-date{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600;} .kol-detail-a2 .da-plan-date svg{width:14px; height:14px; color:var(--faint);}

.kol-detail-a2 .da-files{display:flex; flex-direction:column; gap:11px;}
.kol-detail-a2 .da-file{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:14px 16px;}
.kol-detail-a2 .da-file-ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--warm); background:var(--warm-bg);} .kol-detail-a2 .da-file-ic svg{width:20px; height:20px;}
.kol-detail-a2 .da-file-info{flex:1; min-width:0;} .kol-detail-a2 .da-file-info b{font-size:14px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis;} .kol-detail-a2 .da-file-info small{font-size:12px; color:var(--faint);}
.kol-detail-a2 .da-file-dl{width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); cursor:pointer; display:grid; place-items:center;} .kol-detail-a2 .da-file-dl svg{width:17px; height:17px;} .kol-detail-a2 .da-file-dl:hover{color:var(--accent); border-color:rgba(0,109,119,.3);}

.kol-detail-a2 .da-timeline{list-style:none; margin:0; padding:0;}
.kol-detail-a2 .da-tl-item{position:relative; display:flex; gap:14px; padding-bottom:20px;}
.kol-detail-a2 .da-tl-item::before{content:""; position:absolute; left:16px; top:34px; bottom:-2px; width:2px; background:var(--line);}
.kol-detail-a2 .da-tl-item:last-child{padding-bottom:0;} .kol-detail-a2 .da-tl-item:last-child::before{display:none;}
.kol-detail-a2 .da-tl-ic{flex-shrink:0; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:rgba(0,109,119,.08); z-index:1;} .kol-detail-a2 .da-tl-ic svg{width:17px; height:17px;}
.kol-detail-a2 .da-tl-body p{font-size:14px; margin:0 0 3px; font-weight:600;} .kol-detail-a2 .da-tl-body small{font-size:12px; color:var(--faint);}

/* side cards */
.kol-detail-a2 .da-side-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
.kol-detail-a2 .da-side-card.next{background:linear-gradient(150deg,rgba(0,109,119,.07),rgba(202,103,2,.05)); border-color:rgba(0,109,119,.18);}
.kol-detail-a2 .da-side-eyebrow{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.14em; font-weight:700; color:var(--faint); margin:0 0 14px;} .kol-detail-a2 .da-side-eyebrow svg{width:14px; height:14px;}
.kol-detail-a2 .da-next-txt{font-size:15px; line-height:1.5; margin:0 0 14px;} .kol-detail-a2 .da-next-txt b{color:var(--warm);}
.kol-detail-a2 .da-next-actions{display:flex; gap:9px; flex-wrap:wrap;}
.kol-detail-a2 .da-fc{display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px dashed var(--line-2); gap:10px;} .kol-detail-a2 .da-fc:last-child{border-bottom:none;} .kol-detail-a2 .da-fc span{color:var(--muted);} .kol-detail-a2 .da-fc b{font-weight:700;}
.kol-detail-a2 .da-appr{display:flex; flex-direction:column; gap:6px;}
.kol-detail-a2 .da-appr-row{display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; padding:9px 0;}
.kol-detail-a2 .da-appr-dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; background:rgba(52,39,21,.07); color:var(--faint);} .kol-detail-a2 .da-appr-dot svg{width:14px; height:14px;}
.kol-detail-a2 .da-appr-row.approved .da-appr-dot{background:var(--ok); color:#fff;} .kol-detail-a2 .da-appr-row.pending .da-appr-dot{background:var(--warm); color:#fff;}
.kol-detail-a2 .da-appr-row b{font-size:13px; font-weight:700; display:block;} .kol-detail-a2 .da-appr-row small{font-size:11.5px; color:var(--faint);}
.kol-detail-a2 .da-appr-tag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; color:var(--faint); background:rgba(52,39,21,.06);}
.kol-detail-a2 .da-appr-tag.approved{color:var(--ok); background:var(--ok-bg);} .kol-detail-a2 .da-appr-tag.pending{color:var(--warm); background:var(--warm-bg);}

.kol-detail-a2 .a2-two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.kol-detail-a2 .a2-ok{color:var(--ok) !important;}
.kol-detail-a2 .a2-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:18px; max-height:calc(100vh - 36px);}
.kol-detail-a2 .a2-feed{display:flex; flex-direction:column; min-height:0; flex:1; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
.kol-detail-a2 .a2-feed-h{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--faint); text-transform:uppercase; margin-bottom:16px; flex-shrink:0;} .kol-detail-a2 .a2-feed-h svg{width:14px; height:14px;}
.kol-detail-a2 .a2-feed-list{overflow-y:auto; min-height:0; padding-right:4px;}

/* pills */
.kol-detail-a2 .kd-pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap;}
.kol-detail-a2 .kd-pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.kol-detail-a2 .kd-pill.ok{color:var(--ok); background:var(--ok-bg);}
.kol-detail-a2 .kd-pill.warm{color:var(--warm); background:var(--warm-bg);}
.kol-detail-a2 .kd-pill.bad{color:var(--bad); background:var(--bad-bg);}
.kol-detail-a2 .kd-pill.neutral{color:var(--muted); background:rgba(52,39,21,.07);}

@media(max-width:980px){ .kol-detail-a2 .a2-grid{grid-template-columns:1fr;} .kol-detail-a2 .a2-side{position:static; max-height:none;} .kol-detail-a2 .a2-two{grid-template-columns:1fr;} }
@media(max-width:720px){ .kol-detail-a2 .a2-head{flex-direction:column;} .kol-detail-a2 .a2-reach{justify-content:flex-start;} }

/* ===== KOL süreci silme (yetkiye bağlı) ===== */
.kol-del-btn { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--surface-card); color:var(--muted); cursor:pointer; transition:all .14s; padding:0; }
.kol-del-btn:hover { color:#d62828; border-color:rgba(214,40,40,.4); background:rgba(214,40,40,.08); }
.kol-del-cell { text-align:center; white-space:nowrap; }
.kol-row .kol-del-cell { opacity:.55; transition:opacity .14s; }
.kol-row:hover .kol-del-cell { opacity:1; }
.kol-planner-actions { display:flex; align-items:center; gap:8px; }
.admin-toggle.disabled { opacity:.55; cursor:not-allowed; }
.admin-sheet-caps { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.admin-cap-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.admin-sheet-mod-detail .admin-cap-row { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.admin-cap-info b { font-size:.92rem; font-weight:600; display:block; }
.admin-cap-info small { font-size:.78rem; color:var(--muted); }

/* ===================== KOL Tablosu & Content Planner — "KOL Tablolar" design ===================== */
.kol-tables{
  --line-2:rgba(52,39,21,.07); --surface:rgba(255,255,255,.72); --surface-strong:rgba(255,255,255,.92);
  --soft:#f8f4ec; --head:#f4eee2; --card:#fffdf9; --line:rgba(52,39,21,.10);
  --ok:#2a9d8f; --ok-bg:rgba(42,157,143,.14); --ok-deep:#1f7a6e; --bad:#bb3e03; --bad-bg:rgba(187,62,3,.12);
  --warm:#ca6702; --warm-bg:rgba(202,103,2,.13); --info:#1d4ed8; --info-bg:rgba(59,130,246,.13);
  --faint:#9a8870; --accent-end:#0a9396; --num:"Space Grotesk","Manrope",Helvetica,sans-serif; --r-lg:20px; --r-md:14px; --r-sm:10px;
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; color:var(--text);
}
.kol-tables svg{display:block;}
.kol-tables .t-page{max-width:1240px; margin:0 auto; padding:2px 2px 36px;}
.kol-tables .t-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap;}
.kol-tables .t-head-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.kol-tables .t-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 7px;}
.kol-tables .t-title{font-size:26px; font-weight:700; letter-spacing:-.018em; margin:0; color:var(--text);}
.kol-tables .t-sub{font-size:13.5px; color:var(--muted); margin:6px 0 0;}
.kol-tables .t-btn{height:36px; padding:0 14px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--text); transition:background .12s, transform .06s, border-color .12s; white-space:nowrap;}
.kol-tables .t-btn .ic{width:15px; height:15px; display:inline-grid; place-items:center;} .kol-tables .t-btn .ic svg{width:100%; height:100%;}
.kol-tables .t-btn.ghost{color:#4a3a26; border-color:var(--line); background:var(--surface);} .kol-tables .t-btn.ghost:hover{background:var(--card);}
.kol-tables .t-btn.outline{color:var(--accent); border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.06);} .kol-tables .t-btn.outline:hover{background:rgba(var(--accent-rgb),.11);}
.kol-tables .t-btn.primary{color:#fffdf8; background:linear-gradient(135deg,var(--accent),var(--accent-end)); border-color:var(--accent); box-shadow:0 2px 7px rgba(0,109,119,.22);} .kol-tables .t-btn.primary:hover{transform:translateY(-1px);}
.kol-tables .t-btn.sm{height:30px; padding:0 11px; font-size:11.5px; border-radius:9px;}
.kol-tables .kol-plan-del{padding:0 9px; color:var(--muted);} .kol-tables .kol-plan-del:hover{color:var(--bad); background:rgba(187,62,3,.08);}
.kol-tables .t-toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.kol-tables .t-srch{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; background:var(--surface-strong); border:1px solid var(--line); border-radius:11px; color:var(--faint); min-width:230px;}
.kol-tables .t-srch svg{width:16px; height:16px;} .kol-tables .t-srch input{border:none; background:transparent; font:inherit; font-size:13px; color:var(--text); outline:none; width:100%;}
.kol-tables .t-chips{display:flex; gap:6px; flex-wrap:wrap;}
.kol-tables .t-chip{font:inherit; font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--muted); transition:all .14s; display:inline-flex; gap:6px; align-items:center;}
.kol-tables .t-chip:hover{border-color:var(--accent); color:var(--text);} .kol-tables .t-chip.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.kol-tables .t-chip .ct{font-family:var(--num); font-weight:700; opacity:.7;} .kol-tables .t-chip.on .ct{opacity:.85;}
.kol-tables .t-seg{display:inline-flex; padding:3px; background:rgba(52,39,21,.06); border-radius:11px; gap:2px;}
.kol-tables .t-seg button{font:inherit; font-size:12px; font-weight:600; color:var(--muted); border:none; background:transparent; cursor:pointer; height:30px; padding:0 11px; border-radius:8px; display:inline-flex; align-items:center; gap:6px;}
.kol-tables .t-seg button svg{width:15px; height:15px;} .kol-tables .t-seg button.on{background:var(--card); color:var(--text); box-shadow:0 1px 4px rgba(48,28,8,.12);}
.kol-tables .t-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; line-height:1;}
.kol-tables .t-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.kol-tables .t-pill.ok{color:var(--ok-deep); background:var(--ok-bg);} .kol-tables .t-pill.warm{color:var(--warm); background:var(--warm-bg);}
.kol-tables .t-pill.bad{color:var(--bad); background:var(--bad-bg);} .kol-tables .t-pill.info{color:var(--info); background:var(--info-bg);} .kol-tables .t-pill.neutral{color:var(--muted); background:rgba(52,39,21,.08);}
.kol-tables .t-av{display:inline-grid; place-items:center; border-radius:50%; color:#fff; font-weight:700; letter-spacing:-.02em; flex-shrink:0;}
.kol-tables .t-num{font-family:var(--num); font-weight:700; letter-spacing:-.01em;}

/* A · rich table */
.kol-tables .la-wrap{background:var(--surface-strong); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 14px 40px -28px rgba(48,28,8,.4);}
.kol-tables .la-scroll{overflow-x:auto;}
.kol-tables .la-table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; min-width:1080px;}
.kol-tables .la-table thead th{position:sticky; top:0; z-index:3; background:var(--head); text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
.kol-tables .la-table tbody td{padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; white-space:nowrap;}
.kol-tables .la-table tbody tr{cursor:pointer; transition:background .12s;} .kol-tables .la-table tbody tr:hover{background:rgba(var(--accent-rgb),.05);} .kol-tables .la-table tbody tr:last-child td{border-bottom:none;}
.kol-tables .la-acc-th{position:sticky; left:0; z-index:4 !important; background:var(--head) !important; box-shadow:1px 0 0 var(--line);}
.kol-tables .la-acc-td{position:sticky; left:0; z-index:2; background:var(--surface-strong); box-shadow:1px 0 0 var(--line-2);}
.kol-tables .la-table tbody tr:hover .la-acc-td{background:#fbf6ee;}
.kol-tables .la-acc{display:flex; align-items:center; gap:11px;} .kol-tables .la-acc-name{font-weight:700; font-size:13.5px; letter-spacing:-.01em;} .kol-tables .la-acc-sub{font-size:11.5px; color:var(--faint); margin-top:1px;}
.kol-tables .la-pfs{display:flex; align-items:center; gap:4px;}
.kol-tables .la-pf-ic{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.08); color:var(--accent);} .kol-tables .la-pf-ic svg{width:14px; height:14px;}
.kol-tables .la-reach{font-family:var(--num); font-weight:700; font-size:13px;} .kol-tables .la-muted{color:var(--faint);}
.kol-tables .la-areas{display:flex; gap:4px; flex-wrap:wrap;} .kol-tables .la-area{font-size:11px; padding:3px 8px; border-radius:7px; background:rgba(52,39,21,.06); color:var(--muted); font-weight:600;}
.kol-tables .la-mail-ok{color:var(--muted); font-size:12px;} .kol-tables .la-mail-no{color:var(--faint); font-size:12px;}
.kol-tables .la-mini{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);} .kol-tables .la-mini .b{font-family:var(--num); font-weight:700; color:var(--text);}
.kol-tables .la-flags{display:flex; gap:5px;} .kol-tables .la-flag{width:24px; height:24px; border-radius:7px; display:grid; place-items:center;} .kol-tables .la-flag svg{width:14px; height:14px;}
.kol-tables .la-flag.on{background:var(--ok-bg); color:var(--ok-deep);} .kol-tables .la-flag.off{background:rgba(52,39,21,.05); color:var(--faint);}
.kol-tables .la-foot{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; background:var(--soft);}

/* B · pipeline board */
.kol-tables .lb-board{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;}
.kol-tables .lb-col{flex:0 0 268px; display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--line); border-radius:var(--r-md); min-height:340px;}
.kol-tables .lb-col-h{display:flex; align-items:center; gap:8px; padding:13px 14px; border-bottom:1px solid var(--line);}
.kol-tables .lb-col-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;} .kol-tables .lb-col-t{font-size:12.5px; font-weight:700; letter-spacing:-.01em; flex:1;}
.kol-tables .lb-col-c{font-family:var(--num); font-weight:700; font-size:12px; color:var(--muted); background:rgba(52,39,21,.07); padding:2px 9px; border-radius:999px;}
.kol-tables .lb-col-body{padding:11px; display:flex; flex-direction:column; gap:10px; flex:1;}
.kol-tables .lb-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px; cursor:pointer; transition:transform .1s, box-shadow .14s, border-color .14s;}
.kol-tables .lb-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(48,28,8,.4); border-color:rgba(var(--accent-rgb),.3);}
.kol-tables .lb-card-top{display:flex; align-items:center; gap:10px; margin-bottom:11px;} .kol-tables .lb-card-id{min-width:0;}
.kol-tables .lb-card-name{font-weight:700; font-size:13px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kol-tables .lb-card-who{font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kol-tables .lb-card-reach{display:flex; align-items:center; gap:7px; padding:8px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin-bottom:10px;}
.kol-tables .lb-card-reach .v{font-family:var(--num); font-weight:700; font-size:14px;} .kol-tables .lb-card-reach .l{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em;}
.kol-tables .lb-card-pfs{display:flex; gap:4px; margin-left:auto;} .kol-tables .lb-card-pfs svg{width:15px; height:15px; color:var(--accent); opacity:.8;}
.kol-tables .lb-card-foot{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted);} .kol-tables .lb-card-foot svg{width:13px; height:13px; flex-shrink:0;}
.kol-tables .lb-card-foot.warm{color:var(--warm);} .kol-tables .lb-card-foot.bad{color:var(--bad);}
.kol-tables .lb-empty{font-size:12px; color:var(--faint); text-align:center; padding:20px 8px; border:1px dashed var(--line); border-radius:var(--r-sm);}
.kol-tables .lb-col-dot.ok{background:var(--ok);} .kol-tables .lb-col-dot.warm{background:var(--warm);} .kol-tables .lb-col-dot.info{background:var(--info);} .kol-tables .lb-col-dot.neutral{background:var(--faint);} .kol-tables .lb-col-dot.bad{background:var(--bad);}

/* Planner A · grouped table */
.kol-tables .pa-wrap{display:flex; flex-direction:column; gap:18px;}
.kol-tables .pa-group-h{display:flex; align-items:center; gap:9px; margin:0 2px 9px; font-size:12.5px; font-weight:700; letter-spacing:-.01em;}
.kol-tables .pa-group-h .c{font-family:var(--num); font-weight:700; font-size:11.5px; padding:2px 9px; border-radius:999px; background:rgba(52,39,21,.07); color:var(--muted);}
.kol-tables .pa-table-wrap{background:var(--surface-strong); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.kol-tables .pa-table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;}
.kol-tables .pa-table thead th{background:var(--head); text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:11px 16px; border-bottom:1px solid var(--line);}
.kol-tables .pa-table td{padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle;} .kol-tables .pa-table tr:last-child td{border-bottom:none;}
.kol-tables .pa-table tbody tr:hover{background:rgba(var(--accent-rgb),.04);}
.kol-tables .pa-acc{display:flex; align-items:center; gap:10px;} .kol-tables .pa-acc b{font-weight:700; font-size:13px;}
.kol-tables .pa-date{display:flex; align-items:center; gap:8px;} .kol-tables .pa-date-d{font-family:var(--num); font-weight:700; font-size:14px;} .kol-tables .pa-date-rel{font-size:11px; font-weight:700;}
.kol-tables .pa-pfs{display:flex; gap:5px;} .kol-tables .pa-pfs svg{width:16px; height:16px; color:var(--accent);}
.kol-tables .pa-status{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px;} .kol-tables .pa-status svg{width:14px; height:14px;}
.kol-tables .pa-act{display:flex; gap:7px; justify-content:flex-end; align-items:center;}
.kol-tables .pa-link{color:var(--accent); display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; text-decoration:none;} .kol-tables .pa-link svg{width:13px; height:13px;}
.kol-tables .pl-bucket-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.kol-tables .bk-overdue{color:var(--bad);} .kol-tables .bk-overdue .pl-bucket-dot{background:var(--bad);}
.kol-tables .bk-today{color:var(--accent);} .kol-tables .bk-today .pl-bucket-dot{background:var(--accent);}
.kol-tables .bk-week{color:var(--warm);} .kol-tables .bk-week .pl-bucket-dot{background:var(--warm);}
.kol-tables .bk-later{color:var(--muted);} .kol-tables .bk-later .pl-bucket-dot{background:var(--faint);}
.kol-tables .bk-published{color:var(--ok-deep);} .kol-tables .bk-published .pl-bucket-dot{background:var(--ok);}
.kol-tables .pl-type{font-size:11px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; background:rgba(52,39,21,.06); color:var(--muted);}
.kol-tables .pl-type.Reels{background:rgba(123,44,191,.12); color:#7b2cbf;} .kol-tables .pl-type.Story{background:rgba(202,103,2,.13); color:var(--warm);} .kol-tables .pl-type.Video{background:rgba(0,109,119,.12); color:var(--accent);}

/* Planner B · calendar */
.kol-tables .pb-cal{background:var(--surface-strong); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 14px 40px -28px rgba(48,28,8,.4);}
.kol-tables .pb-cal-h{display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); background:var(--soft);}
.kol-tables .pb-cal-title{font-size:16px; font-weight:700; letter-spacing:-.01em; font-family:var(--num);}
.kol-tables .pb-cal-nav{display:flex; align-items:center; gap:6px;}
.kol-tables .pb-cal-nav button{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; display:grid; place-items:center;} .kol-tables .pb-cal-nav button svg{width:16px; height:16px;} .kol-tables .pb-cal-nav button:hover{color:var(--accent); border-color:var(--accent);}
.kol-tables .pb-dow{display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line);}
.kol-tables .pb-dow div{padding:9px 12px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:left;}
.kol-tables .pb-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.kol-tables .pb-cell{min-height:104px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:8px; display:flex; flex-direction:column; gap:5px;}
.kol-tables .pb-cell:nth-child(7n){border-right:none;} .kol-tables .pb-cell.out{background:rgba(52,39,21,.025);} .kol-tables .pb-cell.today{background:rgba(var(--accent-rgb),.06);}
.kol-tables .pb-cell-d{font-family:var(--num); font-size:12.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; justify-content:space-between;}
.kol-tables .pb-cell.today .pb-cell-d{color:var(--accent);} .kol-tables .pb-cell.out .pb-cell-d{color:var(--faint); opacity:.5;}
.kol-tables .pb-today-tag{font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--accent); padding:1px 6px; border-radius:6px;}
.kol-tables .pb-ev{display:flex; align-items:flex-start; gap:6px; padding:4px 7px; border-radius:7px; font-size:11px; font-weight:600; line-height:1.2; overflow:hidden;} .kol-tables .pb-ev svg{width:12px; height:12px; flex-shrink:0;}
.kol-tables .pb-ev-ic{display:flex; flex-shrink:0; margin-top:1px;}
.kol-tables .pb-ev-txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.kol-tables .pb-ev-txt .nm{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kol-tables .pb-ev-txt .ty{font-size:10px; font-weight:600; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kol-tables .pb-ev-txt .nt{font-size:10px; font-weight:500; opacity:.66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kol-tables .pb-ev.dense{padding:2px 6px; align-items:center;} .kol-tables .pb-ev.dense .pb-ev-txt{flex-direction:row; gap:5px; align-items:center;} .kol-tables .pb-ev.dense .ty,.kol-tables .pb-ev.dense .nt{display:none;}
.kol-tables .pb-ev-more{font-size:10.5px; font-weight:700; color:var(--muted); padding:1px 7px;}
.kol-tables .pb-cell.has-ev{cursor:pointer;} .kol-tables .pb-cell.has-ev:hover{background:rgba(var(--accent-rgb),.05);}
.kol-tables .pb-cell-c{font-size:10px; font-weight:800; color:#fff; background:var(--accent); min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;}
.kol-tables .pb-ev.overdue{background:var(--bad-bg); color:var(--bad);} .kol-tables .pb-ev.week,.kol-tables .pb-ev.later,.kol-tables .pb-ev.today{background:rgba(var(--accent-rgb),.1); color:var(--accent);} .kol-tables .pb-ev.published{background:var(--ok-bg); color:var(--ok-deep);}

/* #1 — anasayfadaki "Yeni KOL" butonu: #kol/list sayfasındaki .t-btn.primary ile
   birebir aynı (tema rengine duyarlı degrade) ve sağ üste hizalı. */
.kol-new-btn{margin-left:auto; height:36px; padding:0 14px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; color:#fffdf8;
  background:linear-gradient(135deg,var(--accent),var(--accent-gradient-end,var(--accent))); border:1px solid var(--accent);
  box-shadow:0 2px 7px rgba(0,109,119,.22); transition:background .12s, transform .06s, border-color .12s;}
.kol-new-btn:hover{transform:translateY(-1px);}
.kol-new-btn-ic{width:15px; height:15px; display:inline-grid; place-items:center;}
.kol-new-btn-ic svg{width:100%; height:100%;}

/* #2 — detay kartında platform kutucuğu profil linki */
.kol-detail-a2 .a2-reach-link{text-decoration:none; transition:background .15s, transform .15s;} .kol-detail-a2 .a2-reach-link:hover{background:rgba(255,255,255,.22); transform:translateY(-1px);}

/* #12 — gün detay modalı */
.kol-day-modal-card{max-width:520px;}
.kol-day-modal .kol-day-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;}
.kol-day-list{display:flex; flex-direction:column; gap:10px;}
.kol-day-row{display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:13px; background:var(--soft);}
.kol-day-info{flex:1; min-width:0;} .kol-day-top{display:flex; align-items:center; gap:8px;} .kol-day-top b{font-size:14px;}
.kol-day-pfs{display:inline-flex; gap:5px; color:var(--muted);} .kol-day-pfs svg{width:15px; height:15px;}
.kol-day-meta{display:flex; align-items:center; gap:4px; margin-top:3px; font-size:12px; color:var(--muted);}
.kol-day-note{margin-top:5px; font-size:12.5px; color:var(--text); background:var(--surface); border-radius:8px; padding:5px 9px;}
.kol-day-open{flex-shrink:0; color:var(--muted); display:flex;} .kol-day-open svg{width:17px; height:17px;} .kol-day-open:hover{color:var(--accent);}

/* #10 — içerik planı düzenleyici (onaylanan içeriklere göre satırlar) */
.kol-sd-head{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.kol-sd-idx{width:22px; height:22px; flex-shrink:0; border-radius:7px; background:rgba(var(--accent-rgb),.12); color:var(--accent); font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center;}
.kol-sd-type{font-size:14px; font-weight:700;} .kol-sd-pf{font-size:12px; color:var(--muted); background:var(--soft); padding:2px 8px; border-radius:7px;}
.kol-sd-fields{display:grid; grid-template-columns:170px 1fr; gap:10px;}
.kol-sd-field{display:flex; flex-direction:column; gap:4px;} .kol-sd-field span{font-size:11.5px; font-weight:700; color:var(--muted);}
@media (max-width:560px){ .kol-sd-fields{grid-template-columns:1fr;} }
.kol-tables .pb-legend{display:flex; gap:16px; padding:13px 20px; border-top:1px solid var(--line); background:var(--soft); flex-wrap:wrap;}
.kol-tables .pb-leg{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); font-weight:600;} .kol-tables .pb-leg .sw{width:11px; height:11px; border-radius:4px;}

@media (max-width:760px){ .kol-tables .pb-cell{min-height:72px;} }

/* ===================== Yeni KOL Süreci — Tasarım B (Odak Modal) ===================== */
.kol-newkol{
  --line-2:rgba(52,39,21,.07); --surface:rgba(255,255,255,.72); --surface-strong:rgba(255,255,255,.92);
  --soft:#f8f4ec; --head:#f4eee2; --card:#fffdf9; --line:rgba(52,39,21,.10); --bg-mid:#f8f4ec; --bg-deep:#e9ddca;
  --ok:#2a9d8f; --bad:#bb3e03; --warm:#ca6702; --faint:#9a8870; --accent-end:#0a9396;
  --num:"Space Grotesk","Manrope",Helvetica,sans-serif; --r-lg:20px; --r-md:14px;
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; color:var(--text);
  display:flex; justify-content:center; padding:6px 0 36px;
}
.kol-newkol svg{display:block;}
.kol-newkol .nk-modal{width:min(940px,100%); background:var(--bg-mid); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 70px -36px rgba(48,28,8,.5); display:flex; flex-direction:column; overflow:hidden;}
.kol-newkol .nk-modal-h{padding:18px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; background:var(--card);}
.kol-newkol .nk-eyebrow{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 5px;}
.kol-newkol .nk-h-title{font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0;}
.kol-newkol .nk-modal-x{width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center;} .kol-newkol .nk-modal-x svg{width:17px; height:17px;} .kol-newkol .nk-modal-x:hover{color:var(--accent); border-color:var(--accent);}
.kol-newkol .nk-modal-body{display:grid; grid-template-columns:1fr 320px;}
.kol-newkol .nk-modal-form{padding:24px; display:flex; flex-direction:column; gap:24px; min-width:0;}
.kol-newkol .nk-modal-aside{border-left:1px solid var(--line); background:linear-gradient(180deg,var(--soft),var(--bg-deep)); padding:24px;}
.kol-newkol .nk-modal-foot{padding:14px 24px; border-top:1px solid var(--line); background:var(--card); display:flex; align-items:center; gap:12px;}

.kol-newkol .nk-sec{display:flex; flex-direction:column; gap:14px;}
.kol-newkol .nk-field{display:flex; flex-direction:column; gap:6px;}
.kol-newkol .nk-label{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:6px;}
.kol-newkol .nk-label em{color:var(--bad); font-style:normal; margin-left:1px;}
.kol-newkol .nk-label-ic{width:14px; height:14px; display:inline-grid; place-items:center; color:var(--faint);} .kol-newkol .nk-label-ic svg{width:100%; height:100%;}
.kol-newkol .nk-hint{font-size:11px; color:var(--faint);}
.kol-newkol .nk-input,.kol-newkol .nk-select,.kol-newkol .nk-textarea{font:inherit; font-size:13.5px; color:var(--text); width:100%; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:0 12px; height:42px; outline:none; transition:border-color .14s, box-shadow .14s;}
.kol-newkol .nk-textarea{height:auto; min-height:76px; padding:11px 12px; resize:vertical; line-height:1.5;}
.kol-newkol .nk-input::placeholder,.kol-newkol .nk-textarea::placeholder{color:var(--faint);}
.kol-newkol .nk-input:focus,.kol-newkol .nk-select:focus,.kol-newkol .nk-textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);}
.kol-newkol .nk-input:disabled,.kol-newkol .nk-select:disabled{opacity:.5; cursor:not-allowed;}
.kol-newkol .nk-select{appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f5b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 11px center; padding-right:34px;}
.kol-newkol .nk-num{font-family:var(--num); font-weight:700; letter-spacing:-.01em;}
.kol-newkol .nk-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.kol-newkol .nk-row-acc{display:flex; align-items:center; gap:12px;} .kol-newkol .nk-row-acc .nk-field{flex:1;}
.kol-newkol .nk-chips{display:flex; flex-wrap:wrap; gap:7px;}
.kol-newkol .nk-chip{font:inherit; font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--muted); transition:all .14s;}
.kol-newkol .nk-chip:hover{border-color:var(--accent); color:var(--text);} .kol-newkol .nk-chip.on{background:rgba(var(--accent-rgb),.1); border-color:var(--accent); color:var(--accent);}
.kol-newkol .nk-plats{display:flex; flex-direction:column; gap:9px;}
.kol-newkol .nk-plat-row{display:grid; grid-template-columns:138px 1fr 1.3fr 104px 34px; gap:9px; align-items:center;}
.kol-newkol .nk-plat-sel{position:relative; display:flex; align-items:center;}
.kol-newkol .nk-plat-glyph{position:absolute; left:11px; width:17px; height:17px; color:var(--accent); pointer-events:none; display:grid; place-items:center;} .kol-newkol .nk-plat-glyph svg{width:100%; height:100%;}
.kol-newkol .nk-plat-sel .nk-select{padding-left:36px;}
.kol-newkol .nk-plat-rm{width:36px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--faint); cursor:pointer; display:grid; place-items:center; transition:all .14s;} .kol-newkol .nk-plat-rm svg{width:16px; height:16px;}
.kol-newkol .nk-plat-rm:hover:not(:disabled){color:var(--bad); border-color:var(--bad);} .kol-newkol .nk-plat-rm:disabled{opacity:.35; cursor:not-allowed;}
.kol-newkol .nk-add{align-self:flex-start; font:inherit; font-size:12.5px; font-weight:600; color:var(--accent); cursor:pointer; background:transparent; border:1px dashed rgba(var(--accent-rgb),.4); border-radius:10px; padding:8px 13px; display:inline-flex; align-items:center; gap:7px; transition:all .14s;} .kol-newkol .nk-add svg{width:15px; height:15px;} .kol-newkol .nk-add:hover{background:rgba(var(--accent-rgb),.06); border-style:solid;}

/* stepper */
.kol-newkol .nk-stepper{display:flex; align-items:center; gap:4px; margin-bottom:4px;}
.kol-newkol .nk-step{display:flex; align-items:center; gap:9px;}
.kol-newkol .nk-step-c{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--num); font-weight:700; font-size:12px; flex-shrink:0; border:1.5px solid var(--line); color:var(--faint); background:var(--card); transition:all .16s;} .kol-newkol .nk-step-c svg{width:14px; height:14px;}
.kol-newkol .nk-step.cur .nk-step-c{border-color:var(--accent); background:var(--accent); color:#fff;}
.kol-newkol .nk-step.done .nk-step-c{border-color:var(--accent); background:rgba(var(--accent-rgb),.12); color:var(--accent);}
.kol-newkol .nk-step-lbl{font-size:12px; font-weight:600; color:var(--faint); white-space:nowrap;}
.kol-newkol .nk-step.cur .nk-step-lbl{color:var(--text);} .kol-newkol .nk-step.done .nk-step-lbl{color:var(--accent);}
.kol-newkol .nk-step-bar{flex:1; height:1.5px; background:var(--line); margin:0 6px; min-width:14px; border-radius:2px;} .kol-newkol .nk-step-bar.done{background:rgba(var(--accent-rgb),.45);}
.kol-newkol .nk-step-title{font-size:15px; font-weight:700; letter-spacing:-.015em; margin:6px 0 0;}
.kol-newkol .nk-step-desc{font-size:12px; color:var(--faint); margin:3px 0 0;}
.kol-newkol .nk-foot-count{font-size:12px; color:var(--faint); font-weight:600;}

/* live preview */
.kol-newkol .nk-prev-eyebrow{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:0 0 12px;}
.kol-newkol .nk-prev-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; box-shadow:0 12px 30px -22px rgba(48,28,8,.4);}
.kol-newkol .nk-prev-top{display:flex; align-items:center; gap:12px;}
.kol-newkol .nk-prev-name{font-size:15px; font-weight:700; letter-spacing:-.01em;} .kol-newkol .nk-prev-who{font-size:12px; color:var(--muted); margin-top:2px;} .kol-newkol .nk-prev-ph{color:var(--faint); font-style:italic;}
.kol-newkol .nk-prev-reach{display:flex; align-items:flex-end; justify-content:space-between; margin:16px 0; padding:14px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);}
.kol-newkol .nk-prev-reach .v{font-family:var(--num); font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1;} .kol-newkol .nk-prev-reach .l{font-size:11px; color:var(--faint); font-weight:600; margin-top:4px;}
.kol-newkol .nk-prev-pfs{display:flex; gap:6px;} .kol-newkol .nk-prev-pfs span{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.09); color:var(--accent);} .kol-newkol .nk-prev-pfs svg{width:16px; height:16px;}
.kol-newkol .nk-prev-areas{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;} .kol-newkol .nk-prev-area{font-size:11px; font-weight:600; padding:4px 9px; border-radius:7px; background:rgba(52,39,21,.06); color:var(--muted);}
.kol-newkol .nk-prev-meta{display:flex; flex-direction:column; gap:9px;}
.kol-newkol .nk-prev-mrow{display:flex; align-items:center; justify-content:space-between; font-size:12px;} .kol-newkol .nk-prev-mrow .k{color:var(--faint);} .kol-newkol .nk-prev-mrow .val{font-weight:700; color:var(--text);}
.kol-newkol .nk-prev-next{margin-top:16px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--accent); font-weight:600; background:rgba(var(--accent-rgb),.07); border:1px solid rgba(var(--accent-rgb),.16); border-radius:10px; padding:10px 12px;} .kol-newkol .nk-prev-next svg{width:15px; height:15px; flex-shrink:0;}

/* shared t- helpers (scoped) */
.kol-newkol .t-av{display:inline-grid; place-items:center; border-radius:50%; color:#fff; font-weight:700; letter-spacing:-.02em; flex-shrink:0;}
.kol-newkol .t-pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;} .kol-newkol .t-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;} .kol-newkol .t-pill.neutral{color:var(--muted); background:rgba(52,39,21,.08);}
.kol-newkol .t-btn{height:36px; padding:0 14px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--text); transition:background .12s, transform .06s, border-color .12s;}
.kol-newkol .t-btn .ic{width:15px; height:15px; display:inline-grid; place-items:center;} .kol-newkol .t-btn .ic svg{width:100%; height:100%;}
.kol-newkol .t-btn.ghost{color:#4a3a26; border-color:var(--line); background:var(--surface);} .kol-newkol .t-btn.ghost:hover{background:var(--card);}
.kol-newkol .t-btn.primary{color:#fffdf8; background:linear-gradient(135deg,var(--accent),var(--accent-end)); border-color:var(--accent); box-shadow:0 2px 7px rgba(0,109,119,.22);} .kol-newkol .t-btn.primary:hover{transform:translateY(-1px);}

@media (max-width:920px){ .kol-newkol .nk-modal-body{grid-template-columns:1fr;} .kol-newkol .nk-modal-aside{display:none;} }
@media (max-width:560px){ .kol-newkol .nk-grid-2{grid-template-columns:1fr;} .kol-newkol .nk-plat-row{grid-template-columns:1fr 1fr; grid-auto-rows:42px;} .kol-newkol .nk-plat-sel{grid-column:1 / -1;} }

/* Yeni KOL: şehir aranabilir dropdown + ilk iletişim bilgi kutusu */
.kol-newkol .nk-combo{position:relative;}
.kol-newkol .nk-iw{position:relative; display:block;}
.kol-newkol .nk-combo-list{position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:4px; max-height:230px; overflow-y:auto; background:var(--surface-card-strong,#fff); border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 34px -18px rgba(48,28,8,.4);}
.kol-newkol .nk-combo-opt{display:block; width:100%; text-align:left; font:inherit; font-size:13.5px; color:var(--text); background:transparent; border:none; border-bottom:1px solid var(--line-2); padding:9px 12px; cursor:pointer;}
.kol-newkol .nk-combo-opt:last-child{border-bottom:none;} .kol-newkol .nk-combo-opt:hover{background:rgba(var(--accent-rgb),.08);}
.kol-newkol .nk-note-box{display:flex; gap:9px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--muted); background:rgba(var(--accent-rgb),.05); border:1px solid rgba(var(--accent-rgb),.14); border-radius:10px; padding:11px 13px;} .kol-newkol .nk-note-box svg{width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--accent);}

/* ===================== KOL modülü — site temasına uyum (renk + çift-kutu düzeltmesi) ===================== */
/* Tasarım tokenlarını panelin tema değişkenlerine bağla (açık/koyu tema uyumu). */
.kol-tables, .kol-detail-a2, .kol-newkol {
  --line: color-mix(in srgb, var(--text) 13%, transparent);
  --line-2: color-mix(in srgb, var(--text) 8%, transparent);
  --card: var(--surface-card-strong, #fff);
  --surface: var(--surface-card);
  --surface-strong: var(--surface-card-strong, #fff);
  --soft: var(--table-head);
  --head: var(--table-head);
  --ok: var(--success); --ok-bg: var(--success-soft); --ok-deep: var(--success);
  --bad: var(--danger); --bad-bg: var(--danger-soft);
  --warm: var(--accent-3); --warm-bg: rgba(244,162,97,0.18);
  --info: var(--report-blue, #2f6fd6); --info-bg: rgba(47,111,214,0.14);
  --faint: var(--muted);
  --accent-end: var(--accent-gradient-end, var(--accent));
  font-family: inherit;
}

/* ---- KOL Tablosu: tabloyu panele göm (çift kutu yok) ---- */
.kol-tables .t-page { padding: 0; max-width: none; }
.kol-tables .la-wrap { background: transparent; border: none; box-shadow: none; border-radius: 0; }
.kol-tables .la-foot { background: transparent; }
.kol-tables .la-acc-td { background: var(--surface-card-strong, #fff); }
.kol-tables .la-table tbody tr:hover { background: var(--table-hover); }
.kol-tables .la-table tbody tr:hover .la-acc-td { background: var(--table-hover); }
/* Content Planner: grup tablolarını yumuşat, takvim gölgesini kaldır */
.kol-tables .pa-table-wrap { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.kol-tables .pb-cal { box-shadow: none; }
.kol-tables .lb-col { background: var(--surface-card); }
.kol-tables .lb-card { background: var(--surface-card-strong, #fff); }

/* ---- KOL Detay: kartlar panelde gömülü (gölgeleri yumuşat) ---- */
.kol-detail-a2 .da-card,
.kol-detail-a2 .da-side-card,
.kol-detail-a2 .a2-feed { box-shadow: none; }

/* ---- Yeni KOL Formu: modal kartını panele yay (ayrı/dar kutu görünümü yok) ---- */
.kol-newkol { display: block; padding: 0; }
.kol-newkol .nk-modal { width: 100%; max-width: none; background: transparent; border: none; box-shadow: none; border-radius: 0; }
.kol-newkol .nk-modal-h,
.kol-newkol .nk-modal-foot { background: transparent; }
.kol-newkol .nk-modal-h { padding-top: 0; }
.kol-newkol .nk-modal-foot { padding-bottom: 0; }
.kol-newkol .nk-modal-form { padding-left: 0; }
.kol-newkol .nk-modal-aside { background: var(--surface-card); border-left: 1px solid var(--line); border-radius: var(--radius-md); }

/* ===== KOL onay zinciri görsel oluşturucu (modal) ===== */
.kol-chain-stages { display: flex; flex-direction: column; gap: 12px; }
.kol-chain-stage { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--surface-card); }
.kol-chain-stage-h { display: flex; align-items: center; gap: 9px; }
.kol-chain-stage-n { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--on-accent, #fff); background: var(--accent); }
.kol-chain-name { flex: 1; min-width: 120px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input, #fff); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.kol-chain-name:focus { border-color: var(--accent); }
.kol-chain-type { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-input, #fff); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.kol-chain-rm { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card); color: var(--muted); cursor: pointer; }
.kol-chain-rm:hover:not(:disabled) { color: #d62828; border-color: rgba(214,40,40,.4); }
.kol-chain-rm:disabled { opacity: .4; cursor: default; }
.kol-chain-users { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.kol-chain-u { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; background: var(--surface-card); }
.kol-chain-u input { accent-color: var(--accent); margin: 0; }
.kol-chain-u.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft, rgba(0,109,119,.08)); }
.kol-chain-u-dyn { font-style: italic; }

/* ===== EcoFlow Stok On Hand ===== */
.soh-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .soh-kpi-grid { grid-template-columns: 1fr; }
}
.soh-kpi-warn { color: #b45309; }
[data-theme="dark"] .soh-kpi-warn { color: #fbbf24; }
.soh-row-critical td { background-color: rgba(214, 40, 40, 0.09) !important; }
.soh-row-excess td   { background-color: rgba(234, 179, 8, 0.12) !important; }
[data-theme="dark"] .soh-row-critical td { background-color: rgba(214, 40, 40, 0.18) !important; }
[data-theme="dark"] .soh-row-excess td   { background-color: rgba(234, 179, 8, 0.18) !important; }
.soh-th-computed { background-color: var(--surface-hover, rgba(0,0,0,.03)); }
.soh-note-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.soh-note-critical { background: rgba(214, 40, 40, 0.13); color: #991b1b; }
.soh-note-excess   { background: rgba(234, 179, 8, 0.18); color: #92400e; }
.soh-note-optimal  { background: rgba(34, 197, 94, 0.13); color: #166534; }
.soh-note-nosales  { background: var(--surface-hover, rgba(0,0,0,.06)); color: var(--muted); }
[data-theme="dark"] .soh-note-critical { background: rgba(214,40,40,.25); color: #fca5a5; }
[data-theme="dark"] .soh-note-excess   { background: rgba(234,179,8,.22); color: #fde68a; }
[data-theme="dark"] .soh-note-optimal  { background: rgba(34,197,94,.2);  color: #86efac; }
.soh-table-footnotes { padding: 10px 4px 2px; display: flex; flex-direction: column; gap: 2px; }
.soh-table-footnotes p { font-size: 11.5px; color: var(--muted); margin: 0; }
.soh-instock-toggle-wrap { padding: 2px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.soh-instock-toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); user-select: none; }
.soh-instock-toggle-cb { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent, #2563eb); flex-shrink: 0; }
.soh-table th { white-space: normal; vertical-align: bottom; }
.soh-table th .col-filter-btn { white-space: normal; text-align: left; line-height: 1.3; }
.soh-table th.num-cell .col-filter-btn { text-align: right; }
.soh-table .col-hdr-cell { align-items: flex-end; }

/* Tablo yükseklik sınırı + dikey kaydırma (başlık .report-table thead th sticky ile üstte kalır). */
.soh-table-shell { position: relative; }
.soh-table-toolbar { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 8px; }
.soh-table-wrap { max-height: calc(100vh - 360px); min-height: 260px; overflow: auto; }
.soh-fs-btn { display: inline-grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.soh-fs-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.soh-fs-btn span { display: inline-grid; place-items: center; }
.soh-fs-btn svg { width: 17px; height: 17px; fill: currentColor; }
.soh-fs-btn .soh-fs-ico-collapse { display: none; }

/* Tam ekran: kart arka planı + tabloya neredeyse tüm ekran yüksekliği. */
.soh-table-shell:fullscreen { background: var(--surface, var(--surface-card)); padding: 16px 22px; overflow: auto; }
.soh-table-shell:fullscreen .soh-table-wrap { max-height: calc(100vh - 96px); }
.soh-table-shell:fullscreen .soh-fs-ico-expand { display: none; }
.soh-table-shell:fullscreen .soh-fs-ico-collapse { display: inline-grid; }

/* ───────────────────────── Master Data modülü ───────────────────────── */
.md-wrap { padding: 4px 2px 40px; max-width: 1280px; margin: 0 auto; }
/* Ürün tablosu görünümü (fullscreen değilken): 1280px kapağını kaldır → içerik kutuyla birlikte
   büyür, kenar boşluğu sabit kalır (panel'in 24px padding'i). Başlık/toolbar/tablo aynı hizada. */
.mdx:not(.md-fs-on) .md-wrap:has(.md-table-fixed) { max-width: none; }
/* .content grid sütunu, geniş tablonun doğal genişliğine göre büyüyüp sayfayı yatay taşırıyordu.
   minmax(0,1fr) ile sütun ekran genişliğiyle sınırlanır → dış kutu ekrana uyum sağlar, tablo
   kendi içinde (md-table-wrap overflow-x) kayar; sayfa yatay taşmaz. */
.content:has(.mdx .md-table-fixed) { grid-template-columns: minmax(0, 1fr); }
.md-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.md-head h1 { margin: 2px 0 4px; font-size: 1.5rem; color: var(--text); }
.md-head .muted { color: var(--muted); font-size: .85rem; }
.md-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.md-cat-levelbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.md-cat-levelbar-lbl { font-size: .78rem; color: var(--muted); font-weight: 600; }
.md-toolbar { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.md-search { width: 320px; max-width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .9rem; }
/* Madde 8: kolon-grup toggle çipleri */
.md-colgroups { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.md-colgroups-lbl { font-size: .76rem; color: var(--muted); font-weight: 600; }
.md-colchip { border: 1px solid var(--line); background: var(--surface-card); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.md-colchip.on { background: var(--accent-soft); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
/* Madde 7: canlı tekrar SKU uyarısı */
.md-dup-warn { background: rgba(194, 65, 12, 0.1); color: var(--warn-row-text, #c2410c); padding: 9px 13px; border-radius: 8px; font-size: .85rem; font-weight: 600; margin-bottom: 14px; }
/* Madde 12: tedarikçi/kategori modal formu */
.md-modal-form .md-grid { margin-bottom: 4px; }
.md-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.md-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); }
/* Ürün index tablosu: ekranı aşınca dikey kaydır (başlık yapışkan kalır). Tam ekranda sınır yok. */
.md-table-wrap:has(.md-table-fixed) { overflow: auto; max-height: calc(100vh - 300px); min-height: 240px; }
.md-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.md-table thead th { text-align: left; padding: 11px 14px; background: var(--surface-subtle); color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.md-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.md-table tbody tr[data-md-product] { cursor: pointer; }
.md-table tbody tr[data-md-product]:hover { background: var(--accent-soft); }
.md-table .md-num { text-align: right; font-variant-numeric: tabular-nums; }
.md-loading, .md-empty td { text-align: center; color: var(--muted); padding: 26px 14px; }
.md-row-actions { text-align: right; white-space: nowrap; }
.md-sku { font-weight: 600; font-variant-numeric: tabular-nums; }

.md-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-subtle); }
.md-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; }
.md-chip { display: inline-block; padding: 2px 8px; margin: 1px 2px; border-radius: 999px; font-size: .72rem; background: var(--surface-subtle); color: var(--muted); border: 1px solid var(--line); }
.md-chip.on { background: var(--accent-soft); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }

/* Input form */
.md-fs { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 18px; margin-bottom: 16px; background: var(--surface-card); }
.md-fs legend { padding: 0 8px; font-weight: 600; color: var(--accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.md-fld { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
/* [hidden] aksi halde .md-fld'in display:flex'i tarafından ezilir — gizlemeyi garanti et. */
.md-fld[hidden] { display: none !important; }
/* Palet türü editörü satırları (en/boy/pcs/height/weight + sil). */
.md-pallet-head, .md-pallet-row { display: grid; grid-template-columns: repeat(5, 1fr) 28px; gap: 6px; align-items: center; }
.md-pallet-head { font-size: .72rem; color: var(--muted, #888); margin: 4px 0 2px; }
.md-pallet-row { margin-bottom: 6px; }
.md-pallet-row input { width: 100%; }
/* A.TR muaf gümrük vergisi: kırmızı + üstü çizili (hesaba katılmaz). */
.md-tax-exempt { color: var(--danger, #d6453d); text-decoration: line-through; }
/* Ürün detay: eksik-bilgi sekmesi sayı rozeti + eksik alan çipleri. */
.md-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 4px; font-size: .68rem; font-weight: 700; color: #fff; background: var(--danger, #d6453d); border-radius: 9px; }
.md-missing-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.md-chip.warn { background: var(--danger-soft, #fdecea); color: var(--danger, #c0392b); border: 1px solid var(--danger, #e0a9a4); padding: 2px 8px; border-radius: 20px; font-size: .76rem; }
/* Bekleyen onaylar modalı: geniş tablo + iç kaydırma + 2 satırlık hücre klempi. */
.md-pending-wide { width: 100%; }
.md-pending-tablewrap { max-height: 62vh; overflow: auto; }
.md-pending .md-cell-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.8em; }
.md-pending .md-table td { vertical-align: top; }
.md-pend-status { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.md-pend-status.warn { background: #fff4e0; color: #b8791a; }
.md-pend-status.ok { background: #e6f6ec; color: #1f9254; }
.md-pend-status.bad { background: #fdecea; color: #c0392b; }
/* PW marj bileşeni override edildiğinde (ürün bazlı): kırmızı + kalın. */
.md-margin-ov { color: var(--danger, #d6453d); font-weight: 700; }
/* Sağ tık ile gelen "genele sıfırla" mini menüsü. */
.md-margin-reset-pop { position: fixed; z-index: 9999; background: var(--surface-card, #fff); border: 1px solid var(--line, #ddd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 4px; }
/* Admin: 3 aşamalı ekleme yetkisi segment kontrolü (Kapalı/Onaylı/Açık). */
.admin-tri { display: inline-flex; border: 1px solid var(--line, #ddd); border-radius: 8px; overflow: hidden; }
.admin-tri-btn { padding: 5px 12px; font-size: .78rem; background: var(--surface-input, #f5f5f5); color: var(--muted, #777); border: none; border-left: 1px solid var(--line, #ddd); cursor: pointer; }
.admin-tri-btn:first-child { border-left: none; }
.admin-tri-btn.active { background: var(--accent, #2563eb); color: #fff; font-weight: 600; }
.admin-tri-btn.disabled { opacity: .6; cursor: default; }
.md-mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.md-mini-table th, .md-mini-table td { border: 1px solid var(--border, #e5e7eb); padding: 3px 6px; text-align: center; }
/* Birleşik Sütunlar yöneticisi: sekme çubuğu + sütun sıralama listesi. */
.md-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 12px; }
.md-tabbar .md-tab { background: none; border: none; padding: 8px 14px; font-size: .85rem; font-weight: 600; color: var(--muted, #888); cursor: pointer; border-bottom: 2px solid transparent; }
.md-tabbar .md-tab.active { color: var(--text, #111); border-bottom-color: var(--accent, #2563eb); }
.md-colord-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; }
.md-colord-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: 7px; }
.md-colord-move { display: inline-flex; flex-direction: column; gap: 1px; }
.md-mini-btn { width: 20px; height: 15px; line-height: 1; font-size: .6rem; padding: 0; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; background: var(--surface, #fff); cursor: pointer; color: var(--text, #111); }
.md-mini-btn:disabled { opacity: .35; cursor: default; }
.md-colord-name { flex: 1; font-size: .84rem; }
.md-colord-grip { cursor: grab; color: var(--faint); font-size: 13px; letter-spacing: -3px; user-select: none; padding: 0 2px; }
.md-colord-row[draggable="true"] { cursor: grab; }
.md-colord-row.md-colord-dragging { opacity: .55; background: var(--accent-softer, rgba(var(--accent-rgb), .1)); border-color: var(--accent); }
.md-fld.wide { grid-column: 1 / -1; }
.md-fld > span { color: var(--muted); font-weight: 500; }
.mdx .md-req { color: var(--danger); font-weight: 700; }
.mdx .md-imp-mode { padding: 4px 2px; }
.mdx .md-imp-mode-opts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.mdx .md-imp-mode-opts .button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; height: auto; }
.mdx .md-imp-mode-opts .button b { font-size: .92rem; }
.mdx .md-imp-mode-opts .button span { font-size: .76rem; color: var(--muted); font-weight: 400; }
.mdx .md-imp-mode-opts .button:hover { border-color: rgba(var(--accent-rgb), .5); }
.mdx .md-bulk-update { padding: 2px; }
.mdx .md-bu-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mdx .md-bu-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; align-items: center; }
.mdx .md-bu-row select, .mdx .md-bu-row input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .85rem; font-family: inherit; min-width: 0; width: 100%; box-sizing: border-box; }
.mdx .md-bu-val { display: block; min-width: 0; }
/* Sütun grupları yöneticisi */
.mdx .md-colchip-manage { padding: 6px 9px; }
.mdx .md-colchip-manage svg { width: 14px; height: 14px; display: block; }
.mdx .md-cg-mgr { padding: 2px; }
.mdx .md-cg-list { display: flex; flex-direction: column; gap: 6px; }
.mdx .md-cg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.mdx .md-cg-item.editing { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .05); }
.mdx .md-cg-name { font-weight: 600; font-size: .88rem; }
.mdx .md-cg-count { font-size: .74rem; color: var(--muted); margin-right: auto; }
.mdx .md-cg-swatch { width: 16px; height: 16px; border-radius: 5px; flex: 0 0 16px; display: inline-block; }
.mdx .md-cg-colors { display: flex; flex-wrap: wrap; gap: 7px; }
.mdx .md-cg-color { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mdx .md-cg-color.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--accent-rgb), .4); }
.mdx .md-cg-color-none { background: var(--surface); color: var(--muted); font-size: .8rem; line-height: 1; box-shadow: inset 0 0 0 1px var(--line); }
/* Renk verilmiş sütun başlığı: iç butonlar rengi devralır (okunabilirlik için th'de set edildi) */
.mdx .col-hdr.md-hdr-colored .col-filter-btn,
.mdx .col-hdr.md-hdr-colored .col-sort-btn { color: inherit; }
.mdx .md-cg-divider { height: 1px; background: var(--line); margin: 14px 0; }
.mdx .md-cg-h { margin: 0 0 10px; font-size: .9rem; }
.mdx .md-cg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px; max-height: 240px; overflow: auto; padding: 6px 2px; }

/* Excel İndir modalı: kapsam kutuları — grup adı + rozet tek satırda kalsın (rozet sarmasın). */
.mdx.md-xls .md-cg-checks { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); max-height: 168px; row-gap: 8px; }
.mdx.md-xls .md-check { align-items: center; }
.mdx.md-xls .md-check > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mdx.md-xls .md-check .md-cf-type { white-space: nowrap; flex: none; padding: 2px 7px; }
.mdx .md-cf-mgr .md-fld-row { display: grid; grid-template-columns: 1fr 140px; gap: 12px; margin-top: 6px; }
@media (max-width: 560px) { .mdx .md-cf-mgr .md-fld-row { grid-template-columns: 1fr; } }
.md-fld input, .md-fld select, .md-fld textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .88rem; font-family: inherit; }
.md-fld textarea { resize: vertical; }
/* Ürün formunda GTİP arama-seçim: açıklama kırılımları tam görünür (native select yerine). */
.md-gtip-pick { position: relative; }
.md-gtip-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input);
  color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.md-gtip-trigger.empty { color: var(--muted); }
.md-gtip-trigger-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-gtip-caret { flex: 0 0 auto; color: var(--muted); }
.md-gtip-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 8px; }
.md-gtip-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .86rem; margin-bottom: 8px; }
.md-gtip-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.md-gtip-opt { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; cursor: pointer; }
.md-gtip-opt:hover { background: var(--surface-alt, #f4f4f6); }
.md-gtip-opt.sel { border-color: var(--accent, #3b5bdb); background: var(--accent-soft, #eef2ff); }
.md-gtip-opt-code { font-size: .82rem; font-weight: 700; }
.md-gtip-opt-desc { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.md-gtip-empty { padding: 14px; text-align: center; color: var(--muted); font-size: .82rem; }
/* GTİP gümrük çoklu seçim (Türkiye listesi) — panel içi işaret kutuları */
.md-gtip-optcheck { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; font-size: .84rem; color: var(--text); }
.md-gtip-optcheck:hover { background: var(--surface-alt, #f4f4f6); }
.md-gtip-optcheck input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; }
/* Tedarikçi ilgili kişi telefonu: alan kodu seçimi + numara */
.md-phone-row { display: flex; gap: 6px; }
.md-phone-row select { flex: 0 0 auto; max-width: 44%; }
.md-phone-row input { flex: 1 1 auto; min-width: 0; }
.md-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.md-check { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--text); cursor: pointer; }
.md-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.md-form-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Product Information */
.md-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.md-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-card); }
.md-card.md-card-wide { grid-column: 1 / -1; margin-bottom: 14px; }
.md-card h3 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.md-card-derived { background: var(--surface-subtle); }
.md-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.md-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.md-dl > div:last-child { border-bottom: none; }
.md-dl dt { color: var(--muted); font-size: .8rem; }
.md-dl dd { margin: 0; color: var(--text); font-size: .84rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Geniş fiyatlandırma kartı: satırları iki sütuna dağıt */
.md-dl-2col { grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 560px) { .md-dl-2col { grid-template-columns: 1fr; } }
/* Fiyatlandırma kartı: SOL fiyatlar, SAĞ marj yapısı (iki ayrı kolon) */
.md-price-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 560px) { .md-price-2col { grid-template-columns: 1fr; row-gap: 14px; } }
.md-price-col-h { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.md-code-inline { color: var(--muted); font-variant-numeric: tabular-nums; }
.md-inline-row { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; }
.md-inline-label { color: var(--muted); font-size: .8rem; min-width: 120px; }
.md-link { display: inline-block; margin-right: 10px; color: var(--accent); text-decoration: none; font-size: .85rem; }
.md-link:hover { text-decoration: underline; }
.md-gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.md-gallery img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.md-gallery img.main { width: 132px; height: 132px; border-color: rgba(var(--accent-rgb), .4); }
.md-gallery-empty { color: var(--muted); font-size: .85rem; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; }
.button.slim { padding: 4px 10px; font-size: .78rem; }

/* Master Data — marka seçim anasayfası */
.md-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.md-brand-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-card); cursor: pointer; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.md-brand-card:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.md-brand-card h3 { margin: 6px 0 0; font-size: 1.1rem; color: var(--text); }
.md-brand-card .mod-sub { margin: 0; color: var(--muted); font-size: .85rem; }
.md-brand-logo { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #fff; background: var(--accent); }
.md-brand-logo.teal { background: #006d77; }
.md-brand-logo.warm { background: #ca6702; }
.md-brand-logo.violet { background: #5b2cbf; }
.md-brand-go { color: var(--accent); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); }

/* ===== Master Data — handoff yerleşimi (Anasayfa) ===== */
.md-num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; }
.md-num.ok { color: var(--success); }
.md-num.muted { color: var(--muted); }
.md-kpi-strip { display: flex; align-items: center; background: var(--surface-card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 22px; margin-bottom: 20px; }
.md-kpi { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.md-kpi-l { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.md-kpi-v { font-size: 1.6rem; line-height: 1; color: var(--text); }
.md-kpi-sep { width: 1px; height: 40px; background: var(--line); margin: 0 22px; }
.md-bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.md-brand-card .md-brand-go { margin: 0; }
.md-bc-desc { font-size: .82rem; color: var(--muted); margin: 4px 0 16px; }
.md-bc-stats { display: flex; gap: 22px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; }
.md-bc-stats > div { display: flex; flex-direction: column; gap: 2px; }
.md-bc-stats b { font-size: 1.3rem; line-height: 1; color: var(--text); }
.md-bc-stats span { font-size: .7rem; color: var(--muted); }
.md-bc-foot { margin-top: 12px; font-size: .68rem; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); }
.md-brand-card.add { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: transparent; min-height: 220px; }
.md-add-plus { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); display: grid; place-items: center; font-size: 1.6rem; font-weight: 300; margin-bottom: 10px; }
.md-ref-section { margin-top: 26px; }
.md-ref-head { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.md-ref-head span { font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--muted); }
.md-ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.md-ref-card { display: flex; align-items: center; gap: 16px; background: var(--surface-card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; cursor: pointer; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.md-ref-card:hover { border-color: rgba(var(--accent-rgb), .4); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.md-ref-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.md-ref-ico svg { width: 22px; height: 22px; }
.md-ref-txt { flex: 1; min-width: 0; }
.md-ref-txt h4 { font-size: .95rem; font-weight: 700; margin: 0 0 3px; color: var(--text); }
.md-ref-txt p { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.4; }
.md-ref-cnt { font-size: 1.4rem; color: var(--text); }
.md-ref-go { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; font-weight: 700; }

/* ===== Master Data — Yeni/Düzenle formu (bölüm nav + canlı önizleme) ===== */
.md-np2 { display: grid; grid-template-columns: 210px 1fr 280px; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface-card); margin-bottom: 16px; }
.md-np2-nav { padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.md-np2-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: .84rem; font-weight: 500; color: var(--muted); cursor: pointer; border: none; background: transparent; text-align: left; font-family: inherit; }
.md-np2-item:hover { background: var(--accent-soft, rgba(var(--accent-rgb), .07)); }
.md-np2-item.on { background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); font-weight: 700; }
.md-np2-num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.md-np2-item.on .md-np2-num { border-color: var(--accent); color: var(--accent); }
.md-np2-form { padding: 18px 22px; min-width: 0; }
.md-np2-pane { display: none; }
.md-np2-pane.active { display: block; }
.md-np2-pane .md-fs { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px 16px; margin: 0 0 14px; }
.md-np2-pane .md-fs:last-child { margin-bottom: 0; }
.md-np2-pane .md-fs.accent { border-color: rgba(var(--accent-rgb), .3); background: var(--accent-soft, rgba(var(--accent-rgb), .04)); }
.md-np2-pane .md-fs.accent legend { color: var(--accent); }
.md-np2-preview { border-left: 1px solid var(--line); background: var(--accent-soft, rgba(var(--accent-rgb), .04)); padding: 18px; overflow: auto; }
.md-np2-prev-head { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.md-np2-prev-head svg { width: 15px; height: 15px; }
.md-np2-prev-sub { font-size: .7rem; color: var(--muted); margin: 4px 0 16px; }
.md-np2-prev-dl { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.md-np2-prev-dl > div { display: flex; flex-direction: column; gap: 2px; }
.md-np2-prev-dl dt { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.md-np2-prev-dl dd { margin: 0; font-size: .84rem; font-weight: 600; color: var(--text); }
.md-np2-prev-dl div.calc { flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 11px; border-top: 1px solid rgba(var(--accent-rgb), .14); }
@media (max-width: 900px) { .md-np2 { grid-template-columns: 1fr; } .md-np2-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); } .md-np2-preview { border-left: none; border-top: 1px solid var(--line); } }

/* ===== Master Data — batch 2 (madde 2,3,4,5) ===== */
/* Sekmeli ürün popup + toplu ekleme + import sonucu için geniş modal */
.modal-card.kol-modal:has(.md-product-modal),
.modal-card.kol-modal:has(.md-form-modal),
.modal-card.kol-modal:has(.md-bulk) { width: min(960px, 96vw); max-width: min(960px, 96vw); }
/* JS ile de uygulanır (:has desteklenmeyen / max-width çakışması güvencesi) */
.modal-card.md-wide-modal { width: min(960px, 96vw); max-width: min(960px, 96vw); }
/* Onaylar & Talepler modalı: daha geniş + yüksek; iç içerik kartı doldurur → modal kaydırılmaz. */
.modal-card.md-wide-modal:has(.md-pending-wide) { width: min(1800px, 97vw); max-width: min(1800px, 97vw); max-height: 94vh; }
.md-form-hint { margin: 0 0 12px; font-size: .82rem; color: var(--muted); }
/* Yeni marka oluşturma modalı */
.md-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.md-form-grid .md-fld-wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .md-form-grid { grid-template-columns: 1fr; } }
.md-form-section { border-top: 1px solid var(--border, #e5e7eb); padding-top: 12px; }
.md-form-section-title { font-size: .9rem; font-weight: 600; color: var(--text); }
.md-form-error { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; font-size: .82rem;
  background: var(--danger-soft, #fdecea); color: var(--danger, #c0392b); border: 1px solid var(--danger, #e0a9a4); }
.md-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.md-form-modal .md-np2 { margin-bottom: 0; }
.md-form-modal .md-modal-foot { margin-top: 14px; }
/* Form modalı iç grid'i dar sütunda taşmasın */
.md-np2 > * { min-width: 0; }
.md-np2-form { overflow: hidden; }
.md-np2-form .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-np2-form .md-fld.wide { grid-column: 1 / -1; }
.md-np2-form .md-fld input, .md-np2-form .md-fld select, .md-np2-form .md-fld textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.md-product-modal .md-pm-meta { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.md-product-modal .md-inline-row { display: flex; gap: 10px; align-items: baseline; }
.md-product-modal .md-inline-label { font-size: .76rem; color: var(--muted); font-weight: 600; min-width: 120px; }
/* Ürün modalı hero başlığı (handoff) */
.md-pm-hero { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.md-pm-thumb { width: 64px; height: 64px; border-radius: 13px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.md-pm-thumb-empty { display: grid; place-items: center; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: repeating-linear-gradient(135deg, rgba(127,127,127,.07) 0 6px, transparent 6px 12px); }
.md-pm-id { min-width: 0; flex: 1; }
.md-pm-sku-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.md-pm-sku { font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; font-weight: 700; color: var(--accent); }
.md-pm-title { margin: 0 0 2px; font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.md-pm-en { margin: 0; font-size: .8rem; color: var(--muted); }
.md-pm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.md-pm-pill .md-pm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.md-pm-pill.ok { color: var(--success, #2a9d8f); background: color-mix(in srgb, var(--success, #2a9d8f) 14%, transparent); }
.md-pm-pill.neutral { color: var(--muted); background: var(--surface-subtle); }
/* Taslak (draft) ürün durumu */
.md-pm-pill.draft { color: #7c5cff; background: rgba(124,92,255,.14); }
/* Taslak marka kartı + aksiyonları */
.md-brand-card-draft { border-style: dashed; cursor: default; }
/* Kartın TAMAMI tıklanabilir (yalnız başlık değil); menü ikonu/aksiyon butonları hariç. */
.md-brand-clickable { cursor: pointer; }
.md-brand-clickable h3 { pointer-events: none; }
.md-brand-clickable .md-bmenu-wrap, .md-brand-clickable .md-brand-acts { cursor: default; }
.md-brand-draft-badge { display: inline-block; margin-left: 6px; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #7c5cff; background: rgba(124,92,255,.14); vertical-align: middle; }
.md-brand-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.md-brand-act { font-size: .74rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-subtle); color: var(--text); cursor: pointer; }
.md-brand-act:hover { border-color: rgba(var(--accent-rgb), .5); }
.md-brand-act.danger { color: #b3261e; border-color: rgba(179,38,30,.35); }
.md-brand-act.danger:hover { background: rgba(179,38,30,.08); border-color: #b3261e; }
/* Taslak ürün: tablo üzerinden tüm alanları doldurma (tıkla-düzenle) */
.mdx .md-table td.md-inline-cell { cursor: pointer; position: relative; }
.mdx .md-table td.md-inline-cell:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.mdx .md-table td.md-inline-cell.is-empty::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: .8rem; color: rgba(var(--accent-rgb), .55); }
/* Aranabilir açılır liste (tedarikçi/kategori/GTİP/ülke) */
.mdx .md-pickbox { position: absolute; z-index: 30; left: 0; top: 100%; min-width: 260px; max-width: 420px; background: var(--surface-card); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 6px; }
.mdx .md-pick-search { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.mdx .md-pick-list { max-height: 240px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; }
.mdx .md-pick-opt { text-align: left; padding: 6px 8px; border: 0; background: transparent; color: var(--text); font-size: .8rem; border-radius: 6px; cursor: pointer; white-space: normal; }
.mdx .md-pick-opt:hover { background: rgba(var(--accent-rgb), .12); }
.mdx .md-pick-opt[hidden] { display: none !important; }
/* Sütun grubu: gümrük vergileri otomatik/manuel seçimi */
.mdx .md-cg-customs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
/* Gümrük vergisi modu: kompakt segment kontrolü (içeriği kadar geniş, aktif öğe beyaz pill) */
.mdx .md-cg-taxmode { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.mdx .md-cg-taxmode button { font: inherit; font-size: .78rem; font-weight: 600; line-height: 1; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background .14s, color .14s, box-shadow .14s; }
.mdx .md-cg-taxmode button:hover { color: var(--text); background: rgba(var(--accent-rgb), .08); }
.mdx .md-cg-taxmode button.on { background: var(--surface-card, #fff); color: var(--accent); box-shadow: 0 1px 3px rgba(31,41,55,.14); }
.mdx .md-cg-taxlist[hidden], .mdx .md-cg-taxpick[hidden] { display: none !important; }
/* Manuel gümrük vergisi seçici: seçilen çipler + aranabilir açılır liste */
.mdx .md-cg-taxpick { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 0; }
.mdx .md-cg-taxchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mdx .md-cg-taxchip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 3px 6px 3px 10px; border-radius: 999px; color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.mdx .md-cg-taxchip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .74rem; line-height: 1; padding: 0 2px; opacity: .7; }
.mdx .md-cg-taxchip-x:hover { opacity: 1; }
.mdx .md-cg-taxsearch-wrap { position: relative; }
.mdx .md-cg-taxsearch { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.mdx .md-cg-taxdrop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--surface-card); border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.16); padding: 5px; display: flex; flex-direction: column; }
.mdx .md-cg-taxdrop[hidden] { display: none !important; }
.mdx .md-cg-taxdrop.is-empty::after { content: "Sonuç yok"; color: var(--muted); font-size: .78rem; padding: 6px 8px; }
.mdx .md-cg-taxopt { text-align: left; padding: 6px 9px; border: 0; background: transparent; color: var(--text); font-size: .8rem; border-radius: 6px; cursor: pointer; white-space: normal; }
.mdx .md-cg-taxopt:hover { background: rgba(var(--accent-rgb), .12); }
.mdx .md-cg-taxopt[hidden] { display: none !important; }
/* Sütun grubu kapsam rozeti (marka bazlı grup) */
.mdx .md-cg-scope { display: inline-block; margin-left: 6px; font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--accent); background: rgba(var(--accent-rgb), .12); vertical-align: middle; }
/* Marka kartı işlem menüsü: sağ üstte SİLİK düzenle ikonu + açılır menü */
.md-brand-card { position: relative; }
.md-bmenu-wrap { position: absolute; top: 8px; right: 8px; z-index: 5; }
.md-bmenu-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); opacity: .32; cursor: pointer; transition: opacity .15s, background .15s, color .15s; }
.md-bmenu-btn svg { width: 15px; height: 15px; }
.md-brand-card:hover .md-bmenu-btn { opacity: .7; }
.md-bmenu-btn:hover, .md-bmenu-btn.on { opacity: 1 !important; background: var(--surface-subtle); color: var(--text); }
.md-bmenu { position: absolute; top: 30px; right: 0; min-width: 150px; background: var(--surface-card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.16); padding: 5px; display: flex; flex-direction: column; }
.md-bmenu[hidden] { display: none !important; }
.md-bmenu-item { text-align: left; padding: 7px 10px; border: 0; background: transparent; color: var(--text); font-size: .8rem; font-weight: 600; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.md-bmenu-item:hover { background: rgba(var(--accent-rgb), .12); }
.md-bmenu-item.danger { color: #b3261e; }
.md-bmenu-item.danger:hover { background: rgba(179,38,30,.1); }
/* PASİF marka kartı + "Pasif Markalar" aç/kapa çubuğu */
.md-brand-card-passive { cursor: default; opacity: .75; border-style: dashed; background: var(--surface-subtle); }
.md-brand-card-passive:hover { transform: none; box-shadow: none; border-color: var(--line); }
.md-brand-passive-badge { display: inline-block; margin-left: 6px; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #b3261e; background: rgba(179,38,30,.12); vertical-align: middle; }
.md-passive-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
/* Görüntüleme yetkisi olmayan marka kartı (kilitli) + erişim talebi butonu */
.md-brand-card-locked { cursor: default; opacity: .82; background: var(--surface-subtle); }
.md-brand-card-locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.md-brand-lock-badge { display: inline-block; margin-left: 6px; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-card); vertical-align: middle; }
.md-brand-act.is-pending { color: var(--muted); background: transparent; border: 1px dashed var(--line); cursor: default; padding: 5px 10px; border-radius: 8px; font-size: .74rem; }
/* Erişim talebi onay diyalogu: yetki seçim ızgarası */
.md-ag-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
.summary-confirm-card .md-mselect { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.summary-confirm-card .md-check.dim { opacity: .5; }
.md-ap-note { max-width: 260px; white-space: normal; }
/* Taslak bilgi notu (ürün formu + marka modalı) */
.mdx .md-draft-hint, .md-form .md-draft-hint { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; font-size: .8rem; color: var(--text); background: rgba(124,92,255,.09); border: 1px solid rgba(124,92,255,.3); }
/* Sekmeler */
.md-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 14px; flex-wrap: wrap; }
.md-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.md-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.md-tabpane { display: none; }
.md-tabpane.active { display: block; }
/* Ürün detay görsel galerisi: kare kutular, saran grid; çok görselde pane dikey kaydırır. */
.md-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.md-img-box { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--surface-alt, #f4f4f6); cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.md-img-box:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); transform: translateY(-1px); }
.md-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ürün geçmişi (Geçmiş sekmesi) */
.md-hist { display: flex; flex-direction: column; }
.md-hist-msg { padding: 22px 6px; text-align: center; color: var(--muted); font-size: .86rem; }
.md-hist-row { display: flex; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.md-hist-row:last-child { border-bottom: none; }
.md-hist-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--accent); }
.md-hist-dot.ok { background: var(--success, #2a9d8f); }
.md-hist-dot.edit { background: var(--warn-row-text, #ca6702); }
.md-hist-dot.info { background: var(--accent); }
.md-hist-act { font-size: .9rem; font-weight: 600; color: var(--text); }
.md-hist-detail { font-family: var(--mono, ui-monospace, monospace); font-size: .8rem; color: var(--accent); font-weight: 500; margin-left: 4px; }
.md-hist-meta { font-size: .76rem; color: var(--muted); margin-top: 3px; }
/* Toplu ekleme */
.md-bulk-head, .md-bulk-row { display: grid; grid-template-columns: 1.1fr 1.4fr .9fr 1.2fr 1.2fr 1fr .7fr 30px; gap: 6px; align-items: center; }
.md-bulk-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 0 2px 6px; }
.md-bulk-row { margin-bottom: 6px; position: relative; }
.md-bulk-row input, .md-bulk-row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; min-width: 0; }
.md-bulk-dup { grid-column: 1 / -1; color: var(--warn-row-text, #c2410c); font-size: .72rem; font-weight: 600; }
.md-icon-x { background: transparent; border: 1px solid var(--line); border-radius: 7px; width: 28px; height: 30px; cursor: pointer; color: var(--muted); }
.md-icon-x:hover { color: var(--warn-row-text, #c2410c); border-color: currentColor; }
[data-md-bulk-rows] { max-height: 52vh; overflow-y: auto; margin-bottom: 10px; }
/* Import sonucu */
.md-import-result { display: flex; flex-direction: column; gap: 8px; }
.md-imp-line { display: flex; justify-content: space-between; padding: 9px 13px; border-radius: 8px; background: var(--surface-subtle); font-size: .88rem; }
.md-imp-line.ok strong { color: #1f8a5b; }
.md-imp-line.warn strong { color: var(--warn-row-text, #c2410c); }
.md-imp-line.bad strong { color: #9d174d; }
.md-imp-block { padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; }
.md-imp-block h4 { margin: 0 0 6px; font-size: .82rem; color: var(--text); }
.md-imp-block p { margin: 0; font-size: .82rem; color: var(--muted); word-break: break-word; }
@media (max-width: 720px) {
  .md-bulk-head, .md-bulk-row { grid-template-columns: 1fr 1fr; }
  .md-bulk-head { display: none; }
}

/* ===== Master Data — Faz 2 (Price Workspace, madde 9-10) ===== */
.md-params { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); padding: 14px 16px; margin-bottom: 14px; }
/* A2 · Parametreler — sol gezinme + odaklı bölüm (modal içi) */
.md-params.mdp2 { border: 0; background: transparent; padding: 0; margin: 0; }
.mdp2-modal .modal-body { padding: 0; display: block; }
.mdp2-modal .mdx { padding: 0; }
.mdp2-layout { display: grid; grid-template-columns: 210px 1fr; }
.mdp2-nav { border-right: 1px solid var(--line); padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; }
.mdp2-navbtn { display: flex; align-items: center; gap: 9px; text-align: left; border: 0; border-radius: 11px; padding: 10px 12px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; transition: background .12s, color .12s; }
.mdp2-navbtn:hover { background: var(--accent-soft); color: var(--text); }
.mdp2-navbtn.on { color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)); }
.mdp2-nav-ic { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; opacity: .9; }
.mdp2-nav-ic svg { width: 15px; height: 15px; display: block; }
.mdp2-nav-lbl { flex: 1; }
.mdp2-navbtn .mdp2-badge { margin-left: auto; font-family: "Space Grotesk", sans-serif; font-size: .7rem; font-weight: 700; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); padding: 1px 8px; border-radius: 999px; }
.mdp2-navbtn.on .mdp2-badge { color: var(--on-accent); background: rgba(255,255,255,.24); }
.mdp2-panes { padding: 22px 26px; min-height: 380px; }
.mdp2-pane[hidden] { display: none; }
.mdp2-h { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.mdp2-desc { margin: 0 0 18px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.mdp2-subttl { font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mdp2-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface-nav); }
@media (max-width: 640px) { .mdp2-layout { grid-template-columns: 1fr; } .mdp2-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .mdp2-navbtn { white-space: nowrap; } .mdp2-nav-lbl, .mdp2-navbtn .mdp2-nav-ic { display: none; } }
.md-params-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.md-params-head h3 { margin: 0; font-size: 1rem; color: var(--text); }
.md-params-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.md-params-card h4 { margin: 0 0 8px; font-size: .82rem; color: var(--accent); font-weight: 700; }
.md-rule-row { display: grid; grid-template-columns: 28px 1fr 110px auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.md-rule-rank { width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.md-rule-row select, .md-rule-margin input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.md-rule-margin { display: flex; align-items: center; gap: 4px; }
.md-rule-margin input { width: 78px; }
.md-rule-ops { display: flex; gap: 4px; }
.md-pw { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.md-table thead th.md-pw { background: var(--accent-soft); color: var(--accent); }
.md-margin-cell { cursor: pointer; position: relative; }
.md-margin-cell:hover { background: var(--accent-softer); }
.md-margin-cell.is-custom { color: var(--warn-row-text, #c2410c); font-weight: 700; }
.md-margin-badge { color: var(--warn-row-text, #c2410c); }
.md-margin-input { width: 70px; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface-input); color: var(--text); font-size: .82rem; text-align: right; }
/* İndirim hücresi: tıkla-düzenle + kompakt marj/fark bilgisi */
.md-disc-cell, .md-pw-editcell { cursor: pointer; position: relative; }
.md-disc-cell:hover, .md-pw-editcell:hover { background: var(--accent-softer); }
.md-pw-editcell .muted { color: var(--muted); }
.md-disc-cell .md-disc-main { font-weight: 600; }
.md-disc-cell .md-disc-main.muted { font-weight: 400; color: var(--muted); }
.md-disc-sub { display: block; font-size: .68rem; line-height: 1.2; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.md-disc-diff { font-weight: 600; }
.md-disc-diff.neg { color: var(--danger, #dc2626); }
.md-disc-diff.pos { color: var(--ok, #16a34a); }
@media (max-width: 720px) { .md-params-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Master Data — handoff DÜZEN/tipografi rafinasyonu (.mdx scope)
   RENK YOK: tüm renkler app temasından (var --accent/--surface… ).
   Sadece yerleşim, köşe yarıçapı, tipografi ve sayısal font.
   ============================================================ */
.mdx { --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
/* Sayısal değerler — Space Grotesk (mockup tipografisi) */
.mdx .md-num, .mdx .md-kpi-v, .mdx .md-bc-stats b, .mdx .md-ref-cnt,
.mdx .md-sku, .mdx .md-pm-sku, .mdx .md-table td.md-num { font-family: "Space Grotesk","Manrope",Helvetica,sans-serif; }
.mdx .md-head h1 { font-size: 1.7rem; letter-spacing: -.018em; }
.mdx .eyebrow { letter-spacing: .14em; }
.mdx .md-kpi-v { font-size: 1.65rem; }
.mdx .md-table td { font-size: .82rem; }
.mdx .md-card h3 { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
/* Toplu Ekle modalı üst araç barı (Şablon/İçe Aktar/ERP) */
.md-bulk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.md-bulk-tools-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }

/* ===== Master Data — buton sistemi (handoff .btn, app accent) ===== */
.mdx .button {
  height: 36px; padding: 0 14px; border-radius: 11px;
  font-size: .8rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--accent); cursor: pointer; white-space: nowrap;
  transition: transform .14s, background .14s, border-color .14s, box-shadow .14s;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #ffffff 16%));
  color: #fff; box-shadow: 0 2px 7px rgba(var(--accent-rgb), .22);
}
.mdx .button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28); }
.mdx .button.secondary {
  background: var(--surface-card); color: var(--text); border-color: var(--line); box-shadow: none;
}
.mdx .button.secondary:hover { border-color: rgba(var(--accent-rgb), .42); background: var(--surface-card); transform: none; }
.mdx .button.outline {
  background: rgba(var(--accent-rgb), .08); color: var(--accent); border-color: rgba(var(--accent-rgb), .32); box-shadow: none;
}
.mdx .button.outline:hover { background: rgba(var(--accent-rgb), .15); transform: none; }
.mdx .button.warn {
  background: transparent; color: var(--danger); border-color: rgba(187,62,3,.28); box-shadow: none;
}
.mdx .button.warn:hover { background: rgba(187,62,3,.08); transform: none; }
.mdx .button.slim { height: 30px; padding: 0 11px; font-size: .76rem; border-radius: 9px; box-shadow: none; }
.mdx .button.slim:hover { transform: none; }
.mdx .button > svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ===== Master Data — ürün modalı kart ikonu + form wizard + bulk sihirbaz ===== */
.mdx .md-card h3 { display: flex; align-items: center; gap: 8px; }
.mdx .md-card-ico { display: inline-grid; place-items: center; width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.mdx .md-card-ico svg { width: 100%; height: 100%; }

/* Yeni/Düzenle wizard — tamamlanan adım + footer */
.mdx .md-np2-item.done .md-np2-num { background: var(--success); border-color: var(--success); color: #fff; }
.mdx .md-foot-spacer { flex: 1; }
.mdx .md-modal-foot { display: flex; align-items: center; gap: 10px; }
.mdx .md-modal-foot .button[disabled] { opacity: .4; pointer-events: none; }

/* Toplu Ekle — sekmeler + Excel sihirbazı */
.mdx .md-bulk-tabs { margin: -4px 0 14px; }
.mdx .md-btab-pane { display: none; }
.mdx .md-btab-pane.active { display: block; }
.mdx .md-bulk-count { font-size: .82rem; color: var(--muted); }
.mdx .md-bulk-count b.ok { color: var(--success); font-family: "Space Grotesk", sans-serif; }
.mdx .md-bulk-count b.warn { color: var(--warn-row-text, #ca6702); font-family: "Space Grotesk", sans-serif; }
.mdx .md-bulk2 { display: grid; grid-template-columns: 1fr 270px; gap: 18px; align-items: start; }
.mdx .md-bulk2-main { min-width: 0; }
.mdx .md-tmpl-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid rgba(var(--accent-rgb), .18); background: var(--accent-soft, rgba(var(--accent-rgb), .05)); border-radius: 12px; margin-bottom: 16px; }
.mdx .md-tmpl-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mdx .md-tmpl-ic svg { width: 18px; height: 18px; }
.mdx .md-tmpl-txt { flex: 1; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.mdx .md-dropzone { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed rgba(var(--accent-rgb), .3); border-radius: 12px; background: var(--accent-soft, rgba(var(--accent-rgb), .04)); cursor: pointer; transition: background .14s, border-color .14s; }
.mdx .md-dropzone:hover { background: rgba(var(--accent-rgb), .09); border-color: rgba(var(--accent-rgb), .5); }
.mdx .md-dz-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mdx .md-dz-ic svg { width: 20px; height: 20px; }
.mdx .md-dz-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mdx .md-dz-txt b { font-size: .9rem; color: var(--text); }
.mdx .md-dz-txt span { font-size: .76rem; color: var(--muted); }
.mdx .md-bulk2-note { display: flex; gap: 8px; font-size: .78rem; color: var(--accent); background: var(--accent-soft, rgba(var(--accent-rgb), .07)); border-radius: 9px; padding: 10px 12px; margin-top: 14px; line-height: 1.45; }
.mdx .md-bulk2-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.mdx .md-bulk2-summary { border-left: 1px solid var(--line); padding-left: 18px; }
.mdx .md-bulk2-summary h4 { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 760px) { .mdx .md-bulk2 { grid-template-columns: 1fr; } .mdx .md-bulk2-summary { border-left: none; border-top: 1px solid var(--line); padding: 14px 0 0; } }

/* ===== Master Data — ürün modalı hero düzeltmesi + sekme ikonu ===== */
/* kolModal başlık çubuğunu gizle: hero zaten başlık (handoff PopupA) */
.modal-card.kol-modal:has(.md-product-modal) .modal-header { display: none; }
.modal-card.kol-modal:has(.md-product-modal) .modal-body { padding: 0; }
.mdx .md-product-modal { display: flex; flex-direction: column; }
.mdx .md-pm-head { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.mdx .md-pm-head .md-pm-thumb { width: 64px; height: 64px; }
.mdx .md-pm-id { flex: 1; min-width: 0; }
.mdx .md-pm-head-act { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mdx .md-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-card); color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.mdx .md-icon-btn:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .4); }
.mdx .md-tabs { padding: 0 26px; }
.mdx .md-pm-body { padding: 18px 26px 24px; overflow: auto; }
/* meta satırı yatay (kanallar | linkler) — handoff pm-meta-row */
.mdx .md-pm-meta-row { display: flex; gap: 40px; padding: 14px 18px; background: var(--accent-soft, rgba(var(--accent-rgb), .04)); border: 1px solid rgba(var(--accent-rgb), .1); border-radius: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.mdx .md-pm-meta-item { display: flex; flex-direction: column; gap: 7px; }
.mdx .md-pm-meta-l { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mdx .md-pm-links { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.mdx .md-pm-links .md-link { display: inline-flex; align-items: center; gap: 5px; }
.mdx .md-pm-links .md-link svg { width: 13px; height: 13px; }
/* Sekme ikonu (ürün + toplu ekle sekmeleri) — devasa svg düzeltmesi */
.mdx .md-tab { display: inline-flex; align-items: center; gap: 7px; }
.mdx .md-tab svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ===== Faz 3: Paketler ===== */
.mdx .md-pkg-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .08em; background: rgba(var(--accent-rgb), .14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3); vertical-align: middle; }
.mdx tr.md-row-package { background: rgba(var(--accent-rgb), .045); }
.mdx tr.md-row-package:hover { background: rgba(var(--accent-rgb), .08); }
.mdx tr.md-row-package > td:first-child { box-shadow: inset 3px 0 0 0 var(--accent); }
/* Form modal */
.mdx .md-pkg-form { display: flex; flex-direction: column; max-height: min(82vh, 760px); }
.mdx .md-pkg-grid { display: grid; grid-template-columns: 1fr 290px; gap: 22px; padding: 22px 26px; overflow: auto; }
.mdx .md-pkg-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mdx .md-pkg-form .md-fld-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mdx .md-pkg-form .md-fld-row.md-pkg-cats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.mdx .md-pkg-items { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.mdx .md-pkg-items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mdx .md-pkg-items-head h4 { margin: 0; font-size: .82rem; }
.mdx .md-pkg-rows { display: flex; flex-direction: column; gap: 8px; }
.mdx .md-pkg-row { display: grid; grid-template-columns: 1fr 78px 96px 34px; gap: 8px; align-items: center; }
.mdx .md-pkg-row select, .mdx .md-pkg-row input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .84rem; font-family: inherit; min-width: 0; }
.mdx .md-pkg-line { text-align: right; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.mdx .md-pkg-side { display: flex; flex-direction: column; gap: 16px; }
.mdx .md-pkg-round { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mdx .md-pkg-round h4 { margin: 0; font-size: .82rem; }
.mdx .md-pkg-preview { border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 12px; padding: 14px; background: rgba(var(--accent-rgb), .04); }
.mdx .md-pkg-comp { width: 100%; border-collapse: collapse; font-size: .78rem; }
.mdx .md-pkg-comp th { text-align: left; color: var(--muted); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 4px; border-bottom: 1px solid var(--line); }
.mdx .md-pkg-comp td { padding: 4px; border-bottom: 1px solid rgba(127,127,127,.08); }
.mdx .md-pkg-comp td.md-num, .mdx .md-pkg-comp th.md-num { text-align: right; }
.mdx .md-pkg-comp tr.bad td { color: var(--danger); }
.mdx .md-pkg-comp .md-clamp2 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mdx .md-pkg-sum { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.mdx .md-pkg-sum-row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.mdx .md-pkg-sum-row span { color: var(--muted); }
.mdx .md-pkg-sum-row.strong { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; }
.mdx .md-pkg-sum-row.strong b { color: var(--accent); font-size: .96rem; }
.mdx .md-pkg-foot { display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--line); }
.mdx .md-pkg-foot-sp { flex: 1; }
.mdx .md-pkg-form textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .84rem; font-family: inherit; resize: vertical; width: 100%; box-sizing: border-box; }
.mdx .md-pkg-form .md-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 2px; }
.mdx .md-pkg-form .md-check { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text); cursor: pointer; }
.mdx .md-pkg-form .md-check input { width: auto; }
.mdx .md-fld-hint { color: var(--muted); font-weight: 400; font-size: .9em; }
.mdx .md-pkg-disc { color: var(--success); font-weight: 700; }

/* ===== Faz 4: başlık sıralama + Excel-tarzı sütun filtreleri ===== */
/* Filtre/sıralama butonları rapor tablolarıyla ortak (.col-filter-btn / .col-sort-btn). */
.mdx .md-table thead th.col-hdr { cursor: default; }
.mdx .md-table .col-hdr-cell { display: flex; align-items: center; gap: 4px; }
.mdx .md-table th.num-cell .col-hdr-cell { justify-content: flex-end; }
.mdx .md-table .col-filter-btn { font: inherit; font-weight: inherit; color: inherit; text-align: left; }

/* Tam ekran tablo modu — Excel sayfası gibi: yalnız araç çubuğu + tablo.
   .panel { backdrop-filter } fixed çocukları kapsadığı için PANEL'in kendisini fixed yapıyoruz. */
body.master-fs #dashboardPanel { position: fixed; inset: 0; z-index: 1200; margin: 0; border-radius: 0; padding: 12px 16px; overflow: hidden; max-width: none; }
body.master-fs #reportSidebar, body.master-fs #reportSidebarRail { display: none !important; }
.mdx.md-fs-on { height: 100%; }
.mdx.md-fs-on .md-wrap { display: flex; flex-direction: column; height: 100%; gap: 10px; max-width: none; width: 100%; margin: 0; padding: 0; }
.mdx.md-fs-on .md-head { display: none; }
.mdx.md-fs-on .md-toolbar { flex: 0 0 auto; margin: 0; padding-right: 38px; }
.mdx.md-fs-on .md-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; overflow: auto; }
.mdx.md-fs-on .md-table-fixed { width: 100%; }
.mdx.md-fs-on .md-pw-savebar { flex: 0 0 auto; }
/* Tam ekran ikonu — yalnız ikon, kutusuz, en sağ üst */
.mdx .md-wrap { position: relative; }
.mdx .md-fs-corner { position: absolute; top: 0; right: 0; z-index: 30; width: 30px; height: 30px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.25rem; line-height: 1; display: grid; place-items: center; }
.mdx .md-fs-corner:hover { color: var(--accent); }
.mdx.md-fs-on .md-fs-corner { position: fixed; top: 8px; right: 10px; }
/* Tam ekranda #dashboardPanel z-index:1200 olduğundan modaller (ürün detay, parametreler,
   sütun ayarları) panelin altında kalıyordu — modal backdrop'u panelin üstüne al. */
body.master-fs .modal-backdrop { z-index: 2000; }
/* Dışa Aktar modalı — kapsam seçenek kartları */
.mdx .md-export-opts { display: flex; flex-direction: column; gap: 8px; }
.mdx .md-export-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.mdx .md-export-opt.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.mdx .md-export-opt input { margin-top: 3px; }
.mdx .md-export-opt-tx { display: flex; flex-direction: column; gap: 2px; }
.mdx .md-export-opt-tx b { font-size: .92rem; }
.mdx .md-export-opt-tx span { font-size: .8rem; color: var(--muted); }
.mdx .md-export-toggles { display: flex; flex-direction: column; gap: 8px; }
.mdx .md-export-toggles .md-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; }
/* ERP önizleme: değişen yeni fiyat vurgusu */
.mdx.md-erp-preview .md-prev-new, .mdx .md-erp-preview .md-prev-new { color: var(--accent); font-weight: 700; }

/* ── B3 · ERP Dışa Aktarım — iki panel: kapsam/filtre + canlı önizleme ── */
/* Dışa Aktar modalı: sol kapsam paneli 320px SABİT olduğu için 960px'lik ortak genişlikte
   sağdaki önizleme tablosuna (SKU + Açıklama + Durum + Stok) ~600px kalıyor ve açıklamalar
   iki satıra kırılıyordu. Bu modal kendi genişliğini alır (3 sınıflı seçici .md-wide-modal'ı
   ezer). Not: önizleme tablosu kendi içinde zaten kayıyor, sayfa yatay kaymıyor. */
.modal-card.md-wide-modal.md3-modal { width: min(1280px, 96vw); max-width: min(1280px, 96vw); }
.md3-modal .modal-body { padding: 0; display: block; }
.md3-export { display: flex; flex-direction: column; }
.md3-layout { display: grid; grid-template-columns: 320px 1fr; }
.md3-scope { border-right: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.md3-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.mdx .md3-scopeopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-strong); font-size: .86rem; cursor: pointer; transition: border-color .15s, background .15s; }
.mdx .md3-scopeopt.on { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.md3-scopeopt-tx { display: flex; align-items: center; gap: 9px; }
.mdx .md3-scopeopt input { width: auto; margin: 0; accent-color: var(--accent); }
.md3-scopeopt-n { font-family: "Space Grotesk", sans-serif; color: var(--muted); font-weight: 700; }
.md3-scopeopt.on .md3-scopeopt-n { color: var(--accent); }
.md3-divider { height: 1px; background: var(--line); margin: 10px 0; }
.mdx .md3-scope .md-check { font-size: .83rem; }
.mdx .md3-scope select { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-input); color: var(--text); font-size: .83rem; }
.md3-preview { padding: 20px 24px; min-width: 0; }
.md3-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.md3-preview-info { font-size: .82rem; color: var(--muted); }
.md3-preview-info b { color: var(--text); }
.md3-preview-pill { font-family: "Space Grotesk", sans-serif; font-size: .7rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.md3-table-wrap { max-height: 42vh; overflow: auto; }
/* ERP önizleme: satır seçim kutucuğu sütunu (işaretlenmezse tüm ürünler gönderilir) */
.mdx .md3-selcol { width: 34px; text-align: center; padding-left: 6px !important; padding-right: 4px !important; }
.mdx .md3-selbox, .mdx .md3-selall { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mdx .md3-selcol input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.mdx .md3-selclear { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .78rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0 2px; }
.md3-more { padding: 9px 12px; font-size: .78rem; color: var(--muted); background: var(--surface-nav); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.md3-preview-empty { padding: 24px 12px; text-align: center; }
.md3-instock:has(input:disabled) { opacity: .55; }
.md3-instock-hint { font-size: .72rem; color: var(--muted); }
.mdx .md3-chg-up { color: var(--success); font-weight: 700; }
.mdx .md3-chg-down { color: var(--danger); font-weight: 700; }
/* Fiyat önizleme: değişen alanlar sütun sütun, eski (üstte silik) → yeni (altta renkli) */
.md3-price-wrap table { min-width: max-content; }
.md3-price-wrap th { white-space: nowrap; }
.mdx .md3-cell-chg { white-space: nowrap; line-height: 1.15; }
.mdx .md3-cell-chg .md3-old { display: block; font-size: .72rem; color: var(--muted); text-decoration: line-through; }
.mdx .md3-cell-chg .md3-new { display: block; font-size: .82rem; }
.mdx .md3-cell-same { color: var(--muted); }
/* Çalışan buton: dokunulamaz + spinner metni */
.button.is-busy { pointer-events: none; opacity: .8; }
.button.is-busy .kol-spinner { border-top-color: currentColor; margin-right: 2px; }
/* Footer kart kenarlarına yapışıyordu → yatay/dikey iç boşluk + köşe yuvarlama. */
.md3-modal .md-modal-foot { margin-top: 0; padding: 16px 24px; background: var(--surface-nav); border-radius: 0 0 28px 28px; }
@media (max-width: 700px) { .md3-layout { grid-template-columns: 1fr; } .md3-scope { border-right: 0; border-bottom: 1px solid var(--line); } }
/* Stok yükleniyor çemberi */
.mdx .md-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); border-radius: 50%; animation: md-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes md-spin { to { transform: rotate(360deg); } }

/* Sabit yerleşim (sürükle-genişlet + freeze) */
/* border-collapse: collapse, hücrelerde position:sticky'yi bozuyor → freeze'de başlık kayması.
   Sabit yerleşimde separate kullanıp kenarlıkları hücre alt çizgisiyle veriyoruz. */
.mdx .md-table.md-table-fixed { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
/* Başlıklar dikeyde sabit (sticky-top). NOT: 'th.col-hdr{position:relative}' KULLANMA —
   freeze'in sticky'sini özgüllükle ezer. Resize tutamacı zaten sticky th'ye göre konumlanır. */
.mdx .md-table-fixed thead th { position: sticky; top: 0; z-index: 3; }
.mdx .md-table-fixed .col-hdr-cell { min-width: 0; }
.mdx .md-table-fixed .col-filter-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mdx .md-col-resize { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; }
.mdx .md-col-resize:hover { background: linear-gradient(90deg, transparent 38%, rgba(var(--accent-rgb), .55) 38%, rgba(var(--accent-rgb), .55) 62%, transparent 62%); }
/* Tema yüzeyleri translucent → freeze'de OPAK taban gerek (solid --bg + kart/başlık overlay).
   Aksi halde kaydırınca arkadan geçen sütunlar görünür. Satır hover/durum renkleri de yansıtılır. */
.mdx .md-table .md-frozen { position: sticky; z-index: 2; }
.mdx .md-table tbody .md-frozen { background: linear-gradient(var(--surface-card), var(--surface-card)), var(--bg); }
.mdx .md-table thead .md-frozen { z-index: 7; background: linear-gradient(var(--surface-subtle), var(--surface-subtle)), var(--bg); }
/* Satır hover / seçim / paket / uyarı renkleri freeze'li hücrelere de uygulanır (opak tabanla) */
.mdx .md-table tbody tr:hover .md-frozen { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg); }
.mdx .md-table tbody tr.md-row-dirty .md-frozen { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg); }
.mdx .md-table tbody tr.md-row-package .md-frozen { background: linear-gradient(rgba(var(--accent-rgb), .045), rgba(var(--accent-rgb), .045)), var(--bg); }
.mdx .md-table tbody tr.md-row-package:hover .md-frozen { background: linear-gradient(rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .08)), var(--bg); }
.mdx .md-table tbody tr.md-alert-red .md-frozen { background: linear-gradient(rgba(187,62,3,.12), rgba(187,62,3,.12)), var(--bg) !important; }
.mdx .md-table tbody tr.md-alert-yellow .md-frozen { background: linear-gradient(rgba(202,138,4,.16), rgba(202,138,4,.16)), var(--bg) !important; }
.mdx .md-table tbody tr.md-alert-green .md-frozen { background: linear-gradient(rgba(42,157,143,.14), rgba(42,157,143,.14)), var(--bg) !important; }
/* Koyu-kırmızı ve pasif uyarı satırlarının td arkaplanı yarı-saydam (!important) — sabit hücreye
   opak taban ekle, aksi halde kayan sütun yazıları sabit hücrenin altından görünür. */
.mdx .md-table tbody tr.md-alert-darkred .md-frozen { background: linear-gradient(rgba(150,20,20,.26), rgba(150,20,20,.26)), var(--bg) !important; }
.mdx .md-table tbody tr.md-alert-passive .md-frozen { background: linear-gradient(rgba(217,119,6,.13), rgba(217,119,6,.13)), var(--bg) !important; }
.mdx .md-table .md-frozen-last::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--line); box-shadow: 3px 0 5px -2px rgba(0,0,0,.14); }
/* Sağ tık ile tekil sabitlenen sütun başlığı — küçük iğne göstergesi. */
.mdx .md-table thead th.md-pincol .col-filter-btn::before { content: "📌"; font-size: .7em; margin-right: 3px; opacity: .8; }
/* Sağ tık sütun-sabitleme menüsü */
.md-colpin-menu { min-width: 190px; background: var(--surface-card, #fff); border: 1px solid var(--line, #dcdcdc); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.md-colpin-menu .md-colpin-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: .85rem; color: var(--text, #1f2937); }
.md-colpin-menu .md-colpin-item:hover { background: var(--accent-soft, rgba(37,99,235,.1)); }
.mdx .md-hint { font-size: .72rem; color: var(--muted); margin: 4px 0 0; }
.mdx .md-hint.warn { color: var(--danger); }
@media (max-width: 720px) {
  .mdx .md-pkg-grid { grid-template-columns: 1fr; }
  .mdx .md-pkg-form .md-fld-row { grid-template-columns: 1fr; }
}

/* ===== Master Data — sabit 2-satır satır yüksekliği + her sütunda clamp ===== */
.mdx .md-table td { vertical-align: middle; height: 56px; box-sizing: border-box; }
.mdx .md-table td .md-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; max-height: 2.7em; word-break: break-word; }
.mdx .md-table td.md-num .md-clamp2 { word-break: normal; }

/* ===== Master Data — satış kanalları (tek satır, taşma yok) ===== */
.mdx .md-chips-row { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow: hidden; white-space: nowrap; }
.mdx .md-chip.more { background: var(--surface-subtle); color: var(--muted); }

/* ===== Master Data — parametre marj kuralı kademeli kategori ===== */
.mdx .md-rule-cats { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.mdx .md-rule-cats select { flex: 1 1 130px; min-width: 110px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.mdx .md-rule-row { align-items: start; }

/* ===== Master Data — kategori ağaç görünümü (yönetim) ===== */
.mdx .md-tree { display: flex; flex-direction: column; }
.mdx .md-tree-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: default; }
.mdx .md-tree-row:hover { background: var(--accent-softer, rgba(var(--accent-rgb), .04)); }
.mdx .md-tree-tw { width: 14px; text-align: center; color: var(--muted); flex-shrink: 0; }
.mdx .md-tree-name { font-weight: 600; color: var(--text); font-size: .9rem; }
.mdx .md-tree-code { font-family: var(--mono, monospace); font-size: .72rem; color: var(--muted); background: var(--surface-subtle); padding: 1px 7px; border-radius: 6px; }
.mdx .md-tree-lvl { font-size: .66rem; font-weight: 700; color: var(--accent); background: var(--accent-soft, rgba(var(--accent-rgb), .1)); padding: 1px 7px; border-radius: 999px; }
.mdx .md-tree-ops { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: opacity .12s; }
.mdx .md-tree-row:hover .md-tree-ops { opacity: 1; }
.mdx .md-tree-tw.has { cursor: pointer; }
.mdx .md-tree-tw.has:hover { color: var(--accent); }
.mdx .md-tree-grip { color: var(--muted); cursor: grab; opacity: .35; font-size: .9rem; flex-shrink: 0; letter-spacing: -1px; }
.mdx .md-tree-row:hover .md-tree-grip { opacity: .7; }
.mdx .md-tree-count { font-size: .66rem; font-weight: 700; color: var(--muted); background: var(--surface-subtle); padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center; }
.mdx .md-tree-row.md-tree-dragging { opacity: .45; }
.mdx .md-tree-row.md-tree-dragover { box-shadow: inset 0 2px 0 0 var(--accent); background: rgba(var(--accent-rgb), .06); }

/* ===== Master Data — toplu satır kademeli kategori ===== */
.mdx .md-bulk-cats { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mdx .md-bulk-cats select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .8rem; min-width: 0; }
.mdx .md-bulk-cats select:disabled { opacity: .5; }
.mdx .md-bulk-row { align-items: start; }

/* ===== Master Data — marj yapısı editörü (Back/Distributor/Dealer + ek) ===== */
.mdx .md-mgroup { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.mdx .md-mgroup-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
/* Back Margin akordeon (details/summary) */
.mdx details.md-mgroup-acc { }
.mdx details.md-mgroup-acc > summary { cursor: pointer; list-style: none; user-select: none; }
.mdx details.md-mgroup-acc > summary::-webkit-details-marker { display: none; }
.mdx details.md-mgroup-acc > summary::before { content: "▸"; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform .15s ease; }
.mdx details.md-mgroup-acc[open] > summary::before { transform: rotate(90deg); }
.mdx details.md-mgroup-acc > summary .md-acc-sum { margin-left: auto; }
/* Açıkken foot'taki toplam tekrarlanmasın (summary'de zaten var) */
.mdx details.md-mgroup-acc[open] .md-mgroup-foot { display: flex; }
.mdx details.md-mgroup-acc[open] > summary .md-acc-sum { visibility: hidden; }
.mdx .md-mrow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.mdx .md-mrow input[data-mb="name"], .mdx .md-mrow input[data-me="name"] { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; min-width: 0; }
.mdx .md-mflat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mdx .md-mtotal { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft, rgba(var(--accent-rgb), .1)); color: var(--accent); font-weight: 700; font-size: .85rem; }
.mdx .md-mtotal b { font-size: 1.05rem; }
/* M7: Back Margin toplamı — kalemlerin altında, marj girişleri hizasında (sağ alt) */
.mdx .md-mgroup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .8rem; font-weight: 700; color: var(--text); }
.mdx .md-mgroup-foot b { font-size: .95rem; color: var(--accent); }
/* M6: bottom/min seçili toplam marj göstergesi */
.mdx .md-mselect-total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--accent-soft, rgba(var(--accent-rgb), .08)); font-size: .8rem; font-weight: 600; color: var(--muted); }
.mdx .md-mselect-total b { color: var(--accent); font-size: .95rem; }

/* ===== Master Data — Bottom/Min marj seçimi ===== */
.mdx .md-mselect { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mdx .md-mselect .md-check { font-size: .82rem; }
.mdx .md-mselect .md-check.dim { opacity: .6; }

/* ===== Master Data — PW satır düzenleme (promosyon/indirim + save bar) ===== */
.mdx .md-pw-edit { padding: 4px 6px !important; }
.mdx .md-pw-input { width: 84px; max-width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-input); color: var(--text); font: inherit; font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.mdx .md-pw-input:focus { border-color: var(--accent); outline: none; }
.mdx tr.md-row-dirty { background: var(--accent-soft, rgba(var(--accent-rgb), .06)); }
.mdx tr.md-row-dirty:hover { background: var(--accent-soft, rgba(var(--accent-rgb), .1)); }
.mdx .md-pw-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 18px; background: var(--surface-card); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.mdx .md-pw-savebar-txt { font-size: .85rem; color: var(--text); }
.mdx .md-pw-savebar-act { display: flex; gap: 10px; }
/* Onay (Tabloda Görüntüle) modu: satır seçim kutucuğu + değişen/etkilenen hücre çerçeveleri + alt onay bar'ı */
.mdx .md-apcol { text-align: center; padding-left: 6px !important; padding-right: 6px !important; }
.mdx .md-ap-rowcb, .mdx .md-ap-allcb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.mdx td[data-ap-hi="changed"] { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(var(--accent-rgb), .12) !important; }
.mdx td[data-ap-hi="affected"] { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .05) !important; }
.mdx .md-ap-savebar { border-color: rgba(var(--accent-rgb), .55); }
.mdx .md-ap-savebar .button[disabled] { opacity: .45; pointer-events: none; }
/* Seçili yokken birincil aksiyon = Reddet (kırmızı); ikonu gizle. */
.mdx .md-ap-savebar .button.is-reject { background: #b3261e; border-color: #b3261e; }
.mdx .md-ap-savebar .button.is-reject:hover { background: #9a1f18; border-color: #9a1f18; }
.mdx .md-ap-savebar .button.is-reject .md-ap-btnico { display: none; }
/* Onay seçim kutucuğu sütunu sticky iken opak kalsın (md-frozen zaten uyguluyor). */
.mdx .md-table .md-apcol.md-frozen { z-index: 4; }
.mdx .md-table thead .md-apcol.md-frozen { z-index: 8; }

.mdx .md-pw-rev { background: var(--accent-soft, rgba(var(--accent-rgb), .12)); color: var(--accent); font-weight: 700; }

/* ===== Master Data — TCMB kur satırı ===== */
.mdx .md-rate-row { margin-bottom: 10px; }
.mdx .md-rate-tcmb { font-size: .72rem; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mdx .md-rate-tcmb b { font-family: "Space Grotesk", sans-serif; color: var(--text); }
.mdx .md-rate-warn { color: var(--danger); font-weight: 600; }

/* ===== Master Data — yuvarlama satırları ===== */
/* Item 2: bant tabanlı fiyat yuvarlama — Var/Yok anahtarı + açılıp kapanabilen bantlar */
.mdx .md-round-list { display: flex; flex-direction: column; gap: 8px; }
.mdx .md-round-field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.mdx .md-round-field.on { border-color: rgba(var(--accent-rgb), .4); }
.mdx .md-round-fhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mdx .md-round-en { font-size: .84rem; }
.mdx .md-round-det { margin-top: 6px; }
.mdx .md-round-field:not(.on) .md-round-det { display: none; }
.mdx .md-round-det > summary { cursor: pointer; font-size: .76rem; color: var(--muted); padding: 2px 0; user-select: none; }
.mdx .md-round-bands { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.mdx .md-round-band { display: grid; grid-template-columns: 1.1fr 1fr .8fr .8fr auto; gap: 8px; align-items: end; }
.mdx .md-rb-fld { display: flex; flex-direction: column; gap: 3px; font-size: .7rem; color: var(--muted); min-width: 0; }
.mdx .md-round-band select, .mdx .md-round-band input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .8rem; min-width: 0; }
.mdx .md-round-band .md-icon-x { align-self: center; }

/* ===== Master Data — uyarı kuralları + satır renkleri ===== */
.mdx tr.md-alert-red td { background: rgba(187,62,3,.12) !important; }
.mdx tr.md-alert-yellow td { background: rgba(202,138,4,.16) !important; }
.mdx tr.md-alert-green td { background: rgba(42,157,143,.14) !important; }
.mdx .md-alert-row { display: grid; grid-template-columns: 1fr .55fr .65fr 1fr .55fr .5fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.mdx .md-alert-row select, .mdx .md-alert-row input { padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-input); color: var(--text); font-size: .78rem; min-width: 0; }
.mdx .md-alert-row [hidden] { display: none; }

/* ============================================================
   Master Data — yeniden tasarım (handoff: Master Data Redesign)
   ============================================================ */
/* Kompakt aksiyon kümesi: split "Ekle ▾" + ikon butonlar */
.md-actcluster { align-items: center; gap: 10px; position: relative; }
.md-icon-sep { width: 1px; height: 24px; background: var(--line); margin: 0 1px; }
.md-iconbtn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-card-strong, var(--surface-card)); color: var(--muted); display: grid; place-items: center; cursor: pointer; position: relative; transition: .14s; padding: 0; }
.md-iconbtn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .42); }
.md-iconbtn svg { width: 17px; height: 17px; display: block; }
.md-iconbtn .md-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: .7rem; font-weight: 600; padding: 4px 8px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .14s; z-index: 5; }
.md-iconbtn .md-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: #1f2937; }
.md-iconbtn:hover .md-tip { opacity: 1; }
.md-split { display: inline-flex; align-items: stretch; border-radius: 11px; overflow: hidden; box-shadow: 0 2px 7px rgba(var(--accent-rgb), .22); }
.md-split .md-split-main { height: 36px; padding: 0 14px; border: 1px solid var(--accent); border-right: none; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #fff 16%)); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.md-split .md-split-caret { width: 34px; border: 1px solid var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent), #000 6%), var(--accent)); color: #fff; display: grid; place-items: center; cursor: pointer; border-left: 1px solid rgba(255,255,255,.25); }
.md-split .md-split-caret svg { width: 14px; height: 14px; }
.md-split .md-split-main svg { width: 15px; height: 15px; }
.md-addmenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 234px; background: var(--surface-card-strong, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(31,41,55,.20); padding: 7px; z-index: 30; }
.md-addmenu[hidden] { display: none; }
.md-menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; cursor: pointer; width: 100%; border: none; background: none; text-align: left; font: inherit; }
.md-menu-item:hover { background: var(--accent-soft); }
.md-menu-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.md-menu-ico svg { width: 16px; height: 16px; display: block; }
.md-menu-tx b { display: block; font-size: .85rem; font-weight: 600; color: var(--text); }
.md-menu-tx span { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; }
.md-menu-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* Price Workspace chip ikonu + İleri/Ters segmenti */
.md-chip-pw svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
.md-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-subtle); padding: 3px; }
.md-seg button { border: none; background: transparent; font: inherit; font-size: .76rem; font-weight: 600; color: var(--muted); padding: 5px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .14s; }
.md-seg button svg { width: 13px; height: 13px; display: block; }
.md-seg button.on { background: var(--surface-card-strong, #fff); color: var(--accent); box-shadow: 0 1px 4px rgba(31,41,55,.12); }
/* Onaylar & Talepler — durum segmenti + sayı rozeti */
.md-ap-seg { margin-bottom: 4px; }
.md-ap-cnt { font-size: .68rem; font-weight: 700; background: var(--surface-subtle); color: var(--muted); border-radius: 999px; padding: 1px 6px; min-width: 16px; text-align: center; }
.md-seg button.on .md-ap-cnt { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
/* Onaylar & Talepler — Space Grotesk sayı vurgusu (tasarımdaki .sg) */
.mdx .sg { font-family: "Space Grotesk", "Manrope", Helvetica, sans-serif; }
/* Ürün Onayları tablosu — sabit SKU (sol) / İşlem (sağ) sütunları + toplu seçim */
/* Onaylar tablosu modalın dışına TAŞMAZ: kapsayıcı 100% ile sınırlı, kaydırma tablo İÇİNDE. */
.md-pending, .md-pending-wide { min-width: 0; max-width: 100%; }
.md-colpane { min-width: 0; max-width: 100%; overflow: hidden; }
.md-ap-tablewrap { max-height: 72vh; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; }
/* Tablo modala göre genişler; sığmazsa YALNIZ tablo yatay kayar (modal kaymaz). */
.md-ap-table { width: 100%; min-width: 720px; }
.md-ap-table th, .md-ap-table td { white-space: nowrap; vertical-align: middle; }
.md-ap-table th.md-ap-sticky-l, .md-ap-table td.md-ap-sticky-l { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--line); }
.md-ap-table th.md-ap-sticky-r, .md-ap-table td.md-ap-sticky-r { position: sticky; right: 0; z-index: 2; border-left: 1px solid var(--line); }
.md-ap-table thead th.md-ap-sticky-l, .md-ap-table thead th.md-ap-sticky-r { z-index: 3; }
.md-ap-table thead th { background: var(--surface-subtle); }
.md-ap-table td.md-ap-sticky-l, .md-ap-table td.md-ap-sticky-r { background: var(--surface-strong); }
.md-ap-table tr.md-ap-selrow td { background: var(--accent-soft) !important; }
.md-ap-skucell { display: flex; align-items: center; gap: 11px; }
.md-ap-skutx { min-width: 0; }
.md-ap-sku { font-size: .74rem; color: var(--muted); }
.md-ap-name { font-weight: 600; margin-top: 2px; white-space: normal; }
/* Onay satırı: Ekleme/Düzenleme rozeti + düzenleme değişiklik listesi (neydi→ne oldu). */
.md-ap-kind { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 20px; background: var(--accent-soft, #eef2ff); color: var(--accent, #3b5bdb); vertical-align: middle; }
.md-ap-kind.edit { background: var(--warn-soft, #fef3c7); color: var(--warn, #b45309); }
/* SKU sütunu (sabit sol) genişliği sınırlı; değişiklik listesi SARAR ve gerekirse kendi içinde kayar. */
.md-ap-table th.md-ap-sticky-l, .md-ap-table td.md-ap-sticky-l { width: 460px; max-width: 460px; }
.md-ap-skutx { min-width: 0; flex: 1; }
.md-ap-table td.md-ap-sticky-l .md-ap-name { white-space: normal; overflow-wrap: anywhere; }
.md-ap-changes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; white-space: normal; max-height: 120px; overflow-y: auto; }
.md-ap-changes.muted { color: var(--muted); font-size: .76rem; }
.md-ap-chg { font-size: .76rem; color: var(--text); background: var(--surface-alt, #f4f4f6); border-radius: 6px; padding: 1px 7px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.md-ap-chg b { font-weight: 600; color: var(--muted); }
.md-ap-table td.md-ap-cat, .md-ap-table td.md-ap-by { color: var(--muted); }
.md-ap-table td.md-ap-low { color: var(--danger); }
.md-ap-chk { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(var(--accent-rgb), .4); background: var(--surface-strong); display: inline-grid; place-items: center; flex-shrink: 0; }
.md-ap-chk.on { background: var(--accent); border-color: var(--accent); }
.md-ap-chk svg { display: block; }
.md-ap-chklbl { cursor: pointer; display: inline-flex; align-items: center; }
.md-ap-chk-sp { width: 16px; flex-shrink: 0; display: inline-block; }
.md-ap-bulk { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 11px 15px; border-radius: 13px; border: 1px solid rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .08); }
.md-ap-bulk-n { font-size: .86rem; font-weight: 700; color: var(--accent); }
.md-ap-bulk-clear { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }
.md-ap-bulk-btn { border: 0; border-radius: 10px; padding: 8px 16px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.md-ap-bulk-btn.approve { color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)); }
.md-ap-bulk-btn.reject { color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.md-ap-actbtn { border: 0; border-radius: 9px; padding: 7px 13px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.md-ap-actbtn.approve { color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)); }
.md-ap-actbtn.reject { color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); margin-left: 6px; }
.md-ap-note { margin: 8px 0 !important; }
.md-tabbar .md-tab .md-ap-tabcnt { font-size: .68rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.md-tabbar .md-tab .md-ap-tabcnt.warn { background: var(--accent-3, #ca6702); }

/* Parametreler modalı — ikonlu bölüm başlıkları */
.mdx .md-params-card h4 { display: flex; align-items: center; gap: 8px; }
.mdx .md-sec-ic { width: 24px; height: 24px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mdx .md-sec-ic svg { width: 14px; height: 14px; display: block; }
.mdx .md-params-card h4 .muted { margin-left: auto; font-weight: 500; }

/* Paket detay — fiyat KPI şeridi */
.mdx .md-pkg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 4px 0 18px; }
.mdx .md-pkg-kpi { background: var(--surface-card-strong, var(--surface-card)); padding: 14px 16px; }
.mdx .md-pkg-kpi .k { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mdx .md-pkg-kpi .v { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-top: 5px; letter-spacing: -.01em; }
.mdx .md-pkg-kpi .v small { font-size: .58em; color: var(--muted); font-weight: 600; margin-left: 3px; }
.mdx .md-pkg-kpi.accent { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #fff 22%)); }
.mdx .md-pkg-kpi.accent .k { color: rgba(255,255,255,.78); }
.mdx .md-pkg-kpi.accent .v { color: #fff; }
.mdx .md-pkg-kpi.accent .v small { color: rgba(255,255,255,.8); }
@media (max-width: 640px) { .mdx .md-pkg-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Toplu Güncelle — kapsam şeridi + not */
.mdx .md-subhdr { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.mdx .md-bu-scope { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(var(--accent-rgb), .2); background: var(--accent-soft); border-radius: 12px; margin-bottom: 4px; }
.mdx .md-bu-scope-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-card-strong, #fff); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(var(--accent-rgb), .25); }
.mdx .md-bu-scope-ic svg { width: 18px; height: 18px; display: block; }
.mdx .md-bu-scope-tx b { font-size: .9rem; color: var(--text); }
.mdx .md-bu-scope-tx span { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.mdx .md-note { display: flex; gap: 9px; font-size: .78rem; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 11px 13px; line-height: 1.45; margin: 14px 0 4px; }
.mdx .md-note-ic { flex-shrink: 0; }
.mdx .md-note-ic svg { width: 15px; height: 15px; display: block; margin-top: 1px; }

/* Özel Alanlar — sürükle tutamağı + tip rozeti + ekleme kartı */
.mdx .md-cf-list { display: flex; flex-direction: column; gap: 8px; }
.mdx .md-cf-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-card-strong, var(--surface-card)); }
.mdx .md-cf-grip { color: var(--muted); cursor: grab; user-select: none; }
.mdx .md-cf-main { flex: 1; min-width: 0; }
.mdx .md-cf-name { font-weight: 600; font-size: .86rem; color: var(--text); }
.mdx .md-cf-type { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 7px; padding: 3px 8px; }
.mdx .md-cf-add { border: 1.5px dashed rgba(var(--accent-rgb), .3); border-radius: 12px; padding: 16px; background: var(--accent-soft); margin-top: 16px; }
.mdx .md-cf-add-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mdx .md-cf-add-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-card-strong, #fff); color: var(--accent); display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .25); }
.mdx .md-cf-add-ic svg { width: 16px; height: 16px; display: block; }
.mdx .md-cf-add-h b { font-size: .88rem; }
.mdx .md-cf-add-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: end; }
.mdx .md-cf-add-grid .button { height: 36px; }
@media (max-width: 560px) { .mdx .md-cf-add-grid { grid-template-columns: 1fr; } }

/* ── Stok Yaşı Raporu ─────────────────────────────────────────────────────── */
.stok-yasi-list-card { display: flex; flex-direction: column; gap: 14px; }
.stok-yasi-head-actions { display: flex; align-items: center; gap: 12px; }
.stok-yasi-count { font-size: .82rem; white-space: nowrap; }
.stok-yasi-list-table tbody tr.stok-yasi-list-row { cursor: pointer; transition: background .12s ease; }
.stok-yasi-list-table tbody tr.stok-yasi-list-row:hover,
.stok-yasi-list-table tbody tr.stok-yasi-list-row:focus-visible {
  background: var(--surface-subtle, rgba(0,0,0,.04));
  outline: none;
}

/* Stok Yaşı satır detayı artık Kar Raporu fatura modalıyla AYNI tasarımı
   kullanıyor (`.inv-modal` bloğu). Tek fark: sütun sayısı az olduğu için kart
   daha dar ve kısa duruyor. Eski `.stok-yasi-modal*` blokları kaldırıldı;
   `.stok-yasi-wrap` / `.stok-yasi-table` ise Stok Röntgen'in SKU detay
   kartındaki "Stok Yaşı (Fatura Bazlı)" tablosunda HÂLÂ kullanılıyor. */
.sya-detail-modal {
  width: min(1080px, calc(100vw - 24px));
  /* Lot sayısı 1 ile onlarca arasında değişiyor → sabit yükseklik (Kar Raporu'nda
     olduğu gibi) kısa listelerde kartın yarısını boş bırakıyordu. İçeriğe göre
     büyüsün, ekranı aşmasın. */
  height: auto;
  max-height: min(760px, calc(100vh - 64px));
}

/* Yaş listesinin kapanış satırları: kalıntı (yaşı ölçülemeyen adet) ve toplam.
   İkisi olmadan modal, tablodaki "Stoktaki Miktar" ile tutmuyor görünüyordu. */
.inv-table tbody tr.sya-bridge-row td {
  color: var(--muted);
  font-style: italic;
  background: var(--surface-subtle);
}
.inv-table tfoot tr.sya-total-row td {
  font-weight: 700;
  color: var(--text);
  border-top: 2px solid var(--line);
  background: var(--surface-subtle);
  position: sticky;
  bottom: 0;
}

/* Seri numarası hücresi: özet + <details> ile tam liste.
   Sütun GENİŞLİĞİ sınırlanmak zorunda: tek grupta yüzlerce seri olabildiği için
   `table-layout: auto` bu sütunu tabloyu taşıracak kadar büyütüyor ve Adet /
   Stok Yaşı / Maliyet sütunlarını görüş alanının dışına itiyordu. */
.inv-table td.sya-seri-cell { max-width: 280px; width: 280px; }
.sya-seri-list, .sya-seri-head { font-variant-numeric: tabular-nums; letter-spacing: .005em; }
.sya-seri-list {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sya-seri > summary {
  display: flex; align-items: baseline; gap: 8px;
  cursor: pointer; list-style: none; min-width: 0;
}
.sya-seri > summary::-webkit-details-marker { display: none; }
.sya-seri-head {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sya-seri-more {
  flex: 0 0 auto;
  font-size: .78em; font-weight: 600; color: var(--accent);
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-subtle);
}
.sya-seri[open] > summary .sya-seri-head { display: none; }
.sya-seri-all {
  margin-top: 6px; max-height: 160px; overflow: auto;
  font-size: .86em; line-height: 1.5; color: var(--muted);
  /* `.inv-table td` hücreleri tek satıra kilitliyor (white-space: nowrap);
     açılan liste sarmalanmazsa 12 binden fazla karakter tek satırda kalıyor ve
     max-height/scroll hiç devreye girmiyordu. */
  white-space: normal;
  word-break: break-all;
}

/* Sayfa üstü seçenek şeridi (yaş yöntemi + maliyet dövizi). Borç Alacak
   raporunun `.bal-toolbar`'ıyla aynı düzen; pill'ler ortak `.segmented-control`. */
.sya-toolbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 14px; }
.sya-toolbar-group { display: flex; flex-direction: column; gap: 5px; }
.sya-toolbar-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

/* Yaş filtresi aktifken "filtreli / toplam" hücresi: pay kalın ve vurgulu,
   toplam soluk ve küçük — göz önce filtreye düşen miktarı okusun. */
.sya-split { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sya-split-hit { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.sya-split-all { color: var(--muted); font-size: .86em; font-variant-numeric: tabular-nums; }
.sya-match-note {
  font-size: .78rem; font-weight: 600; color: var(--accent);
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-subtle);
  white-space: nowrap;
}

/* Yaş sütununun koşul filtresi GÜN cinsinden çalışır — kutunun altındaki not. */
.stok-filter-hint {
  margin: 0; padding: 2px 10px 6px;
  font-size: .72rem; line-height: 1.35; color: var(--muted);
}

/* ============================ CRM module ============================ */
.crm-wrap .crm-form-page { max-width: 980px; margin: 0 auto; padding: 2px 2px 40px; }
.crm-muted { color: var(--muted); }
.crm-wrap .mono { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Brand grid */
.crm-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.crm-brand-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-strong);
  cursor: pointer; transition: transform .1s, border-color .12s, box-shadow .12s; font: inherit; }
.crm-brand-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 16px 40px -28px rgba(0,109,119,.5); }
.crm-brand-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-end)); }
.crm-brand-name { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.crm-brand-desc { font-size: 13px; color: var(--muted); }
.crm-brand-go { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.crm-brand-go svg { width: 15px; height: 15px; }

/* Form */
.crm-form { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 16px; padding: 8px 22px 22px; }
.crm-fsec { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.crm-fsec:last-of-type { border-bottom: none; }
.crm-fsec-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin: 0 0 14px; }
.crm-fsec-t svg { width: 16px; height: 16px; }
.crm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.crm-fld { display: flex; flex-direction: column; gap: 6px; }
.crm-fld.wide { margin-top: 14px; }
.crm-fld > span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.crm-fld > span em { color: var(--danger); font-style: normal; margin-left: 2px; }
.crm-fld input, .crm-fld select, .crm-fld textarea { height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-input); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.crm-fld textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 44px; }
.crm-fld input:focus, .crm-fld select:focus, .crm-fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.crm-fld .crm-hint { font-size: 11.5px; color: var(--muted); }
.crm-phone { display: flex; gap: 8px; }
.crm-phone select { width: 120px; flex-shrink: 0; }
.crm-phone input { flex: 1; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.crm-chip:hover { border-color: var(--accent); }
.crm-chip.on { background: linear-gradient(135deg, var(--accent), var(--accent-end)); border-color: var(--accent); color: #fff; }
/* Kilitli marka chip'i: kullanıcının yetkisi yok — işaretli ama değiştirilemez. */
.crm-chip-locked { cursor: default; opacity: .78; }
.crm-chip-locked:hover { border-color: var(--accent); }
/* İçe aktarım marka seçimi (çoklu). */
.crm-imp-brands { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.crm-imp-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* Aranabilir il seçici (combobox). */
.crm-combo { position: relative; }
.crm-combo-input { width: 100%; }
.crm-combo-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; opacity: .7; }
.crm-combo-caret svg { width: 16px; height: 16px; }
.crm-combo-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; }
.crm-combo-opt { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.crm-combo-opt:hover, .crm-combo-opt.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.crm-combo-opt[hidden] { display: none; }
.crm-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.crm-save-note { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.crm-save-note.ok { color: var(--success); font-weight: 600; }

/* Detail */
.crm-detail-id { display: flex; align-items: center; gap: 14px; }
.crm-tabbar { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.crm-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: none; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.crm-tab svg { width: 16px; height: 16px; }
.crm-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.crm-tabpanel { display: none; }
.crm-tabpanel.on { display: block; }

/* History */
.crm-hist { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.crm-hist-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.crm-hist-row:last-child { border-bottom: none; }
.crm-hist-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.crm-hist-body { flex: 1; min-width: 0; }
.crm-hist-head { display: flex; align-items: baseline; gap: 10px; }
.crm-hist-head b { font-size: 13.5px; color: var(--text); }
.crm-hist-time { font-size: 12px; color: var(--muted); }
.crm-hist-badge { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.crm-hist-badge.created { background: var(--accent-soft); }
.crm-hist-changes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.crm-hist-chg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.crm-hist-chg svg { width: 13px; height: 13px; color: var(--muted); }
.crm-hist-field { font-weight: 700; color: var(--text); min-width: 130px; }
.crm-hist-from { color: var(--muted); text-decoration: line-through; }
.crm-hist-to { color: var(--success); font-weight: 600; }

/* CRM source-tree settings editor */
.crm-source-card .crm-src-groups { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 12px; }
.crm-src-group { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.crm-src-g-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crm-src-g-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.crm-src-g-head .kol-opt-count { margin-left: 0; }
.crm-src-g-rm { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; }
.crm-src-g-rm:hover { color: var(--danger); border-color: var(--danger); }

/* CRM fixed (BOEMAR) source group */
.crm-src-fixed { background: var(--accent-soft); border-color: var(--accent); }
.crm-src-fixed-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff; letter-spacing: .03em; }

/* CRM table: 21 columns, 2-line clamped cells */
.crm-wrap .crm-table { min-width: 2300px; }
.crm-wrap .crm-table tbody td { white-space: normal; vertical-align: top; }
.crm-cell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 190px; min-width: 70px; line-height: 1.35; min-height: 2.7em; max-height: 2.7em; word-break: break-word; }
.crm-cell .t-pill { white-space: nowrap; }

/* CRM split "Yeni" button + arrow + dropdown menu */
.crm-split { display: inline-flex; align-items: stretch; }
.crm-split-main { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.crm-split-caret { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  padding: 0 9px !important; margin-left: 1px; }
.crm-split-caret svg { width: 16px; height: 16px; }
.crm-addmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 250px;
  background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px -22px rgba(20,12,4,.5); padding: 6px; }
.crm-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font: inherit; color: var(--text); }
.crm-menu-item:hover { background: rgba(var(--accent-rgb), .08); }
.crm-menu-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.crm-menu-ico svg { width: 17px; height: 17px; }
.crm-menu-tx { display: flex; flex-direction: column; }
.crm-menu-tx b { font-size: 13px; }
.crm-menu-tx span { font-size: 11.5px; color: var(--muted); }

/* CRM import result */
.crm-imp-result { padding: 4px 2px; }
.crm-imp-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.crm-imp-line strong { font-variant-numeric: tabular-nums; }
.crm-imp-errs { margin-top: 12px; }
.crm-imp-errs h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--danger); }
.crm-imp-errs p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.crm-wrap .t-head-actions { position: relative; }
/* CRM tablo: aksiyon butonları toolbar'da, arama input'uyla aynı satırda (sağa hizalı). */
.crm-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; position: relative; }

/* CRM table: bounded size + both-axis scroll (sticky header already from .kol-tables) */
.crm-wrap.crm-table-page .la-scroll { max-height: 68vh; overflow: auto; }

/* Column freeze handle — hover shows a vertical line; click freezes this column + left */
.crm-col-freeze { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: pointer; z-index: 8; }
.crm-col-freeze:hover { background: linear-gradient(90deg, transparent 38%, rgba(var(--accent-rgb), .6) 38%, rgba(var(--accent-rgb), .6) 62%, transparent 62%); }

/* Frozen columns (sticky during horizontal scroll). Layered bg over --bg = fully opaque
   so scrolling columns don't bleed through. */
.crm-table .crm-frozen { position: sticky; z-index: 2; }
.crm-table thead .crm-frozen { z-index: 8 !important; background: linear-gradient(var(--head), var(--head)), var(--bg); }
.crm-table tbody .crm-frozen { background: linear-gradient(var(--surface-strong), var(--surface-strong)), var(--bg); }
.crm-table tbody tr:hover .crm-frozen { background: linear-gradient(var(--table-hover), var(--table-hover)), var(--bg); }
.crm-table .crm-frozen-last::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: var(--line); box-shadow: 3px 0 5px -2px rgba(0,0,0,.16); }

/* CRM table width bounding: the shared .kol-tables rule sets .t-page max-width:none and the
   flex min-width:auto trap lets the panel grow instead of scrolling. Cap it + allow the panel
   to shrink so the table scrolls inside instead of stretching the layout. */
body.crm-table-open #dashboardPanel { min-width: 0; }
.crm-wrap.crm-table-page .t-page { max-width: 100%; }

/* CRM fullscreen */
.crm-fs-btn { font-size: 1.15rem; line-height: 1; padding: 0 11px !important; }
body.crm-fs #dashboardPanel { position: fixed; inset: 0; z-index: 1200; margin: 0; padding: 12px 18px;
  max-width: none; overflow: auto; background: var(--bg); }
body.crm-fs #reportSidebar, body.crm-fs #reportSidebarRail { display: none !important; }
.crm-table-page.crm-fs-on .la-scroll { max-height: calc(100vh - 190px); }

/* Admin per-brand capability sections (CRM + Master Data) — card per brand */
.admin-brand-caps { border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; overflow: hidden; background: var(--surface-subtle); }
.admin-brand-caps-name { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); padding: 10px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.admin-brand-caps .admin-cap-row { margin: 0 !important; padding: 12px 14px !important; border-top: none !important;
  border-bottom: 1px solid var(--line-2); }
.admin-brand-caps .admin-cap-row:last-child { border-bottom: none; }
.admin-brand-caps-hint { margin: 0; padding: 12px 14px; font-size: .78rem; color: var(--muted); }

/* CRM detail modal + delete button */
/* Modal açıkken panel'in backdrop-filter'ını kaldır: aksi halde .modal-backdrop (position:fixed)
   panel'e hapsolur ve yalnız tablo alanını kaplar; kaldırınca tüm viewport'u kaplar. */
body.crm-detail-open #dashboardPanel { backdrop-filter: none; -webkit-backdrop-filter: none; }
.crm-detail-card { width: min(980px, 96vw); padding: 2px 4px 6px; }
.crm-detail-card .crm-form-page { max-width: 100%; margin: 0; padding: 16px 22px 22px; }
.crm-detail-card .t-title { font-size: 22px; }
.crm-btn-danger { color: var(--danger); }
.crm-btn-danger:hover { background: rgba(187, 62, 3, .10); border-color: var(--danger); }

/* ─── Credit Note Raporu ───────────────────────────────────────────────────── */
/* Kırılım satırları: solda geniş dikey bar grafiği, sağda daha dar pasta. */
.cn-dim-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .cn-dim-grid { grid-template-columns: 1fr; } }

/* KPI satırı iki karta indi: durum dağılımı + marka bazlı özet tablosu. Marka
   tablosu 5 sütun (3 durum grubu + toplam) taşıdığı için alanın çoğunu o alır. */
.stat-grid.kg-kpi-grid.cn-kpi-grid {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.9fr);
}
/* Dar ekranlarda alt alta: kenar çubuğu + slicer paneli açıkken içerik sütunu
   beş sütunu yan yana taşıyamıyor, tablo kendi içinde yatay kayıyordu. */
@media (max-width: 1300px) { .stat-grid.kg-kpi-grid.cn-kpi-grid { grid-template-columns: 1fr; } }

/* Marka tablosu alanın çoğunu aldığı için durum listesi tek sütun: iki sütunda
   "Pending Deduction" gibi etiketler kırpılıyordu. */
.cn-status-list.kg-breakdown-2col { grid-template-columns: 1fr; }

/* Durum satırları arası boşluk (varsayılan 4px fazla sıkışıktı). */
.cn-status-list .kg-breakdown-row { padding: 8px 0; }

/* Durum listesinin toplam satırı — tüm sütunları kaplar, vurgulu. Dikey konumu
   ve çizgi-yazı arası, marka tablosunun Toplam satırıyla eşleşecek şekilde
   render sonrası JS ile ölçülüp inline margin/padding olarak yazılır (bkz.
   _alignCreditNoteTotals, app.js). Buradaki değerler yalnızca fallback. */
.cn-status-list .cn-breakdown-total {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-bottom: none;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.cn-status-list .cn-breakdown-total .kg-breakdown-label { color: var(--text); font-weight: 700; }

/* Marka bazlı özet tablosu. max-height render sonrası JS ile ölçülür (4 marka
   satırı + başlık + Toplam); satır yükseklikleri veriye göre değiştiği için
   sabit bir piksel değeri tutmuyor. Bkz. sizeCreditNoteBrandTable (app.js).
   Taşan kısım dikey kayar; başlık ve Toplam satırı sticky kalır. */
.cn-brand-table-wrap { margin-top: 8px; overflow: auto; }
.cn-brand-table { width: 100%; border-collapse: collapse; }
.cn-brand-table th,
.cn-brand-table td {
  padding: 4px 0; text-align: right; white-space: nowrap;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
/* Başlık satırı küçük: `.report-page :not(...)` blanket 14px kuralını yenmek
   için !important gerekir. */
.cn-brand-table thead th {
  color: var(--muted); font-weight: 600; font-size: 12px !important;
  text-transform: uppercase; letter-spacing: .02em;
}
/* Marka sütunu: thead'in ilk hücresi + tbody satır başlıkları. */
.cn-brand-table thead tr:first-child th:first-child,
.cn-brand-table tbody th {
  text-align: left; text-transform: none; letter-spacing: 0;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.cn-brand-table tbody th { font-weight: 500; color: var(--muted); }
.cn-brand-table tbody td { font-weight: 600; color: var(--text); }
.cn-brand-table tbody th + td { padding-left: 12px; }
.cn-brand-table tbody td + td { padding-left: 12px; }
.cn-brand-table thead th + th { padding-left: 12px; }
.cn-brand-table .cn-brand-total th,
.cn-brand-table .cn-brand-total td {
  border-bottom: none; border-top: 1px solid var(--line);
  padding-top: 6px; font-weight: 700; color: var(--text);
}

/* Yığılmış görünüm: sütunlar soldan sağa Pending Approval / Approved / Claimed
   / Toplam; adet ve tutarlar ayrı sütun değil, hücre içinde alt alta. */
.cn-brand-table-stacked th,
.cn-brand-table-stacked td { padding: 9px 0; vertical-align: top; }
.cn-brand-table-stacked tbody th { vertical-align: middle; }
.cn-brand-table-stacked tbody th + td,
.cn-brand-table-stacked tbody td + td,
.cn-brand-table-stacked thead th + th { padding-left: 14px; }
/* Grup başlıkları olduğu gibi yazılır: TR yerelinde `uppercase` "Pending"i
   "PENDİNG" yapıyor (i → İ). */
.cn-brand-table-stacked .cn-brand-group-head {
  color: var(--text); font-weight: 700; white-space: nowrap;
  text-transform: none; letter-spacing: 0; font-size: 12px !important;
}
/* Toplam sütunu — soluna ayraç. Ayraç, Toplam hücresinin sol kenarında durur:
   Claimed sütununa sağ boşluk verip Toplam'ın sol boşluğunu kısarak çizgiyi
   Claimed'den uzaklaştırıp Toplam'a yaklaştırıyoruz. */
.cn-brand-table-stacked thead th:nth-last-child(2),
.cn-brand-table-stacked tbody td:nth-last-child(2) { padding-right: 26px; }
.cn-brand-table-stacked .cn-brand-total-col {
  border-left: 1px solid var(--line); padding-left: 4px;
}
.cn-brand-table-stacked tbody .cn-brand-total-col .cn-cell-count { font-weight: 700; }

/* Sticky başlık + sticky Toplam satırı. `border-collapse: collapse` ile sticky
   hücrelerin kenarlığı kaybolabildiği için ayırıcı çizgiler inset box-shadow. */
.cn-brand-table-stacked thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-strong);
  box-shadow: inset 0 -1px 0 var(--line);
}
.cn-brand-table-stacked .cn-brand-total th,
.cn-brand-table-stacked .cn-brand-total td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-strong);
  border-top: none;
  box-shadow: inset 0 1px 0 var(--line);
}
/* Sticky Toplam hücresi kendi arka planını taşıdığı için ayraç çizgisi de
   box-shadow'a taşınır (border-left kayboluyor). */
.cn-brand-table-stacked .cn-brand-total .cn-brand-total-col {
  border-left: none;
  box-shadow: inset 0 1px 0 var(--line), inset 1px 0 0 var(--line);
}

/* Hücre içi yığın: adet üstte, tutarlar altında. */
.cn-brand-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cn-brand-cell .cn-cell-count { font-weight: 600; color: var(--text); font-size: 13px !important; }
.cn-brand-cell .cn-cell-money { color: var(--muted); font-size: 12px !important; }
.cn-brand-table-stacked .cn-brand-total .cn-cell-money { color: var(--text); font-weight: 600; }

/* Sayfa altındaki detay tablosu — yükseklik sınırı, taşınca kendi içinde kayar.
   Başlıklar `.report-table thead th` kuralıyla zaten sticky. */
.cn-detail-wrap { max-height: 70vh; }
.cn-brand-zero { color: var(--muted); opacity: .55; }
.cn-brand-note { margin: 8px 0 0; font-size: 12px !important; }

/* Pasta kartı boş-veri hâli — bar kartlarıyla aynı yükseklik hissi. */
.cn-pie-card { display: flex; flex-direction: column; }

/* ─── Kanal Geliştirme Raporu ──────────────────────────────────────────────── */
/* Kırılım grafikleri: 2 sütunlu grid (mobilde tek sütun). */
.kg-dim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .kg-dim-grid { grid-template-columns: 1fr; } }

/* Combo (Type / Sector) kartı — başlık + toggle aynı satırda. */
.kg-combo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kg-combo-toggle { flex: 0 0 auto; }

/* KPI satırı — özet stat kartları + Status/İletişim türü dağılım kutuları. */
.stat-grid.kg-kpi-grid {
  grid-template-columns: minmax(150px, 0.6fr) minmax(150px, 0.6fr) minmax(340px, 1.5fr) minmax(210px, 0.9fr);
  align-items: stretch;
}
@media (max-width: 1100px) { .stat-grid.kg-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stat-grid.kg-kpi-grid { grid-template-columns: 1fr; } }

.kg-breakdown-card { display: flex; flex-direction: column; }
.kg-breakdown-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 0 22px; align-content: start;
}
.kg-breakdown-2col { grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kg-breakdown-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px dashed var(--line); min-width: 0;
}
.kg-breakdown-label {
  font-size: 0.82rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kg-breakdown-count {
  font-weight: 700; font-size: 0.92rem; color: var(--text);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* Marka seçim ekranı (ilk açılış). */
.kg-brand-picker { max-width: 720px; margin: 0 auto; }
.kg-brand-picker-head { text-align: center; margin-bottom: 18px; }
.kg-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kg-brand-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-lg, 16px); cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--surface-card);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kg-brand-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kg-brand-card-name { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 600; }
.kg-brand-card-go { font-size: 13px; color: var(--accent); font-weight: 600; }

/* Marka değiştirici (dashboard üstü). */
.kg-brand-switch { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.kg-brand-switch-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.kg-brand-switch-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Admin: Kanal marka-erişim kartı — CRM/master marka kartlarıyla aynı görünüm. */
.kg-access-card { margin-top: 14px; }

/* ── Bekleyen onaylar: sidebar rozeti + anasayfa paneli ─────────────── */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--accent-3);
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-3) 22%, transparent);
  flex-shrink: 0;
}
.nav-badge + .nav-chev-btn { margin-left: 8px; }
body.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
}

.pending-panel { margin: 4px 0 20px; }
.pending-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pending-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-3) 16%, transparent);
  color: var(--accent-3);
  flex-shrink: 0;
}
.pending-ico svg { width: 20px; height: 20px; }
.pending-head h3 { margin: 2px 0 0; font-size: 16px; }
.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.pending-row.pending-alert {
  border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 9%, transparent);
}
.pending-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pending-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pending-tag.teal { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.pending-tag.warm { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 16%, transparent); }
.pending-tag.violet { color: #7c5cff; background: color-mix(in srgb, #7c5cff 15%, transparent); }
.pending-tag.warn { color: #fff; background: var(--accent-3); }
/* Gecikmiş onay (NOTIF_LATE_HOURS'u aşan) */
.pending-tag.late { color: #fff; background: var(--danger); }
/* Bildirimler sayfası modül ikonu tonları (.pending-ico.warn zaten aşağıda) */
.pending-ico.acc, .pending-ico.teal { background: var(--accent-softer); color: var(--accent); }
.pending-ico.warm { background: color-mix(in srgb, var(--accent-3) 16%, transparent); color: var(--accent-3); }
.pending-ico.violet { background: color-mix(in srgb, #7c5cff 15%, transparent); color: #7c5cff; }
/* ── Bildirimler sayfası (#notifications) — bildirim merkezi ──────────────
   Katmanlar: sticky filtre çubuğu → öncelik bandı (onaylar | uyarılar) →
   modül ızgarası → sessiz modüller şeridi. Kartlar bölümlü olduğu için
   sayfadaki .card'ın kendi iç boşluğu kaldırılır. */
.notif-page .card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-card-strong);
  box-shadow: var(--shadow);
}
.notif-page .card > .pending-head,
.notif-page .card > .notif-group-head {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.notif-page .card > .pending-list { padding: 12px; }
.notif-page .pending-head .spacer,
.notif-page .notif-group-head .spacer { flex: 1; }
.notif-page .pending-head .eyebrow { margin: 0; }
/* Öncelik bandı: solda geniş onay listesi, sağda daha dar uyarı sütunu.
   Tek kart kaldığında (yalnız onay ya da yalnız uyarı varsa) tüm genişliği alır.
   Seçici .pending-split ile birlikte yazılı: aşağıdaki genel .pending-split
   kuralı bu bloktan sonra geldiği için tek sınıf yetmiyor. */
.pending-split.notif-prio {
  align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 400px);
}
.pending-split.notif-prio:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1200px) {
  .pending-split.notif-prio { grid-template-columns: minmax(0, 1fr); }
}
.notif-prio .card { min-width: 0; }
.notif-page .pending-txt { flex: 1 1 auto; }
.notif-page .pending-txt b { font-size: 0.9rem; }
.notif-page .ft-btn svg { width: 16px; height: 16px; }

/* Filtre çubuğu: tür sekmeleri + modül çipleri. Liste kaydıkça üstte kalır. */
.notif-filters {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px 0 12px;
  margin-bottom: 4px;
  background: linear-gradient(var(--bg-mid) 72%, transparent);
  backdrop-filter: blur(6px);
}
.notif-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.notif-tab {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.notif-tab:hover { color: var(--accent); }
.notif-tab.active {
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(31, 41, 55, 0.10);
}
.notif-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.notif-chip {
  height: 29px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.notif-chip:hover { background: var(--surface-strong); color: var(--text); }
.notif-chip.active {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}
.notif-chip .n { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 0.68rem; font-weight: 700; }
.notif-chips .sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }

/* Modül ızgarası */
.notif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 520px) { .notif-grid { grid-template-columns: minmax(0, 1fr); } }
.notif-group-head { display: flex; align-items: center; gap: 10px; }
.notif-group-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.notif-group-n {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.notif-group-n.acc { color: var(--accent); background: var(--accent-softer); }
.notif-group-n.bad { color: #fff; background: var(--danger); }
.notif-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.notif-sec {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 2px 2px;
}
.notif-sec .c { font-family: "Space Grotesk", "Manrope", sans-serif; color: var(--muted); }
.notif-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card);
}
.notif-row[data-pending-go] { cursor: pointer; }
.notif-row:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--surface-strong);
}
.notif-row-warn {
  border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 7%, transparent);
}
.notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.notif-txt b { font-size: 0.85rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.notif-txt span { font-size: 0.75rem; color: var(--muted); }

/* Kart ayağı ("N bildirim daha" + Tümünü gör) */
.notif-page .card-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notif-page .card-foot span { font-size: 0.75rem; color: var(--muted); }
.notif-page .time {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--faint);
  white-space: nowrap;
}
/* "Son 24 saatte geldi" noktası */
.dot-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.dot-unread.warn { background: var(--accent-3); }

/* Sessiz modüller şeridi */
.notif-quiet {
  margin-top: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-card);
}
.notif-quiet b { font-size: 0.82rem; }
.notif-quiet .tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
}
.notif-empty { padding: 30px 18px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.notif-empty p { margin: 0; font-size: 0.86rem; color: var(--muted); }

.pending-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pending-txt b { font-size: 13.5px; font-weight: 700; }
.pending-txt span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-row .button.slim { flex-shrink: 0; }

/* M5: parametreden farklı marj → tüm satır turuncu + sol uyarı ikonu */
tr.md-row-warn > td { background: color-mix(in srgb, var(--accent-3) 12%, transparent); }
tr.md-row-warn:hover > td { background: color-mix(in srgb, var(--accent-3) 18%, transparent); }
td.md-thumb-cell { position: relative; }
.md-row-warn-ico {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-3);
  font-size: 13px;
  line-height: 1;
  cursor: help;
  z-index: 1;
}
/* M5: marj override rozeti/■ değeri kırmızı değil turuncu (uyarı tonu) */
.md-margin-ov { color: var(--accent-3) !important; }
.md-margin-badge { color: var(--accent-3); }

/* M8: değişiklik özeti onay pop-up (tablo) */
.summary-confirm-backdrop { display: flex; align-items: center; justify-content: center; z-index: 2200; }
.summary-confirm-card { width: min(680px, 94vw); max-height: 84vh; display: flex; flex-direction: column; padding: 0; }
.summary-confirm-head { padding: 18px 22px 8px; }
.summary-confirm-head h3 { margin: 0; font-size: 17px; }
.summary-confirm-head p { margin: 4px 0 0; font-size: 12.5px; }
.summary-confirm-body { padding: 4px 22px 6px; overflow: auto; }
.summary-confirm-tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.summary-confirm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.summary-confirm-table th, .summary-confirm-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.summary-confirm-table thead th { position: sticky; top: 0; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.summary-confirm-table tbody tr:last-child td { border-bottom: 0; }
.summary-confirm-table .sc-item { font-weight: 700; }
.summary-confirm-table .sc-field { color: var(--muted); }
.summary-confirm-table .sc-old { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); white-space: nowrap; }
.summary-confirm-table .sc-new { color: var(--accent); font-weight: 700; white-space: nowrap; }
/* Parametreler modalı footer'ıyla (.mdp2-foot / .mdx .button) BİREBİR aynı buton görünümü */
.summary-confirm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface-nav); }
/* Promosyon onayı: dışarı tıklama kapatmaz (seçim zorunlu) → kısa titreme + ipucu. */
.summary-confirm-hint { margin-right: auto; font-size: .82rem; color: var(--muted); opacity: 0; transition: opacity .18s ease; }
.summary-confirm-hint.on { opacity: 1; color: var(--danger); font-weight: 600; }
@keyframes sc-nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.summary-confirm-card.is-nudge { animation: sc-nudge .28s ease; }
@media (prefers-reduced-motion: reduce) { .summary-confirm-card.is-nudge { animation: none; } }
.summary-confirm-foot .button {
  height: 36px; padding: 0 14px; border-radius: 11px;
  font-size: .8rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--accent); cursor: pointer; white-space: nowrap;
  transition: transform .14s, background .14s, border-color .14s, box-shadow .14s;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #ffffff 16%));
  color: #fff; box-shadow: 0 2px 7px rgba(var(--accent-rgb), .22);
}
.summary-confirm-foot .button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28); }
.summary-confirm-foot .button.secondary { background: var(--surface-card); color: var(--text); border-color: var(--line); box-shadow: none; }
.summary-confirm-foot .button.secondary:hover { border-color: rgba(var(--accent-rgb), .42); background: var(--surface-card); transform: none; }
.summary-confirm-foot .button > svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── N4: Master Data modül fontu = site fontu (Helvetica) + gövde 14px ──
   Tablolar ve başlıklar hariç (onların kendi boyutları). Space Grotesk/mono
   override'ları nötrlenir → tüm modül tek fontta. */
.md-wrap, .mdx, .md-wrap *, .mdx * { font-family: Helvetica, Arial, sans-serif; }
.md-wrap { font-size: 14px; }
/* Tablolar hariç: kendi (yoğun) boyutları */
.md-wrap .md-table, .md-wrap .md-table th, .md-wrap .md-table td { font-size: 13px; }
/* Başlıklar hariç: kendi boyutları korunur */
.md-wrap h1, .md-wrap h2, .md-wrap h3, .md-wrap h4 { font-family: Helvetica, Arial, sans-serif; }
/* Orijinal Space Grotesk/mono kurallarını birebir selector'la geçersiz kıl (site fontuna çek). */
.md-table .col-sort-arrows,
.md-pm-sku,
.md-hist-detail,
.mdx .md-sku, .mdx .md-pm-sku, .mdx .md-table td.md-num,
.mdx .md-bulk-count b.ok, .mdx .md-bulk-count b.warn { font-family: Helvetica, Arial, sans-serif; }

/* ── N11/N2/N9: yerleşik tablo uyarı satırları + marj işaret renkleri ──
   (.md-table scope → .mdx/.md-wrap fark etmez) */
.md-table tbody tr.md-alert-yellow td { background: rgba(202,138,4,.15) !important; }
.md-table tbody tr.md-alert-red td { background: rgba(214,69,61,.15) !important; }
.md-table tbody tr.md-alert-darkred td { background: rgba(150,20,20,.26) !important; }
.md-table tbody tr.md-alert-darkred td .md-clamp2 { color: #7a0f0f; }
.md-table tbody tr.md-alert-passive td { background: rgba(217,119,6,.13) !important; }
/* N9: ürün bazlı farklı marj hücresi — negatif kırmızı, pozitif yeşil */
.md-margin-neg .md-clamp2, .md-margin-neg { color: #d6453d !important; font-weight: 700; }
.md-margin-pos .md-clamp2, .md-margin-pos { color: #157347 !important; font-weight: 700; }

/* N14+: sadeleşen marka kartları — küçük kutu, adı tam ortada */
.md-brand-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.md-brand-card-simple { align-items: center; justify-content: center; text-align: center; padding: 24px 14px; min-height: 84px; gap: 0; }
.md-brand-card-simple h3 { margin: 0; font-size: 1.05rem; }
.md-brand-card.add { min-height: 84px; padding: 16px 14px; }
.md-brand-card.add .md-add-plus { width: 34px; height: 34px; font-size: 1.3rem; margin-bottom: 6px; }
/* Tüm marka kartları satırın en yükseğiyle (aksiyonlu taslak kartıyla) aynı yükseklikte olsun. */
.md-brand-grid { align-items: stretch; }

/* P5: kritik uyarı banner'ı (tablo üstü, dismiss'li, sayfayı kapatmaz) */
.md-alert-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, #961414 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #961414 10%, transparent); }
.md-alert-banner-ico { color: #961414; font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.md-alert-banner-body { flex: 1; min-width: 0; }
.md-alert-banner-body > b { font-size: 13.5px; color: #7a0f0f; }
.md-alert-banner-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; max-height: 104px; overflow-y: auto; }
.md-alert-banner-item { font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; background: var(--surface-card); color: var(--text); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.md-alert-banner-item:hover { border-color: #961414; }
.md-alert-banner-item.md-warn-darkred b { color: #7a0f0f; }
.md-alert-banner-more { font-size: 12px; color: var(--muted); align-self: center; }
.md-alert-banner-x { flex-shrink: 0; border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.md-alert-banner-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* P11: satır uyarı ikonu renkleri (hover'da nedenler title'da) */
.md-row-warn-ico { cursor: help; }
.md-row-warn-ico.md-warn-yellow { color: #ca8a04; }
.md-row-warn-ico.md-warn-red { color: #d6453d; }
.md-row-warn-ico.md-warn-darkred { color: #7a0f0f; }

/* P10: koyu kırmızı uyarı satırlarında flash + ikon nabzı */
@keyframes md-darkred-flash { 0%, 100% { box-shadow: inset 0 0 0 200px rgba(150,20,20,0); } 50% { box-shadow: inset 0 0 0 200px rgba(150,20,20,.16); } }
.md-table tbody tr.md-alert-darkred td { animation: md-darkred-flash 1.5s ease-in-out infinite; }
@keyframes md-warn-pulse { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: .35; transform: translateY(-50%) scale(1.18); } }
.md-row-warn-ico.md-warn-darkred { animation: md-warn-pulse 1.2s ease-in-out infinite; }

/* P7: onay pop-up'ında kırmızı uyarı notu */
.summary-confirm-warn { margin: 0 0 10px; padding: 9px 12px; border: 1px solid #961414; border-radius: 9px; background: color-mix(in srgb, #961414 12%, transparent); color: #7a0f0f; font-size: 13px; }
/* P6: master anasayfa uyarı bölümü aralığı */
.md-home-alerts { margin: 0 0 14px; }
/* Q2: Yeni Marka kartı diğerleriyle aynı (simple) — inline artı */
.md-brand-card.add.md-brand-card-simple { border-style: dashed; background: transparent; }
.md-add-plus-inline { color: var(--accent); font-weight: 700; margin-right: 2px; }

/* Q8: anasayfada Onaylar / Uyarılar yan yana */
.pending-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 20px; }
@media (max-width: 780px) { .pending-split { grid-template-columns: 1fr; } }
.pending-split .pending-panel { margin: 0; }
/* ANASAYFA "Onaylar" / "Uyarılar" kartları: liste satır sınırı olmadan basıldığı için çok
   sayıda bekleyen işlem/uyarıda kart sayfayı aşırı uzatıyordu. Liste artık kendi içinde
   kayar; başlık (.pending-head) sabit kalır. Yükseklik 25.08.2026'da 420 → 210px'e
   yarılandı (kullanıcı isteği: kart anasayfada çok yer kaplıyordu; ~3 satır görünür, gerisi
   kayar). Bildirim Merkezi sayfasındaki kartlar
   .pending-panel sınıfını taşımaz → oraya dokunmaz.
   scrollbar-gutter: kaydırma çubuğu çıkıp girerken içerik oynamasın.
   overscroll-behavior: liste sonuna gelince sayfa kaymaya başlamasın. */
.pending-panel .pending-list {
  max-height: min(210px, 24vh);
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.pending-ico.warn { background: color-mix(in srgb, #961414 14%, transparent); color: #961414; }
.pending-panel-warn { border-color: color-mix(in srgb, #961414 22%, var(--line)); }

/* Q9: onay pop-up'ında kırmızı (kritik) satır */
.summary-confirm-table tr.sc-danger td { background: color-mix(in srgb, #961414 12%, transparent); }
.summary-confirm-table tr.sc-danger .sc-item, .summary-confirm-table tr.sc-danger .sc-new { color: #7a0f0f; font-weight: 700; }

/* Q7: çoklu tedarikçi editörü + tablo ana-tedarikçi dropdown */
.md-sup-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.md-sup-row select[data-msup-id] { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.md-sup-row input[data-msup-dp] { width: 90px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-input); color: var(--text); font-size: .82rem; }
.md-sup-main { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.md-mainsup-sel { max-width: 100%; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-input); color: var(--text); font-size: .8rem; }

/* ============================================================
   GLOBAL TEK YAZI TİPİ — HELVETICA (tüm panel, tüm modüller)
   Kullanıcı isteği: başka hiçbir yazı tipi olmasın.
   Bu blok dosyanın en sonundadır; evrensel !important ile
   yukarıdaki tüm font-family tanımlarını (Space Grotesk, Manrope,
   monospace, var(--num)/var(--mono)/var(--font-display) dahil) ezer.
   ============================================================ */
:root {
  --num: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --mono: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-display: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-num: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after, ::placeholder,
input, textarea, select, button, optgroup {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
}

/* ─── Stok Devir Hızı Raporu ─────────────────────────────────────────────── */
.sdv-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem;
}
.sdv-metric-toggle { display: flex; align-items: center; gap: .5rem; }
.sdv-ctl-label { font-size: .8rem; color: var(--muted, #64748b); }
.sdv-ctl-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sdv-param-summary {
  font-size: .75rem; color: var(--muted, #64748b);
  background: var(--surface-2, #f1f5f9); padding: .3rem .6rem; border-radius: 6px;
}
.sdv-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: #e2e8f0; color: #334155;
}
.sdv-badge.sdv-order { background: #fee2e2; color: #b91c1c; }
.sdv-badge.sdv-ok    { background: #dcfce7; color: #166534; }
.sdv-badge.sdv-over  { background: #fef9c3; color: #854d0e; }
.sdv-badge.sdv-idle  { background: #e2e8f0; color: #64748b; }
/* Stoksuzluk yüzünden satılamayan ay — gerçek sıfırdan görsel olarak ayrışsın. */
.sdv-stokyok {
  display: inline-block; padding: .1rem .4rem; border-radius: 5px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
  background: #fef3c7; color: #92400e;
}
.sdv-table th, .sdv-table td { white-space: nowrap; }
/* Satır içeriği dikey ORTALI: sabit kolonlar 2 satıra sardığında sayılar üste
   yapışıp satır eğri görünüyordu. */
.sdv-table tbody td, .sdv-table thead th { vertical-align: middle; }
/* Hücre formülü olan sayılar — hover'da hesabın sayılarla dolmuş hali çıkar. */
.sdv-hasformula { cursor: help; border-bottom: 1px dotted rgba(var(--accent-rgb), .45); }

/* SKU + Açıklama yatay kaydırmada sabit kalır; metin 2 satıra sarar, taşarsa "…".
   Genişlikler SABİT olmalı — 2. kolonun `left` ofseti 1. kolonun genişliğine eşit. */
.sdv-table th:nth-child(1), .sdv-table td:nth-child(1),
.sdv-table th:nth-child(2), .sdv-table td:nth-child(2) {
  position: sticky;
  white-space: normal;
}
.sdv-table th:nth-child(1), .sdv-table td:nth-child(1) {
  left: 0; width: 130px; min-width: 130px; max-width: 130px;
}
.sdv-table th:nth-child(2), .sdv-table td:nth-child(2) {
  left: 130px; width: 240px; min-width: 240px; max-width: 240px;
}
/* Sabit kolonların 2 satırlık kırpması kolon genişliğini kullansın (.sd-clamp2 170px kapağı). */
.sdv-table td:nth-child(1) .sd-clamp2, .sdv-table td:nth-child(2) .sd-clamp2 { max-width: none; }
/* Katman sırası: başlık satırı > sabit gövde hücreleri; sol-üst köşe en üstte. */
.sdv-table tbody td:nth-child(1), .sdv-table tbody td:nth-child(2) { z-index: 1; }
.sdv-table thead th { z-index: 2; }
.sdv-table thead th:nth-child(1), .sdv-table thead th:nth-child(2) { z-index: 3; }
/* Sabit hücreler altlarından kayan içeriği ÖRTMELİ. --table-* yarı saydam olduğundan
   doğrudan verilirse altındaki satırlar sızıyor; opak --table-bg üzerine bindirilir
   (dt-sticky-head ile aynı çözüm). Taban --bg DEĞİL --table-bg: tablonun kendi yüzeyi
   bu, aksi hâlde donmuş kolonlar tablodan bir ton farklı çıkıyor. */
.sdv-table tbody td:nth-child(1), .sdv-table tbody td:nth-child(2) {
  background: var(--table-bg, #fff);
}
.sdv-table tbody tr:nth-child(even) td:nth-child(1),
.sdv-table tbody tr:nth-child(even) td:nth-child(2) {
  background: linear-gradient(var(--table-alt), var(--table-alt)), var(--table-bg, #fff);
}
.sdv-table tbody tr:hover td:nth-child(1),
.sdv-table tbody tr:hover td:nth-child(2) {
  background: linear-gradient(var(--table-hover), var(--table-hover)), var(--table-bg, #fff);
}
.sdv-table thead th:nth-child(1), .sdv-table thead th:nth-child(2) {
  background: linear-gradient(var(--table-head), var(--table-head)), var(--table-bg, #fff);
}
/* Sabit blokun bittiği yerde ayırıcı gölge (başlıkta alt çizgi korunur). */
.sdv-table td:nth-child(2) { box-shadow: 2px 0 5px -2px rgba(0, 0, 0, .18); }
.sdv-table thead th:nth-child(2) { box-shadow: inset 0 -1px 0 var(--line), 2px 0 5px -2px rgba(0, 0, 0, .18); }

/* Kontrol butonları — KOL modülündeki "Yeni KOL" (.kol-new-btn) ile birebir aynı. */
.sdv-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; color: #fffdf8;
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  border: 1px solid var(--accent);
  box-shadow: 0 2px 7px rgba(0, 109, 119, .22);
  transition: background .12s, transform .06s, border-color .12s;
}
.sdv-btn:hover { transform: translateY(-1px); }
.sdv-btn-ic { width: 15px; height: 15px; display: inline-grid; place-items: center; }
.sdv-btn-ic svg { width: 100%; height: 100%; }

/* "Formüller" BİLGİ butonu — eylem butonlarından (dolgu accent) bilerek ayrı:
   hiçbir şeyi değiştirmez, sadece anlatır. Konturlu + mavi bilgi tonu; yanındaki
   dolu "Parametreler" butonuyla karıştırılmasın. */
.sdv-info-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; cursor: help; white-space: nowrap;
  color: #1d4ed8; background: #eff4ff; border: 1px solid #bfd2fe;
  transition: background .12s, border-color .12s, color .12s;
}
.sdv-info-btn:hover { background: #dfe8ff; border-color: #93b4fd; color: #1a3fae; }
body[data-theme="dark"] .sdv-info-btn {
  color: #a9c4ff; background: rgba(59, 96, 200, .16); border-color: rgba(120, 160, 255, .38);
}
body[data-theme="dark"] .sdv-info-btn:hover { background: rgba(59, 96, 200, .28); color: #c9daff; }

/* Tablo yükseklik sınırı + iç kaydırma; başlık .report-table thead th sticky ile üstte kalır.
   Yatay kaydırma da aynı kapsayıcıda (kolon sayısı yüksek).
   Kart görünümü (yüzey + kenar + köşe) KABUKTA değil BURADA: kabuk saydam olduğu için
   tablo kendi yüzeyini taşımalı. */
.sdv-table-wrap {
  max-height: calc(100vh - 360px); min-height: 260px; overflow: auto;
  background: var(--table-bg); border: 1px solid var(--line); border-radius: 14px;
}

/* Tablo üstü araç çubuğu — sağ üstte Excel + tam ekran ikonları.
   Kabuk SAYDAM: eskiden .report-card-flat'ın beyaz yüzeyi araç çubuğunun arkasında
   tablonun üstünde boş bir beyaz şerit olarak duruyordu; artık sayfa arka planı görünür. */
.sdv-table-shell { position: relative; background: transparent; }
.sdv-table-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 8px; }
.sdv-fs-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface, transparent);
  color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.sdv-fs-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); transform: scale(1.05); }
.sdv-fs-btn span { display: inline-grid; place-items: center; }
.sdv-fs-btn svg { width: 17px; height: 17px; fill: currentColor; }
.sdv-fs-btn .sdv-fs-ico-collapse { display: none; }

/* Tam ekran: sayfa arka planı + tabloya neredeyse tüm ekran yüksekliği.
   Tam ekranda kabuk artık ekranın TAMAMI olduğu için opak bir zemin şart
   (saydam bırakılırsa tarayıcı siyah gösterir). */
.sdv-table-shell:fullscreen { background: var(--bg, #fff); padding: 16px 22px; overflow: auto; }
.sdv-table-shell:fullscreen .sdv-table-wrap { max-height: calc(100vh - 96px); }
.sdv-table-shell:fullscreen .sdv-fs-ico-expand { display: none; }
.sdv-table-shell:fullscreen .sdv-fs-ico-collapse { display: inline-grid; }

/* Parametreler modalı */
.sdv-params-modal { display: flex; flex-direction: column; gap: 1rem; }
.sdv-params-intro { margin: 0; font-size: .82rem; }
.sdv-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.sdv-field { display: flex; flex-direction: column; gap: .25rem; }
.sdv-field-label { font-size: .8rem; font-weight: 600; }
.sdv-field-hint { font-size: .7rem; color: var(--muted, #64748b); }
.sdv-field input[type="number"] {
  padding: .45rem .6rem; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; width: 100%;
}
/* Formüller modalı — çekirdek denklemler + kolon açıklama tablosu.
   Kısaltmalar tam Türkçe isimlere çevrilince satırlar uzadı ve 660px'lik varsayılan
   kol-modal'a sığmıyor; bu modal genişletilir. */
.modal-card.kol-modal:has(.sdv-formulas-modal) { max-width: 1000px; width: 96vw; }
.sdv-formulas-modal { display: flex; flex-direction: column; gap: 1rem; }
.sdv-formula-core { display: flex; flex-direction: column; gap: .3rem; }
.sdv-formula-core code {
  font-size: .82rem; padding: .35rem .6rem; border-radius: 6px;
  background: var(--surface-2, #f1f5f9); color: var(--text);
  /* Uzun formüller SARSIN, satır başına yatay kaydırma çubuğu koymasın: her satır
     kendi içinde kayınca formülün yarısı görünmüyordu. Devam satırları asılı
     girinti ile "=" hizasının altına düşer. */
  white-space: normal; overflow-wrap: break-word;
  padding-left: 2.2rem; text-indent: -1.6rem; line-height: 1.6;
}
.sdv-formula-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sdv-formula-table thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted, #64748b); border-bottom: 1px solid var(--line, #e2e8f0);
  padding: .35rem .5rem; text-align: left;
}
/* Kolon adı sütunu ORANLI ve sarabilir. nowrap iken "Son 12 Ay Ağırlıklı Ort. Satış"
   sütunu şişirip açıklamayı ezik bırakıyordu; sabit px ise dar ekranda (telefonda
   modal ~340px) küçülemediği için tabloyu taşırıyordu. */
.sdv-formula-table th:first-child, .sdv-formula-table td:first-child { width: 28%; }
.sdv-formula-table tbody th {
  padding: .45rem .5rem; text-align: left; vertical-align: top;
  font-size: .82rem; font-weight: 600; overflow-wrap: break-word;
}
.sdv-formula-table tbody td { padding: .45rem .5rem; font-size: .82rem; line-height: 1.45; }
.sdv-formula-table tbody tr + tr { border-top: 1px solid var(--line, #f1f5f9); }
.sdv-formula-note { line-height: 1.5; }
/* Başlığa hover'da formül çıkacağını sezdir. */
.sdv-table th[title] { cursor: help; }

/* Parametreler modalı — marka bazlı tedarik parametreleri tablosu.
   5 kolon 660px'lik varsayılan kol-modal'a sığmıyordu; bu modal genişletilir.
   Depo sütunu eklenince 820px de yetmedi → 960px. */
.modal-card.kol-modal:has(.sdv-params-modal) { max-width: 960px; width: 96vw; }
/* Parametrelerin ÜNİVERSAL olduğunu söyleyen uyarı şeridi — kullanıcı "bu değişiklik
   sadece bende mi?" sorusunu sormak zorunda kalmasın. */
.sdv-params-scope {
  margin: 0; font-size: .78rem; line-height: 1.45; padding: .5rem .7rem; border-radius: 8px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
.sdv-params-scope.is-readonly { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
body[data-theme="dark"] .sdv-params-scope {
  background: rgba(154, 52, 18, .18); color: #fdba74; border-color: rgba(253, 186, 116, .32);
}
body[data-theme="dark"] .sdv-params-scope.is-readonly {
  background: rgba(71, 85, 105, .24); color: #cbd5e1; border-color: rgba(203, 213, 225, .26);
}
.sdv-bp-section { display: flex; flex-direction: column; gap: .4rem; }
.sdv-bp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sdv-bp-table th, .sdv-bp-table td { padding: .35rem .5rem; text-align: left; }
/* Başlıklar sarabilsin — "Hareketli ort. penceresi (ay)" tek satırda kolonu şişiriyordu. */
.sdv-bp-table thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted, #64748b); border-bottom: 1px solid var(--border, #e2e8f0);
  white-space: normal; line-height: 1.25; vertical-align: bottom;
}
/* Marka sütunu esner, üç sayısal sütun eşit paylaşır, depo sütunu biraz geniş. */
.sdv-bp-table th:first-child, .sdv-bp-table td:first-child { width: 26%; }
.sdv-bp-table th:nth-child(2), .sdv-bp-table td:nth-child(2),
.sdv-bp-table th:nth-child(3), .sdv-bp-table td:nth-child(3),
.sdv-bp-table th:nth-child(4), .sdv-bp-table td:nth-child(4) { width: 16%; }
.sdv-bp-table th:nth-child(5), .sdv-bp-table td:nth-child(5) { width: 26%; }

/* Marka satırındaki depo seçimi: kapalı `details` içinde durur (5 marka × 8 depo
   onay kutusu modalı okunmaz hâle getiriyordu), özet kaç depo seçili olduğunu yazar. */
.sdv-bp-depo-cell { vertical-align: middle; }
.sdv-bp-depo > summary {
  cursor: pointer; font-size: .78rem; font-weight: 600; padding: .3rem .5rem;
  border: 1px solid var(--border, #cbd5e1); border-radius: 6px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
}
.sdv-bp-depo > summary::-webkit-details-marker { display: none; }
.sdv-bp-depo > summary::after { content: "▾"; font-size: .7rem; opacity: .6; }
.sdv-bp-depo[open] > summary::after { content: "▴"; }
.sdv-bp-depo > summary:hover { border-color: rgba(var(--accent-rgb), .5); }
.sdv-bp-depo[open] > summary { border-color: rgba(var(--accent-rgb), .55); }

/* Liste OVERLAY olarak açılır. Akış içinde açıldığında satır 45px'ten 184px'e çıkıp
   altındaki tüm satırları aşağı itiyordu (ölçüldü). Absolute konumlandığı için
   hücrenin/sütunun ölçüsüne hiç dokunmaz ve alttaki yazıların ÜZERİNE biner.
   Konum bağı `details`e verilen position: relative — td ile modal-card arasında
   konumlanmış başka ata YOK, verilmezse liste modalın soluna kaçar. */
.sdv-bp-depo { position: relative; }
.sdv-bp-depo-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 6;
  min-width: 100%; width: max-content; max-width: 280px;
  display: flex; flex-direction: column; gap: .3rem;
  max-height: 210px; overflow-y: auto; padding: .5rem;
  border: 1px solid var(--line); border-radius: 8px;
  /* Zemin OPAK olmalı — altındaki metin sızmasın. --surface-menu %98 saydam,
     opak --bg üzerine bindirilir (.sdv-table sabit kolonlarıyla aynı çözüm). */
  background: linear-gradient(var(--surface-menu), var(--surface-menu)), var(--bg, #fff);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .38);
}
/* Modalın dibindeki satırlarda aşağıda yer kalmazsa yukarı açılır (JS sınıfı ekler). */
.sdv-bp-depo.opens-up .sdv-bp-depo-list { top: auto; bottom: calc(100% + 4px); }
/* Trend kolonu — düşüş kırmızı, yükseliş yeşil, yatay nötr. */
.sdv-trend-down { color: #b91c1c; font-weight: 600; }
.sdv-trend-up { color: #166534; font-weight: 600; }
.sdv-trend-flat { color: var(--muted, #64748b); }
.sdv-bp-table tbody th { font-weight: 600; font-size: .82rem; }
.sdv-bp-table tbody tr + tr { border-top: 1px solid var(--border, #f1f5f9); }
.sdv-bp-table tbody th .sdv-field-hint { display: block; font-weight: 400; }
.sdv-bp-name { display: block; }
.sdv-bp-table input[type="number"] {
  width: 100%; min-width: 72px; padding: .35rem .5rem;
  border: 1px solid var(--border, #cbd5e1); border-radius: 6px;
}
.sdv-field-narrow { max-width: 260px; }

/* Parametreler modalı — "Yoldakileri dahil et" onay kutusu (etiket + açıklama) */
.sdv-check-field { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.sdv-check-field input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.sdv-check-field > span { display: flex; flex-direction: column; gap: .15rem; }
.sdv-depo-opt { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.sdv-depo-opt input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; }
.sdv-params-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* Vazgeç / Uygula — KOL modülündeki "Yeni KOL" (.kol-new-btn) biçimi: 36px yükseklik,
   10px köşe, 12.5px/600 yazı, gradient dolgu + kontur + gölge, hover'da 1px kalkış.
   Kural yalnız bu modala KAPSAMLI: global `.button` ailesine dokunulmaz (bkz. buton
   birleştirme denemesi canlıda bozulup geri alınmıştı).
   İki butonun RENGİ ayrı: Uygula accent (birincil eylem), Vazgeç nötr yüzey. */
.sdv-params-actions .sdv-act {
  height: 36px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 12.5px;
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  transition: background .12s, transform .06s, border-color .12s, color .12s;
}
.sdv-params-actions .sdv-act:hover { transform: translateY(-1px); }
.sdv-params-actions .sdv-act[disabled] { opacity: .62; cursor: default; transform: none; }
.sdv-act-apply {
  color: #fffdf8; border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent)));
  box-shadow: 0 2px 7px rgba(var(--accent-rgb), .28);
}
/* Nötr renk tema değişkenlerinden türetilir — açık/karanlık temada ayrı kural gerekmez. */
.sdv-act-cancel {
  color: var(--text); border-color: var(--line);
  background: linear-gradient(135deg, var(--surface-subtle), var(--surface-strong));
  box-shadow: 0 2px 7px rgba(0, 0, 0, .10);
}
.sdv-act-cancel:hover { border-color: rgba(var(--accent-rgb), .38); }

/* Stok Devir — "Yolda" kolonu (dolu olan gözle ayrışsın) + sipariş listesi butonu */
.sdv-yolda { color: #0d9488; font-weight: 700; }
.sdv-order-btn { white-space: nowrap; }
.sdv-brandpick { display: flex; flex-direction: column; gap: .5rem; }
.sdv-brandpick-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--surface-2, #f8fafc); cursor: pointer; text-align: left; width: 100%;
}
.sdv-brandpick-card:hover:not(.disabled) { border-color: #0d9488; background: #f0fdfa; }
.sdv-brandpick-card.disabled { opacity: .5; cursor: not-allowed; }
.sdv-brandpick-name { font-weight: 600; }
.sdv-brandpick-meta { font-size: .78rem; color: var(--muted, #64748b); }

/* ─────────────────────────── Nakit Akış Raporu ─────────────────────────── */
.nak-report { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 100%; min-width: 0; }
.nak-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .nak-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .nak-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nak-kpi { border-top: 3px solid transparent; min-width: 0; }
.nak-kpi-accent { border-top-color: var(--accent); }
.nak-kpi-ok     { border-top-color: var(--success); }
.nak-kpi-danger { border-top-color: var(--danger); }
.nak-kpi-sub { margin: 4px 0 0; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nak-risk { display: flex; gap: 14px; align-items: flex-start; }
.nak-risk-danger { border: 1px solid var(--danger); background: var(--danger-soft); }
.nak-risk-ok { border: 1px solid var(--success); background: var(--success-soft); }
.nak-risk-icon { font-size: 1.6rem; line-height: 1; margin-top: 2px; }
.nak-risk-body h4 { margin: 0 0 4px; }
.nak-risk-body p { margin: 2px 0; font-size: .9rem; }

.nak-fx-note { font-size: .76rem; }

/* İki tablo yan yana; taşmayı önlemek için min-width:0 şart */
.nak-accounts-grid, .nak-cari-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 100%; }
.nak-accounts-grid > *, .nak-cari-grid > * { min-width: 0; }
@media (max-width: 1000px) { .nak-accounts-grid, .nak-cari-grid { grid-template-columns: 1fr; } }

.nak-table-block { min-width: 0; max-width: 100%; overflow: visible; background: transparent; border-radius: 0; display: flex; flex-direction: column; }
.nak-block-head { margin-bottom: 6px; }
.nak-block-head h4 { margin: 0; }

/* Maksimum yükseklik + kaydırma; başlık üstte, toplam altta sabit kalır */
.nak-scroll { max-height: 380px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--card-border, rgba(120,130,140,.16)); border-radius: 10px; }
.nak-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }
.nak-table th, .nak-table td { padding: 7px 10px; font-size: .82rem; overflow: hidden; }
.nak-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nak-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-card-strong); box-shadow: 0 1px 0 var(--card-border, rgba(120,130,140,.2)); }
.nak-table thead th.num { text-align: right; }
.nak-table tfoot .nak-foot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-card-strong); box-shadow: 0 -1px 0 var(--card-border, rgba(120,130,140,.25)); font-weight: 700; }
.nak-foot-ccy { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hesap/Cari adı: 2 satır sonra … , hover'da title tam hali */
.nak-name-cell { white-space: normal; }
.nak-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

/* Sütun genişlikleri (table-layout: fixed) — sayfaya sığsın */
.nak-acct-table col, .nak-cari-table col { }
.nak-acct-table th:nth-child(1), .nak-acct-table td:nth-child(1) { width: 34%; }
.nak-acct-table th.nak-ccy-col, .nak-acct-table td.nak-ccy-col { width: 14%; }
.nak-acct-table th:nth-child(3), .nak-acct-table td:nth-child(3) { width: 26%; }
.nak-acct-table th:nth-child(4), .nak-acct-table td:nth-child(4) { width: 26%; }
.nak-ccy-col { text-align: left; }

.nak-cari-table th:nth-child(1), .nak-cari-table td:nth-child(1) { width: 42%; }
.nak-cari-table th:nth-child(2), .nak-cari-table td:nth-child(2) { width: 24%; }
.nak-cari-table th:nth-child(3), .nak-cari-table td:nth-child(3) { width: 20%; }
.nak-cari-table th.nak-date-col, .nak-cari-table td.nak-date-col { width: 14%; white-space: nowrap; }
.nak-cari-table--combined th:nth-child(1), .nak-cari-table--combined td:nth-child(1) { width: 30%; }
.nak-cari-table--combined th:nth-child(2), .nak-cari-table--combined td:nth-child(2) { width: 23%; }
.nak-cari-table--combined th:nth-child(3), .nak-cari-table--combined td:nth-child(3) { width: 23.5%; }
.nak-cari-table--combined th:nth-child(4), .nak-cari-table--combined td:nth-child(4) { width: 23.5%; text-align: right; }
.nak-ccy-cell { font-size: .78rem; }
.nak-date-col { text-align: left; }

.nak-cari-table .nak-cari-row { cursor: pointer; }
.nak-cari-table .nak-cari-row:hover { background: var(--surface-subtle); }
.nak-caret { color: var(--muted); font-size: .8rem; margin-right: 3px; }
.nak-name-cell { vertical-align: top; }

.nak-inv-header > td { padding: 0 0 8px; background: transparent; }
.nak-inv-table { width: 100%; border-collapse: collapse; margin: 2px 0 4px 16px; background: var(--surface-subtle); border-radius: 8px; overflow: hidden; table-layout: fixed; }
.nak-inv-table th, .nak-inv-table td { padding: 5px 10px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nak-inv-table th { color: var(--muted); font-weight: 600; text-align: left; }
.nak-inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }


/* ── Çeki Demiri Pazar Analizi Raporu ─────────────────────────────────────── */
.cd-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cd-card-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cd-snapshot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
}

.cd-snapshot select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input);
  color: inherit;
  font: inherit;
  font-size: .82rem;
}

/* Kırılım seçiliyken kolonlar yığılmış segmentlere ayrılır. Standart dikey
   grafik kabuğunun (vertical-chart-bars-axis) mutlak konumlu barlarını kullanır;
   segment yalnızca alt ofsetiyle üst üste binmez. */
.vertical-chart-bars-axis .vertical-chart-bar.cd-seg {
  border-radius: 0;
}

.vertical-chart-bars-axis .vertical-chart-bar.cd-seg.is-top {
  border-radius: 12px 12px 0 0;
}

/* Trend grafiği net satış MoM/YoY ile aynı gruplanmış bar bileşenini kullanır
   (.ns-grouped-*); tek eklenen davranış: dönem grubuna tıklayınca tarih drill'i. */
.ns-grouped-group.cd-trend-group {
  cursor: pointer;
}

.cd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
}

.cd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* Pivot tablo — firmalar satırda, kırılım sütunda. İlk sütun (Firma) ve son iki
   sütun (Toplam + Pazar Payı) yatay kaydırmada sabit kalır; başlık satırı da
   dikey kaydırmada sabittir. Sabit hücreler satırın kendi arka planını
   devraldığı için zebra/hover renkleri korunur. */
.cd-pivot {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .84rem;
}

.cd-pivot th,
.cd-pivot td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.cd-pivot .cd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cd-pivot tbody th,
.cd-pivot tfoot th {
  text-align: left;
  font-weight: 700;
}

.cd-pivot .cd-share,
.cd-pivot .cd-sticky-r2 {
  font-weight: 700;
}

/* Satır arka planı TR üzerinde tanımlanır ki sabit hücreler `inherit` ile aynı
   rengi alsın (yoksa sabit kolon zebra deseninden kopuyordu).
   --table-alt / --table-hover YARI SAYDAM; sabit hücrenin altından kayan içerik
   görünmesin diye satır rengi İKİ KATMAN kurulur: opak `background-color` taban +
   saydam tonu taşıyan `background-image` (düz renk gradyanı). Bileşke opaktır ve
   `background: inherit` ile hücreye olduğu gibi geçer. */
.report-table.cd-pivot tbody tr {
  background-color: var(--table-bg);
  background-image: none;
}

.report-table.cd-pivot tbody tr:nth-child(even) {
  background-color: var(--table-bg);
  background-image: linear-gradient(var(--table-alt), var(--table-alt));
}

.report-table.cd-pivot tbody tr:hover,
.report-table.cd-pivot tbody tr.is-active {
  background-color: var(--table-bg);
  background-image: linear-gradient(var(--table-hover), var(--table-hover));
}

.cd-pivot tbody tr.is-filterable {
  cursor: pointer;
}

.cd-pivot tbody tr.is-active {
  color: var(--accent);
}

.cd-pivot .cd-sticky-l,
.cd-pivot .cd-sticky-r1,
.cd-pivot .cd-sticky-r2 {
  position: sticky;
  z-index: 2;
  background: inherit;
}

.cd-pivot .cd-sticky-l {
  left: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1px 0 0 var(--line);
}

.cd-pivot .cd-sticky-r1 {
  right: 0;
  width: 132px;
  min-width: 132px;
}

.cd-pivot .cd-sticky-r2 {
  right: 132px;
  width: 148px;
  min-width: 148px;
  box-shadow: inset 1px 0 0 var(--line);
}

/* Başlık ve toplam satırı kendi arka planlarını taşır (satır zebrasına dahil değil). */
.cd-pivot thead th {
  z-index: 3;
  background: var(--table-head);
  white-space: normal;
  max-width: 220px;
}

/* Ürün kırılımında başlıklar çok uzun ("SKU - açıklama") → en fazla iki satır,
   fazlası "…" ile kısalır; tamamı title attribute'unda (hover).
   KRİTİK: kırpma th'ye DEĞİL içteki span'e uygulanır — th'ye `display:-webkit-box`
   vermek hücreyi table-cell olmaktan çıkarır ve başlıklar alt alta düşer. */
.cd-pivot thead th .cd-th-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-snapshot-label {
  font-size: .82rem;
  color: var(--muted);
}

.cd-pivot thead th.cd-sticky-l,
.cd-pivot thead th.cd-sticky-r1,
.cd-pivot thead th.cd-sticky-r2 {
  z-index: 5;
  background: var(--table-head);
}

.cd-pivot tfoot tr {
  background: var(--table-head);
}

.cd-pivot tfoot th,
.cd-pivot tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: inherit;
  font-weight: 700;
  border-top: 1px solid var(--line);
}

.cd-pivot tfoot th.cd-sticky-l,
.cd-pivot tfoot td.cd-sticky-r1,
.cd-pivot tfoot td.cd-sticky-r2 {
  z-index: 5;
}

/* ─── Platform Bazlı Kar Raporu ────────────────────────────────────────────
   Tek geniş tablo (14 kolon): dikey+yatay kaydırma tek kapsayıcıda, başlık
   üstte / TOPLAM altta / ilk sütun solda sabit. Tablo iskeleti
   sd-detail-table'dan miras alınır. */
/* Araç çubuğu: solda Normal/Transpose pili, sağda Excel + tam ekran ikonları.
   Alttaki boşluk tabloyla arasını açar. */
.pkr-table-shell { position: relative; }

.pkr-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 0;
  margin-bottom: 14px;
}

.pkr-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pkr-fs-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pkr-fs-btn:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: scale(1.05);
}

.pkr-fs-btn span { display: inline-grid; place-items: center; }
.pkr-fs-btn svg { width: 17px; height: 17px; fill: currentColor; }
.pkr-fs-btn .pkr-fs-ico-collapse { display: none; }

/* Tam ekran: kart arka planı + tabloya neredeyse tüm ekran yüksekliği. */
.pkr-table-shell:fullscreen {
  background: var(--surface, var(--surface-card));
  padding: 16px 22px;
  overflow: auto;
}

.pkr-table-shell:fullscreen .pkr-table-wrap { max-height: calc(100vh - 110px); }
.pkr-table-shell:fullscreen .pkr-fs-ico-expand { display: none; }
.pkr-table-shell:fullscreen .pkr-fs-ico-collapse { display: inline-grid; }

/* Ekran yüksekliğine göre uyarlanır (başlık + araç çubuğu payı düşülür).
   Taban 680px: eski sabit 620px'in üstünde kalır, uzun ekranlarda büyür.
   min-height KULLANILMAZ — filtreyle birkaç satıra düşen tablonun altında boş
   alan bırakırdı. */
.pkr-table-wrap {
  max-height: max(680px, calc(100vh - 260px));
  overflow: auto;
}

/* Kolon tonları: gider/azaltıcı kalemler kırmızı, net satış mavi, kar ve
   marjları yeşil. Başlıkta `col.thClass`, hücrede _pkrFormatCell'in bastığı
   span taşır. Negatif tutarlar tonu ezip kırmızıya döner (bkz _pkrToneClass).
   .report-page altındaki genel 14px/renk kuralları 2 sınıflı seçicileri
   yenebildiği için !important gerekiyor (bkz. KPI font-size notu). */
.pkr-table .pkr-tone-red,
.pkr-table .pkr-tone-red .filter-button,
.pkr-table .pkr-tone-red > span { color: var(--danger) !important; }

.pkr-table .pkr-tone-blue,
.pkr-table .pkr-tone-blue .filter-button,
.pkr-table .pkr-tone-blue > span { color: var(--accent) !important; }

.pkr-table .pkr-tone-green,
.pkr-table .pkr-tone-green .filter-button,
.pkr-table .pkr-tone-green > span { color: var(--success) !important; }

/* Sıralama okları tonlu başlıkta da okunur kalsın (rengi miras alır).
   Devrik görünümde metrik başlıkları tbody'de olduğu için th geneli hedeflenir. */
.pkr-table th[class*="pkr-tone-"] .sort-button:not(.active) { color: inherit; opacity: 0.7; }

/* Platform sütunu: adlar iki satıra bölünmesin (ör. "B2B Boemar Otomotiv");
   taşarsa "…" ile kısalır, tam adı title'da. */
.pkr-table:not(.pkr-table-transposed) thead th:first-child,
.pkr-table:not(.pkr-table-transposed) tbody td:first-child,
.pkr-table:not(.pkr-table-transposed) tfoot td:first-child {
  min-width: 215px;
  width: 215px;
}

.pkr-table:not(.pkr-table-transposed) tbody td:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkr-table:not(.pkr-table-transposed) tbody td:first-child span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Satır arka planı TR üzerinde tanımlanır ki sabit hücreler `inherit` ile aynı
   rengi alsın. --table-alt / --table-hover YARI SAYDAM; sabit sütunun altından
   kayan içeriğin görünmemesi için opak --table-bg üstüne katman olarak binerler
   (cd-pivot ile aynı desen). */
.report-table.pkr-table tbody tr {
  background-color: var(--table-bg);
  background-image: none;
}

.report-table.pkr-table tbody tr:nth-child(even) {
  background-color: var(--table-bg);
  background-image: linear-gradient(var(--table-alt), var(--table-alt));
}

.report-table.pkr-table tbody tr:hover {
  background-color: var(--table-bg);
  background-image: linear-gradient(var(--table-hover), var(--table-hover));
}

.pkr-table .pkr-sticky-l {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: inset -1px 0 0 var(--line);
}

.pkr-table .pkr-sticky-r {
  position: sticky;
  right: 0;
  z-index: 2;
  background: inherit;
  box-shadow: inset 1px 0 0 var(--line);
}

/* Başlık ve toplam satırı zebraya dahil değil → kendi opak arka planlarını taşır. */
.pkr-table thead th {
  z-index: 3;
  background: var(--table-head);
}

.pkr-table thead th.pkr-sticky-l,
.pkr-table thead th.pkr-sticky-r,
.pkr-table thead th.stok-filter-header:first-child {
  z-index: 5;
  background: var(--table-head);
}

/* Normal görünümde ilk sütun "Platform" başlık hücresidir (filtrelenebilir th). */
.pkr-table:not(.pkr-table-transposed) thead th:first-child,
.pkr-table:not(.pkr-table-transposed) tbody td:first-child {
  position: sticky;
  left: 0;
  background: inherit;
  box-shadow: inset -1px 0 0 var(--line);
}

.pkr-table:not(.pkr-table-transposed) tbody td:first-child {
  z-index: 2;
}

.pkr-table:not(.pkr-table-transposed) thead th:first-child {
  z-index: 5;
  background: var(--table-head);
}

.pkr-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--table-head);
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.pkr-total-row td.pkr-sticky-l {
  left: 0;
  z-index: 5;
  background: var(--table-head);
}

/* Devrik görünüm: satır başlıkları (metrik adları) sol sütunda sabit.
   Etiket + sıralama düğmesi arasını açıp düğmeyi sağa yaslar. */
.pkr-table-transposed tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.pkr-table-transposed th .stok-header-cell {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.pkr-table-transposed tbody tr th.pkr-sticky-l {
  z-index: 2;
}

/* ============================ Hukuk / UETS e-tebligat ============================ */
/* Renkler tema değişkenlerinden gelir; hardcode renk yok. */

.hukuk-page {
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hukuk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hukuk-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hukuk-title {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}

.hukuk-subtitle {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.hukuk-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hukuk-tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hukuk-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.hukuk-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.hukuk-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.hukuk-kpi {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-card);
}

.hukuk-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.hukuk-kpi-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.hukuk-kpi-warn .hukuk-kpi-value { color: #b26a00; }
.hukuk-kpi-danger .hukuk-kpi-value { color: var(--danger); }

.hukuk-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-subtle);
}

.hukuk-input {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  /* Global `input, select { width: 100% }` kuralını ez: filtreler tek satırda
     yan yana dizilsin, her biri kendi satırını kaplamasın. */
  width: auto;
  min-width: 130px;
  max-width: 100%;
  flex: 0 1 auto;
}

.hukuk-input-grow { flex: 1 1 170px; min-width: 160px; }

.hukuk-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.hukuk-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.hukuk-btn {
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.hukuk-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hukuk-btn:disabled { opacity: 0.55; cursor: default; }

.hukuk-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.hukuk-btn-primary:hover:not(:disabled) { color: #fff; opacity: 0.9; }

.hukuk-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.hukuk-btn-danger:hover:not(:disabled) { color: #fff; opacity: 0.9; }

.hukuk-tablewrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-card);
  overflow-x: auto;
  /* Flex kolonun içinde overflow-x'in çalışması için şart: min-width:auto olsa
     geniş tablo sayfayı yatay olarak şişirir ve başlıktaki sekmeler ekran
     dışına kayar. */
  min-width: 0;
  max-width: 100%;
}

/* Uzun hata metni tabloyu şişirmesin — tamamı title ile okunur.
   NOT: kırpma `td` üzerinde çalışmaz (auto table-layout max-width'i yok sayar),
   bu yüzden hücrenin İÇİNDEKİ blok elemana uygulanır. */
.hukuk-cell-clip {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hukuk-errtext {
  color: var(--danger);
  font-weight: 600;
}

.hukuk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hukuk-table th {
  text-align: left;
  padding: 11px 14px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.hukuk-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}

.hukuk-table tbody tr:last-child td { border-bottom: none; }
.hukuk-table tbody tr:hover { background: var(--surface-subtle); }

/* Okunmamış tebligat: sol kenarda vurgu — süre işlediği için gözden kaçmamalı. */
.hukuk-row-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.hukuk-row-unread .hukuk-cell-strong { font-weight: 700; }

.hukuk-cell-strong { font-weight: 600; }

.hukuk-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.hukuk-muted { color: var(--muted); }

.hukuk-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hukuk-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.hukuk-link:hover { text-decoration: underline; }

.hukuk-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hukuk-badge-ok {
  color: var(--success);
  background: rgba(22, 143, 92, 0.12);
  border-color: rgba(22, 143, 92, 0.28);
}

.hukuk-badge-warn {
  color: #b26a00;
  background: rgba(214, 138, 0, 0.14);
  border-color: rgba(214, 138, 0, 0.3);
}

.hukuk-badge-danger {
  color: var(--danger);
  background: rgba(200, 45, 45, 0.12);
  border-color: rgba(200, 45, 45, 0.28);
}

.hukuk-badge-muted {
  color: var(--muted);
  background: var(--surface-subtle);
  border-color: var(--line);
}

.hukuk-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.hukuk-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.hukuk-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--text);
}

.hukuk-alert-danger {
  border-color: rgba(200, 45, 45, 0.35);
  background: rgba(200, 45, 45, 0.08);
}

.hukuk-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}

.hukuk-detail {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 10px 20px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-card);
  font-size: 13px;
}

.hukuk-detail dt { color: var(--muted); }
.hukuk-detail dd { margin: 0; color: var(--text); }

/* İndirme onay penceresi — işlem geri alınamaz, o yüzden ayrı ve baskın. */
.hukuk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 30, 0.55);
}

.hukuk-modal {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.hukuk-modal-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.hukuk-modal-warn {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--danger);
  background: rgba(200, 45, 45, 0.09);
  border: 1px solid rgba(200, 45, 45, 0.3);
}

.hukuk-modal-meta {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 7px 16px;
  margin: 0 0 14px;
  font-size: 13px;
}

.hukuk-modal-meta dt { color: var(--muted); }
.hukuk-modal-meta dd { margin: 0; color: var(--text); word-break: break-word; }

.hukuk-modal-note {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted);
}

.hukuk-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px) {
  .hukuk-page { padding: 16px 14px 32px; }
  .hukuk-detail,
  .hukuk-modal-meta { grid-template-columns: 1fr; gap: 4px; }
  .hukuk-detail dd,
  .hukuk-modal-meta dd { margin-bottom: 8px; }
}

/* ──────────────────── Hesaplama modülü (komisyon + kargo) ──────────────────── */
.hesap-page {
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hesap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hesap-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hesap-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hesap-title {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}

/* Alt sayfadan modül anasayfasına dönüş (komisyon/kargo arası geçiş pili yoktur). */
.hesap-back {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.hesap-back:hover { text-decoration: underline; }

.hesap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.hesap-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hesap-btn:disabled { opacity: 0.55; cursor: default; }

.hesap-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hesap-btn-primary:hover:not(:disabled) { color: #fff; opacity: 0.9; }

.hesap-btn-ghost { background: transparent; color: var(--muted); border-style: dashed; }
.hesap-btn-ghost:hover:not(:disabled) { color: var(--accent); border-style: solid; }

/* ---- Tutar / desi girdisi ---- */
.hesap-inputbar {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-card);
}

/* Tasarımda giriş çubuğu renkli tint panel: komisyon accent, kargo sıcak. */
.hesap-inputbar-teal {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
}

.hesap-inputbar-warm {
  border-color: rgba(202, 103, 2, 0.26);
  background: linear-gradient(135deg, rgba(202, 103, 2, 0.08), rgba(238, 155, 0, 0.03));
}

/* Not metni sağa yaslanır (tasarımda çubuğun sağ ucunda durur). */
.hesap-inputbar .hesap-input-note {
  margin-left: auto;
  text-align: right;
  max-width: 430px;
  padding-bottom: 6px;
}

/* Birimi (₺) alanın içinde göstermek için sarmalayıcı. */
.hesap-inputwrap { position: relative; display: inline-flex; align-items: center; }
.hesap-inputwrap-lg .hesap-input-lg { padding-right: 34px; }

.hesap-unit {
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.hesap-field { display: flex; flex-direction: column; gap: 5px; }

.hesap-field-lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hesap-input {
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

.hesap-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.hesap-input-lg { font-size: 20px; font-weight: 700; padding: 10px 14px; width: 220px; }
.hesap-input-sm { width: 96px; }
.hesap-input-grow { flex: 1 1 180px; }
.hesap-input-dim { font-size: 17px; font-weight: 600; padding: 9px 12px; width: 104px; }

/* Desi giriş yöntemi seçimi (Desi gir / Ölçü & kilo gir) */
.hesap-inputbar-col { flex-direction: column; align-items: stretch; gap: 14px; }
.hesap-inputrow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

.hesap-seg-row {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle);
  align-self: flex-start;
}

.hesap-seg {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hesap-seg:hover { color: var(--text); }

.hesap-seg.active {
  background: var(--surface-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hesap-input-note { font-size: 12px; color: var(--muted); line-height: 1.5; padding-bottom: 4px; }

/* ---- Kargo teklif kartları (yeşil → kırmızı, en uygundan en pahalıya) ----
   --hesap-hue satır bazında inline verilir (142 = yeşil, 0 = kırmızı); ton
   hesabı burada yapılır ki karanlık temada da okunur kalsın. */
.hesap-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) { .hesap-quotes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* Teklif kartı: tasarımda yalnız KAZANAN yeşil vurgulu, diğerleri nötr kart;
   sıralamayı rütbe kutusu ve fark tutarı taşır (renk skalası yerine). */
.hesap-quote {
  position: relative;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hesap-quote-win {
  border-color: rgba(42, 157, 143, 0.4);
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.12), rgba(42, 157, 143, 0.03));
}

.hesap-quote-na { border-style: dashed; background: var(--surface-subtle); }

.hesap-quote-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.hesap-quote-rank {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(var(--accent-rgb), 0.09);
  flex: 0 0 auto;
}

.hesap-quote-win .hesap-quote-rank { background: var(--success); color: #fff; }

.hesap-quote-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En uygunla FARK — sağ üst köşede, sıralamanın büyüklüğünü gösterir. */
.hesap-quote-diff {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.hesap-quote-price { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 6px; }
.hesap-quote-win .hesap-quote-price { color: #1f7a70; }
.hesap-quote-na .hesap-quote-price { color: var(--muted); }
body[data-theme="dark"] .hesap-quote-win .hesap-quote-price { color: #6fd3c2; }

/* Öne çıkan tutar KDV DAHİL; KDV hariç karşılığı altta, etiketi tutarın sağında. */
.hesap-quote-price-tag {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hesap-quote-vat { font-size: 13px; color: var(--muted); }
.hesap-quote-vat b { color: var(--text); font-weight: 700; }
.hesap-quote-vat span { font-size: 11.5px; }

.hesap-quote-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hesap-quote-note { font-size: 11px; color: var(--muted); font-style: italic; }

/* ---- Sayı tipografisi: tasarımda tutarlar Space Grotesk + tabular ---- */
.hesap-num-font,
.hesap-table .hesap-num,
.hesap-quote-price,
.hesap-car-price {
  font-family: "Space Grotesk", "Manrope", inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
}

/* ---- Kuruluş / taksit seçimi ve sonuç paneli ---- */
.hesap-select {
  height: 44px;
  min-width: 168px;
  padding: 0 30px 0 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* Kendi okunu çiziyoruz; yerel ok tema renklerine uymuyor. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.hesap-select-sm { min-width: 124px; }
.hesap-select:disabled { opacity: 0.55; cursor: default; }

/* Seçilen kuruluş + taksit için komisyon DAHİL toplam — sayfanın ana cevabı. */
.hesap-result {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.03));
}

.hesap-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hesap-result-lbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.hesap-result-val { font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1.15; }
.hesap-result-sub { font-size: 12.5px; color: var(--muted); }

.hesap-result-facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.22);
}

.hesap-result-fact { display: flex; flex-direction: column; gap: 2px; }

.hesap-result-fact small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.hesap-result-fact b { font-size: 16px; font-weight: 700; color: var(--text); }

.hesap-result-empty {
  border-color: var(--line);
  background: var(--surface-subtle);
}

.hesap-result-note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---- Ödeme kuruluşu kartları (komisyon) ---- */
.hesap-provs { display: flex; flex-direction: column; gap: 16px; }

.hesap-prov {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-card);
  overflow: hidden;
}

.hesap-prov-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.hesap-prov-id { min-width: 0; }
.hesap-prov-id small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* Kuruluş rozeti — renk addan türetilir (bkz. providerBadge). */
.hesap-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
  text-transform: lowercase;
}

.hesap-logo-0 { background: linear-gradient(135deg, #1f5fbf, #3f8fe0); }
.hesap-logo-1 { background: linear-gradient(135deg, #8e3bb0, #b56ad0); }
.hesap-logo-2 { background: linear-gradient(135deg, #0f8a6a, #38b48b); }
.hesap-logo-3 { background: linear-gradient(135deg, #c1440e, #e3762f); }
.hesap-logo-4 { background: linear-gradient(135deg, #5a4a7a, #8577a8); }
.hesap-logo-5 { background: linear-gradient(135deg, #1c6d78, #2f9aa6); }

.hesap-wins {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(42, 157, 143, 0.14);
  white-space: nowrap;
}

/* O taksit sayısında tüm kuruluşlar arasında en uygun olan satır. */
.hesap-row-best td { background: rgba(42, 157, 143, 0.08); }

.hesap-pill {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(42, 157, 143, 0.14);
}

/* Oran çubuğu: en yüksek orana göre ölçekli, üst aralıkta sıcak renk. */
.hesap-rate { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.hesap-rate-track {
  display: block;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
  flex: 0 0 auto;
}

.hesap-rate-track i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.hesap-rate-track i.warm { background: #ca6702; }

/* ---- Kargo firması tarife kartları ---- */
.hesap-cars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 18px;
  align-items: start;
}

.hesap-car {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-card);
  overflow: hidden;
  min-width: 0;
}

.hesap-car-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px 13px; }

.hesap-car-price {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.hesap-car-price.win { color: #1f7a70; }
body[data-theme="dark"] .hesap-car-price.win { color: #6fd3c2; }

.hesap-car-price-vat { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Desi aralıkları yatay şerit — girilen desinin düştüğü aralık dolu blok. */
/* Desi aralıkları şeridi. Tasarım örneği 5 aralık gösteriyordu; gerçek tarifelerde
   12+ aralık olabiliyor ve tek satıra sıkışınca ücretler üst üste binip okunmaz
   hâle geliyordu. Bu yüzden hücrelerin okunur bir asgari genişliği var ve şerit
   gerektiğinde ALT SATIRA taşıyor. Ayırıcılar 1px gap ile veriliyor ki taşan
   satırlarda da hem yatay hem dikey çizgi düzgün görünsün. */
.hesap-tierbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 18px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--line);
}

.hesap-tierbar div {
  flex: 1 1 68px;
  min-width: 68px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 5px 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-subtle);
  line-height: 1.2;
  text-align: center;
}

.hesap-tierbar div.on { background: var(--accent); color: #fff; }

.hesap-tierbar div small {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}

.hesap-car-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-subtle);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Banka / kargo firması kartları ---- */
.hesap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Komisyon tablosu 5 para kolonu taşır: kart daralınca kolonlar yatay kaydırmaya
   düşer ve asıl sayılar gizlenir. Bu yüzden komisyon kartları daha geniş. */
.hesap-cards-wide { grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)); }

.hesap-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-card);
  overflow: hidden;
  min-width: 0;
}

/* Desi girildiğinde kart üst kenarı, teklif kartıyla aynı renk skalasını taşır. */
.hesap-card-toned { border-top: 3px solid hsl(var(--hesap-hue, 142) 60% 45% / 0.75); }

.hesap-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.hesap-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.hesap-card-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }

.hesap-card-price {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--hesap-hue, 142) 62% 32%);
  white-space: nowrap;
}

body[data-theme="dark"] .hesap-card-price { color: hsl(var(--hesap-hue, 142) 70% 68%); }

.hesap-card-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }

.hesap-card-price-vat {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Onay kuyruğu paneli ---- */
.hesap-pending {
  border: 1px solid rgba(214, 138, 0, 0.35);
  border-radius: 14px;
  background: rgba(214, 138, 0, 0.07);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hesap-pending-head { display: flex; align-items: center; gap: 9px; }

.hesap-pending-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.hesap-pending-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

.hesap-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-card);
}

.hesap-pending-info { min-width: 0; flex: 1 1 260px; }
.hesap-pending-who { font-size: 13px; color: var(--text); }

.hesap-pending-summary {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hesap-pending-actions { display: flex; gap: 7px; flex-shrink: 0; }

.hesap-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hesap-badge-warn {
  color: #b26a00;
  background: rgba(214, 138, 0, 0.16);
  border-color: rgba(214, 138, 0, 0.34);
}

body[data-theme="dark"] .hesap-badge-warn { color: #f0b64a; }

.hesap-prm-approval {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #b26a00;
  background: rgba(214, 138, 0, 0.1);
  border: 1px solid rgba(214, 138, 0, 0.3);
}

body[data-theme="dark"] .hesap-prm-approval { color: #f0b64a; }

.hesap-tablewrap { overflow-x: auto; min-width: 0; max-width: 100%; }

.hesap-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.hesap-table th {
  text-align: left;
  padding: 9px 14px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.hesap-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
}

.hesap-table tbody tr:last-child td { border-bottom: none; }
.hesap-table .hesap-num { text-align: right; font-variant-numeric: tabular-nums; }
.hesap-table .hesap-cell-strong { font-weight: 600; }

/* Girilen desiye karşılık gelen satır — tabloda hangi tarifenin uygulandığı görünür. */
.hesap-row-active { background: var(--accent-soft); }
.hesap-row-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.hesap-row-active td { font-weight: 600; }

.hesap-empty-cell { padding: 16px 14px; color: var(--muted); font-size: 12px; text-align: center; }

.hesap-empty {
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hesap-empty strong { color: var(--text); font-size: 14px; }

/* ---- Parametre modali ---- */
.hesap-prm { display: flex; flex-direction: column; gap: 14px; }

.hesap-prm-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.hesap-prm-hint { margin: 0; font-size: 12px; color: var(--muted); }

.hesap-prm-list { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; }

.hesap-prm-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card);
}

.hesap-prm-group-head { display: flex; align-items: center; gap: 8px; }

.hesap-prm-rows { display: flex; flex-direction: column; gap: 7px; }

.hesap-prm-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Modal gövdesi `.kol-modal` altında: oradaki genel `.kol-modal input { width:100% }`
   kuralı (0,1,1) tek başına `.hesap-input-sm` (0,1,0) kuralını ezip her alanı
   tam satıra yayıyor. Bu yüzden genişlikler burada `.hesap-prm` ile sarılarak
   yeniden veriliyor. */
.hesap-prm .hesap-input { width: auto; }
.hesap-prm .hesap-input-sm { width: 96px; flex: 0 0 auto; }
.hesap-prm .hesap-input-grow { flex: 1 1 180px; width: auto; }
.hesap-prm-x { color: var(--muted); font-size: 12px; }
.hesap-prm-unit { color: var(--muted); font-size: 12px; font-weight: 600; }

.hesap-prm-add { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.hesap-prm-over {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}

.hesap-prm-over-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }

.hesap-prm-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hesap-icon-btn {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.hesap-icon-btn:hover { color: var(--danger); border-color: var(--danger); }

@media (max-width: 720px) {
  .hesap-page { padding: 16px 14px 32px; }
  .hesap-cards,
  .hesap-cards-wide,
  .hesap-cars,
  .hesap-quotes { grid-template-columns: 1fr; }
  .hesap-result { flex-direction: column; align-items: stretch; gap: 14px; }
  .hesap-result-facts { margin-left: 0; padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid rgba(var(--accent-rgb), 0.22); gap: 18px; }
  .hesap-select, .hesap-select-sm { min-width: 0; width: 100%; }
  .hesap-tierbar div { flex: 1 1 60px; min-width: 60px; }
  .hesap-inputbar .hesap-input-note { margin-left: 0; text-align: left; max-width: none; }
  .hesap-prov-head { flex-wrap: wrap; }
  .hesap-wins { margin-left: 0; }
  .hesap-table th,
  .hesap-table td { padding: 9px 10px; }
  .hesap-input-lg { width: 100%; }
  .hesap-field { flex: 1 1 100%; }
  /* Ölçü alanları mobilde ikili sıra: dört alan tek satıra sığmaz. */
  .hesap-inputrow .hesap-field { flex: 1 1 calc(50% - 7px); }
  .hesap-input-dim { width: 100%; }
  .hesap-inputrow .hesap-input-note { flex: 1 1 100%; }
}

/* ─────────────────────────── Borç Alacak Raporu ─────────────────────────── */
.bal-report { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; min-width: 0; }
.bal-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .bal-kpi-grid { grid-template-columns: 1fr; } }
.bal-kpi { border-top: 3px solid transparent; min-width: 0; transition: opacity .15s ease; }
.bal-kpi-ok { border-top-color: var(--success); }
.bal-kpi-danger { border-top-color: var(--danger); }
/* Tek taraf seçiliyken diğer tarafın KPI'ı geri plana çekilir (veri değişmez). */
.bal-kpi-dim { opacity: .55; }
.bal-kpi-sub { margin: 4px 0 0; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bal-toolbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.bal-toolbar-group { display: flex; flex-direction: column; gap: 5px; }
.bal-toolbar-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.bal-hint, .bal-fx-note { font-size: .76rem; margin: 0; }

.bal-table td, .bal-table th { font-size: .82rem; }
/* Kolon genişlikleri (auto layout): cari adı okunabilir kalsın, kısa kolonlar
   yayılmasın. Tablo sığmazsa .table-wrap yatay kaydırır. */
.bal-cell-cari { min-width: 230px; }
.bal-cell-fatura { min-width: 120px; white-space: nowrap; }
.bal-cell-tur { width: 1%; white-space: nowrap; }
.bal-table tfoot .bal-foot td {
  background: var(--surface-card-strong);
  box-shadow: 0 -1px 0 var(--card-border, rgba(120, 130, 140, .25));
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bal-table-cari .bal-cari-row { cursor: pointer; }
.bal-table-cari .bal-cari-row:hover { background: var(--surface-subtle); }

.bal-vade-late { color: var(--danger); font-weight: 600; }
.bal-vade-today { color: var(--warn-row-text, #c2410c); font-weight: 600; }
.bal-vade-ok { color: var(--muted); }

.bal-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.bal-badge-ok { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.bal-badge-late { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.bal-badge-open { color: var(--muted); border-color: var(--card-border, rgba(120, 130, 140, .35)); }

.bal-yon { font-weight: 600; }
.bal-yon-alacak { color: var(--success); }
.bal-yon-borc { color: var(--danger); }

/* Cari satırı → fatura listesi modalı */
.modal-card.bal-modal-card { width: min(1180px, 96vw); max-width: min(1180px, 96vw); max-height: 90vh; }
.bal-modal-card .modal-body { overflow: auto; }
.bal-modal-card .modal-header h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bal-modal-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--muted); padding: 4px 6px;
}
.bal-modal-x:hover { color: var(--text); }
.bal-modal-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 14px;
}
@media (max-width: 720px) { .bal-modal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bal-modal-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bal-modal-summary strong { font-variant-numeric: tabular-nums; font-size: .9rem; }
.bal-modal-table-wrap { max-height: 62vh; overflow: auto; }

/* Hukuk — hesap ekleme/düzenleme formu */
.hukuk-modal-wide { width: min(680px, 100%); }

.hukuk-actions-bar { margin-top: -4px; }

.hukuk-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 14px;
}

.hukuk-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}

.hukuk-field-full { grid-column: 1 / -1; }

.hukuk-field > span em {
  font-style: normal;
  opacity: 0.75;
}

.hukuk-field .hukuk-input {
  width: 100%;
  min-width: 0;
}

.hukuk-form-static {
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 620px) {
  .hukuk-form { grid-template-columns: 1fr; }
}

/* ===================== Hukuk — tasarım güncellemesi =====================
   Kaynak: "Hukuk (E-Tebligat) - Tasarım Fikirleri" (Claude Design).
   Tasarım yalnız açık temada çizilmişti; buradaki karşılıkları tema
   değişkenlerine bağlıyoruz ki koyu temada da doğru görünsün. */

:root { --hukuk-amber: #b06b00; }
body[data-theme="dark"] { --hukuk-amber: #d9a02e; }

/* KPI: sol renk şeridi + sağ üstte küçük not */
.hukuk-kpi {
  position: relative;
  overflow: hidden;
  padding-left: 22px;
}

.hukuk-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--muted);
  opacity: 0.5;
}

.hukuk-kpi-acc::before { background: var(--accent); opacity: 1; }
.hukuk-kpi-ok::before { background: var(--success); opacity: 1; }
.hukuk-kpi-warn::before { background: var(--hukuk-amber); opacity: 1; }
.hukuk-kpi-danger::before { background: var(--danger); opacity: 1; }

.hukuk-kpi-value {
  font-family: "Space Grotesk", "Manrope", Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: -0.022em;
}

.hukuk-kpi-warn .hukuk-kpi-value { color: var(--hukuk-amber); }
.hukuk-kpi-danger .hukuk-kpi-value { color: var(--danger); }

.hukuk-kpi-sub {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}

/* Müvekkil firma rozeti */
.hukuk-co {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.hukuk-av {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: none;
  letter-spacing: 0.02em;
}

/* Rozetlerdeki durum noktası */
.hukuk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.hukuk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hukuk-badge-warn {
  color: var(--hukuk-amber);
  background: rgba(176, 107, 0, 0.13);
  border-color: rgba(176, 107, 0, 0.28);
}

/* Okuma süresi: kalan süre + tükenme çubuğu */
.hukuk-rem { min-width: 120px; }

.hukuk-rem-text {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.hukuk-rem-idle {
  font-size: 12px;
  color: var(--muted);
}

.hukuk-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
}

.hukuk-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
}

/* Günlük sorgu sayacı */
.hukuk-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.hukuk-quota-track {
  width: 56px;
  height: 5px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
  flex: none;
}

.hukuk-quota-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
}

/* Tablo alt bilgi şeridi */
.hukuk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* Bölüm başlığı */
.hukuk-subtitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hukuk-subtitle small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.hukuk-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.hukuk-push { margin-left: auto; }

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

.hukuk-cell-right { text-align: right; }

/* Satır vurguları: okunmamış = kehribar, kritik = kırmızı */
.hukuk-row-unread td:first-child { box-shadow: inset 3px 0 0 var(--hukuk-amber); }
.hukuk-row-critical td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.hukuk-table tbody tr.hukuk-row-unread td { background: rgba(var(--accent-rgb), 0.03); }

@media (max-width: 900px) {
  .hukuk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hukuk-kpi-sub { display: none; }
}

/* Firma adı tek satır: uzun ticari unvanlar hücreyi 4 satıra çıkarıyordu. */
.hukuk-co-text { min-width: 0; }

.hukuk-co-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UETS adresi / kimliği ortadan bölünmesin. */
.hukuk-sub.hukuk-mono,
td .hukuk-mono {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dar ekranda sıkışmasın: tablo kendi kabında kayar.
   NOT: `table-layout: fixed` DENENDİ ve geri alındı — başlıklardaki genişlik
   toplamı kabı aştığı için genişlik verilmeyen "Konu" kolonu sıfıra düşüyor ve
   metin harf harf alt alta diziliyordu. Bunun yerine yalnız firma hücresine
   genişlik sınırı konuyor; ellipsis orada devreye giriyor. */
.hukuk-table { min-width: 980px; }

.hukuk-co-name { max-width: 160px; }

/* Hesap tablosunda ilk kolon daha geniş (firma + hesap adı birlikte). */
.hukuk-co-name.hukuk-cell-strong { max-width: 210px; }

/* Aksiyon kolonu sıkıştırılamaz: auto-layout'ta hata kolonu bu kolonu 107px'e
   düşürüp 4 düğmeyi alt alta diziyor ve satırı 173px yapıyordu. */
.hukuk-cell-actions {
  min-width: 330px;
  white-space: nowrap;
}

.hukuk-cell-actions .hukuk-actions { flex-wrap: nowrap; }

/* main.content bir GRID; `.panel` varsayılan `min-width:auto` olduğu için geniş
   tablo grid alanının dışına taşıyor ve tüm sayfayı yatayda kaydırıyordu.
   Düzeltme yalnız Hukuk sayfasını içeren panele uygulanır — diğer modüllerin
   düzeni değişmesin. Sonuç: tablo kendi kabında kayar, sayfa kaymaz. */
.panel:has(.hukuk-page) { min-width: 0; }

/* Serbest genişlikli son kolon, sabit genişlikli komşuları yüzünden min-content'e
   (harf harf alt alta) sıkışıyordu; alt sınır verilince tablo kendi kabında kayar. */
.hukuk-cell-detail { min-width: 240px; }

/* ============================ Kargo / Yurtiçi Kargo ============================ */
/* Renkler tema değişkenlerinden gelir; hardcode renk yok (yalnız beyaz metin
   birincil/tehlike düğmelerinde sabittir — Hukuk modülüyle aynı kural). */

.kargo-page {
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kargo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.kargo-head-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.kargo-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kargo-title {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}

.kargo-subtitle {
  margin: 8px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.kargo-subtitle small {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.kargo-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kargo-tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.kargo-tab:hover { color: var(--text); border-color: var(--accent); }

.kargo-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* -- KPI -- */

/* Gönderi ekranında 5 KPI var. 170px alt sınırla, sidebar açıkken (kap ~794px)
   beşincisi alt satıra tek başına düşüyordu; 135px ile beşi de tek satırda kalır
   ve dar ekranda yine kendiliğinden sarar. */
.kargo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
}

.kargo-kpi {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-card);
}

.kargo-kpi-value {
  /* Tutar KPI'ı ("₺7.819,18") 5 kartlık ızgarada 23px'te taşıyordu. */
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kargo-kpi-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.kargo-kpi-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}

.kargo-kpi-ok .kargo-kpi-value { color: var(--success); }
.kargo-kpi-warn .kargo-kpi-value { color: #b26a00; }
.kargo-kpi-danger .kargo-kpi-value { color: var(--danger); }

/* -- Araç çubuğu -- */

.kargo-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-subtle);
}

.kargo-push { margin-left: auto; }

.kargo-input {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-input);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  /* Global `input, select { width: 100% }` kuralını ez: süzgeçler tek satırda
     yan yana dizilsin (bkz. .hukuk-input'taki aynı not). */
  width: auto;
  min-width: 130px;
  max-width: 100%;
  flex: 0 1 auto;
}

.kargo-input-grow { flex: 1 1 220px; min-width: 200px; }

.kargo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.kargo-btn {
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.kargo-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.kargo-btn:disabled { opacity: 0.55; cursor: default; }
.kargo-btn-sm { padding: 5px 10px; font-size: 12px; }

.kargo-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.kargo-btn-primary:hover:not(:disabled) { color: #fff; opacity: 0.9; }
.kargo-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.kargo-btn-danger:hover:not(:disabled) { color: #fff; opacity: 0.9; }

.kargo-more { display: flex; justify-content: center; }

.kargo-metric-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* -- Tablo -- */

.kargo-tablewrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-card);
  overflow-x: auto;
}

.kargo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Sabit genişlikli kolonların toplamı (firma kolonu dahil); altına inince
     tablo kendi kabında kayar, sayfa kaymaz. */
  min-width: 1280px;
}

.kargo-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.kargo-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}

.kargo-table tbody tr:last-child td { border-bottom: none; }
.kargo-table tbody tr:hover { background: var(--surface-subtle); }

/* Teslim edilemeyen / iade olan gönderiler sol şeritle işaretlenir. */
.kargo-row-critical td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.kargo-cell-strong { font-weight: 600; }
.kargo-cell-right { text-align: right; }
.kargo-muted { color: var(--muted); }
.kargo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

.kargo-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.kargo-cell-clip {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kargo-errtext { color: var(--danger); }

.kargo-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Aksiyon kolonu sıkıştırılamaz: dört düğme tek satırda kalmalı. */
.kargo-cell-actions { min-width: 330px; white-space: nowrap; }
.kargo-cell-actions .kargo-actions { flex-wrap: nowrap; }

/* Sıralanabilir başlık: <th> içinde düğme, görsel olarak başlıkla aynı. */
.kargo-th-btn {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.kargo-th-btn:hover { color: var(--accent); }
.kargo-th-btn.active { color: var(--accent); }

.kargo-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.kargo-link:hover { text-decoration: underline; }

/* -- Rozetler -- */

.kargo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.kargo-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.kargo-badge-ok { color: var(--success); background: rgba(22, 163, 74, 0.12); }
.kargo-badge-warn { color: #b26a00; background: rgba(217, 119, 6, 0.14); }
.kargo-badge-danger { color: var(--danger); background: rgba(220, 38, 38, 0.12); }
.kargo-badge-acc { color: var(--accent); background: var(--accent-soft); }
.kargo-badge-muted { color: var(--muted); background: var(--surface-subtle); }

/* Yön rozeti: ok işareti metinden hızlı okunuyor. */
.kargo-dir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.kargo-dir-arrow { font-size: 14px; line-height: 1; }
.kargo-dir-out { color: var(--accent); }
.kargo-dir-in { color: var(--success); }

/* -- Taraf (gönderen/alıcı) rozeti -- */

.kargo-party { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.kargo-av {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.kargo-party-text { min-width: 0; }

.kargo-party-name {
  display: block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* -- Bilgi kutuları -- */

.kargo-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.kargo-note {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 12.5px;
}

.kargo-alert {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.kargo-alert-info { border-color: var(--accent); background: var(--accent-soft); }
.kargo-alert-warn { border-color: #d97706; background: rgba(217, 119, 6, 0.1); }
.kargo-alert-danger { border-color: var(--danger); background: rgba(220, 38, 38, 0.08); }

/* -- Ayrıntı ekranı -- */

.kargo-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.kargo-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-card);
}

.kargo-card .kargo-subtitle { margin-top: 0; }

.kargo-detail {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 8px 14px;
  margin: 0;
  font-size: 13px;
}

.kargo-detail dt { color: var(--muted); }
.kargo-detail dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* -- Hareket zaman çizelgesi -- */

.kargo-timeline {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kargo-tl-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 16px 0;
}

/* Noktaları birleştiren dikey çizgi; son öğede çizilmez. */
.kargo-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.kargo-tl-dot {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid var(--surface-card);
  background: var(--muted);
  z-index: 1;
}

.kargo-tl-dot-ok { background: var(--success); }
.kargo-tl-dot-warn { background: #d97706; }
.kargo-tl-dot-danger { background: var(--danger); }
.kargo-tl-dot-acc { background: var(--accent); }

.kargo-tl-item.current .kargo-tl-text { font-weight: 700; }
.kargo-tl-text { font-size: 13px; color: var(--text); }

.kargo-tl-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

/* -- Özet kırılım çubukları -- */

.kargo-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.kargo-bars { display: flex; flex-direction: column; gap: 8px; }

.kargo-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.kargo-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.kargo-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.kargo-bar-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.kargo-bar-value { color: var(--muted); white-space: nowrap; }
.kargo-bar-value b { color: var(--text); }

/* -- Modal -- */

.kargo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}

/* Arka plan OPAK olmalı. --surface-card (0.72) ve --surface (0.88) yarı saydam;
   ikisinde de modalın altındaki sayfa metni forma vurup okunmaz hâle geliyordu.
   --surface-strong her iki temada da tam opaktır. */
.kargo-modal {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.kargo-modal-wide { width: min(720px, 100%); }

.kargo-modal-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.kargo-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.kargo-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.kargo-field > span { color: var(--muted); font-weight: 600; }
.kargo-field em { font-style: normal; font-weight: 400; opacity: 0.8; }
.kargo-field-full { grid-column: 1 / -1; }

/* Modal içindeki alanlar satırı doldurmalı — araç çubuğundaki `width:auto`
   kuralı burada geçersiz kılınıyor (Hesaplama modülünde yaşanan aynı sorun). */
.kargo-field .kargo-input { width: 100%; min-width: 0; }

.kargo-modal-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.kargo-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.kargo-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* main.content bir GRID; `.panel` varsayılan `min-width:auto` olduğu için geniş
   tablo grid alanının dışına taşıp tüm sayfayı yatayda kaydırıyor. Düzeltme
   yalnız Kargo sayfasını içeren panele uygulanır (bkz. .hukuk-page'deki aynı not). */
.panel:has(.kargo-page) { min-width: 0; }

/* -- Kargo: firma (taşıyıcı) rozeti ve firma şeridi -- */
/* Marka rengi satır içi `--kargo-carrier-color` ile gelir (firma tanımından);
   tema değişkeni kullanılamaz çünkü marka rengi temaya göre değişmez. */

.kargo-carrier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
}

.kargo-carrier-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 3px;
  background: var(--kargo-carrier-color, var(--muted));
}

/* Firma şeridi: yatayda kayan tıklanabilir kart dizisi. Varsayılan "Tüm firmalar"
   seçili gelir — modül tek firmaya bağlı değil. */
.kargo-cstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.kargo-cstrip-item {
  flex: 0 0 auto;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* Seçili kartın sol şeridi firmanın marka rengi olur. */
  border-left: 3px solid var(--kargo-carrier-color, var(--line));
}

.kargo-cstrip-item:hover { border-color: var(--accent); }

.kargo-cstrip-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-left-color: var(--kargo-carrier-color, var(--accent));
}

.kargo-cstrip-all { border-left-color: var(--accent); }

.kargo-cstrip-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.kargo-cstrip-item.active .kargo-cstrip-name { color: var(--accent); }

.kargo-cstrip-count {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.kargo-cstrip-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.kargo-head-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

/* -- Kargo: barkod oluşturma ekranı ve yazdırılabilir etiket -- */

.kargo-create-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .kargo-create-grid { grid-template-columns: 1fr; }
}

.kargo-field-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.kargo-field textarea.kargo-input {
  width: 100%;
  min-width: 0;
  resize: vertical;
  font-family: inherit;
}

/* Etiket: kâğıda basılacağı için beyaz zemin/siyah metin SABİT — tema
   değişkeni kullanılmaz, koyu temada da basılabilir kalması gerekiyor. */
.kargo-label {
  background: #fff;
  color: #111;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kargo-lbl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.kargo-lbl-carrier { font-size: 15px; font-weight: 700; }
.kargo-lbl-sender { font-size: 11.5px; color: #555; margin-top: 2px; }

.kargo-lbl-desi {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.kargo-lbl-desi small { font-size: 11px; font-weight: 500; color: #555; }

.kargo-lbl-barcode { text-align: center; }
.kargo-barcode-svg { display: block; width: 100%; height: auto; }

.kargo-lbl-code {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.kargo-lbl-body { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }

.kargo-lbl-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px;
  align-items: baseline;
}

.kargo-lbl-row span { color: #555; }
.kargo-lbl-row b { overflow-wrap: anywhere; }

/* YAZDIRMA: yalnız etiket kâğıda gider. `body.kargo-printing` sınıfı
   yazdırmadan hemen önce eklenir (bkz. app.js kargoPrintLabel) — böylece
   normal görünümde hiçbir şey gizlenmez. */
@media print {
  body.kargo-printing > *:not(.shell),
  body.kargo-printing .sidebar,
  body.kargo-printing .report-sidebar,
  body.kargo-printing .mobile-tabbar,
  body.kargo-printing .kargo-page > *:not(.kargo-create-grid),
  body.kargo-printing .kargo-create-grid > section:first-child,
  body.kargo-printing .kargo-modal-actions,
  body.kargo-printing .kargo-subtitle {
    display: none !important;
  }
  body.kargo-printing .kargo-create-grid { grid-template-columns: 1fr; gap: 0; }
  body.kargo-printing .kargo-card {
    border: none;
    padding: 0;
    background: #fff;
  }
  body.kargo-printing .kargo-label {
    border: none;
    /* Yaygın termal etiket genişliği; A4'e basılırsa da ortada kalır. */
    width: 100mm;
    padding: 4mm;
  }
  body.kargo-printing { background: #fff; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Ortak tablo araçları (assets/table-tools.js)
   Sütun dondurma + sütun genişliği tutamağı + (opsiyonel) DOM tabanlı
   sıralama/filtre başlıkları. Master Data tablosundaki UX ile aynı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Başlığın sağ kenarındaki tutamak: sürükle = genişlik, tıkla = dondur. */
.btt-col-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  user-select: none;
}
/* Tutamak HER ZAMAN görünür (soluk bir çizgi) — görünmez olduğunda kullanıcı
   sütun genişliği/dondurma diye bir şey olduğunu fark etmiyor. Hover'da vurgulanır. */
.btt-col-handle::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 2px;
  width: 2px;
  height: 56%;
  border-radius: 2px;
  background: var(--line);
  opacity: 0.9;
  transition: background 0.16s ease, opacity 0.16s ease, height 0.16s ease;
}
.btt-col-handle:hover::after,
.btt-handle-frozen > .btt-col-handle::after {
  background: var(--accent);
  opacity: 1;
  height: 70%;
}
/* Sürükleme sırasında metin seçimi/hover titremesi olmasın. */
body.btt-resizing { user-select: none; cursor: col-resize !important; }
body.btt-resizing * { cursor: col-resize !important; }

/* Sabitlenen (sola donmuş) hücreler. Opak zemin JS'te hesaplanıp
   inline `background-color` olarak verilir; buradaki kurallar yalnızca
   konumlama, katman sırası ve hover/kenar çizgisi içindir. */
.btt-on .btt-frozen { z-index: 2; }
.btt-on thead .btt-frozen { z-index: 8; }
.btt-on tfoot .btt-frozen { z-index: 3; }
/* Hover rengi opak zeminin ÜSTÜNE bindirilir (background-image katmanı,
   inline background-color'ı ezmez). */
.btt-on tbody tr:hover .btt-frozen {
  background-image: linear-gradient(var(--table-hover), var(--table-hover));
}
.btt-on .btt-frozen-last::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}
/* Yalnız genişlik yönetimi devredeyken (`table-layout: fixed`) hücre içeriği
   daraltılan sütundan taşmasın. Fixed düzene geçmemiş tablolara dokunulmaz. */
.btt-fixed > thead > tr > th,
.btt-fixed > tbody > tr > td,
.btt-fixed > tfoot > tr > td { overflow: hidden; text-overflow: ellipsis; }

/* Hücre içi 2-satır kırpma sarmalayıcıları sabit bir max-width kapağı taşıyor
   (.sd-clamp2 = 170px, .kar-text-clamp, .cari-rontgen-cell-clamp). Sütun
   genişletildiğinde <td> büyüyor ama bu kapak yüzünden metin AÇILMIYORDU.
   Genişlik yönetimi açıkken kapağı kaldır: kırpma sütun genişliğini kullanır.
   (Aynı çözüm .sdv-table'da elle uygulanmıştı — artık tüm tablolarda geçerli.) */
.btt-fixed .sd-clamp2,
.btt-fixed .kar-text-clamp,
.btt-fixed .cari-rontgen-cell-clamp,
.btt-fixed .stok-td-aciklama .sd-clamp2 { max-width: none; }

/* DOM tabanlı başlık (yalnız kendi sıralama/filtresi olmayan tablolarda). */
.btt-hdr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.btt-hdr-num { justify-content: flex-end; width: 100%; }
.btt-hdr .col-filter-btn { overflow: hidden; text-overflow: ellipsis; }
.btt-hdr-label { font-weight: inherit; }

/* Muhasebe Hataları detay tablosu — yükseklik sınırı, taşınca kendi içinde kayar.
   Başlıklar `.report-table thead th` kuralıyla zaten sticky. */
.htl-table-wrap { max-height: calc(100vh - 320px); min-height: 260px; overflow: auto; }

/* ── Sütun filtresi: karşılaştırma koşulu satırı (>, ≥, <, ≤, =, ≠) ─────────
   Tüm filtre menülerinde (rapor tabloları, master data, CRM, DOM tabloları)
   ortak markup: app-core renderCompareFilterControls. */
.col-filter-compare {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle, transparent);
}
.col-filter-compare .col-filter-op {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-card-strong, var(--table-bg));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.col-filter-compare .col-filter-op-val {
  flex: 0 0 74px;
  width: 74px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-card-strong, var(--table-bg));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.col-filter-compare .col-filter-op:focus,
.col-filter-compare .col-filter-op-val:focus { border-color: var(--accent); outline: none; }
.col-filter-compare.is-active .col-filter-op,
.col-filter-compare.is-active .col-filter-op-val { border-color: rgba(var(--accent-rgb), 0.55); }

/* Koşul etkinken değer listesi devre dışıdır (ikisi birbirini dışlar). */
.stok-filter-options-list.is-dimmed,
.col-filter-list.is-dimmed { opacity: 0.4; pointer-events: none; }

/* ─── KDV Raporu ────────────────────────────────────────────────────────────
   Ay bazlı KDV tablosu (tek tablo + KPI). Kolon tonları platform-kar deseninin
   eşidir: KDV yükünü artıran kalemler kırmızı (hesaplanan, ödenecek), indirim
   kalemleri yeşil (indirilecek, ithalat), devreden mavi (sonraki döneme taşınan
   varlık). `.report-page` altındaki genel renk kuralları iki sınıflı seçicileri
   yenebildiği için !important gerekiyor (bkz. .pkr-tone-* notu). */

/* Kabuk SAYDAM: `.report-card-flat`ın beyaz yüzeyi araç çubuğunun arkasında,
   tablonun ÜSTÜNDE boş bir beyaz şerit olarak duruyordu. Kart görünümünü
   (yüzey + kenar + köşe) tablo kendi kapsayıcısında taşır — stok-devir
   (`.sdv-table-shell`) ile aynı desen. */
.kdv-table-shell { background: transparent; }

.kdv-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

/* Ekran yüksekliğine uyarlanır; min-height YOK — yıl filtresiyle 12 satıra düşen
   tablonun altında boşluk bırakırdı. KPI ve bilgi şeridi kaldırıldığı için
   tablo daha yükseğe kadar uzanabilir. */
.kdv-table-wrap {
  max-height: max(620px, calc(100vh - 220px));
  overflow: auto;
  background: var(--table-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.kdv-table .kdv-tone-red,
.kdv-table .kdv-tone-red > span   { color: var(--danger) !important; }
.kdv-table .kdv-tone-green,
.kdv-table .kdv-tone-green > span { color: var(--success) !important; }
.kdv-table .kdv-tone-blue,
.kdv-table .kdv-tone-blue > span  { color: var(--accent) !important; }
/* Boş ("—") tutar hücresi: sayısal sütunun gürültüsünü azaltır. */
.kdv-table .kdv-tone-muted { color: var(--muted) !important; opacity: 0.65; }

/* Tonlu BAŞLIK: col.thClass ile <th>'ye iner (hücrelerdeki span'den ayrı). */
.kdv-table th.kdv-tone-red   { color: var(--danger) !important; }
.kdv-table th.kdv-tone-green { color: var(--success) !important; }
.kdv-table th.kdv-tone-blue  { color: var(--accent) !important; }

/* Sıralama okları tonlu başlıkta da okunur kalsın (rengi miras alır). */
.kdv-table th[class*="kdv-tone-"] .sort-button:not(.active) { color: inherit; opacity: 0.7; }

/* Dönem sütunu tek satırda kalsın ("Ağustos 2026" bölünmesin). */
.kdv-table thead th:nth-child(2),
.kdv-table tbody td:nth-child(2) { white-space: nowrap; }

/* Durum rozetleri — tabloya sığsın diye .badge'den daha küçük/dar. */
.kdv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.kdv-badge-done { background: var(--success-soft); color: var(--success); }
.kdv-badge-open { background: var(--accent-soft);  color: var(--accent); }

/* Tahakkuk farkı sütunu: dolu hücrede açıklama title'da → imleç yardım işareti. */
.kdv-table td [title] { cursor: help; }

/* NOT: KPI kartları ve "tahakkuk edilmemiş dönem" bilgi şeridi kaldırıldı
   (kullanıcı kararı) — rapor tek tablodan ibaret, ilgili kurallar da silindi. */