/* infrastructure/roundcube/skins/ticarisoft/styles/ticarisoft.css
 * ===========================================================================
 * Faz 40.12I-R5C-R4 -- onaylanan yeni referansa gore TAM gorsel yeniden
 * tasarim. Roundcube CORE'u FORK ETMEDEN, Elastic skin'inin UZERINE
 * yuklenen (bkz. meta.json "extends": "elastic") bir CSS dosyasiyla.
 *
 * KAYNAK-ONCE BULGULAR (talimat madde 18 -- canli render edilmis DOM'dan,
 * TAHMIN EDILMEDI):
 *   #layout-menu     -- dar (42-78px) simge seridi: logo + gorev
 *                        anahtarlayicilari (Iletiler/Kisiler/Ayarlar).
 *                        Elastic'in KENDI CSS'i genisligi SINIRLIYOR.
 *   #layout-sidebar   -- klasor listesi paneli (AYRI bir DOM konteyneri --
 *                        #layout-menu ILE AYNI panel DEGIL). Icinde:
 *                        .header (kullanici adi), #mailboxlist (5 GERCEK
 *                        klasor: Gelen/Taslak/Gonderilmis/Istenmeyen/Cop --
 *                        "Yildizli" veya ozel klasor YOK, UYDURULMADI),
 *                        #quotadisplay (kota -- bu posta kutusunda
 *                        "title":"bilinmeyen" -- GERCEK kota verisi YOK,
 *                        SAHTE MB/GB DEGERI UYDURULMADI).
 *   #layout-list      -- orta sutun: .toolbar.menu (Sec/Yazisma), .searchbar
 *                        (arama input'u), #messagelist (GERCEK bir <table>,
 *                        <thead> sutunlari: threads/subject/status/fromto/
 *                        date/size/flag/attachment -- "onizleme metni/snippet"
 *                        sutunu YOK, bkz. final rapor Bolum N).
 *   #layout-content   -- sag sutun: #mailtoolbar (.reply/.reply-all/.forward/
 *                        .delete/.markmessage/.more), #messagecontframe
 *                        (AYNI-ORIJIN iframe -- GUVENLIK DUZELTMESI
 *                        KORUNUYOR, asagida DOKUNULMUYOR).
 *   Compose           -- #compose-headers (#_from/#_to/#compose-subject),
 *                        #composebodycontainer, #compose-attachments,
 *                        #compose-options (sag panel: MDN/DSN/oncelik/hedef
 *                        klasor -- GERCEK Roundcube ozellikleri, UYDURULMADI).
 *
 * RENK YONU (talimat madde 3 -- ACIKCA onaylandi): bu SADECE webmail
 * urunu icin MAVI yon kullanir -- apps/web'in KENDI lime/rust tokenlari
 * DEGISTIRILMEDI (bu dosya SADECE Roundcube'u etkiler). Logo isaretinin
 * KENDI rengi (orta kapsul, lime-dark #b9df43) GERCEK marka kimligini
 * SADAKATLE yansitmak icin KORUNDU (talimat: "tiny inherited brand detail
 * genuinely makes sense") -- ama TUM fonksiyonel vurgu (CTA/secim/odak/
 * aktif durum) MAVI'dir, karisik lime/mavi bir sistem YOK.
 * ===========================================================================
 */
:root {
  --wm-blue: #2563eb;
  --wm-blue-dark: #1d4ed8;
  --wm-blue-light: #eaf1fe;
  --wm-blue-focus: rgba(37, 99, 235, 0.25);
  --wm-ink: #14231f;
  --wm-muted: #64748b;
  --wm-paper: #fbfcfb;
  --wm-panel: #f7f8fa;
  --wm-line: #e5e9ee;
  --wm-radius: 16px;
  --wm-radius-sm: 10px;
  --wm-shadow: 0 24px 70px rgba(17, 38, 31, 0.1);
  --wm-shadow-sm: 0 1px 2px rgba(20, 35, 31, 0.04), 0 4px 12px -6px rgba(20, 35, 31, 0.08);
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
}

