/* ===== EALM premium design system ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#f5f6fa; --bg-grad:radial-gradient(1200px 600px at 80% -10%,#e2e8ff7a,transparent),radial-gradient(900px 500px at -10% 20%,#ffe9f37a,transparent);
  --surface:#ffffff; --surface2:#f1f3f9; --surface3:#e9edf6;
  --border:#e5e8f0; --border2:#d8dde9;
  --text:#0f1626; --muted:#6b7588; --faint:#98a2b3;
  --primary:#6366f1; --primary2:#8b5cf6; --accent:#22d3ee;
  --grad:linear-gradient(90deg,#6366f1,#8b5cf6);
  --green:#10b981; --amber:#f59e0b; --red:#ef4444; --blue:#3b82f6;
  --radius:16px; --radius-s:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --shadow-l:0 12px 32px rgba(16,24,40,.10);
  --sb:264px;
}
[data-theme='dark']{
  --bg:#0b0e1a; --bg-grad:radial-gradient(1200px 600px at 80% -10%,#2a2f6a2e,transparent),radial-gradient(900px 500px at -10% 20%,#5b2a6a2e,transparent);
  --surface:#12162a; --surface2:#1a1f38; --surface3:#232943;
  --border:#232a47; --border2:#2f3860;
  --text:#e8ecf8; --muted:#99a2bd; --faint:#6b76a0;
  --primary:#7c7ff5; --primary2:#a78bfa; --accent:#22d3ee;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-l:0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);background-image:var(--bg-grad);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .3s}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.01em}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .mono{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.82rem}
/* Formda "eksik tanım" uyarısı: hata değil, kullanıcıyı eksiği tamamlamaya yönlendirir. */
.warn-text{color:var(--amber)}
.row{display:flex;gap:12px;align-items:center} .spacer{flex:1} .cursor{cursor:pointer} .w-100{width:100%}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border2);background:var(--surface);color:var(--text);padding:9px 15px;border-radius:11px;cursor:pointer;font-family:var(--font);font-weight:600;font-size:.88rem;transition:.16s;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.35)}
.btn.primary:hover{color:#fff;filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--border)}
.btn.danger{background:var(--red);border:none;color:#fff}
.btn.sm{padding:6px 11px;font-size:.8rem;border-radius:9px}
.btn.icon{width:38px;height:38px;padding:0;justify-content:center;border-radius:11px}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* inputs */
.input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--border2);border-radius:11px;background:var(--surface);color:var(--text);font-family:var(--font);font-size:.9rem;transition:.16s}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.field{margin-bottom:14px}.field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:0}

/* cards */
.card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.2s}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* shell */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 20px;font-weight:800;font-size:1.12rem}
.brand .logo{width:36px;height:36px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(99,102,241,.4);font-size:1.1rem}
.brand .sub{font-size:.7rem;font-weight:600;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.nav-sec{font-size:.68rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:14px 12px 6px}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:600;font-size:.9rem;position:relative;transition:.16s;margin-bottom:2px}
.sidebar nav a .ni{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted);font-size:.85rem;flex-shrink:0;transition:.16s}
.sidebar nav a:hover{background:var(--surface2);color:var(--text)}
.sidebar nav a:hover .ni{color:var(--text)}
.sidebar nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(99,102,241,.35)}
.sidebar nav a.active .ni{background:rgba(255,255,255,.2);color:#fff}
.sidebar .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.profile{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--surface2)}
.profile .av{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}

.main{flex:1;padding:22px 28px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;position:sticky;top:12px;z-index:20;box-shadow:var(--shadow)}
.topbar .crumb{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:8px}
/* Detay ekranlarının geri düğmesi: başlığın hemen solunda, üst çubukta sabit. */
.crumb-back{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;border:1px solid var(--border2);background:var(--surface2);color:var(--muted);font-family:var(--font);font-weight:600;font-size:.85rem;padding:7px 13px;border-radius:10px;cursor:pointer;transition:.16s;white-space:nowrap}
.crumb-back:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface2))}
.topbar .crumb .ic{width:32px;height:32px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.search-box{position:relative}
.search-box input{padding-left:36px;width:260px;background:var(--surface2);border-color:transparent}
.search-box .s-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-l);z-index:1000;max-height:320px;overflow:auto}
.search-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.search-item:hover{background:var(--surface2)}

/* kpi */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:4px}
.kpi .card{display:flex;gap:14px;align-items:center;overflow:hidden;position:relative}
.kpi .card::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--grad);opacity:.08}
.kpi .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.kpi .label{color:var(--muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi .value{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.ic-blue{background:#e0f0ff;color:#2563eb}.ic-green{background:#dcfce7;color:#16a34a}.ic-amber{background:#fef3c7;color:#b45309}.ic-red{background:#fee2e2;color:#dc2626}.ic-violet{background:#ede9fe;color:#7c3aed}[data-theme='dark'] .ic-blue{background:#1e3a8a55;color:#60a5fa}[data-theme='dark'] .ic-green{background:#14532d55;color:#4ade80}[data-theme='dark'] .ic-amber{background:#78350f55;color:#fbbf24}[data-theme='dark'] .ic-red{background:#7f1d1d55;color:#f87171}[data-theme='dark'] .ic-violet{background:#4c1d9555;color:#a78bfa}

/* charts / bars */
.bar{background:var(--surface2);border-radius:8px;height:12px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:8px;transition:width .6s}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-s)}
table.grid{width:100%;border-collapse:collapse;background:var(--surface)}
table.grid thead th{background:var(--surface2);color:var(--muted);text-transform:uppercase;font-size:.68rem;letter-spacing:.05em;font-weight:700;padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
table.grid tbody td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:.87rem}
table.grid tbody tr{transition:.1s}
table.grid tbody tr:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid a{font-weight:600;color:var(--primary)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.b-red{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.b-amber{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.b-blue{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
/* Nötr rozet: üst tür listesi gibi "veri" etiketleri renk iddiası taşımasın. */
.b-slate{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.b-violet{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.b-muted{background:var(--surface2);color:var(--muted)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:none;padding:11px 15px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.86rem;white-space:nowrap;font-family:var(--font)}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--primary);border-bottom-color:var(--primary)}

/* auth */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(800px 400px at 80% 10%,rgba(139,92,246,.25),transparent),radial-gradient(600px 300px at 10% 90%,rgba(34,211,238,.2),transparent);pointer-events:none}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:30px;box-shadow:var(--shadow-l);position:relative}
.lg-remember{display:flex;align-items:center;gap:8px;margin:2px 0 14px;font-size:.88rem;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.lg-remember input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.lg-remember:hover{color:var(--text)}
.auth-card .field .muted.small{display:block;margin-top:5px;line-height:1.35}
.auth-logo{width:50px;height:50px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.3rem;margin-bottom:16px;box-shadow:0 6px 18px rgba(99,102,241,.4)}
.role-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:1px solid var(--border);border-radius:999px;font-size:.76rem;margin:2px;cursor:pointer;color:var(--muted);transition:.15s;font-weight:600}
.role-chip:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}

/* stepper */
.stepper{display:flex;margin-bottom:20px;gap:4px}
.stepper .step{flex:1;text-align:center;padding:9px 0 11px;color:var(--muted);border-bottom:3px solid var(--border2);font-size:.78rem;font-weight:700}
.stepper .step.active{color:var(--primary);border-color:var(--primary)}

/* help fab */
.help-fab{position:fixed;bottom:22px;right:22px;z-index:1080;width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;border:none;font-size:1.2rem;box-shadow:0 6px 20px rgba(99,102,241,.45);cursor:pointer;transition:.2s}
.help-fab:hover{transform:translateY(-2px) scale(1.04)}
.help-callout{background:color-mix(in srgb,var(--primary) 10%,transparent);border-left:4px solid var(--primary);padding:11px 13px;border-radius:10px;margin:10px 0;font-size:.88rem}

/* modal */
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-l)}
.modal-header, .modal-footer{border-color:var(--border)}
.modal-title{font-weight:700}

/* toast */
.toast{position:fixed;top:18px;right:18px;z-index:3000;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 18px;box-shadow:var(--shadow-l);font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:9px}
.toast::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green)}
.toast.b-red::before{background:var(--red)}.toast.b-amber::before{background:var(--amber)}.toast.b-blue::before{background:var(--blue)}

/* ===== Bootstrap theme overrides (text always matches theme) ===== */
body{color:var(--text)}
.modal-content,.modal-header,.modal-footer{color:var(--text);background:var(--surface);border-color:var(--border)}
.modal-title{color:var(--text)}
.form-control,.form-select{color:var(--text);background-color:var(--surface);border-color:var(--border2)}
.form-control:focus,.form-select:focus{color:var(--text);background-color:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.form-control::placeholder{color:var(--faint)}
.form-check-input{background-color:var(--surface2);border-color:var(--border2)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-label{color:var(--muted)}
.table{--bs-table-color:var(--text);--bs-table-bg:transparent;color:var(--text)}
.table thead th{color:var(--muted);background:var(--surface2)}
.table tbody td{color:var(--text)}
.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:var(--surface2)}
.list-group-item{background:var(--surface2);color:var(--text);border-color:var(--border)}
.dropdown-menu{background:var(--surface);border-color:var(--border)}
.dropdown-item{color:var(--muted)}
.dropdown-item:hover{background:var(--surface2);color:var(--text)}
.btn-close{filter:invert(1)}
.text-muted,.btn-close{color:var(--muted)!important}
.alert{background:var(--surface2);color:var(--text);border-color:var(--border)}
.alert-danger{background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red)}
.alert-info{background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue)}
.alert-success{background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--green)}
.badge{color:var(--text)}
.progress{background:var(--surface2)}
.progress-bar{background:var(--grad)}

/* Bootstrap'in en genişi 1140px'te duruyor; içinde tablo taşıyan modaller
   (tanımın defter politikası gibi) o genişlikte sütunları sıkıştırıyordu. */
.modal-dialog.modal-xxl{max-width:min(1400px,96vw)}

/* ===== Glassmorphism (frosted) ===== */
.card{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme='dark'] .card{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.sidebar{background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(14px)}

/* ===== Bento grid (dashboard / screens) ===== */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento>.b2{grid-column:span 2}.bento>.b3{grid-column:span 3}.bento>.b4{grid-column:span 4}
.bento>.b6{grid-column:span 6}.bento>.b8{grid-column:span 8}.bento>.b12{grid-column:span 12}
@media(max-width:900px){.bento>*{grid-column:span 12!important}}
.bento .card{display:flex;flex-direction:column}
.bento .card .head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bento .card .head .t{font-weight:700}
.bento .card .head .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem}

