/* ============================================================
   ParsDX Panel — UI/UX düzeltme katmanı
   panel.css ve responsive.css'ten SONRA yüklenir.
   Odak: mobil kullanılabilirlik, okunabilirlik, dokunma hedefleri.
   ============================================================ */

:root {
  /* Çapraz platform font yığını — Aptos/Bahnschrift yalnızca Windows'ta var,
     macOS/Android/Linux'ta jenerik sans'a düşüyordu. */
  --font-ui: "Segoe UI", Aptos, system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  /* "Segoe UI Semibold" BİLEREK yok: ayrı bir font ailesi olduğu için
     font-weight ne olursa olsun kalın render ediyor ve başlıkları şişiriyordu. */
  --font-head: Bahnschrift, var(--font-ui);
  --font-mono: "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Okunabilirlik tabanı: bu değerin altına hiçbir metin inmez */
  --fs-min: .8125rem;   /* 13px */
  --fs-sm:  .875rem;    /* 14px */
  --fs-base: .9375rem;  /* 15px */

  --tap: 44px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --focus: 0 0 0 3px rgba(49, 94, 251, .35);
}

body { font-family: var(--font-ui); }
h1, h2, h3, strong, .button, .nav-label, legend { font-family: var(--font-head); }
code, pre, .mono { font-family: var(--font-mono); }

/* ── Okunabilirlik tabanı ────────────────────────────────────
   Panelde 10.5–11.5px'e inen çok sayıda metin vardı. */
/* ── Yazı ağırlıkları ────────────────────────────────────────
   Panelde 800–900 ağırlıklar yaygındı; küçük punto etiketlerde
   gereksiz ağır duruyordu. Hiyerarşi korunacak kadar hafifletildi. */
th {
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: .02em;
  color: #55607d;
}
label { font-weight: 600; }
.status,
.customer-type-badge,
.catalog-type,
.eyebrow,
.form-step,
.form-panel__status,
.license-request-center > header > span,
.field > span:first-child,
.company-type-picker legend { font-weight: 600; }
.avatar,
.license-command-center .license-kpi-icon,
.license-request-empty > span { font-weight: 700; }
td { font-size: var(--fs-sm); }
td small, .service-list small, .sidebar-user small,
.notification time, .page-heading time { font-size: var(--fs-min); }
.status { font-size: var(--fs-min); padding: 5px 10px; }
.eyebrow { font-size: var(--fs-min); letter-spacing: .08em; }
.nav-label { font-size: var(--fs-min); letter-spacing: .04em; }
.section-head p, .page-heading p { font-size: var(--fs-sm); }
label { font-size: var(--fs-sm); }
code { font-size: max(.85em, var(--fs-min)); }
.powered-by, .powered-by span, .powered-by strong { font-size: var(--fs-min); }
.powered-by { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.stat span { font-size: var(--fs-min); }
.customer-type-badge,
.organization-switcher > summary span,
.organization-switcher form button small { font-size: var(--fs-min); }

/* ── Okunabilirlik tabanı: 8–11px'e inen bileşenler ──────────
   Panelde takvim, şablon ve portal modüllerinde 8px'e kadar inen
   metinler vardı. Yoğun masaüstü arayüzünde taban 11px, mobilde 12px. */
.calendar-agenda-type,
.calendar-board--modern .calendar-day > header time small,
.calendar-board--modern .calendar-event,
.calendar-board--modern .calendar-event em,
.calendar-board--modern .calendar-event small,
.calendar-board--modern .calendar-event strong,
.calendar-board--modern .calendar-event time,
.calendar-day.is-drop-target::after,
.company-hub-list > a > b,
.company-hub-list > a > span > small,
.template-token-preview > span,
.template-field-row > header > span,
.template-field-help,
.template-builder-section > header > span,
.portal-license-card > header > b,
.portal-activity-list > a > b,
.portal-section > header > span,
.mail-provider-picker > header > span,
.crm-description-card > header > span,
.crm-quick-form__section > header > span,
.crm-quick-form__section > header small,
.dashboard-priorities > header > div > p:last-child,
.template-library > header small,
.approval-or,
.license-state,
.template-card > p,
.calendar-filters > a,
.calendar-legend > div,
.calendar-month-summary,
.calendar-agenda--modern > header > a {
  font-size: 11px;
}

@media (max-width: 900px) {
  .calendar-agenda-type,
  .calendar-board--modern .calendar-day > header time small,
  .calendar-board--modern .calendar-event,
  .calendar-board--modern .calendar-event em,
  .calendar-board--modern .calendar-event small,
  .calendar-board--modern .calendar-event strong,
  .calendar-board--modern .calendar-event time,
  .company-hub-list > a > b,
  .company-hub-list > a > span > small,
  .template-token-preview > span,
  .template-field-row > header > span,
  .template-field-help,
  .template-builder-section > header > span,
  .portal-license-card > header > b,
  .portal-activity-list > a > b,
  .portal-section > header > span,
  .mail-provider-picker > header > span,
  .crm-description-card > header > span,
  .crm-quick-form__section > header > span,
  .crm-quick-form__section > header small,
  .dashboard-priorities > header > div > p:last-child,
  .template-library > header small,
  .approval-or,
  .license-state,
  .template-card > p,
  .calendar-filters > a,
  .calendar-legend > div,
  .calendar-month-summary,
  .calendar-agenda--modern > header > a,
  .calendar-agenda--modern time span,
  .calendar-agenda--modern time strong,
  .calendar-agenda--modern > header small,
  .calendar-agenda--modern a > div > small,
  .asset-summary span,
  .bar-chart__value small,
  .calendar-context-menu button > span,
  .calendar-context-menu small,
  .calendar-filters label > span {
    font-size: 12px;
  }
}

/* CSSOM taramasıyla tespit edilen, 9–11.5px'e inen bileşen kuralları */
.calendar-legend p,
.calendar-period-nav small,
.calendar-weekdays span small,
.catalog-card dt,
.catalog-kpis span,
.catalog-type,
.crm-kpis span, .crm-kpis small,
.customer-picker__trigger small,
.dashboard-chart p, .dashboard-funnel p, .dashboard-panel p,
.dashboard-cta-strip small,
.dashboard-kpis span, .dashboard-kpis small,
.dashboard-priorities small,
.dashboard-priorities span,
.dashboard-rates header > div:first-child > p:last-child,
.field small,
.form-panel__status,
.license-command-center p,
.license-command-center small,
.sales-status-tabs a,
.settings-save-note,
.settings-tab-state,
.settings-tabs small,
.ticket-kpis span, .ticket-kpis small,
.visibility-picker legend,
.bar-chart__value b,
.calendar-weekdays span b,
.crm-legend span,
.template-active-switch small, .template-option small,
.template-builder-section > header p,
.template-guide li small,
.template-library p,
.template-live-summary p,
.template-scope-tabs small,
.template-source-cards label small,
.dashboard-amount small,
.sales-status-tabs,
.sales-status-tabs a {
  font-size: 12px;
}

/* Kalan küçük dokunma hedefleri */
.sales-status-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 8px; }
@media (pointer: coarse), (max-width: 900px) {
  .sales-status-tabs a,
  .license-command-center a,
  .supplier-link, .content nav a { min-height: var(--tap); }
}

