/*
 * Hosting.com.tr kurumsal tema TASLAĞI (renk + şekil katmanı)
 * -------------------------------------------------------------
 * Logo paleti: gökmavisi #00b9f2 · pembe #ec008c · limon #bed730 · turuncu #f8931f
 * Bu dosya styles.css'ten SONRA yüklenir ve yalnızca değişkenleri/şekilleri ezer.
 *
 * GERİ ALMA (iki yoldan biri):
 *   1) skins/gmail/templates/includes/layout.html içindeki hctr-theme.css <link> satırını silin.
 *   2) git revert <bu tema commit'i>   (öncesi: git tag pre-hctr-theme)
 */

:root {
  /* Marka */
  --hc-sky: #00b9f2;
  --hc-pink: #ec008c;
  --hc-lime: #bed730;
  --hc-orange: #f8931f;

  /* Ana renk (gökmavisi, metin üstünde okunur koyu ton) */
  --color-primary: #0a9fd6;
  --color-on-primary: #ffffff;
  --color-primary-container: #e4f5fc;
  --color-on-primary-container: #064a63;
  --color-primary-fixed: #e4f5fc;
  --color-primary-fixed-dim: #9edbf1;
  --color-inverse-primary: #7ed3f1;
  --color-secondary: #0a86b8;
  --color-secondary-container: #e7f6fc;
  --color-on-secondary-container: #0a4f69;
  --color-link: #0a86b8;

  /* Başarı (limon yeşili ailesi), tehlike (pembe ailesi) */
  --color-tertiary: #5d7a0c;
  --color-tertiary-container: #f4f9de;
  --color-on-tertiary-container: #3c500a;
  --color-error: #c8186f;
  --color-error-container: #fdebf4;
  --color-on-error-container: #7a0c46;

  /* Yüzeyler: hafif soğuk, düşük kontrast */
  --color-surface-container-low: #f6f9fb;
  --color-surface-container: #eff4f8;
  --color-surface-container-high: #e9eff4;
  --color-surface-container-highest: #e1e8ee;
  --color-outline: #9eacb7;
  --color-outline-variant: #e0e6eb;
  --color-row-read: #f3f8fb;
  --color-row-unread: #ffffff;
  --color-row-selected: #dcf1fa;
  --color-row-divider: rgb(90 120 140 / 0.10);
  --color-state-selected: rgb(10 159 214 / 0.12);

  /* Kurumsal uyarı kutuları (çok açık tonlar) */
  --hc-info-bg: #e8f6fc;   --hc-info-fg: #0a4f69;
  --hc-warn-bg: #fff4e2;   --hc-warn-fg: #7a4a06;
  --hc-ok-bg:   #f4f9de;   --hc-ok-fg:   #3c500a;
  --hc-danger-bg: #fdecf4; --hc-danger-fg: #7a0c46;

  /* Az kavis: butonlar 2-4px, kartlar 4-6px */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 4px;
  --shadow-fab: 0 1px 2px rgb(30 60 80 / 0.12);
  --shadow-fab-hover: 0 2px 6px rgb(30 60 80 / 0.14);
}

html.dark-mode {
  --color-primary: #4cc3ee;
  --color-on-primary: #052b3a;
  --color-primary-container: #0d3b4e;
  --color-on-primary-container: #d3effa;
  --color-inverse-primary: #0a9fd6;
  --color-secondary: #7fd1f0;
  --color-secondary-container: #0f3a4b;
  --color-on-secondary-container: #d3effa;
  --color-link: #7fd1f0;
  --color-tertiary: #cde25a;
  --color-tertiary-container: #36420b;
  --color-on-tertiary-container: #eef5c4;
  --color-error: #ff8fc6;
  --color-error-container: #5a1238;
  --color-on-error-container: #ffd9eb;
  --color-row-selected: #12475e;
  --color-state-selected: rgb(76 195 238 / 0.18);
  --hc-info-bg: rgb(76 195 238 / 0.14);   --hc-info-fg: #cfeefa;
  --hc-warn-bg: rgb(248 147 31 / 0.16);   --hc-warn-fg: #ffe2bd;
  --hc-ok-bg:   rgb(190 215 48 / 0.15);   --hc-ok-fg:   #eaf3bd;
  --hc-danger-bg: rgb(236 0 140 / 0.17);  --hc-danger-fg: #ffd3ea;
}