/* action button row + colored buttons */
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn-blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--border))}
.btn-green{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--border))}
.btn-amber{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--border))}
.btn-violet{color:var(--primary2);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.btn-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--border))}
.btn-blue:hover{background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue);border-color:var(--blue)}
.btn-green:hover{background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--green);border-color:var(--green)}
.btn-amber:hover{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);border-color:var(--amber)}
.btn-violet:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary2);border-color:var(--primary)}
.btn-red:hover{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);border-color:var(--red)}
/* asset summary cards */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.summary .card{padding:13px;display:flex;gap:10px;align-items:center}
.summary .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.summary .l{color:var(--muted);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.summary .v{font-weight:800;font-size:1.05rem}
/* Bootstrap .row �akismasini gider (negatif margin/stretch) */
.row,.toolbar{--bs-gutter-x:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row>*,.toolbar>*{flex:0 0 auto}
.search-box{flex:1 1 200px;min-width:180px;max-width:340px}
/* sol filtre paneli */
.filters{display:flex;flex-direction:column;gap:14px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:16px;align-self:start;position:sticky;top:80px}
.filters .group h6{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px}
.filters .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border2);border-radius:999px;font-size:.8rem;cursor:pointer;margin:3px;color:var(--muted);transition:.15s}
.filters .chip:hover{border-color:var(--primary);color:var(--primary)}
.filters .chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.list-layout{display:grid;grid-template-columns:230px 1fr;gap:18px}
@media(max-width:900px){.list-layout{grid-template-columns:1fr}}
/* sayfalama: < 1/2 > */
.pager{display:inline-flex;align-items:center;gap:4px}
.pager .btn{padding:6px 10px;min-width:34px;justify-content:center}
.pager .pg{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;font-weight:700;font-size:.85rem}
/* column chooser */
.hide{display:none!important}
.colchooser{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-l);padding:8px;z-index:1100;min-width:190px}
.colchooser label{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:.85rem;cursor:pointer;border-radius:8px}
.colchooser label:hover{background:var(--surface2)}
.rel{position:relative}
/* grouped form panels */
.form-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.form-groups{grid-template-columns:1fr}}
.form-panel{border:1px solid var(--border);border-radius:12px;padding:14px;background:color-mix(in srgb,var(--surface2) 40%,transparent)}
.form-panel h6{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary2);margin:0 0 12px}
.fp-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.fp-fields{grid-template-columns:1fr}}
.fp-fields .field{margin:0}
.fp-fields .field:nth-last-child(1):nth-child(odd){grid-column:1/-1}

/* Right-aligned numeric cells for ledger tables. */
.num{text-align:right}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   Mobil / tablet düzeni.

   Saha sayımı telefonda kullanılır; masaüstü için tasarlanan sabit kenar çubuğu
   dar ekranda tüm alanı kaplıyordu. Kenar çubuğu artık ekran dışına kayar ve
   üst çubuktaki ☰ düğmesiyle açılır.
--------------------------------------------------------------------------- */
.nav-toggle{display:none}

@media(max-width:860px){
  .shell{display:block}

  .sidebar{
    position:fixed;top:0;left:0;z-index:60;
    width:min(84vw,300px);height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.45);
  }
  .sidebar.open{transform:translateX(0)}

  /* Menü açıkken arkadaki içeriğe dokunuşları yakalayan katman. */
  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}

  .main{padding:12px 14px}
  .topbar{gap:8px;padding:10px 12px;top:6px;flex-wrap:nowrap}
  .topbar .crumb{font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .search-box{display:none}          /* aramaya alt menüden ulaşılır */
  .topbar select.input{padding:8px 6px;font-size:.8rem}

  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex:0 0 auto;border-radius:11px;
    background:var(--surface2);border:1px solid var(--border);color:var(--text);
    font-size:1.1rem;cursor:pointer;
  }

  /* Yan yana duran kart ızgaraları tek sütuna iner. */
  .grid-2,.list-layout,.summary{grid-template-columns:1fr!important;display:grid}
  .card{padding:14px}
  .tabs{gap:2px}
  .tabs button{padding:10px 11px;font-size:.82rem}

  /* Dokunmatik hedefler ve okunabilirlik. */
  .input,.btn{min-height:42px}
  table.grid th,table.grid td{padding:9px 8px;font-size:.84rem}
}

@media(max-width:520px){
  .topbar .btn.danger{padding:8px 10px}
  h3{font-size:1.15rem}
}

/* Ekran klavyesi açıkken kamera görüntüsü ekranı taşırmasın. */
@media(max-height:520px){
  #aud-video{max-height:38dvh}
}

/* ---------------------------------------------------------------------------
   Standart liste ekranı (dataList).

   Her liste aynı iskeleti kullanır: üstte solda yeni kayıt düğmesi, sağda
   arama; altta solda kaskad filtreler, sağda tablo.
--------------------------------------------------------------------------- */
.dl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dl-toolbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.dl-toolbar-right{display:flex;align-items:center;gap:10px}
.dl-title{margin:0;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dl-search{position:relative;display:flex;align-items:center}
.dl-search .s-ic{position:absolute;left:11px;font-size:.85rem;opacity:.65;pointer-events:none}
.dl-search input{
  width:280px;max-width:100%;padding:10px 12px 10px 32px;
  background:var(--surface2);border:1px solid var(--border);border-radius:11px;
  color:var(--text);font-family:var(--font);font-size:.88rem;
}
.dl-search input:focus{outline:none;border-color:var(--primary)}

/* Seçili filtreler */
.dl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dl-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);font-size:.78rem;color:var(--text);
}
.dl-chip a{color:var(--muted);text-decoration:none;font-weight:700;line-height:1}
.dl-chip a:hover{color:var(--red)}
.dl-chip-clear{align-self:center;font-size:.78rem;margin-left:4px}

.dl-layout{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.dl-main{min-width:0}

/* Kaskad filtre paneli */
.dl-facets{display:flex;flex-direction:column;gap:14px;position:sticky;top:80px}
.dl-facet{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:10px 12px}
.dl-facet-h{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dl-facet-opt{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;font-size:.84rem;border-radius:7px}
.dl-facet-opt:hover{background:var(--surface2)}
.dl-facet-opt.active{color:var(--primary);font-weight:600}
.dl-facet-opt.empty{opacity:.45}
.dl-facet-opt input{accent-color:var(--primary);flex:0 0 auto}
.dl-facet-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-facet-c{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Varlık tanımı kartı: form satırları. Alanların hangi satırda kaç sütun
   olacağını ekran söyler; dar ekranda hepsi alt alta iner. */
.dc-row{display:grid;gap:14px;margin-bottom:14px}
.dc-row:last-child{margin-bottom:0}
.dc-row.c1{grid-template-columns:1fr}
.dc-row.c2{grid-template-columns:1fr 1fr}
.dc-row.c3{grid-template-columns:1fr 1fr 1fr}
.dc-row.c4{grid-template-columns:1fr 1fr 1fr 1fr}
.dc-row.c5{grid-template-columns:repeat(5,1fr)}
.dc-row .field{margin:0}
.dc-form .form-panel{margin-bottom:14px}
@media(max-width:860px){
  .dc-row.c2,.dc-row.c3,.dc-row.c4,.dc-row.c5,.dc-row.cw{grid-template-columns:1fr!important}
}

/* Süzgeç paneli aç/kapa: panel kendi sütununda kalır, düğme her zaman görünür.
   Kapalıyken sütun ince bir şeride iner ve tablo boşalan yeri kaplar. */
.dl-side{display:flex;flex-direction:column;gap:8px;min-width:0;position:sticky;top:80px}
.dl-side>.dl-facets,.dl-side>.filters{position:static;top:auto}
.flt-toggle{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.flt-toggle:hover{border-color:var(--primary);color:var(--primary)}
.flt-toggle .flt-ic{flex:0 0 auto}
.flt-toggle .flt-chev{color:var(--muted);font-weight:700}
.filters-off .flt-toggle{gap:2px;padding-left:0;padding-right:0}
.dl-layout.filters-off,.list-layout.filters-off{grid-template-columns:46px 1fr}
.filters-off .dl-side>.dl-facets,.filters-off .dl-side>.filters{display:none}
.filters-off .flt-toggle{padding-left:0;padding-right:0}

/* Satır ve aksiyonlar */
tr.dl-row{cursor:pointer}
tr.dl-row:hover{background:var(--surface2)}
.dl-actions{display:flex;gap:6px;white-space:nowrap;justify-content:flex-end}
/* Bir hücre çok sayıda etiket taşıyorsa (izin listesi gibi) tablo onu iğne
   inceliğinde bir sütuna sıkıştırmasın; etiketler yan yana aksın. */
.dl-wide{min-width:320px}
.dl-name{min-width:190px}
.dl-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:2px}

/* Sağ alttaki yardım düğmesi sabit duruyor: sayfalama okları onun altında
   kalıyordu. Sayfalama, düğmenin genişliği kadar içeri çekilir. */
.dl-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  flex-wrap:wrap;padding-right:64px}
.dl-pager .pager,.card>.row>.pager{margin-right:0}
/* Sayfalamayı kendi satırında taşıyan eski ekranlar (gelen kutusu gibi). */
.card .row>.pager{margin-right:56px}
.dl-blocks{margin:10px 0 0;padding-left:20px}
.dl-blocks li{margin-bottom:4px}

/* Sabit kıymet türü seçici: açılır liste tablo düzeninde (kod, tür, ömür,
   oran). Düz bir <select> bu dört bilgiyi tek satıra sıkıştıramıyordu. */
.cls-picker{position:relative}
.cls-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  text-align:left;cursor:pointer}
.cls-trigger[disabled]{cursor:not-allowed;opacity:.7}
.cls-caret{color:var(--muted);flex:0 0 auto}
#cls-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Panel alanın kendisinden geniştir: dört sütun 230px'lik bir forma
   sığmıyor, tür adı sıfır genişliğe iniyordu. */
.cls-panel{position:absolute;z-index:30;left:0;right:auto;top:calc(100% + 4px);
  width:max(100%,540px);max-width:min(680px,86vw);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:6px}
.cls-head,.cls-row{display:grid;grid-template-columns:96px 1fr 104px 92px;gap:8px;align-items:center}
.cls-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:0 8px 6px;border-bottom:1px solid var(--border)}
.cls-rows{max-height:300px;overflow-y:auto}
.cls-row{padding:6px 8px;border-radius:7px;cursor:pointer;font-size:.84rem}
.cls-row:hover{background:var(--surface2)}
.cls-row.on{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.cls-row .num{text-align:right;font-variant-numeric:tabular-nums}
.cls-head .num{text-align:right}
.cls-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls-empty{padding:10px 8px;color:var(--muted);font-size:.84rem}

@media(max-width:860px){
  .dl-layout{grid-template-columns:1fr}
  /* Kapalı süzgeç dar ekranda tek satırlık bir düğmeye iner. */
  .dl-layout.filters-off,.list-layout.filters-off{grid-template-columns:1fr}
  .cls-head,.cls-row{grid-template-columns:70px 1fr 76px 68px;gap:6px}
  /* Filtreler mobilde yatay kayan bir şerit olur; tablo ana alanı kaplar. */
  .dl-facets{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .dl-facet{min-width:190px;flex:0 0 auto}
  .dl-toolbar{align-items:stretch}
  .dl-toolbar-left,.dl-toolbar-right{width:100%}
  .dl-search{flex:1}
  .dl-search input{width:100%}
  .dl-title{order:-1}
}

/* Varlık belgeleri: ad solda, tür ve indirme sağda; uzun adlar taşmadan kırpılır. */
.doc-list{margin:0;padding:0;list-style:none}
.doc-list li{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border)}
.doc-list li:last-child{border-bottom:none}
.doc-list .doc-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(48ch,60%)}
input[type=file].input{padding:8px 10px;cursor:pointer}

/* İş emri / kapsam kartları */
.wo-card{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface)}

/* Özel alanlar ızgarası */
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}

/* Transfer için konum ağacı — dosya gezgini gibi */
.loc-tree{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--surface2)}
.loc-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;transition:.12s}
.loc-row:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.loc-row.current{outline:1px dashed var(--border2)}
.loc-row.picked{background:color-mix(in srgb,var(--primary) 16%,transparent)}
.loc-caret{width:16px;text-align:center;cursor:pointer;color:var(--muted);user-select:none;flex:0 0 auto}
.loc-caret.leaf{cursor:default;opacity:.45}
.loc-pick{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:0}
.loc-kind{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);flex:0 0 auto}
.loc-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-kids{margin-left:16px;border-left:1px solid var(--border);padding-left:6px}