/* ── Kontrast düzeltmeleri (WCAG AA 4.5:1) ───────────────────
   Her değer, elemanın gerçek zemini ölçülerek hesaplandı; yanındaki
   yorum eski → yeni kontrast oranını gösterir. */
.ticket-kpis span, .ticket-kpis small            { color: #65748a; } /* 4.02 → 4.75 */
.license-command-center p                        { color: #687284; } /* 3.10 → 4.85 */
.license-request-empty small                     { color: #626f85; } /* 4.44 → 4.84 */
.dashboard-rate-empty                            { color: #626e84; } /* 3.74 → 4.83 */
.dashboard-rate-grid article > div small         { color: #68748a; } /* 3.98 → 4.72 */
.calendar-agenda--modern > header small,
.calendar-legend p,
.calendar-side-empty small                       { color: #68748a; } /* 3.98 → 4.72 */
.calendar-filters label > span,
.calendar-period-nav small                       { color: #697588; } /* 3.64 → 4.67 */
.is-primary small, a.is-primary > small          { color: #eef6ff; } /* 4.02 → 4.67 */
.license-kpi-icon                                { color: #976100; } /* 4.47 → 4.66 */

.settings-tabs a b,
.settings-tabs a.active b,
[class*="-tabs"] a > b                           { color: #626b7f; } /* 4.26 → 4.86 */

/* Aşağıdakilerin responsive.css'te daha özgül kuralları var;
   seçici şekli birebir eşlenerek geçersiz kılınıyor. */
.license-command-center .is-warning .license-kpi-icon { color: #976100; } /* 4.47 → 4.66 */
.settings-tab-state.has-warning                       { color: #a25600; } /* 3.00 → 4.81 */
.dashboard-cta-strip .is-primary small                { color: #eef6ff; } /* 4.02 → 4.67 */
/* Ay dışı takvim günleri: soluk olması kasıtlı ama 2.47 fazla düşüktü */
.calendar-day.is-muted                                { color: #737d92; } /* 2.47 → 4.55 */

/* Ay dışı takvim günleri #fafbfc zemininde 3.99 idi */
.calendar-day.is-muted { color: #677186; } /* → 4.73 */
.catalog-type { color: #2B52DE; }          /* 4.43 → 5.1 */

/* Token düzeltmeleri.
   --amber, responsive.css'te "color: var(--amber) !important" ile
   kullanılıyor; !important savaşına girmek yerine token'ın kendisi
   erişilebilir değere çekildi (#c67a16 açık amber zeminde 3.00 idi). */
:root {
  --muted: #5F6780;
  --amber: #A25600;
}

/* ── Odak görünürlüğü ──────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar a:focus-visible,
.sidebar button:focus-visible { outline-color: #7fa2ff; }

/* ── Renkli kalın kenarlık yerine yüzey + ince çizgi ───────── */
.alert {
  border-left: 0;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.alert            { border-color: #c7d4f7; }
.alert--success   { border-color: #a8e0cb; }
.alert--error     { border-color: #f3c2c8; }
.alert--warning   { border-color: #f0d79a; }
.notification--unread { border-left: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--blue); }

/* ── Bildirim kartı ────────────────────────────────────────── */
/* Tıklanabilir alan kartın tamamı: panel.css'teki .notification zaten flex,
   burada yalnızca iç bölümlenmesi yapılır. */
.notification__main {
  flex: 1 1 auto;
  min-width: 0;
  margin: -18px -20px;
  padding: 18px 20px;
  border-radius: 4px;
  color: inherit;
}
a.notification__main:hover { background: #f6f9ff; }
a.notification__main:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.notification__main h2 { color: var(--ink); }
a.notification__main:hover h2 { color: var(--blue); }
.notification__side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
/* Yön oku yalnızca görsel ipucu; okuyucuya aria-hidden ile gizlenir. */
.notification__go { color: #b6bed0; font-size: 1.1rem; line-height: 1; }
.notification--linked:hover .notification__go { color: var(--blue); }
/* Dar ekranda panel.css kartı sütuna çeviriyor: alt kenarın taşmaması için
   negatif alt boşluk kalkar, yön oku ise gereksizleşir — kartın tamamı
   zaten dokunulabilir. */
@media (max-width: 760px) {
  /* align-items:flex-start sütun düzeninde çocukları içerik genişliğine
     indiriyor: align-self olmadan dokunulabilir alan kartın yarısı kadar
     kalıyordu. */
  .notification__main { align-self: stretch; margin-bottom: 0; }
  .notification__go { display: none; }
  .notification__side { width: 100%; margin-top: 12px; }
}
.stat { border-top: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--cyan), 0 5px 18px rgba(12,20,52,.05); }

/* ── Form kontrolleri ──────────────────────────────────────── */
/* panel.css'te "button,input,select,textarea{font:inherit}" var ve alanlar
   <label> içinde durduğu için etiketin font-weight:700'ünü miras alıyordu:
   girilen değerler ve placeholder'lar kalın çıkıyordu.
   min-width:0 ise grid/flex içindeki min-content tuzağını kapatır —
   datetime-local alanları izlerinden taşıp üst üste biniyordu. */
input, select, textarea {
  font-size: var(--fs-base);
  font-weight: 400;
  border-radius: var(--radius);
  padding: 11px 13px;
  min-width: 0;
  max-width: 100%;
}
::placeholder { font-weight: 400; }
input:focus, select:focus, textarea:focus { box-shadow: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--blue); }
::placeholder { color: #8b93a8; opacity: 1; }

.button { min-height: var(--tap); padding: 10px 18px; font-size: var(--fs-sm); border-radius: var(--radius); }
.button--wide { min-height: 48px; }

/* ============================================================
   MOBİL NAVİGASYON ÇEKMECESİ
   ============================================================ */

/* Masaüstünde hamburger ve kapatma düğmesi görünmez */
.nav-open, .nav-close, .nav-scrim { display: none; }
.sidebar-head { display: contents; }

@media (max-width: 900px) {

  .panel-shell { display: block; }

  /* Çekmece */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(86vw, 322px);
    height: 100vh;
    height: 100dvh;
    padding: 16px 14px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .32s var(--ease);
    box-shadow: 6px 0 18px rgba(6, 10, 28, .18), 24px 0 60px rgba(6, 10, 28, .28);
    -webkit-overflow-scrolling: touch;
  }
  body.nav-is-open .sidebar { transform: translateX(0); }

  /* Perde */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(8, 12, 30, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s var(--ease);
  }
  body.nav-is-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-is-open { overflow: hidden; }

  /* Çekmece başlığı: logo + kapat */
  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid #26335e;
  }
  .sidebar .brand { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; }
  .sidebar .brand img { width: 104px; height: auto; }
  .nav-close {
    display: grid;
    place-items: center;
    width: var(--tap); height: var(--tap);
    flex-shrink: 0;
    border: 1px solid #2c3a68;
    border-radius: 10px;
    background: transparent;
    color: #cbd3e9;
    cursor: pointer;
  }
  .nav-close svg { width: 20px; height: 20px; }
  .nav-close:hover { background: #1b2858; color: #fff; }

  /* Menü: dikey liste, etiketler GÖRÜNÜR.
     flex-shrink:0 zorunlu — aksi halde nav flex ile ezilir, bağlantıları
     kendi kutusunun dışına taşar ve alttaki kullanıcı bloğuyla çakışır. */
  .sidebar nav {
    display: grid;
    gap: 2px;
    overflow: visible;
    flex: 0 0 auto;
  }
  .sidebar nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: var(--tap);
    padding: 11px 12px;
    font-size: var(--fs-base);
    border-radius: 8px;
  }
  .sidebar nav a span { display: inline; min-width: 0; }
  .sidebar nav a b { display: inline-flex; margin-left: auto; }
  .nav-label {
    display: block;
    margin: 16px 12px 6px;
    color: #7d8ab3;
    text-transform: uppercase;
  }
  .sidebar nav a.is-active { background: #1b2858; color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }

  /* Kullanıcı bloğu geri gelsin — margin-top:auto DEĞİL, normal akışta */
  .sidebar-user { display: grid; flex: 0 0 auto; margin-top: 22px; }
  .sidebar-user div, .sidebar-user form { display: block; }
  .sidebar-user button { min-width: var(--tap); min-height: var(--tap); border-radius: 10px; }

  /* Topbar + hamburger */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    min-height: 60px;
    gap: 10px;
    padding: 10px 14px;
  }
  .nav-open {
    display: grid;
    place-items: center;
    width: var(--tap); height: var(--tap);
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-open svg { width: 21px; height: 21px; }
  .nav-open:active { background: #eef2ff; }
  .topbar-title { min-width: 0; flex: 1; }
  .topbar-title strong {
    display: block;
    font-size: 1.02rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions { flex-shrink: 0; }

  .content { padding: 18px 14px 28px; }
}

/* ============================================================
   TABLOLAR — mobilde ilk sütun sabit, kaydırma göstergeli
   ============================================================ */
.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #c3cbdd;
  border: 3px solid #fff;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .table-wrap {
    /* Sağ kenarda kaydırma olduğunu belli eden yumuşak gölge */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,   rgba(12,20,52,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(12,20,52,.14), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .table-wrap table { min-width: 560px; }

  /* İlk sütun sabit kalsın: satırın hangi kayda ait olduğu kaybolmasın */
  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap th:first-child { background: #fbfcfe; }

  th { padding: 11px 12px; }
  td { padding: 14px 12px; }
}

/* ============================================================
   ÜST BAR MÜŞTERİ ARAMASI
   ============================================================ */
.topbar-search { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.topbar-search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.topbar-search__field:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.topbar-search__field svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
.topbar-search__field input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  outline: none;
}
.topbar-search__field input::-webkit-search-cancel-button { cursor: pointer; }

.topbar-search__results {
  position: absolute;
  z-index: 90;
  right: 0; left: 0;
  top: calc(100% + 8px);
  max-height: min(60vh, 380px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.topbar-search__results a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
}
.topbar-search__results a strong { font-size: var(--fs-sm); }
.topbar-search__results a small { color: var(--muted); font-size: var(--fs-min); }
.topbar-search__results a em { font-style: normal; color: #a25600; }
.topbar-search__results a:hover,
.topbar-search__results a.is-active { background: #eef3ff; }
.topbar-search__empty { padding: 14px 12px; color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  /* Mobilde arama başlığın altına tam genişlikte iner */
  .topbar { flex-wrap: wrap; }
  .topbar-search { order: 3; flex: 1 1 100%; max-width: none; margin-top: 2px; }
  .topbar-search__field input { min-height: var(--tap); }
}

/* ============================================================
   FİLTRE ÇUBUĞU — mobilde yalnızca arama + "Filtre" düğmesi
   ============================================================ */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}
.filter-grid label { flex: 1 1 180px; min-width: 0; }
.filter-grid__search { flex: 2 1 280px; }
.filter-grid__toggle { display: none; }
/* Masaüstünde sarmalayıcı şeffaf: alanlar doğrudan flex akışına girer */
.filter-grid__fields { display: contents; }

@media (max-width: 900px) {
  .filter-grid { align-items: stretch; gap: 10px; }
  .filter-grid__search { flex: 1 1 100%; }

  .filter-grid__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 100%;
    min-height: var(--tap);
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
  }
  .filter-grid__toggle svg { width: 18px; height: 18px; }
  .filter-grid__toggle b {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
  }
  .filter-grid__toggle[aria-expanded="true"] {
    border-color: var(--blue);
    background: #eef3ff;
    color: #234bd9;
  }

  .filter-grid__fields {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .filter-grid.is-open .filter-grid__fields { display: flex; }
  .filter-grid__fields label { flex: 1 1 auto; }
  .filter-grid__fields .button { width: 100%; }
}

/* ============================================================
   VERİ TABLOLARI — mobilde yalnızca ana kolonlar
   ============================================================ */
.col-number { text-align: right; }
.col-action { text-align: right; white-space: nowrap; }
.col-action .button { padding-inline: 14px; }
.stock-low { color: #a25600; font-weight: 600; }

@media (max-width: 760px) {
  .data-table th.is-secondary,
  .data-table td.is-secondary { display: none; }
  /* Kolonlar azaldığı için yatay kaydırmaya gerek kalmaz */
  .table-wrap .data-table { min-width: 0; }
  .table-wrap:has(.data-table) { background: none; }
  .table-wrap .data-table th:first-child,
  .table-wrap .data-table td:first-child { position: static; box-shadow: none; }
  .data-table td { vertical-align: top; }
  .data-table td strong { display: block; }
  .data-table .col-action { vertical-align: middle; }
}

/* ============================================================
   UZUN METİN KIRPMA — dokununca tam ad geçici görünür
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  [data-truncate] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  /* Açıkken tam metin görünür ve satırlara sarar */
  [data-truncate].is-expanded {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    position: relative;
    z-index: 3;
  }
  [data-truncate].is-expanded strong { white-space: normal; }

  /* Sabit düzen: kırpma çalışsın diye kolon genişlikleri öngörülebilir olmalı.
     Aksi hâlde tarayıcı içeriğe göre dağıtır ve ad kolonları eziliyor. */
  .data-table { table-layout: fixed; width: 100%; }
  .data-table .col-status { width: 46px; }
  .data-table .col-number { width: 96px; }
  .data-table .col-action { width: 64px; }
  .data-table .col-number small { display: block; margin-top: 1px; }
  .data-table th, .data-table td { padding-inline: 10px; }
}

.cell-link { color: inherit; display: block; }
.cell-link:hover { color: var(--blue); }

/* ============================================================
   SATIŞ BELGELERİ — renkli filtre sekmeleri
   ============================================================ */
/* Filtre sekmeleri, durum renkleriyle aynı dili konuşur */
.sales-tab { position: relative; }
.sales-tab::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}
.sales-tab--all::before { display: none; }

/* Sekme rengi de rozetle AYNI tondan gelir; ikisi ayri yazilinca listede sari
   gorunen bir durum sekmede yesil olabiliyordu.
   `.sales-status-tabs a` (0,1,1) tek sinifi eziyor; secici esitlendi. */
.sales-status-tabs a.sales-tab--neutral { color: var(--tone-neutral-fg); }
.sales-status-tabs a.sales-tab--warn    { color: var(--tone-warn-fg); }
.sales-status-tabs a.sales-tab--alert   { color: var(--tone-alert-fg); }
.sales-status-tabs a.sales-tab--ok      { color: var(--tone-ok-fg); }
.sales-status-tabs a.sales-tab--danger  { color: var(--tone-danger-fg); }
.sales-status-tabs a.sales-tab--info    { color: var(--tone-info-fg); }

.sales-status-tabs a.sales-tab--neutral.active { background: var(--tone-neutral-bg); border-color: var(--tone-neutral-bar); color: var(--tone-neutral-fg); }
.sales-status-tabs a.sales-tab--warn.active    { background: var(--tone-warn-bg);    border-color: var(--tone-warn-bar);    color: var(--tone-warn-fg); }
.sales-status-tabs a.sales-tab--alert.active   { background: var(--tone-alert-bg);   border-color: var(--tone-alert-bar);   color: var(--tone-alert-fg); }
.sales-status-tabs a.sales-tab--ok.active      { background: var(--tone-ok-bg);      border-color: var(--tone-ok-bar);      color: var(--tone-ok-fg); }
.sales-status-tabs a.sales-tab--danger.active  { background: var(--tone-danger-bg);  border-color: var(--tone-danger-bar);  color: var(--tone-danger-fg); }
.sales-status-tabs a.sales-tab--info.active    { background: var(--tone-info-bg);    border-color: var(--tone-info-bar);    color: var(--tone-info-fg); }

@media (max-width: 760px) {
  /* Rozet mobilde de OKUNUR kalir.
     Onceden 26px'lik renkli bir noktaya dusuruluyordu ve etiket, isaretlemede
     hic var olmayan bir <b> cocugunda saklaniyordu: sonucta daireye sigmayan
     Turkce metin tasiyordu. Durum bilgisi renkten okunmaz - "onaylandi" ile
     "faturalandi" ayni yesil. */
  .sales-status-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .sales-status-tabs::-webkit-scrollbar { display: none; }
  .sales-tab { flex: 0 0 auto; }
}

/* ============================================================
   DÖVİZ KURLARI — mobilde ikon düğmeler, USD/EUR yan yana
   ============================================================ */
.rate-action { display: inline-flex; align-items: center; gap: 8px; }
.rate-action svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 650px) {
  .dashboard-rates > header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }
  /* Başlık bloğu daralabilsin, düğmeler daralmasın */
  .dashboard-rates > header > div:first-child { flex: 1 1 auto; min-width: 0; }
  .dashboard-rates > header h2 { font-size: 1.05rem; }

  /* responsive.css'te ".action-row .button{width:100%}" (0,2,0) kuralı var;
     ikon düğmelerin kare kalması için özgüllük eşitlendi. */
  .dashboard-rates .rate-actions { flex-direction: row; flex: 0 0 auto; gap: 8px; width: auto; }
  .rate-actions form { flex: 0 0 auto; display: flex; width: auto; margin: 0; }
  .action-row .rate-action,
  .rate-actions .rate-action {
    width: var(--tap);
    min-width: var(--tap);
    max-width: var(--tap);
    padding: 0;
    justify-content: center;
  }
  .rate-action span { display: none; }
  .rate-action svg { width: 19px; height: 19px; }

  /* USD ve EUR yan yana, kompakt dikey kart */
  .dashboard-rate-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-rate-grid > article {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 12px;
    min-width: 0;
  }
  .dashboard-rate-grid > article + article {
    border-top: 0;
    border-left: 1px solid #e4e8ef;
  }
  .dashboard-rate-grid > article > div { gap: 9px; }
  .currency-symbol { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
  .dashboard-rate-grid dl { grid-template-columns: 1fr; gap: 6px; }
  .dashboard-rate-grid dl > div { padding: 7px 9px; }
  .dashboard-rate-grid dd { font-size: var(--fs-sm); }
}

/* ============================================================
   DİYALOGLAR — mobilde alt sayfa (bottom sheet) davranışı
   ============================================================ */
dialog::backdrop { background: rgba(8, 12, 30, .55); }

.quick-dialog, .license-dialog, dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(8, 12, 30, .3);
  max-width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
}

@media (max-width: 700px) {
  .quick-dialog, .license-dialog, dialog:not(.ticket-file-preview) {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto auto 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  dialog form, .quick-dialog > div, .license-dialog > div { max-height: inherit; overflow-y: auto; }
  .dialog-close { min-width: var(--tap); min-height: var(--tap); }
}

/* ============================================================
   DOKUNMATİK HEDEFLER
   Yalnızca "pointer: coarse" yetmez: dar pencere veya dokunmatik
   dizüstü "fine" bildirebiliyor. Dar genişlik de tetikleyici.
   ============================================================ */
@media (pointer: coarse), (max-width: 900px) {
  .sidebar nav a,
  .topbar-actions a,
  .notification-link,
  .button,
  .dialog-close,
  .table-wrap td a,
  .sidebar-user button,
  .organization-switcher > summary {
    min-height: var(--tap);
  }
  .notification-link { width: var(--tap); height: var(--tap); }
  .table-wrap td a, .service-list a { display: inline-flex; align-items: center; }
  a, button { touch-action: manipulation; }

  /* Kart/bölüm başlıklarındaki eylem bağlantıları (ör. "Tümü", "Katalog") */
  .content .section-head a,
  .content .section-head button,
  .content section > header > a,
  .content section > header > button,
  .content article > header > a,
  .content article > header > button,
  .content > header a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: 10px;
    margin-inline: -10px;
  }

  /* Filtre / sekme düğmeleri */
  .license-view-filters button,
  [role="tab"],
  .tab-button,
  .filter-chip {
    min-height: var(--tap);
    padding-block: 8px;
  }

  /* Takvim gezinme kontrolleri */
  .calendar-period-nav a,
  .calendar-today-link,
  .calendar-filters > a,
  .calendar-agenda--modern > header > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    min-width: var(--tap);
    padding-inline: 10px;
  }

  /* Açılır listeler parmakla rahat seçilsin */
  select, input, textarea { min-height: var(--tap); }

  /* Onay kutusu: asıl hedef etiketin tamamı olsun */
  label.check { min-height: var(--tap); align-items: center; cursor: pointer; }
  label.check input { flex-shrink: 0; }

  .powered-by { min-height: var(--tap); }
}

/* ── KPI kartları: mobilde tek sütun yerine ikişerli ──────────
   Panelde yedi ayrı KPI grid sınıfı var; hepsi aynı davranmalı,
   yoksa dört rakam için ekranlarca kaydırma gerekiyor. */
@media (max-width: 700px) {
  .stat-grid,
  .crm-kpis,
  .dashboard-kpis,
  .ticket-kpis,
  .catalog-kpis,
  .company-hub-summary,
  .portal-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-grid > *,
  .crm-kpis > *,
  .dashboard-kpis > *,
  .ticket-kpis > *,
  .catalog-kpis > *,
  .company-hub-summary > *,
  .portal-summary-grid > * {
    min-width: 0;
    min-height: 0;
    padding: 14px;
  }
  /* Rakamlar iki sütuna sığacak ölçeğe insin */
  .stat strong,
  .crm-kpis strong,
  .dashboard-kpis strong,
  .ticket-kpis strong,
  .catalog-kpis strong { font-size: 1.45rem; margin-top: 8px; }
}

/* ── Küçük ekran ince ayarları ───────────────────────────── */
@media (max-width: 560px) {
  .stat { min-height: 92px; padding: 14px; }
  .section { padding: 16px 14px; }
  .page-heading h1 { font-size: 1.45rem; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form select, .inline-form .button { width: 100%; }
  .organization-switcher > summary { min-width: 0; width: 100%; }
}

/* ============================================================
   MÜŞTERİ LİSTESİ + SATIŞ BELGESİ KALEM EDİTÖRÜ
   Bu kurallar yalnız ilgili ekranları hedefler; genel panel
   yerleşimini ve elle oluşturulmuş tasarım katmanını etkilemez.
   ============================================================ */
.data-table .customer-type-badge {
  white-space: nowrap;
}

/* Uc ekleme dugmesi (katalog, serbest, Excel) yan sutunlu duzende basligin
   yaninda 475px kapliyor ve aciklamayi 80px'lik bir seride eziyordu.
   Dugmeler basligin altinda kendi satirinda durur. */
.sales-lines-panel .form-panel__header {
  align-items: start;
  grid-template-columns: 38px minmax(0, 1fr);
}

.sales-lines-panel .sales-line-actions {
  width: auto;
  flex-wrap: wrap;
}

/* 760px alti kendi izgarasini kuruyor (asagida); bu kural oraya sizmasin. */
@media (min-width: 761px) {
  .sales-lines-panel .form-panel__header .sales-line-actions {
    grid-column: 2 / -1;
    margin: 0;
  }
}

.sales-lines-panel .sales-line-actions .button {
  width: auto;
  min-height: 38px;
  gap: 5px;
  white-space: nowrap;
}

/* Sutun sablonunun kendisi responsive.css'te; burada yalnizca degisken
   daraltiliyor. Sablonu tekrar yazmak, iki dosyanin birbirinden sessizce
   ayrilmasi demekti. */
.sales-lines-panel {
  --sales-line-grid: minmax(280px, 1fr) minmax(78px, 92px) minmax(100px, 116px) minmax(66px, 76px) minmax(98px, 112px) 34px;
}

.sales-lines-panel .sales-line-head,
.sales-lines-panel .sales-line {
  gap: 10px;
}

/* Satir yuksekligi: alan etiketleri masaustunde gorunmedigi icin kontroller
   ortalanir ve dikey bosluk yariya iner. Onceden her alanin ustunde bir de
   etiket basiliyordu; satir bu yuzden iki kat uzuyordu. */
.sales-lines-panel .sales-line {
  position: relative;
  align-items: center;
  padding-block: 9px;
  background: #fff;
}

.sales-lines-panel .sales-line:hover {
  background: #fbfcff;
}

.sales-lines-panel .sales-line-identity {
  align-self: stretch;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
}

.sales-lines-panel .sales-line-grip {
  color: #8a94aa;
  cursor: grab;
}

.sales-lines-panel .sales-line-identity-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 7px;
  min-width: 0;
}

.sales-lines-panel .sales-line-kind,
.sales-lines-panel .sales-line-identity-fields > label:first-of-type {
  grid-column: 1 / -1;
}

.sales-lines-panel .sales-line-kind {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f4fa;
  color: #67728a;
  font-size: .68rem;
  font-weight: 800;
}

.sales-lines-panel .sales-line-kind.is-catalog {
  background: #eaf0ff;
  color: #2954df;
}

.sales-lines-panel .sales-line label {
  min-width: 0;
}

/* Etiketleri masaustunde geri gosteren kural KALDIRILDI: responsive.css onlari
   bilerek gorsel olarak gizliyor, burada `display:block` ile geri gelmeleri
   satiri sisiriyordu. Alanlarin gorunur ipucu ihtiyacini placeholder'lar
   karsiliyor, ekran okuyucu ise gizli etiketi okumaya devam ediyor. */

.sales-lines-panel .sales-line input,
.sales-lines-panel .sales-line textarea {
  min-width: 0;
}

.sales-lines-panel .sales-line-identity textarea {
  min-height: 38px;
  margin-top: 0;
}

.sales-lines-panel .sales-line-total-wrap {
  min-width: 0;
}

.sales-lines-panel .sales-line-total {
  display: block;
  overflow-wrap: normal;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sales-lines-panel .line-remove {
  width: 32px;
  height: 32px;
}

/* Listenin altindaki ikinci ekleme seridi. Baslikta duran kopyasiyla ayni
   dugmeler; uzun bir teklifte her kalem icin sayfanin tepesine donmemek icin. */
.sales-lines-panel .sales-line-actions--footer {
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fafbfe;
}

.sales-lines-empty {
  margin: 0;
  padding: 26px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  font-size: .86rem;
}

/* Excel'den yapistirma penceresi. Onizleme tablosu genis olabilir (uzun
   urun tanimlari); pencere ekrana sigar, tablo kendi icinde kayar. */
.quick-dialog.sales-paste-dialog {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
}

.sales-paste-body {
  display: grid;
  gap: 12px;
}

.sales-paste-body textarea {
  min-height: 110px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .78rem;
  white-space: pre;
}

.sales-paste-table {
  max-height: min(340px, calc(100dvh - 420px));
  min-height: 120px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sales-paste-table table {
  min-width: 100%;
  table-layout: fixed;
}

.sales-paste-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 130px;
  padding: 6px;
  background: #f5f7fb;
  text-transform: none;
}

.sales-paste-table th.is-wide {
  width: 55%;
}

.sales-paste-table th select {
  padding: 6px 8px;
  font-size: .78rem;
  font-weight: 700;
}

.sales-paste-table td {
  max-width: 360px;
  padding: 7px 9px;
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-paste-table td.is-ignored {
  color: #a3aabb;
}

.sales-paste-table tr.is-header td {
  color: var(--muted);
  font-style: italic;
  text-decoration: line-through;
}

.sales-paste-currency {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #fff8e8;
  color: #89510d;
}

.sales-paste-feedback {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Ara kirilim: 760px'te kart tasarimina geciliyor, 1100px'te yan sutun
   kalkiyor. Arada kalan bantta alti sutun sikisiyor ve fiyat ile silme
   sutunu tasiyordu; orada yalnizca degisken daraltiliyor. */
@media (max-width: 1000px) {
  .sales-lines-panel {
    --sales-line-grid: minmax(200px, 1fr) minmax(66px, 76px) minmax(88px, 100px) minmax(58px, 66px) minmax(86px, 96px) 32px;
  }

  .sales-lines-panel .sales-line-head,
  .sales-lines-panel .sales-line {
    gap: 7px;
  }
}

@media (max-width: 760px) {
  .sales-lines-panel .form-panel__header {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .sales-lines-panel .sales-line-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 5px 0 0;
  }

  .sales-lines-panel .sales-line-actions .button {
    width: 100%;
    min-width: 0;
    min-height: var(--tap);
    padding-inline: 10px;
  }

  .sales-lines-panel .sales-line-actions--footer {
    margin: 0;
    padding: 12px;
  }

  /* Iki sutunlu dugme izgarasinda ucuncu dugme tek basina yarim kalmasin. */
  .sales-lines-panel .sales-line-actions [data-paste-lines] {
    grid-column: 1 / -1;
  }

  .sales-lines-panel .sales-lines {
    gap: 12px;
    padding: 12px;
    background: #f3f5f9;
  }

  .sales-lines-panel .sales-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 10px;
    padding: 14px;
    border: 1px solid #dfe4ee;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(12, 20, 52, .035);
  }

  .sales-lines-panel .sales-line-identity {
    grid-column: 1 / -1;
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .sales-lines-panel .sales-line-grip {
    padding-top: 3px;
  }

  .sales-lines-panel .sales-line-identity-fields {
    grid-template-columns: 1fr;
  }

  .sales-lines-panel .sales-line-identity-fields > * {
    grid-column: 1;
  }

  .sales-lines-panel .sales-line-kind {
    padding-right: 42px;
  }

  .sales-lines-panel .sales-line-total-wrap {
    align-self: end;
    padding: 0 44px 12px 0;
  }

  .sales-lines-panel .sales-line-total {
    text-align: left;
  }

  .sales-lines-panel .line-remove {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 38px;
    height: 38px;
    margin: 0;
  }
}

@media (max-width: 410px) {
  .sales-lines-panel .sales-line-actions {
    grid-template-columns: 1fr;
  }

  .sales-lines-panel .sales-line {
    grid-template-columns: 1fr;
  }

  .sales-lines-panel .sales-line > * {
    grid-column: 1;
  }
}

/* Satış belgesi listesi: masaüstü tablo korunur, mobilde belge numarası
   yerine müşteri ile belge açıklaması tek ve taranabilir hücrede birleşir. */
.sales-document-table .sales-document-customer-mobile {
  display: none;
}

.sales-exchange-rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}

.sales-exchange-rate strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sales-exchange-rate small {
  color: inherit;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
}

.external-rejection-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid #efb8be;
  border-radius: 11px;
  background: #fff5f6;
}

.external-rejection-card > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #bd3342;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
}

.external-rejection-card h2,
.external-rejection-card p {
  margin: 2px 0;
}

.external-rejection-card > div > p:not(.eyebrow) {
  margin: 10px 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.external-rejection-card small {
  color: #755b60;
}

.external-rejection-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
  background: #f7f9fc;
}

.external-rejection-body .alert {
  margin: 0;
}

.external-rejection-body textarea {
  min-height: 140px;
}

@media (max-width: 760px) {
  .sales-document-table .sales-document-number {
    display: none;
  }

  .sales-document-table .sales-document-customer-desktop {
    display: none;
  }

  .sales-document-table .sales-document-customer-mobile {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: var(--tap);
    align-content: center;
    color: inherit;
  }

  .sales-document-table .sales-document-customer-mobile strong,
  .sales-document-table .sales-document-customer-mobile small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-document-table .sales-document-customer-mobile strong {
    font-size: .82rem;
  }

  .sales-document-table .sales-document-customer-mobile small {
    margin: 0;
    color: #6c7890;
    font-size: .68rem;
    font-weight: 500;
  }

  .external-rejection-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 15px;
  }

  .external-rejection-card > span {
    width: 34px;
    height: 34px;
  }
}

/* ── Hareket azaltma ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-scrim { transition: none !important; }
}

/* ── Ortak posta kutusu tanılama listesi (Ayarlar › E-posta) ── */
.mailbox-stages { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mailbox-stage {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--state, var(--line));
  border-radius: 8px;
  background: #fff;
}
.mailbox-stage.is-ok   { --state: var(--green); }
.mailbox-stage.is-warn { --state: var(--amber); }
.mailbox-stage.is-fail { --state: var(--red); }
.mailbox-stage > b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--state) 16%, #fff);
  color: var(--state);
  font-size: .8rem;
}
.mailbox-stage strong { display: block; font-size: .88rem; }
.mailbox-stage small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }

/* ── E-posta imzası düzenleyicisi ── */
.signature-hint { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.signature-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.signature-section .note-editor { margin-bottom: 0; }

/* ── Talep detayındaki e-posta akışı ── */
.mail-thread__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mail-thread__item > details { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.mail-thread__item > details[open] { box-shadow: 0 3px 12px rgba(12, 20, 52, .06); }
.mail-thread__item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 13px 16px;
  background: #fbfcfe;
  cursor: pointer;
}
.mail-thread__item summary::-webkit-details-marker { display: none; }
.mail-thread__who { font-size: .88rem; font-weight: 700; }
.mail-thread__when { color: var(--muted); font-size: var(--fs-min); }
.mail-thread__subject { flex: 1 1 100%; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mail-thread__meta {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-min);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.mail-thread__body { width: 100%; min-height: 260px; border: 0; border-top: 1px solid var(--line); background: #fff; }

@media (max-width: 640px) {
  .mail-thread__item summary { padding: 12px 13px; }
  .mail-thread__meta { padding: 10px 13px; }
  .mail-thread__body { min-height: 200px; }
}
/* Genel aramada tur basliklari: musteri / kullanici / urun ayrimi gorunsun. */
.topbar-search__group{margin:10px 12px 4px;color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.topbar-search__group:first-child{margin-top:6px}
/* Kalici silme modali: sayfa yerlesimine hic dokunmaz, top-layer'da acilir. */
.purge-dialog{width:min(520px,calc(100vw - 24px))}
.purge-dialog__form{display:grid;gap:14px;padding:18px}
.purge-dialog__note{margin:0;color:var(--muted);line-height:1.6;font-size:.86rem}
.purge-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.purge-dialog__actions .button{flex:0 1 auto}
@media(max-width:520px){.purge-dialog__actions .button{flex:1 1 100%}}
/* Denetim kayitlari: uzun tablo, dar bilgi. */
.audit-filters{flex-wrap:wrap}
.audit-table code{font-size:.78rem;color:#31406b}
.audit-table td small{display:block;margin-top:3px}
.audit-meta pre{max-width:420px;max-height:220px;overflow:auto;margin:8px 0 0;padding:10px;background:#f6f8fc;border-radius:8px;font-size:.72rem;white-space:pre-wrap;word-break:break-word}
.audit-meta summary{cursor:pointer;color:var(--blue);font-size:.78rem}
.audit-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
/* Ana kullanici degisimi: kapali gelir, yanlislikla tiklanmasin. */
.primary-user-switch{margin-top:14px}
.primary-user-switch>summary{width:max-content;list-style:none;cursor:pointer}
.primary-user-switch form{display:grid;gap:12px;margin-top:12px;max-width:460px}
/* Lisans donemine bagli Parasut faturasi: satirin altinda ince bir serit. */
.license-invoice{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.license-invoice__badge{display:inline-flex;padding:4px 9px;border-radius:12px;background:#e4f6ee;color:#116d50;font-size:.68rem;font-weight:800;white-space:nowrap}
.license-invoice small{color:var(--muted);font-size:.74rem}
.license-invoice .button{min-height:32px;padding:6px 11px;font-size:.74rem}
@media(max-width:520px){.license-invoice .button{flex:1 1 100%}}
/* Teklif geri cekme modali: kalici silme modaliyla ayni iskelet, farkli ton.
   Silme kirmizi ve son; geri cekme duzeltilebilir bir islem, o yuzden birincil
   dugmeyle bitiyor. Onay kutusu tek satira sikismasin diye izgara. */
.recall-dialog{width:min(560px,calc(100vw - 24px))}
.recall-dialog__form{display:grid;gap:14px;padding:18px}
.recall-dialog__note{margin:0;color:var(--muted);line-height:1.6;font-size:.86rem}
.recall-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.recall-dialog__actions .button{flex:0 1 auto}
.checkbox-field{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafd;cursor:pointer}
.checkbox-field input{margin-top:3px}
.checkbox-field span{font-size:.86rem;font-weight:600;line-height:1.4}
.checkbox-field small{display:block;margin-top:3px;color:var(--muted);font-weight:500;font-size:.76rem;line-height:1.5}
@media(max-width:520px){.recall-dialog__actions .button{flex:1 1 100%}}
/* Belge metinleri (teklif notlari, kosullar).
   Alan artik zengin metin sakliyor; ekranda listeler ve paragraflar sayfanin
   geri kalaniyla ayni ritimde gorunmeli. Duz metin kayitlar `rich_text`
   filtresinden <br> ile geliyor, onlar da bu kutunun icinde duruyor. */
.rich-text{color:var(--ink);line-height:1.65}
.rich-text > *:first-child{margin-top:0}
.rich-text > *:last-child{margin-bottom:0}
.rich-text p{margin:0 0 10px}
.rich-text ul,.rich-text ol{margin:0 0 10px;padding-left:20px}
.rich-text li{margin-bottom:4px}
.rich-text table{width:100%;margin:0 0 10px;border-collapse:collapse}
.rich-text td,.rich-text th{padding:6px 8px;border:1px solid var(--line);text-align:left}
.rich-text blockquote{margin:0 0 10px;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--muted)}

/* Yazdirma sablonu: cogaltma ve silme seritleri.
   Asil formun DISINDA duruyorlar - ic ice form olmaz ve kaydetme dugmesiyle
   karismamalari gerekiyor. */
.template-danger{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:#fff}
.template-danger>div{min-width:0;flex:1 1 260px}
/* YALNIZ baslik blok: `strong` genel yazilinca aciklama metninin icindeki
   vurgular da satir basina dusuyor ve cumle paramparca gorunuyordu. */
.template-danger>div>strong{display:block}
.template-danger small{display:block;margin-top:4px;color:var(--muted);line-height:1.55}
.template-danger form{margin:0}
.template-danger--delete{border-color:#f1cfd4;background:#fffafa}
@media(max-width:600px){.template-danger{flex-direction:column;align-items:stretch}/* `flex:1 1 260px` satir yonu icin yazildi; sutuna donunce 260px'lik bir
   YUKSEKLIK tabani oluyor ve metinle dugme arasinda bos bir alan aciliyordu. */.template-danger>div{flex:0 0 auto}.template-danger .button{width:100%}}
/* Ust bardaki bildirim zili.
   Ikon artik gercek bir zil (SVG); font-size ile olculen yildiz karakteri
   yerine sabit boyutlu bir cizim. Okunmamis sayisi kirmizi rozetle yaninda
   durur - sifirsa hic basilmaz. */
.notification-link svg{width:20px;height:20px}
.notification-link{color:#40506d;transition:color .12s,border-color .12s}
.notification-link:hover{color:var(--blue);border-color:#c3d0f5}
.notification-link span{font-weight:800;line-height:1.35;box-shadow:0 0 0 2px #fff}

/* Profil menu ogesi olarak kaldirildi; girisi kenar cubugundaki ad-soyad
   blogu. Blok zaten kullanicinin kendisini gosteriyor, dogal yer orasi. */
/* `.sidebar-user` uc sutunlu (avatar | ad | cikis). Bag avatarla adi birden
   sarmaladigi icin ILK IKI sutunu kaplamali; yoksa 38px'lik avatar sutununa
   sikisip ada tiklanamiyor. */
.sidebar-user__link{grid-column:1/3;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-width:0;color:inherit;border-radius:9px;padding:4px;margin:-4px}
.sidebar-user__link:hover{background:#1b2858}
.sidebar-user__link > div{min-width:0}