/* ---- Butonlar: tek tip, 4px radius, yumuşak kenar ---- */
.gm-btn, .btn, button.btn, .formbuttons button,
.formbuttons input[type='button'], .formbuttons input[type='submit'],
input.button, button.button:not(.icon) {
  border-radius: 4px;
}
.gm-btn-outlined, .btn-secondary, .btn-light, .btn-default,
.formbuttons button:not(.btn-primary):not(.mainaction):not(.btn-danger):not(.btn-secondary):not(.gm-btn-filled):not(.gm-btn-tonal):not(.gm-btn-text) {
  border-color: var(--color-outline-variant);
  background: var(--color-surface);
  color: var(--color-on-surface);
}
.gm-btn-outlined:hover, .btn-secondary:hover, .btn-light:hover, .btn-default:hover {
  background: var(--color-surface-container-low);
  border-color: var(--color-outline);
}
.gm-btn-filled, .btn-primary, .formbuttons .btn-primary,
.formbuttons button.mainaction, input.button.mainaction, button.mainaction {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}
.gm-btn-filled:hover, .btn-primary:hover, button.mainaction:hover {
  background: color-mix(in srgb, var(--color-primary) 88%, #000);
  box-shadow: none;
}
.gm-btn-tonal {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.gm-btn-danger, .btn-danger { color: var(--color-error); }
.gm-btn-danger.gm-btn-filled, .btn-danger.btn-primary {
  background: var(--color-error);
  color: var(--color-on-error);
}

/* Yeni ileti butonu */
.gm-compose {
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.gm-compose:hover { background: color-mix(in srgb, var(--color-primary) 88%, #000); }
.gm-fab { border-radius: 6px; }

/* Arama kutusu, kartlar, menüler */
.gm-search { border-radius: 6px; }
.popupmenu, .gm-menu, .gm-dialog { border-radius: 6px; }
.popupmenu.gm-account-menu { border-radius: 8px; padding: 12px; }
.gm-account-actions .menu.listing { border-radius: 6px; padding: 4px; overflow: hidden; }
.gm-account-actions .menu.listing > li > a { border-radius: 4px; height: 42px; padding: 0 14px; }

/* ---- Bildirim (toast) ve ileti içi uyarı kutuları ---- */
#messagestack > div, .gm-toast {
  background: var(--hc-info-bg);
  color: var(--hc-info-fg);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(30 60 80 / 0.12);
}
#messagestack > div.confirmation, .gm-toast.confirmation { background: var(--hc-ok-bg); color: var(--hc-ok-fg); }
#messagestack > div.warning, .gm-toast.warning { background: var(--hc-warn-bg); color: var(--hc-warn-fg); }
#messagestack > div.error, .gm-toast.error { background: var(--hc-danger-bg); color: var(--hc-danger-fg); }

#messagebody .message-partheaders, #messagebody .part-notice, #message-objects > div {
  background: var(--hc-warn-bg);
  color: var(--hc-warn-fg);
  border: 0;
  border-radius: 4px;
}
#message-objects .notice::before, #message-objects .warning::before { color: var(--hc-orange); }
#message-objects .boxbuttons a {
  background: rgb(248 147 31 / 0.14);
  color: var(--hc-warn-fg);
  border-radius: 3px;
}
html.dark-mode #message-objects .boxbuttons a { background: rgb(248 147 31 / 0.22); color: var(--hc-warn-fg); }

/* Cortex özet kartı da aynı sıcak uyarı ailesinde */
.gm-ai-card { background: var(--hc-warn-bg); border-radius: 4px; }
html.dark-mode .gm-ai-card { background: var(--hc-warn-bg); }

/* ---- Kurumsal Vurgu Rengi Paletleri (Gökmavisi varsayılan, Pembe, Limon, Turuncu) ---- */
html[data-gm-accent="pink"] {
  --color-primary: #d4007d;
  --color-primary-container: #fde6f3;
  --color-on-primary-container: #6b003e;
  --color-secondary: #b8006b;
  --color-secondary-container: #fdeaf5;
  --color-on-secondary-container: #6b003e;
  --color-link: #c20072;
  --color-row-selected: #fce2f1;
  --color-state-selected: rgb(212 0 125 / 0.12);
}
html.dark-mode[data-gm-accent="pink"] {
  --color-primary: #ff7ac3;
  --color-on-primary: #4d002c;
  --color-primary-container: #5c0b38;
  --color-on-primary-container: #ffd8ec;
  --color-secondary: #ff99d1;
  --color-secondary-container: #521035;
  --color-on-secondary-container: #ffd8ec;
  --color-link: #ff8cc9;
  --color-row-selected: #4a1231;
  --color-state-selected: rgb(255 122 195 / 0.18);
}

html[data-gm-accent="lime"] {
  --color-primary: #63820a;
  --color-primary-container: #eef7ce;
  --color-on-primary-container: #2e3d03;
  --color-secondary: #567308;
  --color-secondary-container: #f1f8d6;
  --color-on-secondary-container: #2e3d03;
  --color-link: #567308;
  --color-row-selected: #eaf4c4;
  --color-state-selected: rgb(99 130 10 / 0.13);
}
html.dark-mode[data-gm-accent="lime"] {
  --color-primary: #c4df38;
  --color-on-primary: #263300;
  --color-primary-container: #394b07;
  --color-on-primary-container: #eef8be;
  --color-secondary: #d0e65c;
  --color-secondary-container: #334208;
  --color-on-secondary-container: #eef8be;
  --color-link: #c4df38;
  --color-row-selected: #2f3d09;
  --color-state-selected: rgb(196 223 56 / 0.18);
}

html[data-gm-accent="orange"] {
  --color-primary: #d97706;
  --color-primary-container: #fff0db;
  --color-on-primary-container: #5c3000;
  --color-secondary: #c26704;
  --color-secondary-container: #fff2e0;
  --color-on-secondary-container: #5c3000;
  --color-link: #c26704;
  --color-row-selected: #fdebd0;
  --color-state-selected: rgb(217 119 6 / 0.13);
}
html.dark-mode[data-gm-accent="orange"] {
  --color-primary: #ffb347;
  --color-on-primary: #422100;
  --color-primary-container: #593004;
  --color-on-primary-container: #ffe4bf;
  --color-secondary: #ffc26b;
  --color-secondary-container: #4d2904;
  --color-on-secondary-container: #ffe4bf;
  --color-link: #ffb347;
  --color-row-selected: #4a2806;
  --color-state-selected: rgb(255 179 71 / 0.18);
}

/* ---- Liste Yoğunluğu (Rahat / Normal / Sıkı) ---- */
html[data-gm-density="comfortable"] { --spacing-row: 46px; }
html[data-gm-density="comfortable"] #messagelist tbody tr > td { height: 46px; padding-top: 4px; padding-bottom: 4px; }
html[data-gm-density="compact"] { --spacing-row: 32px; }
html[data-gm-density="compact"] #messagelist tbody tr > td { height: 32px; padding-top: 0; padding-bottom: 0; }

/* ---- Yazı Boyutu (Küçük / Normal / Büyük) ---- */
html[data-gm-fontsize="small"] { --text-sm: 11.5px; --text-base: 13px; --text-md: 14px; }
html[data-gm-fontsize="small"] #messagebody .message-part,
html[data-gm-fontsize="small"] #messagebody .message-htmlpart { font-size: 13px; }
html[data-gm-fontsize="large"] { --text-sm: 13px; --text-base: 15px; --text-md: 16.5px; }
html[data-gm-fontsize="large"] #messagebody .message-part,
html[data-gm-fontsize="large"] #messagebody .message-htmlpart { font-size: 15.5px; }

/* ---- Okuma Genişliği (Tam / Rahat 860px / Odaklı 700px) ---- */
html[data-gm-readwidth="comfortable"] #message-header,
html[data-gm-readwidth="comfortable"] #message-objects,
html[data-gm-readwidth="comfortable"] #messagebody,
html[data-gm-readwidth="comfortable"] .gm-ai-card {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
html[data-gm-readwidth="narrow"] #message-header,
html[data-gm-readwidth="narrow"] #message-objects,
html[data-gm-readwidth="narrow"] #messagebody,
html[data-gm-readwidth="narrow"] .gm-ai-card {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}