/* OnySoft ERP — layout.css
   Uygulama kabuğu: .app .sidebar .main .topbar .content, nav, brand,
   çekmece (≤860px) + scrim + ☰, auth kabuğu. Bileşen kırılımları (1000/860/760/640/420) components.css sonunda.
   Prototip CSS'i temel alınmıştır; sınıf adları korunur. */

.app{display:flex;height:100%;overflow:hidden}

/* ---------- Sidebar ---------- */
.sidebar{width:var(--sidebar-width);flex:0 0 var(--sidebar-width);background:var(--bg-elevated);border-right:1px solid var(--border-default);display:flex;flex-direction:column;overflow-y:auto}
.brand{height:var(--topbar-height);display:flex;align-items:center;gap:10px;padding:0 var(--space-5);border-bottom:1px solid var(--border-default);flex:0 0 auto;color:inherit}
.brand-mark{width:24px;height:24px;border-radius:var(--radius-sm);background:var(--text-primary);color:var(--bg-canvas);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:12px;flex:0 0 24px}
.brand-name{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:15px;color:var(--text-primary)}
.brand-name span{color:var(--text-tertiary);font-weight:600}

.nav{padding:var(--space-4) var(--space-3);flex:1}
.nav-group{margin-bottom:var(--space-5)}
.nav-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-quaternary);padding:0 var(--space-3);margin-bottom:var(--space-2)}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:13.5px;font-weight:500;transition:background var(--transition-fast),color var(--transition-fast);user-select:none;border:1px solid transparent}
.nav-item:hover{background:var(--bg-subtle);color:var(--text-primary)}
.nav-item.active{background:var(--bg-canvas);color:var(--text-primary);font-weight:600;border-color:var(--border-default)}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke-width:1.5}
.nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.nav-item .faz{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-quaternary);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:0 4px;line-height:15px}
.nav-item.soluk{color:var(--text-quaternary)}
.nav-item.soluk:hover{color:var(--text-tertiary)}
.nav-item.soluk svg{opacity:.6}

.sidebar-foot{padding:var(--space-3);border-top:1px solid var(--border-default);display:flex;flex-direction:column;gap:var(--space-2);flex:0 0 auto}
.sidebar-foot select{height:32px;font-size:12.5px}
.panel-bilgi{font-size:11.5px;color:var(--text-tertiary);padding:0 var(--space-1);line-height:1.5}
.panel-bilgi .strong{display:block;color:var(--text-primary);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.destek-serit{border:1px solid var(--warning);background:var(--warning-bg);color:var(--warning-text);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:12px;line-height:1.45}
.destek-serit form{margin-top:6px}
.destek-serit .btn{height:26px;font-size:12px;padding:0 8px}

/* ---------- Ana alan ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:var(--topbar-height);flex:0 0 auto;border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-6);background:var(--bg-canvas);position:sticky;top:0;z-index:20}
.tb-spacer{flex:1}
.search-trigger{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-tertiary);cursor:pointer;font-size:13px;min-width:280px;font-family:var(--font-body)}
.search-trigger svg{width:15px;height:15px;flex:0 0 15px}
.search-trigger kbd{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:1px 5px;background:var(--bg-canvas)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:12.5px;color:var(--text-secondary);background:var(--bg-canvas);cursor:pointer;white-space:nowrap;font-family:var(--font-body)}
.chip:hover{background:var(--bg-subtle)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex:0 0 6px}
.chip .dot.warn{background:var(--warning)}
.chip .dot.err{background:var(--danger)}
.chip svg{width:13px;height:13px}
.avatar{width:28px;height:28px;border-radius:var(--radius-full);background:var(--bg-inverse);color:var(--text-inverse);display:grid;place-items:center;font-size:11px;font-weight:600;cursor:pointer;flex:0 0 28px;user-select:none}
.avatar.lg{width:40px;height:40px;font-size:14px;flex-basis:40px}
.tb-btn{position:relative}
.tb-btn .sayac{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--danger);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1}
.tb-btn .sayac:empty{display:none}

/* İçerik max 1440px ve ORTALI. max-width yerine yan dolgu: kaydırma kabı (.content) tam genişlikte kalır,
   kaydırma çubuğu pencere kenarında durur; 1440px üstünde iç kutu 1376px (1440 − 2×32) ortalanır. */
.content{flex:1;overflow-y:auto;padding:var(--space-8);padding-left:max(var(--space-8),calc((100% - var(--content-max-width)) / 2 + var(--space-8)));padding-right:max(var(--space-8),calc((100% - var(--content-max-width)) / 2 + var(--space-8)));width:100%}
.page-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6)}
.page-head .grow{flex:1;min-width:0}
.crumb{font-size:12px;color:var(--text-tertiary);margin-bottom:6px}
.crumb a{color:inherit}
.crumb a:hover{color:var(--text-primary)}
.sub{color:var(--text-tertiary);font-size:13px;margin-top:4px}

.hamb{display:none}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;animation:fade .15s ease}
.scrim.on{display:block}

/* ---------- Auth kabuğu ---------- */
.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-10) var(--space-4);background:var(--bg-canvas)}
.auth-box{width:100%;max-width:420px;margin:0 auto}
.auth-head{text-align:center;margin-bottom:var(--space-8)}
.auth-logo{width:44px;height:44px;border-radius:var(--radius-md);background:var(--text-primary);color:var(--bg-canvas);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:20px;margin:0 auto var(--space-4)}
.auth-head h1{font-size:22px}
.auth-box .card-body{display:flex;flex-direction:column;gap:var(--space-4)}
.auth-foot{text-align:center;margin-top:var(--space-5);font-size:13px;color:var(--text-tertiary)}
.auth-alt{text-align:center;margin-top:var(--space-8);font-size:11.5px;color:var(--text-quaternary)}
.auth-tema{position:fixed;top:var(--space-4);right:var(--space-4)}

/* ---------- Duyarlılık: YALNIZ kabuk ----------
   Bileşen kırılımları (split, grid2/3/4, stats, modal, toast, filters, pager, form-aksiyon…) components.css
   SONUNDADIR. Sebep: layout.css components.css'ten önce yüklenir; aynı özgüllükteki medya kuralı burada
   yazılınca components.css'teki temel kural onu ezer (mobilde ızgaralar tek kolona inmiyordu). */
@media (min-width:861px){
  .sadece-sm{display:none !important}
}
@media (max-width:860px){
  .hamb{display:inline-flex}
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:50;max-width:86vw;transform:translateX(-100%);transition:transform .2s ease;padding-top:env(safe-area-inset-top,0px)}
  .sidebar.open{transform:translateX(0)}
  .content{padding:var(--space-4);padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px))}
  .search-trigger{min-width:0;flex:1}
  .search-trigger kbd{display:none}
  .topbar{padding:0 var(--space-4);gap:var(--space-2)}
  .hide-sm{display:none !important}
  .page-head{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  h1{font-size:20px}
  .auth{padding:var(--space-6) var(--space-4)}
}
@media (max-width:420px){
  .topbar{padding:0 var(--space-3)}
  h1{font-size:19px}
}

/* Yazdırma kuralları da components.css sonunda (aynı sıra sorunu: .card/table temel kuralları ezilmesin). */
@media print{
  .sidebar,.topbar,.scrim,.hamb{display:none !important}
  .app{display:block;height:auto;overflow:visible}
  .main{overflow:visible}
  .content{padding:0;max-width:none;overflow:visible}
}