:root{
  --bg:#0b1020;
  --muted:#9aa4c7;
  --text:#e8ecff;
  --border: rgba(255,255,255,.08);
  --primary:#4f7cff;
  --danger:#ff4f6d;
  --good:#33d17a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(79,124,255,.25), transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, rgba(51,209,122,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
h1{margin:0 0 6px 0; font-size:28px}
h2{margin:0 0 10px 0; font-size:18px}
h3{margin:0 0 10px 0; font-size:16px}
label{display:block; margin:0 0 6px 0; color:var(--muted); font-size:12px}
input,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
input:focus,select:focus{border-color: rgba(79,124,255,.55); box-shadow:0 0 0 3px rgba(79,124,255,.18)}
/* select{appearance:none}  -- DISABLED (options text bug) */

.app{max-width:1180px; margin:0 auto; padding:18px 16px 28px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  position:sticky; top:12px; backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:800;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(51,209,122,.75));
}
.brand-title{font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.navlink{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  background: rgba(255,255,255,.02);
}
.navlink:hover{border-color: rgba(255,255,255,.18)}
.navlink.danger{border-color: rgba(255,79,109,.35); color:#ffd6de}

.content{padding:18px 2px}
.footer{padding:10px 2px; color:var(--muted); font-size:12px}

.card{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding:14px;
}
.pagehead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin: 4px 0 14px;
}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.section-title{margin:18px 0 12px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color: rgba(255,255,255,.18)}
.btn.primary{background: rgba(79,124,255,.18); border-color: rgba(79,124,255,.45)}
.btn.danger{background: rgba(255,79,109,.14); border-color: rgba(255,79,109,.35)}
.btn.small{padding:7px 10px; border-radius:12px; font-size:12px}

.center{min-height:70vh; display:grid; place-items:center}
.auth{max-width:420px; width:100%}
.form{display:grid; gap:10px; margin-top:10px}
.form.grid{grid-template-columns: 1fr 1fr; gap:12px}
.form.grid .span2{grid-column: span 2}
.form.grid .actions{display:flex; gap:10px}

.muted{color:var(--muted)}
.small{font-size:12px}
.hint{margin-top:10px; color:var(--muted); font-size:12px}

.alerts{display:grid; gap:10px; margin-bottom:12px}
.alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.alert.success{border-color: rgba(51,209,122,.35); background: rgba(51,209,122,.10)}
.alert.danger{border-color: rgba(255,79,109,.35); background: rgba(255,79,109,.10)}
.alert.warning{border-color: rgba(255,204,0,.35); background: rgba(255,204,0,.10)}

.filters{margin-bottom:14px}
.filters-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
}
.filters-btn{display:flex; justify-content:flex-end}
.range{margin-top:10px}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  font-size:12px;
}

.grid2{display:grid; grid-template-columns: 1.4fr 1fr; gap:12px; margin: 10px 0 18px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin: 10px 0 18px}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}

