/* ============================================================================
   LAYOUT.CSS — Uygulama iskeleti: kenar çubuğu, gezinme, ana içerik alanı,
   üst çubuk (topbar) ve sekme geçiş animasyonu. Responsive kırılım noktaları
   bu dosyada, ilgili masaüstü kuralının hemen yanında tutulur.
   ============================================================================ */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:250px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:26px 16px;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px 6px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.brand svg{flex-shrink:0;color:var(--gold);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text .name{font-family:'Fraunces',serif;font-size:17px;font-weight:600;letter-spacing:0.2px;}
.brand-text .tag{font-size:10.5px;color:var(--gold);letter-spacing:1.6px;text-transform:uppercase;margin-top:3px;}

nav{display:flex;flex-direction:column;gap:2px;}
.nav-group-label{font-size:10px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:1.2px;padding:14px 12px 5px 12px;}
.nav-group-label:first-child{padding-top:2px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  color:var(--ink-muted);font-size:13.3px;font-weight:500;cursor:pointer;border:1px solid transparent;
  transition:background .15s,color .15s;user-select:none;
}
.nav-item svg{flex-shrink:0;opacity:.8;}
.nav-item:hover{background:var(--panel-light);color:var(--ink);}
.nav-item.active{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line);}
.nav-item.active svg{opacity:1;}

.sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;min-width:0;}
.user-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
/* min-width:0 şart — flex öğelerinin varsayılan min-width:auto'su, metnin
   gerçek genişliğinin altına küçülmesini (dolayısıyla "…" ile kısalmasını)
   engelliyor; bu da mobilde e-postanın kutusundan taşıp marka yazısının
   üzerine binmesine yol açıyordu. */
.user-email{font-size:11.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.logout-btn{
  background:transparent;border:1px solid var(--border);color:var(--ink-muted);border-radius:6px;
  padding:4px 9px;font-size:11px;cursor:pointer;flex-shrink:0;
}
.logout-btn:hover{border-color:var(--red);color:var(--red);}
.backup-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;border-radius:8px;
  background:transparent;border:1px dashed var(--border);color:var(--ink-muted);font-size:12px;font-weight:500;
  cursor:pointer;transition:.15s;
}
.backup-btn:hover{border-color:var(--gold-line);color:var(--gold);}

/* ---------- Main / Topbar ---------- */
.main{flex:1;min-width:0;padding:34px 42px 60px 42px;}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
.topbar h1{font-family:'Fraunces',serif;font-size:26px;font-weight:600;margin:0;}
.topbar .sub{color:var(--ink-muted);font-size:13px;margin-top:5px;}
.actions{display:flex;gap:10px;flex-wrap:wrap;}

.export-dropdown{position:relative;}
.export-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  background:var(--panel-lighter);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow);min-width:160px;max-width:calc(100vw - 32px);overflow:hidden;
}
.export-menu.show{display:block;}
.export-menu button{
  display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;
  color:var(--ink-dim);font-size:13px;font-family:inherit;cursor:pointer;
}
.export-menu button:hover{background:var(--panel-light);color:var(--gold);}

/* ---------- Sekme geçiş animasyonu (tüm sekmeler için ortak) ---------- */
main > section.tab-fade-in{animation:tab-fade .22s ease;}
@keyframes tab-fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  main > section.tab-fade-in{animation:none;}
}

/* ---------- Responsive: kenar çubuğu üst gezinmeye dönüşür ---------- */
@media (max-width:880px){
  .app{flex-direction:column;}
  /* align-items:flex-start (center DEĞİL): .brand iki satırlı (ad + etiket),
     .sidebar-foot tek satırlı — ortalamak e-postayı iki satırın ARASINA,
     "HUKUK OTOMASYONU" etiketinin üzerine düşürüp çakışmış gösteriyordu. */
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:flex-start;padding:12px 14px;}
  .brand{order:1;border-bottom:none;padding:0 14px 0 0;margin-bottom:0;border-right:1px solid var(--border);margin-right:10px;}
  /* Çıkış butonuna telefonda da erişilebilsin diye üst satırda, marka yanında tutuluyor. */
  .sidebar-foot{order:2;flex:1;min-width:0;margin-top:0;padding-top:0;border-top:none;flex-direction:row;align-items:center;justify-content:flex-end;gap:10px;}
  .sidebar-foot .backup-btn{display:none;}
  nav{order:3;flex:1 1 100%;flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
  .nav-group-label{display:none;}
  .nav-item{flex-shrink:0;}
  .main{padding:20px 14px 50px 14px;}
  .topbar h1{font-size:21px;}
}

@media (max-width:460px){
  .topbar h1{font-size:19px;}
  .actions{width:100%;}
  .actions .btn{flex:1;justify-content:center;}
  .export-dropdown{flex:1;}
  .export-dropdown .btn{width:100%;}
}

/* Telefonda "ana ekrana ekle" şeridi (pwa.js) */
.install-banner{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--gold-line);border-radius:12px;padding:10px 12px;margin-bottom:14px;box-shadow:var(--shadow);}
.install-banner img{border-radius:9px;flex-shrink:0;}
.install-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35;}
.install-banner-text span{color:var(--ink-muted);font-size:12px;}
.install-banner .btn{flex-shrink:0;flex:0 0 auto;}
.install-banner-x{background:none;border:none;color:var(--ink-muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;}