/*
  TR: İki uygulamanın paylaştığı bileşen stilleri.

      `tokens.css` yalnızca DEĞİŞKEN tutar; burada o değişkenlerden kurulan somut bileşenler durur.
      İkisi ayrı dosyada çünkü ayrı sorular cevaplıyorlar: belirteçler "hangi renk", bileşenler
      "hangi görünüm". Tek dosyada olsalardı, bir rengi değiştirmek isteyen kişi bileşen kurallarının
      arasında dolaşmak zorunda kalırdı.

      Bu dosya aynı zamanda ortak stillerin varış noktasıdır: bugün iki ayrı `style.css` (yönetim
      paneli 1.782 satır, ziyaretçi ekranı 769 satır) aynı bileşenleri ayrı ayrı tanımlıyor.

  EN: The component styles shared by both applications.

      `tokens.css` holds only VARIABLES; what lives here are the concrete components built from
      them. They are separate files because they answer separate questions: tokens say "which
      colour", components say "which appearance". In one file, someone wanting to change a colour
      would have to wade through component rules to find it.

      This file is also where shared styles are headed: today two separate `style.css` files (the
      admin panel at 1,782 lines, the visitor screen at 769) define the same components apart from
      each other.
*/

/*
  TR: Kart — içeriği gruplayan yüzey.

      Tanım ziyaretçi ekranının `style.css` dosyasındaydı ve YÖNETİM PANELİNDE YOKTU. Panel bu
      sınıfı on dört dosyada kırk yerde kullanıyor; hepsi tanımsızdı, yani o kartların hiçbirinde
      zemin, kenarlık, dolgu ya da gölge yoktu — içerik doğrudan sayfa arkaplanının üzerinde
      duruyordu.

      Fark edilmemesinin sebebi, kartların ÇOĞUNUN yanında zaten başka bir düzen sarmalayıcısı
      bulunmasıydı; ekran "biraz sade" görünüyor ama bozuk görünmüyordu. Sessiz kusurların en sinsi
      biçimi budur: yanlış değil, eksik.

  EN: The card — the surface that groups content.

      The definition lived in the visitor screen's `style.css` and WAS ABSENT FROM THE ADMIN PANEL.
      The panel uses this class in forty places across fourteen files; all of them were undefined,
      so none of those cards had a surface, a border, padding or a shadow — the content sat directly
      on the page background.

      It went unnoticed because MOST of those cards had another layout wrapper beside them; the
      screen looked "a little plain" rather than broken. That is the most insidious form of a silent
      fault: not wrong, merely missing.
*/
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    background-color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    transform 0.2s ease;
}

.card h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/*
  TR: Rozet — bir durumu ya da kısa bir bilgiyi taşıyan etiket.

      Bu sınıflar KULLANILIYORDU ama tanımlı değildi. `badge`, `badge-success`, `badge-warning`,
      `badge-danger`, `badge-info`, `badge-primary`, `badge-secondary` ve `badge-error` on
      görünümde altmıştan fazla yerde geçiyor ve hepsinin hesaplanan dolgusu sıfırdı.

      Sonuç sessiz bir tutarsızlıktı: eksiği fark eden görünümler satır içi stil uydurmuş (Kullanıcılar
      ekranındaki rol etiketi), fark etmeyenler çıplak metin bırakmıştı (Geri Bildirimler ekranındaki
      duygu etiketi). Kullanıcı aynı kavramı iki ekranda iki farklı biçimde görüyordu.

      Renkler `tokens.css`'teki belirteçlerden TÜRETİLİR, yeniden tanımlanmaz: kurumun marka rengi
      çalışma anında değiştirildiğinde rozetler de birlikte değişsin diye. Sabit renk yazılsaydı,
      markalı bir arayüzün içinde varsayılan renkte adacıklar kalırdı.

  EN: The badge — a label carrying a status or a short piece of information.

      These classes WERE IN USE but undefined. `badge`, `badge-success`, `badge-warning`,
      `badge-danger`, `badge-info`, `badge-primary`, `badge-secondary` and `badge-error` appear in
      over sixty places across ten views, and every one of them computed to zero padding.

      The result was a silent inconsistency: views that noticed the gap invented an inline style
      (the role label on the Users screen), while those that did not left bare text (the sentiment
      label on the Feedbacks screen). The user saw one concept in two different forms on two
      screens.

      The colours are DERIVED from the tokens in `tokens.css` rather than restated, so that badges
      follow when the tenant's brand colour is replaced at runtime. Written as fixed colours, they
      would leave islands of the default palette inside a branded interface.
*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;

  /* TR: Temel biçim nötrdür — vurgusu olmayan bilgi.
     EN: The base form is neutral — information carrying no emphasis. */
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  color: var(--text-secondary);
}

.badge-success {
  background: color-mix(in srgb, var(--success-color) 16%, transparent);
  color: var(--success-color);
}

.badge-warning {
  background: color-mix(in srgb, var(--warning-color) 18%, transparent);
  color: var(--warning-color);
}

.badge-danger {
  background: color-mix(in srgb, var(--error-color) 15%, transparent);
  color: var(--error-color);
}

.badge-info {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
}