.facility-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.facility-title{font-weight:700; font-size:16px}
.link{color:#cfe0ff}
.link:hover{text-decoration:underline}

.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px}
.kpi{border:1px solid var(--border); border-radius:16px; padding:10px 12px; background: rgba(255,255,255,.02)}
.kpi-label{font-size:12px; color:var(--muted)}
.kpi-val{font-size:18px; font-weight:700; margin-top:3px}
.kpi-val.pos{color:#bff4d7}
.kpi-val.neg{color:#ffd6de}
.unit{font-size:12px; color:var(--muted); font-weight:600}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
}
.badge.in{border-color: rgba(51,209,122,.35); background: rgba(51,209,122,.12)}
.badge.out{border-color: rgba(255,79,109,.35); background: rgba(255,79,109,.12)}

.tablewrap{overflow:auto}
table{width:100%; border-collapse:separate; border-spacing:0 10px}
thead th{font-size:12px; color:var(--muted); text-align:left; font-weight:600; padding:0 10px}
tbody td{
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:10px;
}
tbody tr td:first-child{border-left:1px solid var(--border); border-top-left-radius:14px; border-bottom-left-radius:14px}
tbody tr td:last-child{border-right:1px solid var(--border); border-top-right-radius:14px; border-bottom-right-radius:14px}
.right{text-align:right}

@media (max-width: 980px){
  .filters-grid{grid-template-columns: 1fr 1fr; }
  .filters-btn{justify-content:stretch}
  .grid2{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .form.grid{grid-template-columns: 1fr}
  .form.grid .span2{grid-column: auto}
}
/* Admin dashboard grid fix */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card { transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.card h3 { font-size: 18px; }

/* Daily Intake - checkbox satırlarını SOLA sabitle */
.di-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.di-row input[type="checkbox"]{
  margin: 0 !important;
}

.di-row span{
  flex: 1 1 auto !important;
  text-align: left !important;
}



/* SETTINGS_DROPDOWN */
.nav-dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 190px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  z-index: 9999;
  overflow: hidden;
}
.dropdown-item {
  display: block;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.dropdown-item:hover { background: var(--hover); }
.nav-dropdown:hover .dropdown-menu { display: block; }

/* NAVBAR_TUNE */
nav, .topnav, .navbar, header nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

nav .navlink,
nav .btn,
nav .nav-dropdown > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
}

/* dropdown container da aynı hizada kalsın */
nav .nav-dropdown {
  display: inline-flex;
  align-items: center;
  height: 36px;
}

/* dropdown menü top boşluğu hizalı olsun */
nav .dropdown-menu {
  top: calc(100% + 6px);
}


/* NAV_SPACER */
nav .nav-spacer{ margin-left:auto; }


/* --- FIX: dropdown option text görünmüyor (tema/appearance kaynaklı) --- */
select, .select, .form-select, .js-facility-select {
  color: #111 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #111 !important; /* Safari */
}

select option {
  color: #111 !important;
  background-color: #fff !important;
}


/* --- FIX: select option text görünmüyor (native select'e geri dön) --- */
select, .select, .form-select, .js-facility-select {
  -webkit-appearance: menulist !important;
  appearance: auto !important;
  background-image: none !important;
  padding-right: 24px !important;

  color: #111 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #111 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

select option {
  color: #111 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 14px !important;
}


/* --- FIX: macOS native select dark color-scheme override --- */
select, .select, .form-select, .js-facility-select {
  color-scheme: light !important;
}


/* --- ULTRA FIX: daily ops product dropdown text görünmüyor (macOS native select) --- */
#outRows select,
select[name="product_name[]"]{
  color-scheme: light !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;

  background: #fff !important;
  background-color: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;

  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#outRows select option,
select[name="product_name[]"] option{
  color: #111 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
  filter: none !important;
}


/* ==============================
   MOBILE RESPONSIVE PATCH
   ============================== */
@media (max-width: 768px){

  /* Genel: boşlukları küçült */
  .app{ padding: 12px 10px 20px !important; max-width: 100% !important; }
  .content{ padding: 12px 0 !important; }
  .card{ border-radius: 14px !important; padding: 12px !important; }
  h1{ font-size: 20px !important; }
  h2{ font-size: 16px !important; }
  label{ font-size: 12px !important; }

  /* TOPBAR / HEADER: daha az yer kaplasın */
  .topbar{
    position: sticky !important;
    top: 8px !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .brand{ gap: 10px !important; }
  .logo{ width: 36px !important; height: 36px !important; border-radius: 12px !important; }
  .brand-title{ font-size: 14px !important; }
  .brand-sub{ font-size: 11px !important; }

  /* NAV: chip gibi, taşma yok */
  .nav{
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .navlink{
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* PAGE HEAD: başlık + butonlar alt alta */
  .pagehead{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .pagehead .actions{
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Butonlar: mobilde daha rahat */
  .btn{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  /* Form gridleri tek kolona düşür */
  .filters-grid,
  .grid2{
    grid-template-columns: 1fr !important;
  }

  /* Tablo: mobilde dağılmasın, yatay scroll */
  .tablewrap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table{ min-width: 720px !important; }

  /* Fixed alt butonlar (Geri dön vs) ekranda taşmasın */
  div[style*="position:fixed"][style*="bottom"]{
    right: 10px !important;
    bottom: 10px !important;
  }
}


/* ==============================
   MOBILE PATCH v2 (compact + card tables)
   ============================== */
@media (max-width: 768px){

  /* Daha kompakt üst bar */
  .topbar{
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  .brand-title{ font-size: 13px !important; }
  .brand-sub{ display:none !important; }          /* mobilde alt yazıyı kapat */
  .logo{ width: 34px !important; height: 34px !important; }

  /* Nav chipleri daha küçük + satır taşır */
  .navlink{ padding: 7px 10px !important; font-size: 12px !important; }
  .nav{ gap: 6px !important; }

  /* Sayfa başlığı çok yer kaplamasın */
  .pagehead h1{ font-size: 18px !important; margin-bottom: 2px !important; }
  .pagehead .muted{ font-size: 12px !important; }

  /* Formlar / inputlar */
  input, select{
    padding: 10px 10px !important;
    border-radius: 12px !important;
  }

  /* daily_ops_entry: giden satırı 4 kolon yerine alt alta */
  #outRows .card > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  #outRows .card button.btn.danger,
  #outRows .card .btn.danger{
    width: 100% !important;
  }

  /* ---- TABLE -> MOBILE CARD VIEW ----
     .tablewrap içindeki tabloları mobilde satır satır kart yapar.
     (thead gizlenir, tr blok olur)
  */
  .tablewrap table{ min-width: 0 !important; width: 100% !important; border-collapse: separate !important; border-spacing: 0 10px !important; }
  .tablewrap thead{ display:none !important; }

  .tablewrap tbody tr{
    display:block !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,.92) !important;
    color: #111 !important;
  }

  .tablewrap tbody td{
    display:flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    border: 0 !important;
  }

  /* Hücre label'ı gibi görünmesi için:
     td'lerin içine data-label koymadığımız için,
     ilk kolonlar zaten anlaşılır. Yine de küçük ipucu: */
  .tablewrap tbody td::before{
    content: "" !important;
  }

  /* Detay butonu olan hücre sağa değil, tam genişlik */
  .tablewrap tbody td:last-child a.btn,
  .tablewrap tbody td:last-child .btn{
    width: 100% !important;
    text-align: center !important;
  }

}


/* === MOBILE PRO PATCH (vconsyst360) === */
/* Amaç: mobile-first, daha az üst bar, daha temiz kartlar, daha iyi dokunma alanları */

/* Genel iyileştirme */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 720px; } /* tablo sıkışmasın, kaydırılsın */
.card { max-width: 100%; }

/* Dokunma alanları */
.btn, button, input, select, textarea {
  min-height: 42px;
  font-size: 16px; /* iOS zoom engelle */
}

/* Mobilde sayfa genişliğini daha iyi kullan */
@media (max-width: 720px){

  /* Genel sayfa boşlukları */
  .app { padding: 12px 10px 18px !important; }
  .content { padding: 12px 0 !important; }

  /* Topbar: kompakt + taşma kontrol */
  .topbar{
    position: sticky;
    top: 8px;
    padding: 10px 10px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  .brand { gap: 10px !important; }
  .logo{ width: 36px !important; height: 36px !important; border-radius: 12px !important; }
  .brand-title{ font-size: 14px !important; }
  .brand-sub{ display:none !important; } /* mobile'de yer kazandır */

  /* NAV: chip-bar (yatay kaydır) */
  .nav{
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px !important;
    justify-content: flex-start !important;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .navlink{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  /* Page head: başlık + aksiyonlar alt alta */
  .pagehead{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .pagehead .actions{
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .pagehead .actions .btn{
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* Kartlar: daha kompakt ama ferah */
  .card{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* Form gridleri tek kolona */
  .filters-grid,
  .grid2{
    grid-template-columns: 1fr !important;
  }

  /* Input/Select: mobile görünüm daha temiz */
  input, select, textarea{
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }
  label{ font-size: 12px !important; }

  /* Tablo: küçük font + satır yüksekliği */
  table th, table td{
    padding: 10px 10px !important;
    font-size: 13px !important;
  }

  /* Fixed “Geri Dön” vb butonlar ekranı kaplamasın */
  [style*="position:fixed"]{
    position: static !important;
  }

  /* Büyük başlıklar */
  h1{ font-size: 22px !important; }
  h2{ font-size: 16px !important; }
}

/* Çok küçük ekran (iPhone SE vb.) */
@media (max-width: 380px){
  .navlink{ font-size: 12px !important; padding: 7px 9px !important; }
  h1{ font-size: 20px !important; }
}


/* === VCONSYST360 MOBILE PRO UI v1 === */

@media (max-width: 760px){

  body{ overflow-x:hidden; }

  .app{ padding:12px 10px !important; }

  .topbar{
    padding:10px !important;
    border-radius:18px !important;
  }

  .logo{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
  }

  .nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:8px !important;
  }

  .nav::-webkit-scrollbar{ display:none; }

  .navlink{
    white-space:nowrap !important;
    border-radius:999px !important;
    padding:8px 10px !important;
    font-size:13px !important;
  }

  h1{ font-size:22px !important; }
  h2{ font-size:16px !important; }

  .pagehead{
    flex-direction:column !important;
    gap:10px !important;
  }

  .pagehead .actions{
    width:100%;
    display:flex;
    gap:8px;
  }

  .pagehead .actions .btn{
    flex:1;
    text-align:center;
  }

  .card{
    border-radius:18px !important;
    padding:12px !important;
  }

  input,select,textarea{
    font-size:16px !important;
    min-height:42px !important;
  }
}

@media (max-width: 380px){
  .navlink{ font-size:12px !important; padding:7px 9px !important; }
  h1{ font-size:20px !important; }
}


/* === EASY UI v2: bottom nav + calm mobile === */

:root{
  --mRadius:18px;
}

/* Mobil: üst bar küçülür, içerik nefes alır */
@media (max-width: 760px){
  .app{ padding:12px 12px 84px !important; } /* altta bottom nav için boşluk */
  .topbar{
    padding:10px 10px !important;
    border-radius: var(--mRadius) !important;
  }
  .brand-sub{ display:none !important; }
  .nav{ display:none !important; } /* mobilde üst nav gizle (bottom nav kullanacağız) */

  h1{ font-size:20px !important; line-height:1.2 !important; }
  h2{ font-size:15px !important; }
  .card{ border-radius: var(--mRadius) !important; padding:12px !important; }
  .tablewrap{ overflow:auto; border-radius: var(--mRadius) !important; }
  input,select,textarea{ font-size:16px !important; min-height:42px !important; }
}

/* Bottom nav (mobil) */
.mnav{
  display:none;
}

@media (max-width: 760px){
  .mnav{
    display:flex;
    position:fixed;
    left:12px; right:12px; bottom:12px;
    gap:10px;
    padding:10px;
    border-radius: 20px;
    border:1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    z-index: 99999;
  }
  .mnav a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:10px 8px;
    border-radius: 16px;
    border:1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.70);
    font-size:12px;
    text-align:center;
  }
  .mnav a strong{ font-size:12px; }
  .mnav a.active{
    border-color: rgba(79,124,255,.35);
    box-shadow: 0 0 0 3px rgba(79,124,255,.12);
  }
}


/* === REPORTS EASY MOBILE UI === */

/* rapor sayfası: daha sakin spacing */
.reports-page .card{
  border-radius: 18px;
}

.reports-page h1, .reports-page h2{
  letter-spacing: -0.2px;
}

/* tablolar: her zaman kontrollü scroll */
.reports-page .tablewrap,
.reports-page .table,
.reports-page table{
  max-width: 100%;
}

.reports-page .tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
}

/* Mobil: filtreler ve üst bloklar alt alta */
@media (max-width: 760px){

  /* rapor sayfası padding daha rahat */
  .reports-page{
    display:block;
  }

  /* Form/filters: yatay yerine dikey */
  .reports-page form{
    display:block;
  }

  /* genel gridleri tek kolona zorla (bootstrap benzeri class'lar için) */
  .reports-page .row{
    display:block !important;
  }
  .reports-page [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 10px;
  }

  /* kart içi başlıklar daha kompakt */
  .reports-page h1{ font-size: 20px !important; margin-bottom: 6px !important; }
  .reports-page h2{ font-size: 15px !important; margin-bottom: 6px !important; }
  .reports-page .muted{ font-size: 12px !important; }

  /* butonlar: geniş ve kolay tıklanır */
  .reports-page .btn, .reports-page button{
    width: 100%;
    min-height: 44px;
    border-radius: 16px;
  }

  /* tablolar: okunabilir padding */
  .reports-page table th,
  .reports-page table td{
    padding: 10px 10px !important;
    font-size: 13px !important;
    white-space: nowrap; /* mobilde satır kaydırıp dağılmasın */
  }

  /* KPI benzeri kutular varsa (kpi, stat, summary gibi) daha iyi görünür */
  .reports-page .kpi,
  .reports-page .stat,
  .reports-page .summary,
  .reports-page .tile{
    border-radius: 18px;
  }
}

/* === REPORTS: TABLE TO CARDS (MOBILE) === */

/* === REPORTS: TABLE TO CARDS (MOBILE) === */

/* cards container */
.reports-page .m-cards{
  display:none;
  gap:10px;
  margin-top:10px;
}

.reports-page .m-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background:#fff;
  padding:12px;
  box-shadow:0 1px 10px rgba(0,0,0,.04);
}

.reports-page .m-card .t{
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
}
.reports-page .m-card .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:6px 0;
  font-size:13px;
}
.reports-page .m-card .k{
  opacity:.70;
  font-weight:600;
}
.reports-page .m-card .v{
  font-weight:800;
  white-space:nowrap;
}
.reports-page .m-card .sub{
  margin-top:8px;
  opacity:.7;
  font-size:12px;
}

/* Mobile behavior */
@media (max-width: 760px){
  /* hide tables on mobile */
  .reports-page table,
  .reports-page .rep-table,
  .reports-page .table,
  .reports-page .tablewrap,
  .reports-page .table-wrap{
    display:none !important;
  }

  /* show cards */
  .reports-page .m-cards{
    display:flex !important;
    flex-direction:column !important;
  }

  /* make top filters stack nicely if any inline styles exist */
  .reports-page .rep-top,
  .reports-page .rep-filters{
    display:block !important;
  }
  .reports-page .rep-filters .field{
    min-width:unset !important;
    width:100% !important;
  }
  .reports-page .rep-filters input,
  .reports-page .rep-filters select{
    width:100% !important;
  }

  /* KPI grid tighter */
  .reports-page .rep-kpis{
    grid-template-columns: 1fr 1fr !important;
  }
}


/* === MOBILE DRAWER NAV UI (v1) === */
.m-menu-btn{ display:none; }
.m-menu-btn span{ display:block; height:2px; width:18px; background: currentColor; border-radius:2px; }
.m-menu-btn span + span{ margin-top:4px; }

.m-drawer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.m-drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.m-drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width: 86vw;
  max-width: 360px;
  background: #fff;
  color:#111;
  transform: translateX(110%);
  transition: transform .2s ease;
  z-index: 9999;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  display:flex; flex-direction:column;
}
.m-drawer.open{ transform: translateX(0); }

.m-drawer-head{
  padding: 14px 14px 10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.m-brand-title{ font-weight: 900; font-size: 16px; }
.m-brand-sub{ font-size: 12px; opacity:.7; margin-top:2px; }
.m-drawer-x{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 22px;
  line-height: 32px;
}

.m-drawer-nav{ padding: 10px 12px 16px 12px; overflow:auto; }
.m-navlink{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  margin-bottom: 10px;
  font-weight: 700;
  color:#111;
}
.m-navlink:active{ transform: scale(.99); }
.m-navlink.danger{
  border-color: rgba(185,28,28,.20);
  background: rgba(185,28,28,.06);
  color:#B91C1C;
}

html.m-lock, body.m-lock{ overflow:hidden; }

/* Mobilde: üst bar sade -> sadece logo/title + hamburger, nav linkleri üstten kalksın */
@media (max-width: 760px){
  .topbar{
    align-items:center !important;
    justify-content:space-between !important;
    padding: 12px 12px !important;
  }

  /* Bu class isimleri sende farklı olabilir; ama çoğu projede .nav var */
  .topbar .nav{ display:none !important; }

  .m-menu-btn{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.03);
    cursor:pointer;
  }
}
/* === /MOBILE DRAWER NAV UI (v1) === */


/* === FORCE SHOW HAMBURGER (debug) === */
.m-menu-btn{
  display:inline-flex !important;
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 100000 !important;
  width: 46px !important;
  height: 46px !important;
  background: #fff !important;
  color: #111 !important;
  border: 2px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
.m-menu-btn span{ background:#111 !important; height:3px !important; width:20px !important; }
/* === /FORCE SHOW HAMBURGER (debug) === */


/* === VCONSYST360 MOBILE DRAWER STYLES === */

/* Mobilde üst bar sade: sadece brand + hamburger */
@media (max-width: 900px){
  .topbar{
    padding: 12px 12px !important;
    border-radius: 18px !important;
  }
  .topbar .nav{
    display: none !important;  /* üst menü komple kalksın */
  }
  .brand .tag{
    display:none !important;   /* mobilde subtitle yormasın */
  }
}

/* Hamburger button */
.m-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.m-menu-btn span{
  display:block;
  width:18px;
  height:2px;
  background: currentColor;
  border-radius:2px;
  opacity:.9;
}
@media (max-width: 900px){
  .m-menu-btn{ display:inline-flex; }
}

/* Drawer layout */
.m-drawer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.m-drawer.open{ display:block; }
.m-drawer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.m-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width: min(86vw, 360px);
  background: #fff;
  color: #111;
  box-shadow: -18px 0 40px rgba(0,0,0,.25);
  transform: translateX(100%);
  transition: transform .18s ease;
  display:flex;
  flex-direction:column;
}
.m-drawer.open .m-drawer-panel{ transform: translateX(0); }

.m-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.m-drawer-brand .name{ font-weight:800; letter-spacing:.3px; }
.m-drawer-brand .tag{ font-size:12px; opacity:.7; margin-top:2px; }
.m-drawer-close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.m-drawer-body{
  padding: 10px 10px 16px 10px;
  overflow:auto;
}
.m-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  margin: 8px 4px;
  font-weight:700;
  color:#111;
}
.m-item:hover{ background: rgba(0,0,0,.05); }
.m-item.danger{
  border-color: rgba(185,28,28,.25);
  background: rgba(185,28,28,.06);
  color: #B91C1C;
}

.m-sep{ height: 10px; }
.m-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.65;
  margin: 6px 8px;
}

/* scroll lock */
.m-lock{ overflow:hidden !important; }

/* Mobilde mevcut bottom nav varsa: Drawer ile çakışmasın diye biraz küçült */
@media (max-width: 900px){
  .mnav{ padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
}

/* === /VCONSYST360 MOBILE DRAWER STYLES === */


/* === MOBILE DRAWER NAV === */
.hamb{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: #fff;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
}
.hamb span{
  display:block;
  width:18px;
  height:2px;
  background: #111;
  border-radius:999px;
}

.drawer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(360px, 86vw);
  background:#fff;
  border-left:1px solid rgba(0,0,0,.10);
  box-shadow: -20px 0 50px rgba(0,0,0,.18);
  transform: translateX(102%);
  transition: transform .18s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
}
.drawer.open{ transform: translateX(0); }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.drawer-title{ font-weight:800; font-size:16px; color:#111; }
.drawer-x{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
}

.drawer-body{
  padding:12px;
  overflow:auto;
}

/* Drawer içindeki nav'ı dikey menü yap */
.drawer .desktop-nav{
  display:flex !important;
  flex-direction:column;
  gap:8px;
}
.drawer .desktop-nav .navlink{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color:#111 !important;
  font-weight:700;
}
.drawer .desktop-nav .navlink:hover{
  background: rgba(0,0,0,.05);
}

/* dropdown varsa drawer’da düz metin gibi görünsün */
.drawer .nav-dropdown .dropdown-menu{
  position:static !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:6px 0 0 0 !important;
}
.drawer .nav-dropdown .dropdown-item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  margin-top:8px;
  color:#111 !important;
  background: rgba(0,0,0,.02);
  font-weight:600;
}

/* Açıkken arkayı scroll ettirme */
html.drawer-open, body.drawer-open{
  overflow:hidden !important;
}

/* MOBİL: üstteki normal nav linkleri kapat, sadece logo + hamburger kalsın */
@media (max-width: 820px){
  .desktop-nav{ display:none !important; }
  .hamb{ display:inline-flex; }
  .topbar{ align-items:center; }
}


/* === MOBILE ONLY VISIBILITY HELPERS === */
.m-only{ display:none !important; }
.d-only{ display:block !important; }

/* Mobile breakpoint */
@media (max-width: 760px){
  .m-only{ display:inline-flex !important; }
  .d-only{ display:none !important; }
}


/* === MOBILE DRAWER: DESKTOP HIDE PATCH V1 === */
/* Desktop: hamburger + drawer kapalı */
.m-menu-btn, .m-drawer{ display:none !important; }

/* Mobile: hamburger + drawer açık */
@media (max-width: 760px){
  .m-menu-btn{ display:inline-flex !important; }
  .m-drawer{ display:block !important; }
}


/* === VCONSYST360 MOBILE OVERFLOW FIX V1 === */

/* 1) Sağdaki beyaz sütun (horizontal overflow) kill */
html, body { overflow-x: hidden !important; }
.app, .content, .card { overflow-x: hidden !important; }
* { max-width: 100%; }

/* 2) Hamburger sadece mobilde görünsün */
.m-menu-btn { display: none !important; }

/* 3) Drawer ölçülerini güvenli yap (100vw overflow yapabiliyor) */
.m-drawer{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99999;
}
.m-drawer-backdrop{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.m-drawer-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 340px);
  max-width: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  will-change: transform;
}
.m-drawer.open .m-drawer-panel{ transform: translateX(0); }

/* 4) Mobilde üst nav’ı kapat (drawer kullan) */
@media (max-width: 760px){
  .m-menu-btn{ display: inline-flex !important; }
  .topbar{ gap: 10px; }
  .topbar .nav{ display: none !important; } /* üstteki linkler gizlenir */
  .brand .tag{ display:none; }              /* üst bar küçülür */
}

/* 5) Desktop’ta drawer’ı tamamen kapat (sürpriz layout taşması olmasın) */
@media (min-width: 761px){
  .m-drawer{ display:none !important; }
}