body {
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
}

/* ===========================================================================
 * GIRIS SAYFASI -- talimat madde 13: ayni mavi urun yonu, ONCEKI PASS almis
 * kart yapisi KORUNUYOR, SADECE vurgu rengi lime'dan maviye donusuyor.
 * ===========================================================================
 */
body.task-login {
  background: linear-gradient(160deg, var(--wm-paper) 0%, #f4f7fb 55%, #eaf1fe 100%);
  min-height: 100vh;
}

body.task-login #logo,
body.task-login .logo {
  display: block;
  width: 200px;
  height: 44px;
  margin: 0 auto 28px;
  background-image: url("../images/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.task-login #login-form {
  top: 14vh;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  box-shadow: var(--wm-shadow);
  padding: 40px 36px 28px;
}

body.task-login #login-form .propform {
  padding: 0;
}

body.task-login #login-form .row {
  margin-bottom: 18px;
}

body.task-login #login-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wm-ink);
  margin-bottom: 6px;
}

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius-sm);
  font-size: 15px;
  color: var(--wm-ink);
  background: var(--wm-paper);
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.task-login #login-form input.form-control:focus,
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--wm-blue);
  box-shadow: 0 0 0 3px var(--wm-blue-focus);
  background: #fff;
}

body.task-login #login-form input.error {
  border-color: #dc2626;
}

body.task-login #login-form .formbuttons {
  padding: 4px 0 0;
  min-height: 0;
}

body.task-login #login-form .formbuttons button,
body.task-login #login-form button.btn-primary,
body.task-login #login-form input[type="submit"] {
  width: 100%;
  height: 50px;
  border-radius: var(--wm-radius-sm);
  background-color: var(--wm-blue) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

body.task-login #login-form .formbuttons button:hover,
body.task-login #login-form button.btn-primary:hover {
  background-color: var(--wm-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}

body.task-login #login-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  color: var(--wm-muted);
}

/* ===========================================================================
 * SOL PANEL -- talimat madde 5: #layout-menu (simge seridi) + #layout-sidebar
 * (klasor listesi) YAPISAL OLARAK IKI AYRI Elastic konteyneri -- referans
 * TEK bir birlesik sol panel gosteriyor. Fork etmeden en yakin guvenli
 * cozum: HER IKISINE de AYNI acik arka plan/kenarlik verilerek gorsel
 * bir DIKIS OLMADAN tek panel gibi OKUNMASI saglanir (final rapor Bolum N'de
 * bu uyarlama ACIKCA belgelenir).
 * ===========================================================================
 */
#layout-menu,
#layout-sidebar {
  background-color: var(--wm-panel) !important;
  border-right: 1px solid var(--wm-line);
}

#layout-menu .popover-header {
  background-color: var(--wm-panel) !important;
  padding: 1rem 0.5rem !important;
}

#layout-menu .popover-header img {
  padding: 0;
}

/* Gorev anahtarlayicilari (Iletiler/Kisiler/Ayarlar) -- acik zemin uzerinde
   koyu ink metin/simge, aktif/hover MAVI. */
#taskmenu a {
  color: var(--wm-ink) !important;
}

#taskmenu a.selected,
#taskmenu a.button-selected {
  background-color: var(--wm-blue-light) !important;
  color: var(--wm-blue-dark) !important;
}

#taskmenu a:hover {
  background-color: var(--wm-blue-light) !important;
}

/* "+ Yeni E-posta" -- referansin buyuk mavi CTA'si. */
#taskmenu a.compose,
.button.create,
.btn-primary {
  background-color: var(--wm-blue) !important;
  color: #fff !important;
  border-color: var(--wm-blue) !important;
  font-weight: 700;
  border-radius: var(--wm-radius-sm);
}

#taskmenu a.compose:hover,
.btn-primary:hover {
  background-color: var(--wm-blue-dark) !important;
}