/*
  TR: Dolu zemin. Seyrek kullanılmalı: sayfadaki her rozet vurguluysa hiçbiri vurgulu değildir.
  EN: A solid fill. To be used sparingly: if every badge on a page is emphasised, none of them is.
*/
.badge-primary {
  background: var(--accent-primary);
  color: #fff;
}

/*
  TR: Kod gösterimi — lokasyon kodu, kategori kodu, form sürümü. Tek aralıklı yazı tipi ve köşeli
      kenar, bunun okunacak bir metin değil kopyalanacak bir değer olduğunu söyler. Bugün bu görünüm
      dört ayrı dosyada satır içi stille tekrarlanıyordu.
  EN: Displaying a code — a location code, a category code, a form version. The monospaced type and
      squared corners say this is a value to be copied rather than prose to be read. Today this
      appearance was repeated with inline styles in four separate files.
*/
.badge-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/*
  TR: Görev iş-türü rozetleri. Üç değer gözle ayrılsın diye üç ton: Fiziksel (yalnızca insan) sıcak
      bir uyarı tonu, Bilgi işi (ileride ajan) bir vurgu tonu, Sınıflandırılmamış nötr kalır ki
      triyaj bekleyenler göze çarpsın. Renkler tema değişkenlerinden gelir; auto/dark/light'a uyar.
  EN: Task work-type badges. Three tones so the three values read apart: Physical (human-only) a warm
      warning tone, Information (agent-capable later) an accent tone, Unclassified stays neutral so
      the ones awaiting triage stand out. Colours come from theme variables; they follow
      auto/dark/light.
*/
.badge-work-physical {
  background: color-mix(in srgb, var(--warning-color) 18%, transparent);
  color: var(--warning-color);
}

.badge-work-information {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
}

.badge-work-unclassified {
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  color: var(--text-secondary);
}

/*
  TR: Tam ekran karartma — büyütülmüş görsel ve KVKK metni pencerelerinin arkasındaki katman.

      Bu sınıf İKİ uygulamada da aynı adla kullanılıyordu ve HİÇBİRİNDE tanımlı değildi; ikisi de
      aynı on iki satır içi stili ayrı ayrı yazmıştı. Aynı bileşenin iki kopyası, zamanla ayrı
      düşen iki karartma demekti: birinin bulanıklığı değiştirildiğinde diğeri olduğu gibi kalırdı.

      Yığın sırası (z-index) kasten yüksek: karartma, üstünde durduğu her şeyi kapatmalıdır —
      açılır menüler ve yapışkan çubuklar dahil.
  EN: The full-screen scrim — the layer behind the enlarged-image and privacy-notice dialogs.

      This class was used under the same name in BOTH applications and defined in NEITHER; each had
      written the same twelve inline styles separately. Two copies of one component meant two scrims
      drifting apart: change the blur on one and the other would stay as it was.

      The stacking order is deliberately high: a scrim has to cover everything beneath it, dropdowns
      and sticky bars included.
*/
/*
  TR: Bildirim balonu (toast).

      İki uygulama da aynı üç kuralı ayrı ayrı yazıyordu ve `.toast.success` ile `.toast.error`
      HARFİ HARFİNE aynıydı. Ortak olan burada toplandı: dolgu, yuvarlaklık, gölge, yazı ve renkler.

      OrtaklaşTIRILMAYAN iki şey var ve bu bilinçli:

      - KONUM her uygulamada başka: panelde sağ üstte bir yığın, ziyaretçi ekranında ortada bir
        şerit. Bunu ortaklaştırmak, dar bir telefon ekranında bildirimi sağ kenara sıkıştırırdı.
      - GİRİŞ ANİMASYONU da başka ve bunun bir tuzağı var: iki dosyada da `slideIn` adında bir
        animasyon var ama farklı şeyler yapıyorlar (panelde sağdan `translateX`, ziyaretçide
        yukarıdan `translateY`). Animasyon çağrısı buraya taşınsaydı, kural paylaşılmış görünür ama
        her uygulamada başka türlü davranırdı — okuyanı yanıltan en kötü tür ortaklık.

  EN: The toast notification.

      Both applications wrote the same three rules separately, and `.toast.success` and
      `.toast.error` were BYTE FOR BYTE identical. What is common is gathered here: padding,
      roundness, shadow, type and colours.

      Two things are deliberately NOT made common:

      - The POSITION differs per application: a stack at the top right in the panel, a centred strip
        on the visitor screen. Making it common would squeeze the notification against the right
        edge on a narrow phone.
      - The ENTRY ANIMATION differs too, and there is a trap in it: both files define an animation
        named `slideIn`, but they do different things (`translateX` from the right in the panel,
        `translateY` from the top on the visitor screen). Moving the animation call here would make
        the rule look shared while behaving differently in each — the worst kind of sharing, the kind
        that misleads the reader.
*/
.toast {
  padding: 13px 18px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 8px;

  /*
    TR: Kapsayıcı tıklamayı geçirdiği için balonun kendisi geri alır; aksi hâlde altındaki düğmeye
        basılamaz.
    EN: The container lets clicks through, so the toast itself takes them back; otherwise the button
        beneath it could not be pressed.
  */
  pointer-events: auto;
}

.toast.success {
  background-color: var(--success-bg);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.toast.error {
  background-color: var(--error-bg);
  color: var(--error-color);
  border: 1px solid var(--error-color);
}

.lightbox-overlay-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}