/* Modal içi hata kutusu — sunucu doğrulama mesajları formun içinde kalır */
.fm-error{margin-top:14px;border:1px solid color-mix(in srgb,var(--red) 45%,var(--border));
  background:color-mix(in srgb,var(--red) 10%,transparent);border-radius:12px;padding:11px 14px}
.fm-error-title{font-weight:700;color:var(--red);font-size:.9rem}
.fm-error-list{margin:7px 0 0;padding-left:18px;font-size:.85rem;color:var(--text)}
.fm-error-list li{margin-bottom:3px}

/* Modal başlık çubuğu: solda form adı, ortada kaydı tanımlayan başlık, sağda
   Kaydet/Vazgeç. Ortadaki yazı `min-width:0` olmadan kısalmaz — flex çocuk
   varsayılan olarak içeriğinden küçülmez ve uzun bir birim adı düğmeleri
   çubuğun dışına itiyordu. */
.fm-head{display:flex;align-items:center;gap:12px}
.fm-head .modal-title{flex:0 0 auto;margin:0}
.fm-caption{flex:1 1 auto;min-width:0;text-align:center;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-head-btns{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.fm-head-btns .btn-close{margin:0}

/* Alt çubuk: solda oluşturan, sağda değiştiren. */
.fm-stamp{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.78rem;color:var(--muted)}
.fm-stamp-cell{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-stamp-r{text-align:right}
.fm-stamp-label{font-weight:600;color:var(--text)}

/* Arşiv düğmesi: basılı olduğu görülmeli, yoksa kullanıcı "kayıtlar nereye
   gitti" diye arıyor. */
.btn.dl-archive{font-size:.8rem;padding:6px 10px}
.btn.dl-archive.on{background:color-mix(in srgb,var(--amber) 18%,transparent);
  border-color:color-mix(in srgb,var(--amber) 55%,var(--border2));color:var(--amber);font-weight:600}

/* Birim operasyonları sekmesi: durum, sayılar ve kapanış kaydı. */
.ou-ops{display:flex;flex-direction:column;gap:12px;max-width:760px}
.ou-ops-head{display:flex;align-items:center;gap:10px}
.ou-ops-counts{display:flex;flex-wrap:wrap;gap:8px}
.ou-ops-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ou-ops-label{flex:0 0 160px;font-weight:600;color:var(--muted);font-size:.85rem}
.ou-ops-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Tarihçe penceresi: kayıt başına bir blok, içinde değişen alanlar tablosu. */
.rh-list{display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow:auto}
.rh-item{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.rh-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rh-when{font-size:.82rem;color:var(--muted)}
.rh-who{font-weight:600}
.rh-meta{margin:4px 0 8px;word-break:break-all}
.rh-table{width:100%;border-collapse:collapse;font-size:.82rem}
.rh-table th,.rh-table td{border-bottom:1px solid var(--border);padding:4px 6px;text-align:left;
  vertical-align:top;word-break:break-word}
.rh-old{color:var(--muted);text-decoration:line-through}
.rh-new{color:var(--text);font-weight:600}

/* Değiştir düğmesi: kalem ikonlu, mavi tonlu */
.btn.edit{background:color-mix(in srgb,var(--blue) 12%,transparent);border-color:color-mix(in srgb,var(--blue) 40%,var(--border2));color:var(--blue)}
.btn.edit:hover{background:color-mix(in srgb,var(--blue) 20%,transparent);border-color:var(--blue);color:var(--blue)}

/* Renk gösterimi ve paleti */
.color-cell{display:inline-flex;align-items:center;gap:8px}
.color-dot{width:15px;height:15px;border-radius:5px;border:1px solid var(--border2);flex:0 0 auto}
.color-swatches{display:flex;flex-wrap:wrap;gap:7px}
.color-swatch{width:30px;height:30px;border-radius:9px;border:2px solid var(--border2);cursor:pointer;padding:0;transition:.14s}
.color-swatch:hover{transform:scale(1.1);border-color:var(--primary)}
.color-swatch.on{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.color-native{width:46px;height:42px;padding:3px;border:1px solid var(--border2);border-radius:11px;background:var(--surface);cursor:pointer;flex:0 0 auto}

/* Aralık dışına çıkan sayısal alan */
.input.invalid{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}

/* Kart formu: rol onay kutuları */
.pf-roles{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.pf-check{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.pf-check input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}

/* İş emri: tarih çifti yan yana, garanti uyarısı renkli */
.wo-dates{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.wo-warranty{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.wo-warranty .pf-check input{width:16px;height:16px;accent-color:var(--primary)}
.wo-warn{flex-basis:100%;font-size:.85rem;font-weight:600;padding:8px 11px;border-radius:9px;margin-top:2px}
.wo-warn.ok{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.wo-warn.warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent)}
.wo-warn.bad{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.wo-warn.none{color:var(--muted);background:transparent;font-weight:500}

/* Konum ağacı — Site › Bina › Kat › Oda */
.lt-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;transition:.12s;flex-wrap:wrap}
.lt-row:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.lt-caret{width:16px;text-align:center;cursor:pointer;color:var(--muted);user-select:none;flex:0 0 auto}
.lt-caret.leaf{cursor:default;opacity:.4}
.lt-icon{flex:0 0 auto}
.lt-name{font-weight:600}
.lt-kind{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.lt-kids{margin-left:18px;border-left:1px solid var(--border);padding-left:8px}
.lt-actions{display:flex;gap:6px;opacity:0;transition:.12s}
.lt-row:hover .lt-actions{opacity:1}
@media(max-width:720px){.lt-actions{opacity:1}}

/* VUK faydalı ömür ağacı: sağdaki sütunlar sabit genişlikte ve satırın sağ
   kenarına dayalı, böylece ömür/oran/tebliğ bütün derinliklerde aynı hizada
   kalır. Satır sarmaz: sarınca alt satıra düşen hücre hizayı bozuyordu. */
.ult-row{flex-wrap:nowrap}
.ult-row .ult-code{flex:0 0 84px}
.ult-row .ult-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ult-row .ult-life{flex:0 0 84px;text-align:right}
.ult-row .ult-rate{flex:0 0 72px;text-align:right}
.ult-row .ult-circ{flex:0 0 44px;text-align:right}
.ult-row .lt-actions{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){
  .ult-row{flex-wrap:wrap}
  .ult-row .ult-name{flex:1 1 100%}
}

/* Özel alan tanımı silme bağlantısı */
.cf-del{float:right;color:var(--red);font-weight:700;text-decoration:none;padding:0 5px;opacity:.6}
.cf-del:hover{opacity:1;color:var(--red)}

/* Kart formu: şube/departman alt alta, sekmeli listeler ve satır detayı */
.pf-stack{display:grid;grid-template-columns:1fr;gap:12px}
.pf-stack .field{margin:0}
.pt-pane{max-height:52vh;overflow:auto}
/* Özlük sekmesi: kapalı (pasif) alan görünür biçimde soluklaşır, yoksa
   kullanıcı yazdığını sanıp kaydediyordu. */
.pd-pane .input:disabled{opacity:.45;cursor:not-allowed}
.pd-pane .fp-fields{margin-bottom:10px}
/* Kurum kartı listesinde fotoğraf yoktur; yerine tür simgesi durur. */
.org-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--surface-2,#eef2ff);font-size:15px}
.pt-pane .grid th{position:sticky;top:0;z-index:1;background:var(--surface)}
.rec-detail{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;margin:0}
.rec-detail dt{font-size:.78rem;color:var(--muted);font-weight:600}
.rec-detail dd{margin:0;font-size:.9rem}

/* Varlık kartı: başlıktaki karekod, defter alt sekmeleri, ekleme düğmesi */
.asset-qr{background:#fff;padding:6px;border-radius:10px;line-height:0;flex:0 0 auto}
.asset-qr img,.asset-qr canvas{display:block;width:50px;height:50px}
.tabs.sub{border-bottom:none;margin-bottom:0;gap:2px}
.tabs.sub button{padding:7px 13px;font-size:.82rem;border:1px solid var(--border);
  border-radius:9px 9px 0 0;border-bottom-color:transparent;background:var(--surface2)}
.tabs.sub button.active{background:var(--surface);color:var(--primary);border-color:var(--primary)}
a.doc-name{color:var(--blue);text-decoration:none;cursor:pointer}
a.doc-name:hover{text-decoration:underline}

/* Bootstrap'in `.row>*{width:100%}` kuralı bizim satırlarımızı da alt alta
   diziyordu (varlık kartı başlığı + karekod). Bizim `.row` bir flex satırı:
   çocuklar içeriği kadar yer kaplar. */
.row>*,.toolbar>*{flex:0 0 auto;width:auto}

/* Özet kartı: ikon solda, etiket sağında, değer etiketin altında. Genel
   `.card` kuralı sütuna çeviriyordu. */
.summary .card{flex-direction:row;align-items:center;text-align:left}
.summary .card>div:last-child{min-width:0}

/* Ekleme düğmeleri tek renkte: hangi sekmede olursa olsun aynı işi yapıyorlar,
   bu yüzden hepsi aynı mavi dolgulu görünümü paylaşır. */
.btn.add{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;
  box-shadow:0 4px 14px color-mix(in srgb,var(--blue) 32%,transparent)}
.btn.add:hover{color:#fff;filter:brightness(1.08)}

/* Sekmeli modal formda gövde yüksekliği sabit: sekme değiştirmek pencerenin
   boyunu değiştirmemeli, yoksa kaydet düğmesi her tıklamada yer değiştirir. */
.fm-tabbed{margin-top:12px;height:56vh;overflow:auto}
.fm-tabbed .pt-pane{max-height:none;overflow:visible}

/* Tutar alanı: para birimi sembolü kutunun içinde sağda durur. */
.input-money{position:relative;display:block}
.input-money .input{padding-right:44px;width:100%}
.input-money .cur{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-weight:700;pointer-events:none}
/* Dosya alanında hâlihazırda bağlı olan dosya */
.fm-current{margin-bottom:6px}

/* Üst çubuk ile içerik arasındaki boşluk kartların kendi kenar boşluğundan
   geliyor; çubuğun ayrıca alt boşluğu olması araya iki boşluk koyuyordu. */
.main > .topbar{margin-bottom:0}
/* İçerik kartları biraz daha derli toplu. */
.main > #view .card{padding:14px}

/* Varlık tarihçesi: tek sütunlu zaman çizelgesi */
.timeline{list-style:none;margin:0;padding:0 0 0 6px;position:relative}
.timeline:before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{display:flex;gap:12px;padding:8px 0;position:relative}
.tl-dot{flex:0 0 28px;height:28px;border-radius:50%;background:var(--surface2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:.82rem;z-index:1}
.tl-body{flex:1;min-width:0}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-custody .tl-dot{border-color:color-mix(in srgb,var(--blue) 50%,var(--border))}
.tl-maintenance .tl-dot{border-color:color-mix(in srgb,var(--amber) 50%,var(--border))}
.tl-coverage .tl-dot{border-color:color-mix(in srgb,var(--green) 50%,var(--border))}
.tl-document .tl-dot{border-color:color-mix(in srgb,var(--violet) 50%,var(--border))}

/* Tarihçe satırında fare vurgusu — denetim kayıtlarındaki gibi. */
.tl-item{border-radius:10px;padding-left:6px;padding-right:6px;transition:background .12s}
.tl-item:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.tl-item:hover .tl-dot{border-color:var(--primary)}

/* Giriş ekranı markası: logo ve ad yan yana, tek blok olarak okunur. */
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.auth-brand .auth-logo{margin-bottom:0;flex:0 0 auto}
.auth-logo-img{width:50px;height:50px;border-radius:14px;object-fit:cover;flex:0 0 auto;
  background:var(--surface2);box-shadow:0 6px 18px rgba(99,102,241,.25)}
.auth-name{margin:0;font-weight:800;letter-spacing:-.01em}

/* Giriş düğmesi yazısı ortada. */
.btn.lg-submit{justify-content:center;text-align:center}

/* Parolamı unuttum solda, yeni hesap sağda — aynı satırda. */
.lg-links{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;font-size:.82rem}
.lg-links a{color:var(--muted);text-decoration:none}
.lg-links a:hover{color:var(--primary);text-decoration:underline}
.brand .logo-img{width:36px;height:36px;border-radius:11px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 4px 12px rgba(99,102,241,.4)}

/* ===== Etiketler ===== */
.tag-list{display:inline-flex;flex-wrap:wrap;gap:4px}
.tag-chip{--tag:#6366f1;display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px;border-radius:999px;
  font-size:.76rem;font-weight:600;line-height:1.5;white-space:nowrap;color:var(--text);
  background:color-mix(in srgb,var(--tag) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--tag) 38%,transparent)}
.tag-chip .tag-name{overflow:hidden;text-overflow:ellipsis}
.tag-dot{--tag:#6366f1;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tag);flex:none}
.tag-chip.click{cursor:pointer}
.tag-chip.click:hover{border-color:var(--tag);box-shadow:0 0 0 2px color-mix(in srgb,var(--tag) 22%,transparent)}
.tag-chip.inherited{background:transparent;border-style:dashed;color:var(--muted)}
.tag-chip.is-new{border-style:dashed}
.tag-chip.armed{background:color-mix(in srgb,var(--tag) 35%,var(--surface));box-shadow:0 0 0 2px var(--tag)}
.tag-chip.flash{animation:tagflash .6s ease 2}
@keyframes tagflash{50%{box-shadow:0 0 0 3px var(--tag)}}
.tag-x{border:none;background:none;padding:0 0 0 2px;margin:0;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer}
.tag-x:hover{color:var(--red)}
.tag-input{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:42px;padding:6px 8px;
  border:1px solid var(--border2);border-radius:11px;background:var(--surface);cursor:text;transition:border-color .15s,box-shadow .15s}
.tag-input.focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.tag-entry{flex:1;min-width:160px;border:none;outline:none;background:transparent;color:var(--text);font:inherit;padding:3px 2px}
.tag-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1080;max-height:280px;overflow:auto;
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--shadow-l);padding:4px}
.ts-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.86rem}
.ts-item .ts-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-item .ts-count{font-size:.72rem;color:var(--muted);background:var(--surface2);border-radius:999px;padding:0 7px}
.ts-item.hi,.ts-item:hover{background:var(--surface2)}
.ts-item.ts-new{color:var(--primary);font-weight:600}
.ts-hint{padding:6px 10px 4px;font-size:.74rem;color:var(--faint);border-top:1px solid var(--border);margin-top:4px}
.tag-colors{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tag-swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.tag-swatch.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
/* Yayımla penceresi: rapor düğmesinin simgesi (yalnızca emoji). */
.rd-icons{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:start}
.rd-icon-preview{grid-row:span 2;width:56px;height:56px;display:grid;place-items:center;font-size:1.9rem;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.rd-icon-grid{display:flex;flex-wrap:wrap;gap:4px}
.rd-icon-opt{width:34px;height:34px;border-radius:8px;border:2px solid transparent;background:transparent;
  font-size:1.15rem;line-height:1;cursor:pointer;padding:0}
.rd-icon-opt:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.rd-icon-opt.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent)}
.rd-icon-own{display:flex;align-items:center;gap:8px;margin:0}
.rd-icon-own .input{width:90px;text-align:center}
.rd-icon-own .input.invalid{border-color:var(--red,#ef4444)}
.tag-native{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:.9rem}
.tag-native input{width:30px;height:28px;padding:0;border:1px solid var(--border2);border-radius:8px;background:none;cursor:pointer}
.tag-colors .btn.on{border-color:var(--primary);color:var(--primary)}

/* ===== Kontrol paneli: etiket grafikleri ===== */
.dash-section{margin-top:24px}
.dash-section-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:var(--shadow)}
.dash-section-h h3{font-size:1.05rem}
.dash-empty{flex-direction:row!important;align-items:center;gap:16px}
.dash-empty-ic{font-size:2rem}
.dchart{min-width:0}
.dchart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dchart-title .t{font-weight:700}
.dchart-types{display:inline-flex;gap:2px;padding:3px;background:var(--surface2);border-radius:10px}
.dct{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:7px;
  background:transparent;color:var(--muted);cursor:pointer;padding:0}
.dct svg{width:16px;height:16px;fill:currentColor;stroke:currentColor}
.dct:hover{color:var(--primary)}
.dct.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}
.dchart-body{flex:1;min-height:240px;display:flex;align-items:center;justify-content:center}
.dchart-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--border)}
.dchart-menu{display:inline-flex;gap:4px}
.dchart-empty{color:var(--muted);font-size:.86rem;text-align:center;padding:30px 10px}
.tchart{width:100%;height:auto;max-height:300px;color:var(--text)}
.tchart .cg-grid{stroke:var(--border);stroke-width:1}
.tchart .cg-base{stroke:var(--border2);stroke-width:1.2}
.tchart .cg-axis,.tpie-svg .cg-axis{fill:var(--muted);font-size:11px}
.tchart .cg-lbl{fill:var(--text);font-size:11.5px}
.tchart .cg-val{fill:var(--muted);font-size:10.5px;font-weight:600}
.tchart .cg-line{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linejoin:round}
.tchart .cg-area{fill:color-mix(in srgb,var(--primary) 16%,transparent)}
.tchart .cg-dot{stroke:var(--surface);stroke-width:2}
.tchart rect:hover,.tpie-svg .cg-slice:hover{filter:brightness(1.08)}
.thbar{width:100%;display:flex;flex-direction:column;gap:9px}
.thbar-row{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;align-items:center;gap:10px;font-size:.84rem}
.thbar-l{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.thbar-track{height:14px;background:var(--surface2);border-radius:7px;overflow:hidden}
.thbar-track>i{display:block;height:100%;border-radius:7px;transition:width .5s}
.thbar-v{min-width:56px;text-align:right}
.tpie{width:100%;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.tpie-svg{width:200px;max-width:52%;height:auto;flex:none}
.tpie-svg .cg-slice{stroke:var(--surface);stroke-width:1.5}
.tpie-svg .cg-hole{fill:var(--surface)}
.tpie-svg .cg-total{fill:var(--text);font-size:19px;font-weight:800}
.tpie-legend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:6px}
.tpie-li{display:grid;grid-template-columns:auto 1fr auto 38px;align-items:center;gap:7px;font-size:.84rem}
.tpie-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tpie-li .muted{text-align:right}

/* ===== Sol menü: açılır/kapanır gruplar (dosya gezgini gibi) ===== */
.sidebar .nav-sec{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;
  cursor:pointer;font-family:var(--font);text-align:left;border-radius:8px;transition:color .15s,background .15s}
.sidebar .nav-sec:hover{color:var(--text);background:var(--surface2)}
.sidebar .nav-sec:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.nav-caret{font-size:.7rem;transition:transform .2s ease}
.nav-grp.open .nav-caret{transform:rotate(90deg)}
.nav-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.nav-items>div{overflow:hidden;min-height:0;margin:0 -8px;padding:0 8px}
.nav-grp.open .nav-items>div{padding-bottom:6px}
.nav-grp.open .nav-items{grid-template-rows:1fr}
/* Menü listesi kendi içinde kayar; marka üstte, kullanıcı kartı (.foot) altta
   sabit kalır. Eskiden bütün kenar çubuğu kayıyor, kullanıcı kartı gözden
   kayboluyordu. */
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -6px;padding:0 6px;
  scrollbar-width:thin;scrollbar-gutter:stable}
.sidebar .brand,.sidebar .foot{flex-shrink:0}
/* Gruplar saydam değil: her grup kendi zemininde, başlığı bir ton koyu. */
.nav-grp{background:color-mix(in srgb,var(--surface2) 70%,transparent);border:1px solid var(--border);
  border-radius:12px;margin-bottom:6px;padding:0 6px}
.sidebar .nav-sec{background:color-mix(in srgb,var(--primary) 9%,var(--surface3));color:var(--muted);
  margin:4px 0;padding:9px 10px}
.nav-grp.open{background:color-mix(in srgb,var(--primary) 5%,var(--surface2))}
.nav-grp.open>.nav-sec{background:color-mix(in srgb,var(--primary) 18%,var(--surface3));color:var(--text)}
.sidebar .nav-sec:hover{background:color-mix(in srgb,var(--primary) 22%,var(--surface3));color:var(--text)}
@media (prefers-reduced-motion:reduce){.nav-items,.nav-caret{transition:none}}

/* ===== Liste: sayfa boyutu seçici ve 25 satırlık kaydırma alanı ===== */
.pg-size{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.pg-size select.input{width:auto;min-width:74px;padding:5px 8px;font-size:.84rem;height:auto}
/* Yükseklik JS'te gerçek satırlardan ölçülür (--list-h); ölçülemezse yaklaşık 25 satır. */
.table-wrap.list-scroll{max-height:var(--list-h,calc(25 * 46px + 42px));overflow:auto}
.table-wrap.list-scroll thead th{position:sticky;top:0;z-index:2}

/* ===== Form onay kutusu alanı ===== */
.fm-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;margin:0}
.fm-check input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}

/* ===== Organizasyon birimleri: görünüm seçici, ağaç simgesi, şema ===== */
.ou-views{display:inline-flex;gap:2px;padding:3px;margin-bottom:0;margin-right:4px;flex:0 0 auto;background:var(--surface2);border:1px solid var(--border);border-radius:11px}
.ou-views button{border:0;background:none;padding:7px 14px;border-radius:8px;font:inherit;font-weight:600;font-size:.84rem;color:var(--muted);cursor:pointer}
.ou-views button:hover{color:var(--text)}
.ou-views button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.ou-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:.8rem;flex:0 0 auto;
  background:color-mix(in srgb,var(--ou) 14%,transparent);color:var(--ou)}
/* Şirket şeridi: görünüm seçiciyle aynı düğme dili, ama seçili şirket vurgulu.
   Kendi üst satırında durur — araç çubuğuna sıkışınca uzun şirket adları
   düğmeleri ikinci satıra itiyordu. */
.ou-company-row{margin-bottom:10px}
.ou-company-row:empty{display:none}
.ou-companies{flex-wrap:wrap;max-width:min(52vw,640px)}
/* Seçili şirket belirgin olsun: görünüm seçicinin soluk "on" tonu şeritte
   hangi şirketin açık olduğunu okutmuyordu. */
.ou-companies button.on{background:var(--primary);color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 45%,transparent)}
.ou-companies button.on:hover{color:#fff}
/* Pasif birim: silinmedi, kullanımda değil — ağaçta ve şemada soluk durur. */
.lt-row.ou-passive,.oc-node.ou-passive{opacity:.62}
.oc-node.ou-passive{border-style:dashed}
.ou-parent-info{gap:8px;align-items:center;flex-wrap:wrap}
/* "Bağlı Olduğu": şirketten birime kadar bütün zincir, kırılarak sarar. */
.ou-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ou-chain-sep{color:var(--faint);font-weight:700}
/* Birim türü formunda "izin verilen üst türler": çok seçimli kutucuk ızgarası.
   Kullanımdaki türde kilitli (hiyerarşideki yeri değiştirilemez). */
.ut-parents{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 12px;margin-bottom:6px}
.ut-parent{display:flex;align-items:center;gap:7px;font-size:.88rem;cursor:pointer}
.ut-parent input{width:16px;height:16px;accent-color:var(--primary)}
.ut-parents.locked{opacity:.6}
.ut-parents.locked .ut-parent{cursor:not-allowed}
/* Oda kutusundaki iki düğme (personel / varlık) yan yana sığsın. */
.lc-room-btns{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
/* Oda penceresindeki ekleme satırı listenin altında durur. */
.lc-room-add{align-items:flex-end;gap:10px;margin-top:12px}
.lc-people-list .lc-person .btn{margin-left:auto}

.oc-zoom{display:inline-flex;align-items:center;gap:4px}
.oc-zoom-v{min-width:58px;justify-content:center;font-variant-numeric:tabular-nums}
.oc-viewport{position:relative;overflow:auto;height:calc(100vh - 290px);min-height:420px;background:
  radial-gradient(circle,color-mix(in srgb,var(--muted) 22%,transparent) 1px,transparent 1.2px) 0 0/18px 18px,var(--surface);
  border:1px solid var(--border);border-radius:14px;cursor:grab;user-select:none;touch-action:none}
.oc-viewport.dragging{cursor:grabbing}
.oc-viewport:fullscreen{height:100vh;border-radius:0}
.oc-canvas{display:inline-block;min-width:100%;padding:28px 24px 40px;box-sizing:border-box}

/* Yukarıdan aşağı şema: bağlantı çizgileri li'nin ::before/::after'ından çizilir. */
.oc-tree,.oc-tree ul{display:flex;justify-content:center;list-style:none;margin:0;padding:0}
.oc-tree ul{padding-top:24px;position:relative}
.oc-tree li{display:flex;flex-direction:column;align-items:center;position:relative;padding:24px 10px 0}
.oc-tree>li{padding-top:0}
.oc-tree li::before,.oc-tree li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:24px;
  border-top:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}
.oc-tree li::after{right:auto;left:50%;border-left:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}
.oc-tree>li::before,.oc-tree>li::after{display:none}
.oc-tree li:only-child::before{display:none}
.oc-tree li:only-child::after{border-top:0;border-radius:0}
.oc-tree li:first-child::before,.oc-tree li:last-child::after{border:0 none}
.oc-tree li:last-child::before{border-right:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent));border-radius:0 8px 0 0}
.oc-tree li:first-child::after{border-radius:8px 0 0 0}
.oc-tree li:only-child::after{border-radius:0}
.oc-tree ul::before{content:'';position:absolute;top:0;left:50%;height:24px;
  border-left:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}

.oc-node{position:relative;width:220px;box-sizing:border-box;padding:10px 12px 14px;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-top:4px solid var(--ou);border-radius:12px;
  box-shadow:0 2px 8px rgba(15,23,42,.08);cursor:default;transition:box-shadow .15s,transform .15s}
.oc-node:hover{box-shadow:0 6px 18px rgba(15,23,42,.14)}
.oc-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.oc-kind{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ou)}
.oc-cc{font-size:.7rem;font-weight:800;color:#059669;background:color-mix(in srgb,#059669 14%,transparent);border-radius:6px;padding:1px 6px}
.oc-name{font-weight:700;font-size:.92rem;margin:4px 0 8px;line-height:1.25;color:var(--text);word-break:break-word}
.oc-person{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px dashed var(--border)}
.oc-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;color:#fff;background:var(--ou)}
.oc-av.empty{background:var(--surface2);color:var(--faint);border:1px dashed var(--border)}
.oc-pt{display:flex;flex-direction:column;min-width:0;font-size:.8rem;line-height:1.25}
.oc-pt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-pt small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-actions{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s;background:var(--surface);border-radius:8px}
.oc-node:hover .oc-actions,.oc-node:focus-within .oc-actions{opacity:1}
.oc-actions .btn{padding:2px 7px;min-width:0}
.oc-node:hover .oc-cc{visibility:hidden}
.oc-toggle{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);z-index:2;min-width:24px;height:24px;padding:0 6px;
  border-radius:12px;border:2px solid var(--ou);background:var(--surface);color:var(--ou);font:inherit;font-size:.72rem;font-weight:800;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.oc-toggle:hover{background:var(--ou);color:#fff}
.oc-toggle.closed{background:var(--ou);color:#fff}
.oc-tree li>ul{padding-top:30px}
.oc-tree li>ul::before{height:30px}
.oc-tree li>ul>li::before,.oc-tree li>ul>li::after{top:0}

/* ---- Konum şeması: katlar alt alta, odalar katın sağında ---- */
/* Katlar yan yana konunca on katlı bir bina şemayı ekranın dışına taşıyordu;
   dikey listede her kat bir satır ve aralarında kısa bir bağlantı çizgisi var.
   Bağlantı çizgisi satırın ortasına değil **kat kutusunun** ortasına inmeli:
   satırın sağında odalar olduğu için orta nokta odaların üstüne düşüyor ve
   çizgi binayı kata değil oda ızgarasına bağlıyor gibi görünüyordu. Bu yüzden
   bina, katlar ve çizgiler aynı sol sütunda hizalanır ve çizgi kutu
   genişliğinin yarısına (`--oc-half`) konur. */
/* Katlar dosya gezgini gibi bağlanır: binanın altından inen tek bir dikey
   omurga ve her kata giden kısa yatay dirsek —
       --- Kat 1
       |
       |-- Kat 2
       |
       |-- Kat 3
   Omurga binanın kutu ortasından (`--oc-half`) iner, katlar `--oc-indent`
   kadar içeriden başlar ve dirsek omurgayı kat kutusunun **dikey ortasına**
   (`--oc-elbow`) bağlar. */
.oc-tree{--oc-box:220px;--oc-half:110px;--oc-indent:40px;--oc-elbow:50px}
.oc-tree li:has(>ul.oc-stack){align-items:flex-start}
.oc-tree ul.oc-stack{flex-direction:column;align-items:flex-start;justify-content:flex-start;
  padding-left:calc(var(--oc-half) + var(--oc-indent))}
.oc-tree li>ul.oc-stack::before{left:var(--oc-half)}
.oc-tree ul.oc-stack>li{position:relative;padding:16px 0 0}
.oc-tree ul.oc-stack>li:first-child{padding-top:0}
/* Dikey omurga: her kat kendi satırı boyunca çizer ki dirsekler arasında
   kopukluk olmasın; **son kat** dirseğinde biter, altına sarkmaz. */
.oc-tree ul.oc-stack>li::before{display:block;content:'';position:absolute;
  top:0;left:calc(var(--oc-indent) * -1);right:auto;width:0;height:100%;
  border-top:0;border-right:0;border-radius:0;
  border-left:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}
.oc-tree ul.oc-stack>li:last-child::before{height:var(--oc-elbow)}
/* Yatay dirsek: omurgadan kat kutusuna. */
.oc-tree ul.oc-stack>li::after{display:block;content:'';position:absolute;
  top:var(--oc-elbow);left:calc(var(--oc-indent) * -1);right:auto;
  width:var(--oc-indent);height:0;border:0;
  border-top:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}

/* Kat kutusu solda, odaları sağında beşerli ızgarada. Sütun genişliği sabit:
   `1fr` ile kutular hücrelerinden taşıp birbirinin üstüne biniyordu. */
.oc-tree li.lc-with-rooms{flex-direction:row;align-items:flex-start;gap:18px}
.lc-rooms{position:relative;display:grid;grid-template-columns:repeat(5,178px);align-items:start;gap:10px;
  padding:10px;border-radius:14px;background:color-mix(in srgb,var(--surface2) 60%,transparent);
  border:1px dashed var(--border)}
.lc-rooms .oc-node{width:178px;margin:0}
/* Kat kutusundan oda bölümüne giden bağlantı: ağacın öbür çizgileriyle aynı
   kalemden, yoksa odalar katın yanında bağlantısız duruyordu. */
.lc-rooms::before{content:"";position:absolute;top:var(--oc-elbow);left:-19px;width:19px;height:0;
  border-top:2px solid var(--oc-line,color-mix(in srgb,var(--muted) 45%,transparent))}
/* Odaları açıp kapatan düğme bu çizginin üzerinde, kat kutusunun sağ yanında
   durur: kutunun altındaki varsayılan yerinde hangi dalı kapattığı
   anlaşılmıyordu. */
.oc-tree li.lc-with-rooms>.oc-node>.oc-toggle{left:auto;right:-14px;bottom:auto;
  top:calc(var(--oc-elbow) - 14px);transform:none}
.lc-room .oc-name{font-size:.86rem}
/* Odada şube ve departman alt alta ve **tam** yazar: kutuya sığmayan ad
   kırpılmak yerine satır atlar (kodu artık hiç yazmıyoruz, yer var). */
.lc-assign{gap:2px}
.lc-assign small{overflow:visible;text-overflow:clip;white-space:normal;word-break:break-word;line-height:1.3}
/* İki satır: üst birim (soluk) ve birim. Birim üst konumdan geliyorsa bütün
   blok solar — "bu odaya ayrıca birim seçilmedi" okunsun. */
.lc-assign small:first-child:not(:last-child){color:var(--faint)}
.lc-assign.lc-inherited{opacity:.7;font-style:italic}
/* Konum formunda seçilen/devralınan birimin şirkete kadar zinciri. */
.loc-assign{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.loc-unit-chain:empty{display:none}
/* Personel düğmesi kutunun altında, sayısıyla birlikte. */
.lc-people{margin-top:0;display:inline-flex;align-items:center;gap:5px;flex:1 1 auto;justify-content:center;white-space:nowrap}
.lc-count{min-width:18px;padding:0 5px;border-radius:9px;font-weight:800;font-size:.7rem;
  background:color-mix(in srgb,var(--ou,var(--primary)) 18%,transparent);color:var(--ou,var(--primary))}
/* Personel penceresi: fotoğraf + ad. */
.lc-people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.lc-person{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface2)}
.lc-person small{display:block}
/* Sütun sayısı dar ekranda da beş kalır: şema tuvali zaten yatay kayıyor ve
   kullanıcı "her satırda beş oda" düzenini bekliyor. */
@media (prefers-reduced-motion:reduce){.oc-node{transition:none}}

/* ===== Kişi avatarı (fotoğraf ya da baş harfler) ===== */
.pav{--pav:#6366f1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  overflow:hidden;background:var(--pav);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1;vertical-align:middle}
.pav img{width:100%;height:100%;object-fit:cover;display:block}
.pav.has-photo{background:var(--surface2)}
.pav.xs{width:20px;height:20px;font-size:.58rem}
.pav.sm{width:26px;height:26px;font-size:.66rem}
.pav.lg{width:64px;height:64px;font-size:1.2rem}
.pav.empty{background:var(--surface2);color:var(--faint);border:1px dashed var(--border)}
.pav-row{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}

/* ===== Kişi seçici ===== */
.pp{position:relative}
.pp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer;min-height:40px}
.pp-btn:disabled{cursor:not-allowed;opacity:.7}
.pp-face{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-caret{color:var(--muted);font-size:.75rem;flex:0 0 auto}
.pp-panel{position:fixed;z-index:3000;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.22);padding:6px;display:flex;flex-direction:column;max-height:320px}
.pp-search{padding:2px 2px 6px}
.pp-search .input{width:100%}
.pp-list{overflow:auto;min-height:0}
.pp-opt{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer}
.pp-opt.active{background:color-mix(in srgb,var(--primary) 12%,transparent)}
.pp-opt.sel .pp-txt>span{font-weight:700}
.pp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pp-txt>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-txt small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-empty{padding:10px}

/* ===== Kişi kartı fotoğrafı ===== */
.pf-photo{display:flex;align-items:center;gap:14px}
.pf-photo-img{--pav:#6366f1;width:84px;height:84px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--pav);color:#fff;font-size:1.6rem;font-weight:800;border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--border)}
.pf-photo-img img{width:100%;height:100%;object-fit:cover}
.pf-photo-actions{display:flex;flex-direction:column;gap:6px;min-width:0}

/* ===== Şema: yetkili fotoğrafı kutunun üstünde ===== */
.oc-tree.photos .oc-node{margin-top:34px;padding-top:40px;text-align:center}
.oc-tree.photos .oc-head{justify-content:center}
.oc-tree.photos .oc-person{justify-content:center}
.oc-tree.photos .oc-pt{align-items:center}
.oc-photo{position:absolute;top:-34px;left:50%;transform:translateX(-50%)}
.oc-photo .pav{border:3px solid var(--ou);box-shadow:0 4px 12px rgba(15,23,42,.18);background-clip:padding-box}
.oc-photo .pav.has-photo{background:var(--surface)}
.oc-tree.photos .oc-cc{position:absolute;top:8px;left:8px}
#oc-photo-btn.on{color:var(--primary)}

/* ===== Fotoğraf boyutları: şema 96 px, kişi seçici listesi 64 px ===== */
.oc-photo .pav{width:96px;height:96px;font-size:2rem}
.oc-tree.photos .oc-node{margin-top:52px;padding-top:58px}
.oc-photo{top:-52px}
.pp-btn{min-height:52px}
.pp-btn .pav{width:40px;height:40px;font-size:.88rem}
.pp-panel{max-height:min(70vh,460px)}
.pp-opt{padding:8px 10px;gap:12px}
.pp-opt .pav{width:64px;height:64px;font-size:1.15rem}
.pp-opt .pp-txt{font-size:.95rem}
.pp-opt .pp-txt small{font-size:.8rem}

/* ===== Üst çubuk: global arama (hap kutu, odakta genişler) ===== */
.search-box{position:relative;flex:0 1 460px;min-width:220px;max-width:560px;transition:flex-basis .18s ease}
.search-box:focus-within{flex-basis:560px}
.search-box input{width:100%;height:44px;padding:0 40px 0 44px;border-radius:999px;background:var(--surface2);
  border:1px solid transparent;font-size:.95rem;transition:background .15s,box-shadow .15s,border-color .15s}
.search-box input:hover{background:var(--surface);border-color:var(--border);box-shadow:0 1px 6px rgba(15,23,42,.14)}
.search-box input:focus{outline:none;background:var(--surface);border-color:transparent;box-shadow:0 2px 10px rgba(15,23,42,.22)}
.search-box input::-webkit-search-cancel-button{display:none}
.search-box .s-ic{position:absolute;left:15px;top:22px;transform:translateY(-50%);color:var(--faint);pointer-events:none;font-size:.95rem}
.gs-clear{position:absolute;right:10px;top:22px;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;
  background:none;color:var(--muted);cursor:pointer;font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center}
.gs-clear:hover{background:var(--surface2);color:var(--text)}
/* Sonuç listesi kutuyla aynı genişlikte ve ona yapışık açılır. */
.search-box.open input{border-bottom-left-radius:0;border-bottom-right-radius:0}
.search-res{position:absolute;top:calc(100% + 6px);left:0;right:0;padding:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 28px rgba(15,23,42,.24);z-index:1000;max-height:420px;overflow:auto}
.search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:0;cursor:pointer}
.search-item.active,.search-item:hover{background:var(--surface2)}
.search-item.empty{cursor:default;justify-content:center}
.si-ic{color:var(--faint);flex:0 0 auto}
.si-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.3}
.si-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.si-txt small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ağaç satırının tamamı dalı açar/kapatır (düğmeler hariç). */
.lt-row.has-kids{cursor:pointer}
.ou-views button{white-space:nowrap}

/* ===== Rapor Tasarımcısı (SSRS benzeri): araç çubuğu, üç bölme, kâğıt ===== */
.rd{display:flex;flex-direction:column;gap:12px}
.rd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px}
.rd-name{flex:1 1 220px;min-width:180px}
.rd-name .input{width:100%;font-weight:700}
/* Tasarım kipinde dört sütun: panel · araç şeridi · kâğıt · özellikler. */
.rd-body{display:grid;grid-template-columns:264px 76px minmax(0,1fr) 264px;gap:12px;align-items:start}
/* Yalnızca dikey kayar: `overflow:auto` iki eksende olunca dikey çubuğun
   kapladığı 12 px yatay çubuğu da tetikliyordu. */
.rd-left,.rd-right{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;
  max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden}
/*
 * Bölümler kendi boylarında kalır ve panel kaydırılır. `flex:none` olmadan
 * flex çocukları sığmak için **eziliyor**, `.rd-group{overflow:hidden}` da
 * taşanı kırpıyordu: bant özelliklerinin kenarlık düğmeleri hiç görünmüyor,
 * panel de kaydırılamıyordu (scrollHeight = clientHeight).
 */
.rd-left>*,.rd-right>*{flex:none}
/*
 * Yatay kâğıt merkez sütundan geniş olabiliyor. Taşma görünür kalırsa kâğıt
 * soldaki VERİ ve sağdaki SAYFA panellerinin üstüne biniyordu; sütun kendi
 * içinde kaysın.
 */
.rd-center{overflow-x:auto}
.rd-center>.rd-paper{min-width:min-content}
/* Panel bölümü bir pencere gibi: renkli başlık çubuğu + gövde. */
.rd-group{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0;overflow:hidden}
.rd-group h6{margin:0 0 8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
/* Her bölüm kendi başlık çubuğundan katlanır; kapalıyken yalnızca çubuk kalır. */
.rd-group-head{margin:0;padding:9px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  background:color-mix(in srgb,var(--primary) 14%,var(--surface2));color:var(--text);
  border-bottom:1px solid var(--border)}
.rd-group-head:hover{background:color-mix(in srgb,var(--primary) 22%,var(--surface2))}
.rd-group.off .rd-group-head{border-bottom:0}
.rd-group-body{padding:12px}
.rd-caret{font-size:.7rem;width:10px;flex:none;color:var(--primary)}
.rd-group .input{width:100%}
.rd-lbl{display:block;font-size:.74rem;color:var(--muted);margin:8px 0 3px}
.rd-fields{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.rd-field{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:8px;font-size:.85rem;cursor:pointer}
.rd-field:hover{background:var(--surface2)}
.rd-field span:nth-of-type(1){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-type{font-size:.66rem;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
/* Süzgeç **tek satır**: alan · değer kaynağı · koşul · değer (· ikinci değer)
   · sil. Sil düğmesi her zaman satırın en sağında. */
.rd-filter{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr) auto;
  gap:4px;margin-bottom:6px;align-items:center}
.rd-filter.two{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) auto}
.rd-filter .input{min-width:0;padding:6px 8px;font-size:.82rem}
.rd-cols{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.rd-col{border:1px solid var(--border);background:var(--surface2);color:var(--muted);border-radius:8px;
  padding:4px 8px;font:inherit;font-size:.76rem;cursor:pointer}
.rd-col.on{background:var(--grad);color:#fff;border-color:transparent}
.rd-center{min-width:0}
.rd-paper{display:flex;justify-content:center}

/* Kâğıt: ekranda da baskıdaki gibi görünsün (A4 genişliği, beyaz zemin). */
.rd-page{background:#fff;color:#111827;width:210mm;max-width:100%;min-height:200px;padding:16mm 14mm;
  border-radius:6px;box-shadow:0 10px 30px rgba(15,23,42,.28)}
.rd-page.landscape{width:297mm}
.rd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #111827;padding-bottom:8px}
.rd-head h2{margin:0;font-size:1.3rem;color:#111827}
.rd-head .muted{color:#6b7280}
.rd-meta{text-align:right}
.rd-filters{margin-top:8px;color:#6b7280}
/* Punto ve renk **kalıtımla** gelir: nesnenin yazı ayarı `.rd-item` üzerinde
   satır içi duruyor, sabit `rem`/renk yazan her kural onu sağır eder. */
.rd-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:inherit;color:inherit}
.rd-table th{background:#f3f4f6;border-bottom:1.5px solid #9ca3af;padding:7px 8px;font-size:.88em;
  text-transform:uppercase;letter-spacing:.03em;cursor:pointer;white-space:nowrap}
.rd-table th.on{background:#e0e7ff;box-shadow:inset 0 -3px 0 #6366f1}
.rd-table td{padding:6px 8px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.rd-page.zebra .rd-table tbody tr:nth-child(even) td{background:#fafafa}
.rd-table .rd-no{width:38px;color:#9ca3af;text-align:right}
.rd-grouphead td{background:#eef2ff;border-top:1px solid #c7d2fe;border-bottom:1px solid #c7d2fe;padding:7px 8px}
.rd-subtotal td{background:#f9fafb;border-top:1px solid #d1d5db;font-weight:700}
.rd-total td{border-top:2px solid #111827;border-bottom:2px solid #111827;font-weight:800;background:#fff}
.rd-foot{margin-top:14px;border-top:1px solid #e5e7eb;padding-top:6px;color:#6b7280}
.rd-saved{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.rd-saved-row{display:flex;gap:8px;align-items:center}
.rd-saved-open{flex:1;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:8px 10px;cursor:pointer;font:inherit;color:var(--text);display:flex;flex-direction:column;gap:2px}
.rd-saved-open:hover{background:color-mix(in srgb,var(--primary) 10%,var(--surface2))}

/* Dar ekranda sütunlar alt alta düşer; araç şeridi de yatay bir satır olur. */
@media (max-width:1200px){.rd-body{grid-template-columns:1fr}.rd-left,.rd-right{position:static;max-height:none}
  .rd-tools{position:static;flex-direction:row;flex-wrap:wrap;max-height:none}
  .rd-tools-label{align-self:center;margin:0 4px 0 0}}

/* Yazdırma: yalnızca kâğıt basılır. */
@media print{
  body.rd-printing .sidebar,body.rd-printing .topbar,body.rd-printing .rd-bar,
  body.rd-printing .rd-left,body.rd-printing .rd-right,body.rd-printing .help-fab,
  body.rd-printing .nav-scrim{display:none!important}
  body.rd-printing .shell,body.rd-printing .main,body.rd-printing #view{display:block;margin:0;padding:0}
  body.rd-printing .rd-body{display:block}
  body.rd-printing .rd-page{width:auto;max-width:none;box-shadow:none;border-radius:0;padding:0}
  /* Punto artık nesnenin yazı ayarından geliyor; burada 10pt'ye sabitlemek
     kullanıcının seçtiği büyüklüğü çıktıda yok sayardı. */
  body.rd-printing .rd-table thead{display:table-header-group}
  body.rd-printing .rd-table tr{break-inside:avoid}
  body.rd-printing .rd-break{break-before:page}
}
.rd-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== Rapor Tasarımcısı: araçlar, bantlar, nesneler, grafik, pivot =====
 * Araç şeridi **dikey**: sol panel ile kâğıdın arasında, kâğıtla birlikte
 * kaymasın diye yapışkan. Yatay çubuk kâğıdın üstündeydi ve her nesne
 * eklemede göz yukarı gidiyordu. */
.rd-tools{display:flex;flex-direction:column;gap:6px;padding:8px 6px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;position:sticky;top:12px;align-self:start;
  max-height:calc(100vh - 150px);overflow:auto}
.rd-tools-label{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);text-align:center;margin-bottom:2px;cursor:help}
.rd-tool{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);border-radius:10px;padding:7px 4px;font:inherit;
  font-size:.68rem;font-weight:600;line-height:1.1;cursor:grab;text-align:center}
.rd-tool b{font-size:1.1rem;font-weight:400;line-height:1}
.rd-tool:hover{background:color-mix(in srgb,var(--primary) 12%,var(--surface2))}
.rd-tool:active{cursor:grabbing}

/* Bantlar: rapor başlığı / gövde / alt bilgi. Kâğıtta kesikli çerçeveyle ayrılır. */
/*
 * Bantlar **birleşiktir**: aralarında boşluk yok, biri bitince öbürü başlar.
 * Kenar çizgileri satır içinde (`rdBandBorderCss`) verilir — kullanıcının
 * belirlediği kenarlık yoksa tasarım kipinde soluk kesikli kılavuz çizilir,
 * çıktıda hiç çizilmez. Bu yüzden burada `border` tanımlanmaz.
 */
.rd-band{position:relative;margin:0;min-height:24px;box-sizing:border-box}
.rd-band.on{background:rgba(99,102,241,.06);box-shadow:inset 0 0 0 2px rgba(99,102,241,.45)}
/* Başlığın alt, alt bilginin üst kenarı sürüklenerek boyutlandırılır. */
.rd-band-grip{position:absolute;left:0;right:0;height:9px;cursor:row-resize;z-index:3}
.rd-band-grip.bottom{bottom:-4px}
.rd-band-grip.top{top:-4px}
.rd-band-grip:hover,.rd-band-grip:active{background:rgba(99,102,241,.35)}
/* Sürüklerken bir nesneye çarpıldı: tutamak kırmızılaşır, neden durduğu belli olsun. */
.rd-band-stop .rd-band-grip{background:rgba(220,38,38,.45)!important;cursor:not-allowed}
/* Etiket sağ üstte: sol üst köşe (x:0, y:0) nesnelere kalsın. */
.rd-band-tag{position:absolute;top:1px;right:6px;background:#fff;padding:0 6px;font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}
/* Seçim ve üzerine gelme çerçevesi `outline` ile çizilir, `border` ile değil:
   kenarlık artık kullanıcının ayarı (satır içi stil) ve ikisi çakışmamalı. */
.rd-item{position:absolute;box-sizing:border-box;padding:2px;border:0 solid transparent;border-radius:4px;cursor:move}
.rd-item:hover{outline:1px solid #c7d2fe}
.rd-item.on{outline:2px solid #6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.18)}
.rd-handle{position:absolute;right:-5px;bottom:-5px;width:12px;height:12px;border-radius:3px;background:#6366f1;
  border:2px solid #fff;cursor:nwse-resize;opacity:0;transition:opacity .12s}
.rd-item:hover .rd-handle,.rd-item.on .rd-handle{opacity:1}
/* Resim nesnesi ve barkod görseli */
.rd-image{width:100%;height:100%;display:block}
.rd-image-preview{margin-top:8px;padding:6px;border:1px solid var(--border);border-radius:8px;background:#fff;
  display:flex;justify-content:center}
.rd-image-preview img{max-width:100%;max-height:120px}
.rd-barcode{display:block;width:100%;max-width:180px}
.rd-barcode-cell{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}
.rd-barcode-cell small{font-size:.62rem;letter-spacing:.08em;color:#4b5563}
/* Seçili sütun kâğıtta da işaretlenir. */
.rd-table th.on,.rd-table td.on{background:rgba(99,102,241,.12);box-shadow:inset 0 0 0 1px rgba(99,102,241,.45)}
/* Etikette yarı kalın taban ağırlık: nesnenin "Kalın" ayarı 800'e çıkarır. */
.rd-label{line-height:1.3;font-weight:inherit;color:inherit;white-space:pre-wrap;overflow:hidden}
.rd-textblock{line-height:1.45;color:inherit;overflow:hidden}
/* Yerinde metin düzenleme: seçili etikete ikinci (yavaş) tıklamada imleç açılır. */
.rd-item.editing{cursor:text;outline-color:#6366f1}
.rd-edit{outline:2px solid #6366f1;outline-offset:1px;border-radius:3px;background:#fff;cursor:text;
  white-space:pre-wrap;min-height:1em}
.rd-empty{font-size:.78rem;color:#9ca3af;border:1px dashed #d1d5db;border-radius:6px;padding:12px;text-align:center}
.rd-chart-title{font-size:1em;font-weight:800;color:inherit;margin-bottom:4px}
.rd-svg{display:block;max-width:100%}
/* Grafiğin kendi etiketleri **sabit**: çizim alanı da sabit, nesnenin puntosuna
   uyarlarsak 24 punto bir yazı çubukların üstüne taşıyor. Nesnenin yazı ayarı
   grafikte yalnızca başlığa işler — PDF tarafı da böyle davranıyor. */
.rd-svg-lbl{font-size:9px;fill:#6b7280}
.rd-svg-val{font-size:9px;fill:#111827;font-weight:700}
.rd-svg-axis{stroke:#d1d5db;stroke-width:1}
.rd-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:.68rem;color:#4b5563}
.rd-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}
.rd-pivot th{background:#eef2ff;color:#1f2937}
.rd-pivot th.num,.rd-pivot td.num{text-align:right}
.rd-pivot-col{text-align:center}
/* Sol panel sekmeleri (Veri · Nesneler · Parametreler): üçü birden açıkken
   panel uzayıp kâğıdı aşağı itiyordu, artık aynı anda biri görünüyor. */
/* Panel kayarken sekmeler tepede kalır: uzun nesne listesinde sekme şeridi
   yukarı kaçıyordu. Panelin arkası sayfa zemini, bu yüzden `--bg`. */
.rd-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:10px;
  position:sticky;top:0;z-index:2;background:var(--bg)}
/* `flex:1 1 auto`: sekmeler eşit üçe bölünmüyor, geniş etiket (Parametreler)
   kendi payını alıyor — eşit bölüşümde uzun etiket kısalıyordu. */
.rd-tabs button{flex:1 1 auto;min-width:0;background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:8px 4px;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.rd-tab-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-tabs button:hover{color:var(--text)}
.rd-tabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.rd-tab-n{background:var(--surface2);border-radius:8px;padding:0 4px;font-size:.66rem;color:var(--muted)}
.rd-tabs button.on .rd-tab-n{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}

/* Parametre kartı (sol panel) ve çalıştırma ekranındaki değer şeridi. */
.rd-param-card{border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:6px;
  background:var(--surface2)}
.rd-param-head{display:flex;align-items:center;gap:6px;justify-content:space-between}
.rd-param-type{font-size:.68rem;color:var(--muted);white-space:nowrap}
.rd-param-btns{display:flex;gap:6px;margin-top:6px}
.rd-parambar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:12px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px}
.rd-parambox{display:flex;flex-direction:column;gap:3px;font-size:.74rem;font-weight:700;color:var(--muted)}
/* Şerit de normal bir form: ızgaranın çerçevesiz düzenleyicisi burada
   kutunun nerede olduğunu göstermiyordu. */
.rd-parambox .rd-ed{min-width:150px;border-color:var(--border);background:var(--surface);
  padding:6px 8px;font-size:.82rem}
.rd-parambox .rd-ed:hover{border-color:var(--muted)}
.rd-parambox .rd-ed:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.rd-parambox .rd-ed-check{min-width:0;width:34px;height:32px;justify-content:center;
  border:1px solid var(--border);border-radius:4px;background:var(--surface)}
/* Parametre penceresi: etiket solda, düzenleyici sağda. Izgara düzenleyicileri
   çerçevesiz (`.rd-ed`); burada **çerçeveli** olmalı, yoksa normal bir formda
   kutunun nerede olduğu görünmüyor. */
.rd-p-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:8px}
.rd-p-row>label{font-size:.78rem;font-weight:700;color:var(--muted);padding-top:6px}
.rd-p-row .rd-ed,.rd-p-opt .rd-ed{border-color:var(--border);background:var(--surface);
  padding:6px 8px;font-size:.82rem}
.rd-p-row .rd-ed:hover,.rd-p-opt .rd-ed:hover{border-color:var(--muted)}
.rd-p-row .rd-ed:focus,.rd-p-opt .rd-ed:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.rd-p-row .rd-ed-color{padding:0;height:32px}
.rd-p-row .rd-ed-check{border:1px solid var(--border);border-radius:4px;background:var(--surface);
  width:32px;height:32px;justify-content:center}
.rd-p-opts{display:flex;flex-direction:column;gap:4px}
.rd-p-opt{display:flex;gap:4px}
/* Nesne listesi kendi yüksekliğinde kalır; taşarsa **panel** kayar
   (`.rd-left` yapışkan ve `overflow:auto`). Buradaki 190 px'lik sınır uzun
   listeyi minik bir pencereye sıkıştırıyordu. */
.rd-objects{display:flex;flex-direction:column;gap:3px}
.rd-object{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text);border-radius:8px;padding:5px 8px;font:inherit;font-size:.78rem;cursor:pointer;text-align:left}
.rd-object.on{background:var(--grad);color:#fff;border-color:transparent}
.rd-object.on small{color:rgba(255,255,255,.8)}
.rd-object small{margin-left:auto}
/*
 * Özellik ızgarası — Visual Studio'nun Özellikler penceresi gibi: solda
 * özellik adı, sağda düzenleyici, üstte sıralama düğmeleri, altta seçili
 * özelliğin açıklaması. Satırlar ince ayırıcılarla ayrılıyor ve düzenleyiciler
 * hücrenin tamamını kaplıyor; amaç tarama kolaylığı, form estetiği değil.
 */
.rd-grid{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden;
  background:var(--surface2)}
.rd-grid-bar{display:flex;gap:2px;padding:3px 4px;border-bottom:1px solid var(--border);background:var(--surface)}
.rd-grid-sort{border:1px solid transparent;background:none;color:var(--muted);border-radius:6px;
  padding:1px 7px;font:inherit;font-size:.78rem;cursor:pointer;line-height:1.5}
.rd-grid-sort:hover{color:var(--text);border-color:var(--border)}
.rd-grid-sort.on{background:color-mix(in srgb,var(--primary) 20%,var(--surface2));color:var(--text);
  border-color:var(--primary)}
.rd-grid-rows{max-height:none;background:var(--surface)}
/* Kategori başlığı: katlanır, kalın, hafif zeminli. */
.rd-grid-cat{display:flex;align-items:center;gap:4px;padding:4px 6px;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--faint);cursor:pointer;user-select:none;
  background:var(--surface2);border-bottom:1px solid var(--border)}
.rd-grid-cat:hover{color:var(--text)}
.rd-grid-row{display:grid;grid-template-columns:44% 56%;align-items:center;gap:0;
  border-bottom:1px solid var(--border)}
.rd-grid-row:last-child{border-bottom:0}
.rd-grid-row.on{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.rd-grid-row.full{grid-template-columns:1fr}
.rd-grid-row.full .rd-grid-name{border-right:0;border-bottom:1px solid var(--border)}
.rd-grid-name{padding:4px 6px;font-size:.76rem;color:var(--muted);border-right:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-grid-row.on .rd-grid-name{color:var(--text);font-weight:600}
.rd-grid-val{padding:2px 4px;min-width:0}
/* Açıklama şeridi: seçili özelliğin adı ve ne işe yaradığı. */
.rd-grid-help{padding:6px 8px;border-top:1px solid var(--border);background:var(--surface2);
  display:flex;flex-direction:column;gap:2px;min-height:48px}
.rd-grid-help b{font-size:.76rem}
.rd-grid-help small{color:var(--muted);font-size:.72rem;line-height:1.35}

/* Izgara düzenleyicileri: çerçevesiz, hücreyi dolduran kutular. */
.rd-ed{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;color:var(--text);
  border-radius:4px;padding:2px 5px;font:inherit;font-size:.78rem}
.rd-ed:hover{border-color:var(--border)}
.rd-ed:focus{outline:none;border-color:var(--primary);background:var(--surface)}
select.rd-ed{cursor:pointer}
textarea.rd-ed{resize:vertical;padding:4px 5px;line-height:1.35}
.rd-ed-color{padding:0;height:22px;cursor:pointer}
.rd-ed-check{display:flex;align-items:center;padding:2px 5px;margin:0}
.rd-ed-ro{display:block;padding:3px 5px;font-size:.78rem;color:var(--faint);font-style:italic}
/* Sütun seçim listesinde gizli sütunlar soluk; ayrıca adının yanında "· gizli" yazıyor
   (tarayıcı option rengini yok sayarsa da anlaşılsın). */
option.rd-opt-hidden{color:#9ca3af;font-style:italic}
.rd-ed-btns,.rd-ed-sides,.rd-ed-cols,.rd-ed-list,.rd-ed-file,.rd-ed-filters{display:flex;flex-wrap:wrap;gap:4px;
  padding:4px 5px;align-items:center}
.rd-ed-sides{display:grid;grid-template-columns:1fr 1fr}
.rd-ed-list{max-height:150px;overflow:auto;flex-direction:column;gap:1px;align-items:stretch}
.rd-ed-filters{flex-direction:column;align-items:stretch}
.rd-ed-filters .rd-filter{display:grid;grid-template-columns:1fr 1fr auto auto;gap:3px}
.rd-ed-file{flex-direction:column;align-items:stretch}

.rd-xy{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rd-xy label,.rd-margins label{display:flex;flex-direction:column;gap:2px;font-size:.7rem;color:var(--muted)}
.rd-margins{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* Word'deki kenarlık düğmeleri: hangi kenarda çizgi var, düğmenin durumundan belli. */
.rd-borders{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rd-border-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);border-radius:8px;padding:6px 8px;font:inherit;font-size:.76rem;cursor:pointer}
.rd-border-btn b{font-size:.95rem;line-height:1}
.rd-border-btn:hover{border-color:var(--primary);color:var(--text)}
.rd-border-btn.on{background:var(--grad);border-color:transparent;color:#fff}
.rd-subpanel{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.rd-sql{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;line-height:1.45;white-space:pre;overflow:auto}

@media print{
  body.rd-printing .rd-tools{display:none!important}
  /* Kenarlıklar satır içinde geliyor; burada sıfırlanmaz, yoksa kullanıcının
     çizdiği çerçeve çıktıda kaybolur. Yalnızca tasarım süsleri gizlenir. */
  body.rd-printing .rd-band{margin:0}
  body.rd-printing .rd-band.on{background:none;box-shadow:none}
  body.rd-printing .rd-band-tag,body.rd-printing .rd-handle,
  body.rd-printing .rd-band-grip{display:none}
  body.rd-printing .rd-item{outline:0!important;box-shadow:none!important}
}

/* ===== Rapor Tasarımcısı: sayfalar, veri kümesi sihirbazı, yayımlanan raporlar ===== */
/* `min-width:max-content`: kâğıt sütundan genişse ortalama sol kenarı kırpmasın. */
.rd-pages{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:max-content}
.rd-page{position:relative}
/* Sayfa da seçilebilir bir bölge: kâğıdın boş yerine tıklanınca işaretlenir. */
.rd-page.on{box-shadow:0 0 0 2px rgba(99,102,241,.55)}
.rd-page-no{position:absolute;top:-10px;right:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:1px 8px;font-size:.66rem;font-weight:700;color:var(--muted)}
.rd-page-foot{position:absolute;bottom:6mm;right:14mm;color:#9ca3af}
/*
 * Önizlemede yan paneller çizilmiyor; ızgara yine de üç sütun kalınca tek
 * çocuk 264 px'lik ilk sütuna düşüyor ve kâğıt ekranın soluna yapışıyordu.
 * Önizleme tek sütundur: kâğıt tasarımdaki gibi ortalanır.
 */
.rd-preview .rd-body{grid-template-columns:minmax(0,1fr)}
.rd-preview .rd-center{width:100%}
.rd-preview .rd-page{box-shadow:0 6px 20px rgba(15,23,42,.22)}
.rd-remove{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  background:#dc2626;color:#fff;font-size:.66rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s;
  display:flex;align-items:center;justify-content:center;padding:0;z-index:3}
.rd-item:hover .rd-remove,.rd-item.on .rd-remove{opacity:1}
.rd-remove:hover{background:#b91c1c}
.rd-continued{caption-side:top;text-align:left;font-size:.68rem;color:#9ca3af;padding-bottom:2px}
.rd-data-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;
  flex-direction:column;gap:4px;margin-bottom:8px}
.rd-data-name{font-weight:700;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rd-data-name small{font-weight:500;font-size:.72rem}
.rd-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Veri kümesi sihirbazı (modal) — solda dikey sekmeler, sağda o sekmenin
   gövdesi. Dört adım yan yana sütundu; alan tablosu ve iki değerli süzgeç o
   genişliğe sığmıyordu. */
.rd-ds{display:grid;grid-template-columns:176px minmax(0,1fr);gap:14px;align-items:start}
.rd-ds-nav{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--border);padding-right:8px}
.rd-ds-nav button{display:flex;align-items:center;gap:6px;text-align:left;background:none;border:0;
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer}
.rd-ds-nav button b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--surface2);font-size:.68rem;color:var(--muted)}
.rd-ds-nav button:hover{background:var(--surface2);color:var(--text)}
.rd-ds-nav button.on{background:var(--grad);color:#fff}
.rd-ds-nav button.on b,.rd-ds-nav button.on .rd-tab-n{background:rgba(255,255,255,.22);color:#fff}
.rd-ds-nav .rd-tab-n{margin-left:auto}
/* Gövde kendi içinde kayar: tablo sayısı arttıkça pencere ne genişliyor ne de
   uzuyor, alan listesi scroll ile geziliyor. */
.rd-ds-body{min-width:0;min-height:320px;max-height:min(58vh,520px);overflow:auto;padding-right:4px}
.rd-ds-col h6{margin:0 0 8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
/* Alanlar sekmesi: üç sütunlu tablo (alan adı · veri tipi · takma ad). */
.rd-ftable{width:100%;border-collapse:collapse;font-size:.82rem}
.rd-ftable th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);
  font-weight:800;padding:2px 6px;border-bottom:1px solid var(--border)}
.rd-ftable td{padding:0 2px;border-bottom:1px solid var(--surface2);vertical-align:middle}
.rd-ftable td:nth-child(2){width:110px}
.rd-ftable td:nth-child(3){width:150px}
.rd-ftable tr.on{background:color-mix(in srgb,var(--primary) 6%,transparent)}
/* Başlık satırının tamamı tıklanabilir (katlama); düğmeler kendi tıklamalarını
   durduruyor. */
.rd-ds-table-head{cursor:pointer}
.rd-ds-table-head:hover{background:color-mix(in srgb,var(--primary) 8%,var(--surface2))}
.rd-ds-toggle{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem;color:var(--text)}
.rd-ds-search{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface2);
  border-radius:10px;padding:2px 8px;margin-bottom:8px}
.rd-ds-search input{border:0;background:transparent;box-shadow:none;padding:4px 0}
.rd-ds-search input:focus{outline:none;box-shadow:none}
.rd-ds-sets{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.rd-ds-set{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--border);background:var(--surface2);
  color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;cursor:pointer}
.rd-ds-set small{color:var(--muted);font-size:.72rem}
.rd-ds-set.on{border-color:transparent;background:var(--grad);color:#fff}
.rd-ds-set.on small{color:rgba(255,255,255,.85)}
.rd-ds-note{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
/* Otomatik kurulan JOIN'ler ve tablo başına alan grupları (SQL designer görünümü) */
.rd-joins{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.rd-join{display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--primary);
  padding:4px 8px;margin-bottom:4px;background:var(--surface2);border-radius:0 8px 8px 0}
.rd-join.bad{border-left-color:#dc2626}
.rd-join small{color:var(--muted);font-size:.72rem}
.rd-ds-table{margin-bottom:10px}
.rd-ds-table-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:700;
  font-size:.78rem;padding:4px 6px;background:var(--surface2);border-radius:8px;margin-bottom:4px}
.rd-alias{width:100%;padding:1px 6px;font-size:.72rem}
/* Sıralama sekmesi: birden çok anahtar, sırası okla değişir. */
.rd-sort{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,.8fr) auto auto auto;
  gap:4px;align-items:center;margin-bottom:6px}
.rd-sort .input{min-width:0;padding:6px 8px;font-size:.82rem}
.rd-sort-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--surface2);font-size:.7rem;font-weight:800;color:var(--muted)}
@media (max-width:900px){.rd-ds{grid-template-columns:1fr}.rd-ds-nav{flex-direction:row;overflow-x:auto;
  border-right:0;border-bottom:1px solid var(--border);padding:0 0 6px}}

/* Raporlar ekranındaki yayımlanmış rapor düğmeleri */
/* Raporlar ekranı: tek bir açılır menü + iki sekme (seçilen rapor · zamanlanmış). */
.rep-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rep-count{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;font-size:.7rem;font-weight:800;
  background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.rep-count:empty{display:none}
.rep-menu{min-width:260px;max-height:70vh;overflow:auto;padding:6px}
.rep-menu .dropdown-header{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);padding:6px 10px 4px}
.rep-menu .dropdown-item{border-radius:8px;padding:6px 10px;font-size:.86rem}
.rep-pub-item{display:flex;align-items:center;gap:8px}
.rep-pub-item .rep-pub-ic{font-size:1rem}
.rep-tabs{margin-bottom:12px}
.rep-published{margin-bottom:14px}
.rep-pub-title{margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.rep-pub-row{display:flex;flex-wrap:wrap;gap:10px}
.rep-pub{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:12px;padding:10px 14px;font:inherit;cursor:pointer;text-align:left;min-width:200px}
.rep-pub:hover{background:var(--surface2);box-shadow:0 4px 14px rgba(15,23,42,.12)}
.rep-pub-ic{font-size:1.3rem}
.rep-pub small{display:block;color:var(--muted);font-size:.74rem}

@media print{
  body.rd-printing .rd-page-no{display:none}
  body.rd-printing .rd-pages{gap:0}
  body.rd-printing .rd-page{break-after:page;box-shadow:none;border-radius:0;min-height:0}
  body.rd-printing .rd-page:last-child{break-after:auto}
}
.rd-blank{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#9ca3af;font-size:.85rem;border:2px dashed #e5e7eb;border-radius:10px;padding:16px}

/* ===== Adres tanım tabloları (Organizasyon > Adres Tanımları) ============== */
/* Beş seviye yan yana sütun: soldan sağa seçildikçe bir sağdaki liste dolar.
   Dar ekranda sütunlar sarmalanır, liste kendi içinde kayar. */
.addr-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.addr-col{border:1px solid var(--border);border-radius:12px;background:var(--surface2);min-width:0}
.addr-col-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:8px 10px;border-bottom:1px solid var(--border)}
.addr-list{max-height:420px;overflow-y:auto;overflow-x:hidden;padding:6px}
.addr-item{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 8px;border-radius:8px;cursor:pointer;font-size:.86rem}
.addr-item:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.addr-item.on{background:color-mix(in srgb,var(--primary) 20%,transparent);font-weight:700}
.addr-item.off{opacity:.55;text-decoration:line-through}
.addr-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.addr-meta{display:flex;align-items:center;gap:4px;flex-shrink:0}
.addr-src{font-size:.66rem;font-weight:800;padding:1px 5px;border-radius:6px;
  background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.btn.xs{padding:1px 5px;font-size:.72rem;line-height:1.4}
@media(max-width:1100px){.addr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.addr-cols{grid-template-columns:1fr}}