/* thejs mail — Modoboa arayüz katmanı (nginx sub_filter ile eklenir, site-packages'a dokunmaz) */
:root {
  --tj-ink: #0f172a;
  --tj-muted: #64748b;
  --tj-line: #e2e8f0;
  --tj-side: #f8fafc;
  --tj-accent: #4f46e5;
  --tj-accent-soft: #eef2ff;
  --v-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

body, .v-application {
  font-family: var(--v-font-body) !important;
  -webkit-font-smoothing: antialiased;
}
.v-application, .v-main { background: #fff !important; }

/* ---------- Kenar çubuğu ---------- */
.v-navigation-drawer.bg-primary {
  background: var(--tj-side) !important;
  color: var(--tj-ink) !important;
  border-right: 1px solid var(--tj-line) !important;
  box-shadow: none !important;
}
.v-navigation-drawer.bg-primary .bg-primary,
.v-navigation-drawer.bg-primary .v-list {
  background: transparent !important;
  color: #334155 !important;
}
.v-navigation-drawer.bg-primary .v-list-item,
.v-navigation-drawer.bg-primary .v-list-item-title,
.v-navigation-drawer.bg-primary .v-list-subheader,
.v-navigation-drawer.bg-primary .v-icon,
.v-navigation-drawer.bg-primary .v-btn--variant-text {
  color: #334155 !important;
}
.v-navigation-drawer.bg-primary .v-icon { opacity: .8; }

/* logo */
.v-navigation-drawer .d-flex.align-center:has(> .logo) { padding: 14px 8px 12px 16px; }
.v-navigation-drawer .logo { max-width: 86px !important; flex: 0 0 86px !important; }
.v-navigation-drawer .logo .v-img__img { opacity: 1 !important; transition: none !important; }
.v-navigation-drawer .d-flex.align-center:has(> .logo) > .v-btn { margin-left: auto; }

/* webmail klasörleri */
.v-navigation-drawer .mailbox {
  border-radius: 8px;
  padding: 7px 10px !important;
  font-size: 14px;
  transition: background .12s ease;
  cursor: pointer;
}
.v-navigation-drawer .mailbox:hover { background: #eef1f6 !important; }
.v-navigation-drawer.bg-primary .bg-primary-lighten-1,
.v-navigation-drawer.bg-primary .v-list-item--active {
  background: var(--tj-accent-soft) !important;
  color: var(--tj-accent) !important;
  font-weight: 600;
  border-radius: 8px;
}
.v-navigation-drawer.bg-primary .bg-primary-lighten-1 .v-icon,
.v-navigation-drawer.bg-primary .v-list-item--active .v-icon,
.v-navigation-drawer.bg-primary .v-list-item--active .v-list-item-title {
  color: var(--tj-accent) !important;
  opacity: 1;
}
.v-navigation-drawer .v-list-item { border-radius: 8px; margin: 1px 8px; min-height: 38px; }

/* alt şerit (ayarlar) */
.v-navigation-drawer__append { border-top: 1px solid var(--tj-line); }
.v-navigation-drawer__append,
.v-navigation-drawer__append * { background-color: transparent !important; }

/* ---------- Butonlar ---------- */
.v-btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.v-btn:not(.v-btn--icon):not(.v-btn--rounded) { border-radius: 9px !important; }
.v-btn--variant-flat, .v-btn--variant-elevated { box-shadow: none !important; }
.v-navigation-drawer__prepend .v-btn.bg-secondary {
  background: var(--tj-accent) !important;
  color: #fff !important;
  width: calc(100% - 32px);
  height: 40px;
}
.v-navigation-drawer__prepend .v-btn.bg-secondary .v-icon { color: #fff !important; opacity: 1; }

/* ---------- İçerik ---------- */
.v-main .text-h4, .v-main .text-h5, .v-toolbar-title {
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
  color: var(--tj-ink);
}
.v-card, .v-sheet.v-toolbar, .v-table, .v-expansion-panel {
  box-shadow: none !important;
}
.v-main .v-card:not(.v-card--variant-text), .v-main .v-table {
  border: 1px solid var(--tj-line);
  border-radius: 12px !important;
}
.v-table > .v-table__wrapper > table > thead > tr > th {
  font-size: 11px !important;
  letter-spacing: .04em;
  color: var(--tj-muted) !important;
  font-weight: 600 !important;
}
.v-table > .v-table__wrapper > table > tbody > tr > td {
  border-bottom-color: #f1f5f9 !important;
}
.v-table > .v-table__wrapper > table > tbody > tr:hover > td { background: #f8fafc !important; }
.v-field { border-radius: 9px !important; }
.v-menu > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content > .v-list {
  border: 1px solid var(--tj-line);
  border-radius: 12px !important;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .25) !important;
}
.v-avatar { font-weight: 600; }

/* ---------- Sayfa düzeni: başlık şeridi, kartlar, paneller ---------- */
.v-main .connected-container { padding: 16px 28px 32px !important; }
.v-main .v-toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--tj-line);
}
.v-main .v-toolbar__content:has(> .v-toolbar-title) { padding-right: 140px; height: 44px !important; }
.v-main .v-toolbar-title { margin-inline-start: 4px !important; }
.top-menu { top: 10px !important; right: 24px !important; }
.top-menu .v-btn:not(.bg-primary) { background: transparent !important; }
.v-main .connected-content .pa-4 { padding: 20px 4px !important; }
.v-main .v-tabs { border-bottom: 1px solid var(--tj-line); margin-bottom: 24px !important; }

/* üst üste gelen kartlar arasına boşluk */
.v-main .v-card + .v-card,
.v-main div:has(> .v-card) + div:has(> .v-card),
.v-main .v-card + div:has(> .v-card),
.v-main div:has(> .v-card) + .v-card { margin-top: 20px !important; }
.v-main .v-card.pa-2 { padding: 20px 24px 24px !important; }
.v-main .v-card .v-card-title { padding-inline: 0 !important; }
.v-main .v-card-title, .v-main .v-card-title > span {
  font-size: 17px !important; font-weight: 650 !important; letter-spacing: -.005em !important; color: var(--tj-ink);
}
.v-main .v-card.pa-2 > .v-card-text { padding-inline: 0 !important; }
.v-main .v-card-text { font-size: 14px; color: #334155; }
.v-btn.bg-success { background-color: var(--tj-accent) !important; color: #fff !important; }

/* iç içe kutularda çift kenarlık olmasın */
.v-main .v-card .v-card, .v-main .v-card .v-table, .v-main .v-expansion-panel .v-card { border: 0 !important; }
.v-main a:not(.v-btn):not(.v-list-item):not(.v-tab) { color: var(--tj-accent); }
.v-navigation-drawer .v-list-item--active > .v-list-item__overlay { opacity: 0 !important; }

/* açılır paneller: ayrı kartlar */
.v-main .v-expansion-panels { gap: 16px; }
.v-main .v-expansion-panel {
  border: 1px solid var(--tj-line);
  border-radius: 12px !important;
  margin-top: 0 !important;
}
.v-main .v-expansion-panel::after { display: none; }
.v-main .v-expansion-panel-title { font-size: 15px; font-weight: 650; padding: 18px 24px; min-height: 56px !important; }
.v-main .v-expansion-panel-text__wrapper { padding: 4px 24px 24px !important; }

/* form alanları */
.v-main .v-input { margin-bottom: 6px; }
.v-main label.m-label, .v-main .v-expansion-panel-text label:not(.v-label) {
  display: inline-block; margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: #334155;
}

/* ---------- Mesaj görünümü: eylem düğmeleri ---------- */
.v-main .mail-header .v-toolbar__extension { gap: 6px; }
.v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon) {
  height: 34px !important; padding: 0 12px !important; border-radius: 9px !important;
  background: #f1f5f9 !important; color: #1e293b !important; font-size: 13px !important;
}
.v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon):first-child {
  background: var(--tj-accent-soft) !important; color: var(--tj-accent) !important;
}
.v-main .mail-header .v-toolbar__extension > .v-btn--icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
.v-main .mail-header .v-toolbar__extension > .v-btn--icon:hover { background: #f1f5f9 !important; }

/* ---------- Dar kenar çubuğu (rail) ---------- */
.v-navigation-drawer--rail .logo { display: none !important; }
.v-navigation-drawer--rail .d-flex.align-center:has(> .logo) { padding: 10px 0 8px; justify-content: center; }
.v-navigation-drawer--rail .d-flex.align-center:has(> .logo) > .v-btn { margin: 0 auto; }
.v-navigation-drawer--rail .v-navigation-drawer__prepend .v-btn.bg-secondary {
  width: 40px !important; min-width: 40px !important; height: 40px; padding: 0 !important; border-radius: 50% !important;
}
.v-navigation-drawer--rail .v-navigation-drawer__prepend .v-btn.bg-secondary .v-btn__prepend { margin: 0 !important; }
.v-navigation-drawer--rail .mailbox { justify-content: center; padding: 9px 0 !important; }
.v-navigation-drawer--rail .mailbox .v-icon { margin: 0 !important; }
.v-navigation-drawer--rail .v-list { padding-inline: 8px !important; }
.v-navigation-drawer--rail .v-list-item { margin: 2px 0 !important; padding: 0 !important; justify-content: center; }
.v-navigation-drawer--rail .v-list-item__prepend { width: auto !important; margin: 0 auto !important; }
.v-navigation-drawer--rail .v-list-item__spacer,
.v-navigation-drawer--rail .v-list-item__content,
.v-navigation-drawer--rail .v-list-subheader { display: none !important; }

/* ---------- Telefon / dar ekran ---------- */
@media (max-width: 760px) {
  /* içerik her zaman dar çubuğun yanından başlar; açılan menü içeriğin üstüne biner */
  .v-main { --v-layout-left: 56px !important; }
  .v-navigation-drawer:not(.v-navigation-drawer--rail) {
    z-index: 1200 !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .35), 0 10px 40px rgba(15, 23, 42, .25) !important;
  }
  .v-main .connected-container { padding: 10px 12px 24px !important; }
  .top-menu { top: 6px !important; right: 8px !important; }
  .top-menu .v-btn { width: 40px !important; height: 40px !important; }

  /* sayfa başlığı */
  .v-main .text-headline-medium, .v-main .text-h4, .v-main .text-h5 {
    font-size: 19px !important; line-height: 32px !important; font-weight: 650 !important;
    margin: 2px 96px 10px 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .v-main .v-toolbar__content:has(> .v-toolbar-title) { padding-right: 96px; }
  /* araç çubukları: düğmeler sıkışıp kaybolmasın, alt satıra geçsin */
  .v-main .v-toolbar { height: auto !important; }
  .v-main .v-toolbar__content:not(:has(> .v-toolbar-title)) {
    height: auto !important; min-height: 44px; flex-wrap: wrap; row-gap: 6px; padding-block: 6px;
  }
  .v-main .v-toolbar__content > .v-btn, .v-main .v-toolbar__content > .v-btn-group { flex-shrink: 0; }
  .v-main .v-toolbar__extension { height: auto !important; flex-wrap: wrap; row-gap: 2px; padding-block: 4px; }
  .v-main .v-toolbar__extension > .v-btn { padding-inline: 8px !important; min-width: 0 !important; }
  .v-main .mail-header .v-toolbar-title { white-space: normal; font-size: 17px !important; line-height: 1.3; }
  .v-main .bg-white.rounded-lg.pa-4 { padding: 8px 2px !important; }
  .v-main .v-toolbar__content > .v-btn-group { width: auto !important; min-width: max-content; }
  .v-main .v-toolbar-title { font-size: 18px !important; }

  /* webmail araç çubuğu: iki satır */
  .v-main .mail-toolbar { height: auto !important; margin-inline: 0 !important; }
  .v-main .mail-toolbar > .v-toolbar__content {
    height: auto !important; flex-wrap: wrap; padding: 6px 8px !important; row-gap: 4px;
  }
  .v-main .mail-toolbar .mail-search { flex: 1 1 120px; min-width: 0; max-width: none !important; }
  .v-main .mail-toolbar .mail-toolbar-separator { display: none; }
  .v-main .mail-toolbar .mail-pagination { flex: 1 1 100%; justify-content: flex-end; }

  /* mesaj listesi: iki satırlı kart düzeni */
  .v-main .mail-list { margin-inline: 0 !important; }
  .v-main .mail-list-header { display: none !important; }
  .v-main .mail-row {
    display: grid !important;
    grid-template-columns: 3px 36px minmax(0, 1fr) auto;
    grid-template-areas: "acc chk sender date" "acc star subject subject";
    align-items: center; column-gap: 4px; row-gap: 0;
    height: auto !important; min-height: 0 !important; padding: 8px 6px 8px 0 !important;
    border-bottom: 1px solid #f1f5f9;
  }
  .v-main .mail-row > .accent { grid-area: acc; align-self: stretch; height: auto !important; }
  .v-main .mail-row > .cell-check { grid-area: chk; }
  .v-main .mail-row > .cell-icon { grid-area: star; }
  .v-main .mail-row > .cell-sender {
    grid-area: sender; width: auto !important; min-width: 0; flex: none;
    font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .v-main .mail-row > .cell-subject {
    grid-area: subject; width: auto !important; min-width: 0; flex: none; display: block !important;
    font-size: 13px; color: var(--tj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .v-main .mail-row > .cell-flags { grid-area: subject; justify-self: end; }
  .v-main .mail-row > .cell-date {
    grid-area: date; width: auto !important; min-width: 0; flex: none; font-size: 12px; color: var(--tj-muted); text-align: right;
  }

  /* mesaj görünümü: başlık tek satırda geri okuyla, eylemler tek sırada */
  .v-main .mail-header > .v-toolbar__content {
    flex-wrap: nowrap !important; align-items: flex-start; padding: 2px 0 6px !important; column-gap: 2px;
  }
  .v-main .mail-header > .v-toolbar__content > .v-btn { margin-left: -6px !important; }
  .v-main .mail-header .mail-subject {
    flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere;
    font-size: 17px !important; line-height: 1.3 !important; font-weight: 650; padding-top: 8px;
  }
  .v-main .mail-header .v-toolbar__extension {
    flex-wrap: nowrap !important; padding: 6px 0 10px !important; gap: 4px;
  }
  .v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon) { height: 40px !important; flex: 0 0 auto; }
  .v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon):first-child { padding: 0 12px !important; font-size: 14px !important; }
  .v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon):not(:first-child) { width: 40px; min-width: 40px !important; padding: 0 !important; }
  .v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon):not(:first-child) .v-btn__content { display: none; }
  .v-main .mail-header .v-toolbar__extension > .v-btn:not(.v-btn--icon):not(:first-child) .v-btn__prepend { margin: 0 !important; }
  .v-main .mail-header .v-toolbar__extension > :not(.v-btn) { display: none !important; }
  .v-main .mail-header .v-toolbar__extension > :not(.v-btn) + .v-btn { margin-left: auto !important; }
  .v-main .mail-header .v-toolbar__extension > .v-btn--icon { width: 36px !important; height: 40px !important; flex: 0 0 auto; }

  /* kartlar, paneller, sekmeler */
  .v-main .connected-content .pa-4 { padding: 12px 0 !important; }
  .v-main .v-card.pa-2 { padding: 16px !important; }
  .v-main .v-expansion-panel-title { padding: 14px 16px; }
  .v-main .v-expansion-panel-text__wrapper { padding: 4px 16px 18px !important; }
  .v-main .v-tabs { margin-bottom: 16px !important; }
  .v-main .v-tab { padding-inline: 12px !important; min-width: 0 !important; }
  .v-main .v-row > [class*="v-col"] { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Giriş / parola sıfırlama sayfaları (Django şablonu) ---------- */
body > .container > .left-column {
  background: radial-gradient(120% 90% at 20% 10%, #1e293b 0%, #0f172a 60%, #0b1120 100%) !important;
}
body > .container .logo img { width: 200px; margin: 0; }
body > .container > .right-column { background: #fff; }
body > .container .login-box { max-width: 360px; text-align: left; }
body > .container h2 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; color: var(--tj-ink); margin: 0 0 24px; }
body > .container .input-group label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
body > .container .input-group input:not([type=checkbox]) {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid #cbd5e1; border-radius: 9px; font-size: 15px; color: var(--tj-ink);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
body > .container .input-group input:not([type=checkbox]):focus {
  border-color: var(--tj-accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
}
body > .container .btn { border-radius: 9px; padding: 12px; font-size: 15px; font-weight: 600; }
body > .container .footer a { color: var(--tj-accent) !important; }
@media (max-width: 760px) {
  body > .container { flex-direction: column; }
  body > .container > .column { box-sizing: border-box; width: 100%; }
  body > .container > .left-column { flex: 0 0 auto; padding: 36px 20px; }
  body > .container > .right-column { justify-content: flex-start; padding: 36px 24px; }
  body > .container .logo img { width: 170px; }
}