/* Klasor paneli basligi (kullanici adi seridi) -- notr/acik. */
#layout-sidebar .header {
  background-color: var(--wm-panel) !important;
  color: var(--wm-ink) !important;
  border-bottom: 1px solid var(--wm-line);
}

/* Klasor listesi -- talimat madde 5: ikon+metin hizasi, cömert dikey
   boşluk, cilali hover, acik-mavi aktif secim. */
#mailboxlist li a {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  color: var(--wm-ink);
  border-radius: var(--wm-radius-sm);
  margin: 2px 6px;
}

#mailboxlist li a:hover {
  background-color: var(--wm-blue-light) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.droptarget > a {
  background-color: var(--wm-blue-light) !important;
  color: var(--wm-blue-dark) !important;
  font-weight: 700;
}

/* ===========================================================================
 * DEPOLAMA KARTI -- talimat madde 6: GERCEK kota verisi VARSA gosterilir,
 * YOKSA ("bilinmeyen") SAYISAL DEGER UYDURULMAZ -- sadece durum cubugu
 * notr renkte kalir (dinamik: Roundcube'un KENDI set_quota() cagirisi
 * DOM'u doldurur, burada SADECE STIL uygulanir, deger ELLENMEZ).
 * ===========================================================================
 */
#quotadisplay {
  margin: 10px 10px 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius-sm);
  box-shadow: var(--wm-shadow-sm);
}

#quotadisplay .count {
  color: var(--wm-muted);
  font-size: 12px;
  font-weight: 600;
}

#quota-content .meter,
.quota-bar {
  background-color: var(--wm-blue) !important;
}

/* ===========================================================================
 * ORTA SUTUN -- arama cubugu + arac cubugu + ileti listesi. Talimat
 * madde 2: acikca beyaz.
 * ===========================================================================
 */
#layout-list,
#layout-content,
#folderlist-content,
#messagelist,
#messagelist-content,
#message-header,
#messagecontframe,
#composeframe,
.toolbar.menu,
#mailtoolbar {
  background-color: #fff !important;
}

/* Arama -- talimat madde 8: yuvarlak, acik gri/beyaz, mavi odak. */
.searchbar,
.searchbar form {
  background-color: #fff !important;
  padding: 10px 14px !important;
}

.searchbar input[type="text"],
#mailsearchform {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--wm-line);
  border-radius: 999px;
  background-color: var(--wm-panel);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.searchbar input[type="text"]:focus,
#mailsearchform:focus {
  outline: none;
  border-color: var(--wm-blue);
  box-shadow: 0 0 0 3px var(--wm-blue-focus);
  background-color: #fff;
}

.toolbar.menu a:hover,
#mailtoolbar a:hover {
  background-color: var(--wm-blue-light) !important;
  border-radius: var(--wm-radius-sm);
}

/* ===========================================================================
 * ILETI LISTESI -- talimat madde 9: daha cok dikey dolgu, ince ayiraclar,
 * hafif hover, secili satir = COK acik mavi, okunmamis = daha guclu agirlik,
 * meta veri = mat gri. "Onizleme/snippet" sutunu Roundcube'un KENDI coltype
 * listesinde YOK (kaynak-once dogrulandi) -- UYDURULMADI (final rapor
 * Bolum N).
 * ===========================================================================
 */
#messagelist tbody tr {
  border-bottom: 1px solid var(--wm-line);
}

#messagelist tbody tr td {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

#messagelist tbody tr:hover {
  background-color: var(--wm-panel) !important;
}

#messagelist tr.unread td,
#messagelist tr.unread .subject,
#messagelist tr.unread .fromto {
  font-weight: 700;
  color: var(--wm-ink);
}

#messagelist tr.selected,
#messagelist tr.selected td {
  background-color: var(--wm-blue-light) !important;
}

#messagelist .date,
#messagelist .size {
  color: var(--wm-muted);
  font-size: 12.5px;
}

#messagelist .flagged a,
#messagelist td.flag a.flagged {
  color: var(--wm-blue);
}

/* ===========================================================================
 * OKUMA BOLMESI -- talimat madde 10: guvenlik duzeltmesi (SAMEORIGIN + CSP
 * frame-ancestors 'self') BURADA DEGISTIRILMIYOR (bkz. Caddyfile, ayri
 * dosya) -- SADECE gorsel katman.
 * ===========================================================================
 */
#message-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--wm-line);
}

#message-header .subject {
  font-size: 19px;
  font-weight: 700;
  color: var(--wm-ink);
}

/* Ileti eylem arac cubugu -- talimat madde 11: tutarli simge boyutu,
   hover/odak durumu, gruplama. */
#mailtoolbar a {
  border-radius: var(--wm-radius-sm);
  padding: 0.4rem 0.6rem;
}

#mailtoolbar a.delete:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}

/* ===========================================================================
 * HAZIRLAMA (COMPOSE) -- talimat madde 12: temiz beyaz sayfa, cilali
 * kenarlikli input'lar, buyuk temiz editor alani, mavi Gonder CTA'si.
 * ===========================================================================
 */
#compose-content,
#compose-headers,
#composebodycontainer,
#compose-attachments {
  background-color: #fff !important;
}

#compose-headers .form-control,
#_to,
#compose-subject,
#_from {
  border: 1px solid var(--wm-line) !important;
  border-radius: var(--wm-radius-sm) !important;
  padding: 8px 12px !important;
}

#compose-headers .form-control:focus,
#_to:focus,
#compose-subject:focus {
  outline: none;
  border-color: var(--wm-blue) !important;
  box-shadow: 0 0 0 3px var(--wm-blue-focus);
}

#composebody {
  border: 1px solid var(--wm-line) !important;
  border-radius: var(--wm-radius-sm) !important;
}

/* Sag ayarlar paneli (MDN/DSN/oncelik/hedef klasor) -- daha yumusak kart. */
#compose-options {
  background-color: var(--wm-panel) !important;
  border-radius: var(--wm-radius);
  padding: 16px !important;
  border: 1px solid var(--wm-line);
}

/* Gonder CTA -- mavi. */
#compose-content .formbuttons .btn-primary,
button.send,
a.send {
  background-color: var(--wm-blue) !important;
  color: #fff !important;
  border-color: var(--wm-blue) !important;
}

button.send:hover,
a.send:hover {
  background-color: var(--wm-blue-dark) !important;
}

/* ===========================================================================
 * "Koyu kip" (manuel karanlik tema) BILINCLI OLARAK gizli -- talimat
 * madde 2: "A dark full mailbox UI is NOT acceptable" -- tek, sabit acik
 * bir tema hedefleniyor. Stale colorMode cerezi plugin'in KENDISI
 * temizler (bkz. ticarisoft_branding.php).
 * ===========================================================================
 */
a.theme.dark {
  display: none !important;
}

/* Genel baglantilar. */
a {
  color: var(--wm-blue);
}

#taskmenu a,
#mailboxlist a,
.message-list a {
  color: inherit;
}

/* ===========================================================================
 * DUYARLI -- talimat madde 16: yatay tasma yok, giris kucuk ekranda
 * kullanilabilir kalir. Roundcube'un KENDI duyarli akisi (mobil menu/
 * sidebar gecisleri) DEGISTIRILMEDI -- sadece renk/dolgu ayarlari devam
 * eder (Elastic zaten dar genislikte panelleri otomatik TEK SUTUNA
 * indirger, bu davranis BURADA BOZULMADI).
 * ===========================================================================
 */
@media (max-width: 480px) {
  body.task-login #login-form {
    max-width: calc(100% - 32px);
    padding: 28px 22px 20px;
    top: 8vh;
  }

  body.task-login #logo,
  body.task-login .logo {
    width: 170px;
    height: 38px;
  }
}