/* ==========================================================
   THEME SYSTEM for UniTreeMenu (sidebar) + Dashboard wrapper
   - Apply .theme-green / .theme-blue / .theme-orange
   - Sidebar: add class on UniContainerPanel that wraps menu
   - Dashboard: add same class on .dash-scope (HTMLFrame iÃƒÂ§i)
   ========================================================== */
/* Avatar resmi
   ---------------------------------------------------------------------------
   UniImage bileÃ…Å¸eni sadece <img> ÃƒÂ¼retmez; etrafÃ„Â±nda Ext/uniGUI wrapper
   elementleri de olabilir. Sadece iÃƒÂ§teki resmi border-radius ile yuvarlarsak
   wrapper'Ã„Â±n arka planÃ„Â±/focus ÃƒÂ§izgisi arkada elips gibi gÃƒÂ¶rÃƒÂ¼nÃƒÂ¼r.

   Bu yÃƒÂ¼zden ÃƒÂ¶nce .avatar verilen component ve olasÃ„Â± wrapper katmanlarÃ„Â±nÃ„Â±n
   arka plan, border, outline ve gÃƒÂ¶lgelerini temizliyoruz. Sonra gerÃƒÂ§ek <img>
   elementini sabit kare ÃƒÂ¶lÃƒÂ§ÃƒÂ¼ iÃƒÂ§inde daireye ÃƒÂ§eviriyoruz. */
.avatar,
.avatar .x-img,
.avatar .x-img-default,
.avatar .x-img-wrap,
.avatar .x-img-body,
.avatar .x-component,
.avatar .x-box-target {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: hidden !important;
}

.avatar::before,
.avatar::after,
.avatar .x-img::before,
.avatar .x-img::after {
  display: none !important;
  content: none !important;
}

.avatar img,
.avatar .x-img-img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- SHARED BASE (sidebar) ---------- */
.side-menu{
  /* Sidebar vars */
  --sidebar-bg:        #0f2e5c;      /* solid fallback */
  --sidebar-bg2:       #123a74;      /* gradient alt tonu */
  --sidebar-text:      #E8EEF5;
  --sidebar-muted:     #cfd8e3;
  --sidebar-hover:     #1e88e5;
  --sidebar-hover-txt: #ffffff;
  --sidebar-sep:       rgba(255,255,255,.10);
  --sidebar-select:    rgba(66,165,245,.16);
  --sidebar-accent:    #42a5f5;
}

/* body of UniContainerPanel / sidebar */
.side-menu .x-panel-body,
.side-menu .x-container,
.side-menu .x-body{
  background: linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg2));
  overflow-y: auto;
  overflow-x: hidden;
  position:relative;
  box-shadow: 1px 0 0 var(--sidebar-sep);
}

/* treelist container */
.side-menu .x-treelist,
.side-menu .x-treelist-navigation{
  background: transparent !important;
  color: var(--sidebar-text);
  border: none;
}

/* UniTreeMenu scroll
   ------------------------------------------------------------
   MenÃƒÂ¼ elemanÃ„Â± sayÃ„Â±sÃ„Â± sol panel yÃƒÂ¼ksekliÃ„Å¸ini aÃ…Å¸tÃ„Â±Ã„Å¸Ã„Â±nda scroll bazen dÃ„Â±Ã…Å¸
   UniContainerPanel'de deÃ„Å¸il, Ext JS'in oluÃ…Å¸turduÃ„Å¸u treelist katmanÃ„Â±nda
   kalÃ„Â±r. Bu yÃƒÂ¼zden scroll'u sadece side-menu iÃƒÂ§indeki UniTreeMenu/treelist
   gÃƒÂ¶vdelerine veriyoruz. Global .x-treelist kuralÃ„Â± kullanmadÃ„Â±Ã„Å¸Ã„Â±mÃ„Â±z iÃƒÂ§in
   baÃ…Å¸ka UniTreeMenu bileÃ…Å¸enleri etkilenmez. */
.side-menu .x-treelist,
.side-menu .x-treelist-navigation,
.side-menu .x-treelist-container,
.side-menu .x-treelist-root-container,
.side-menu .x-treelist-list-ct {
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* rows */
.side-menu .x-treelist-row{
  height: 44px;
  border-bottom: 1px solid var(--sidebar-sep);
  position: relative;
  line-height: 30px;
}

/* text */
.side-menu .x-treelist-item-text{
  color: var(--sidebar-text);
  padding: 10px 0 10px 12px;
  margin-left: 27px; margin-right: 15px;
  font-size: 14px; line-height: 1.6;
  font-family: "Century Gothic","Segoe UI",Arial,sans-serif;
}

/* icon + expander */
.side-menu .x-treelist-item-icon,
.side-menu .x-treelist-item-icon:before{ color: var(--sidebar-muted); }
.side-menu .x-treelist-item-icon{ padding-left:10px; }
.side-menu .x-treelist-item-expander{ color:var(--sidebar-muted); opacity:.95; }

/* hover */
.side-menu .x-treelist-row-over{
  background: var(--sidebar-hover) !important;
}
.side-menu .x-treelist-row-over .x-treelist-item-text,
.side-menu .x-treelist-row-over .x-treelist-item-icon,
.side-menu .x-treelist-row-over .x-treelist-item-icon:before,
.side-menu .x-treelist-row-over .x-treelist-item-expander{
  color: var(--sidebar-hover-txt) !important;
}

/* expanded parent */
.side-menu .x-treelist-item-expanded > .x-treelist-row{
  background: rgba(255,255,255,.06) !important;
}

/* selected + accent strip */
.side-menu .x-treelist-item-selected > .x-treelist-row,
.side-menu .x-treelist-row.x-treelist-row-selected{
  background: var(--sidebar-select) !important;
}
.side-menu .x-treelist-item-selected > .x-treelist-row::before,
.side-menu .x-treelist-row.x-treelist-row-selected::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:4px; border-radius:2px; background: var(--sidebar-accent);
}

/* focused */
.side-menu .x-treelist-row.x-focused{
  outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* micro (collapsed) */
.side-menu .x-treelist.x-treelist-micro,
.side-menu .x-treelist-navigation.x-treelist-micro{ width:56px; }
.side-menu .x-treelist.x-treelist-micro .x-treelist-item-text,
.side-menu .x-treelist-navigation.x-treelist-micro .x-treelist-item-text{ display:none; }
.side-menu .x-treelist.x-treelist-micro .x-treelist-item-icon,
.side-menu .x-treelist-navigation.x-treelist-micro .x-treelist-item-icon{ margin:0 auto; font-size:18px; }

/* scrollbar */
.side-menu .x-panel-body::-webkit-scrollbar{ width:3px; height:3px; }
.side-menu .x-panel-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.12); }
.side-menu .x-panel-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.28); border-radius:7px;
}

.side-menu .x-treelist::-webkit-scrollbar,
.side-menu .x-treelist-navigation::-webkit-scrollbar,
.side-menu .x-treelist-container::-webkit-scrollbar,
.side-menu .x-treelist-root-container::-webkit-scrollbar,
.side-menu .x-treelist-list-ct::-webkit-scrollbar{ width:3px; height:3px; }

.side-menu .x-treelist::-webkit-scrollbar-track,
.side-menu .x-treelist-navigation::-webkit-scrollbar-track,
.side-menu .x-treelist-container::-webkit-scrollbar-track,
.side-menu .x-treelist-root-container::-webkit-scrollbar-track,
.side-menu .x-treelist-list-ct::-webkit-scrollbar-track{ background: rgba(255,255,255,.10); }

.side-menu .x-treelist::-webkit-scrollbar-thumb,
.side-menu .x-treelist-navigation::-webkit-scrollbar-thumb,
.side-menu .x-treelist-container::-webkit-scrollbar-thumb,
.side-menu .x-treelist-root-container::-webkit-scrollbar-thumb,
.side-menu .x-treelist-list-ct::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.30);
  border-radius: 7px;
}

/* legacy compatibility - sadece sol menÃƒÂ¼ iÃƒÂ§inde */
.side-menu .x-treelist-nav{ background: transparent; color: inherit; }

/* ---------- DASHBOARD (wrapper .dash-scope) ---------- */
.dash-scope{
  --page-bg:        #f3f7fc;                 /* genel arka plan */
  --card-shadow:    0 2px 6px rgba(0,0,0,.10);
  --card-shadow-h:  0 8px 16px rgba(0,0,0,.18);
}
.dash-scope{ background: var(--page-bg); }
.dash-scope .card{ box-shadow: var(--card-shadow); }
.dash-scope .card:hover{ box-shadow: var(--card-shadow-h); }

/* ---------- THEMES (full palette changes) ---------- */

/* GREEN */
.side-menu.theme-green{
  --sidebar-bg:#0f3a2a; --sidebar-bg2:#14533c;
  --sidebar-text:#e6f4ed; --sidebar-muted:#c9e7d8;
  --sidebar-hover:#2e7d32; --sidebar-hover-txt:#ffffff;
  --sidebar-sep:rgba(255,255,255,.08);
  --sidebar-select:rgba(102,187,106,.18);
  --sidebar-accent:#66bb6a;
}
.dash-scope.theme-green{
  --page-bg:#f2f8f5;                   /* yeÃ…Å¸ile yakÃ„Â±n aÃƒÂ§Ã„Â±k zemin */
}

/* BLUE (default) */
.side-menu.theme-blue{
  --sidebar-bg:#216cad; --sidebar-bg2:#123a74;
  --sidebar-text:#E8EEF5; --sidebar-muted:#cfd8e3;
  --sidebar-hover:#5681c2; --sidebar-hover-txt:#ffffff;
  --sidebar-sep:rgba(255,255,255,.10);
  --sidebar-select:rgba(66,165,245,.16);
  --sidebar-accent:#42a5f5;
}
.dash-scope.theme-blue{
  --page-bg:#f3f7fc;
}

/* DARK BLUE */
.side-menu.theme-darkblue{
  --sidebar-bg:#132236;
  --sidebar-bg2:#132236;
  --sidebar-text:#F2F6FB;
  --sidebar-muted:#9EADBF;
  --sidebar-hover:#1E3A60;
  --sidebar-hover-txt:#ffffff;
  --sidebar-sep:rgba(255,255,255,.10);
  --sidebar-select:#1E3A60;
  --sidebar-accent:#4FA3FF;
}

.dash-scope.theme-darkblue{
  --page-bg:#F4F6F8;
}

/* DARK BLUE UniTreeMenu modern state style */
.side-menu.theme-darkblue .x-panel-body,
.side-menu.theme-darkblue .x-container,
.side-menu.theme-darkblue .x-body{
  background: var(--sidebar-bg) !important;
}

.side-menu.theme-darkblue .x-treelist,
.side-menu.theme-darkblue .x-treelist-navigation{
  padding: 12px 10px 16px !important;
}

.side-menu.theme-darkblue .x-treelist-row{
  height: 44px !important;
  margin: 1px 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background-color .16s ease, color .16s ease;
}

.side-menu.theme-darkblue .x-treelist-item-text{
  color: var(--sidebar-muted) !important;
  margin-left: 52px !important;
  margin-right: 18px !important;
  padding: 8px 0 !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

.side-menu.theme-darkblue .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item-icon:before,
.side-menu.theme-darkblue .x-treelist-item-expander{
  color: var(--sidebar-muted) !important;
}

.side-menu.theme-darkblue .x-treelist-item-icon{
  width: 24px !important;
  padding-left: 18px !important;
  line-height: 44px !important;
}

.side-menu.theme-darkblue .x-treelist-row-over,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected{
  background: var(--sidebar-select) !important;
  border-radius: 8px !important;
}

.side-menu.theme-darkblue .x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-row-over .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-row-over .x-treelist-item-icon:before,
.side-menu.theme-darkblue .x-treelist-row-over .x-treelist-item-expander,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon:before,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row .x-treelist-item-expander,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected .x-treelist-item-icon:before,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected .x-treelist-item-expander{
  color: var(--sidebar-hover-txt) !important;
}

.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected .x-treelist-item-text{
  font-weight: 700 !important;
}

.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row::before,
.side-menu.theme-darkblue .x-treelist-row.x-treelist-row-selected::before{
  display: none !important;
}

.side-menu.theme-darkblue .x-treelist-item-expanded > .x-treelist-row{
  background: rgba(30, 58, 96, .72) !important;
  border-radius: 8px !important;
}

/* UniTreeMenu group title rows
   ---------------------------------------------------------------------------
   AmaÃƒÂ§:
   uniGUI tarafÃ„Â±nda UniTreeMenu, menÃƒÂ¼ elemanlarÃ„Â±nÃ„Â± Ext JS "treelist" HTML'i
   olarak ÃƒÂ¼retir. "ANA MENÃƒÅ“", "UYGULAMALAR" gibi grup baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± olan satÃ„Â±rlarda
   gerÃƒÂ§ek menÃƒÂ¼ ikonu yoktur; Delphi tarafÃ„Â±nda bu ÃƒÂ§oÃ„Å¸unlukla ImageIndex = -1
   anlamÃ„Â±na gelir.

   Sorun:
   SourceMenu olarak UniMenuItems kullanÃ„Â±ldÃ„Â±Ã„Å¸Ã„Â±nda ImageIndex bilgisi doÃ„Å¸rudan
   CSS seÃƒÂ§icisi olarak gelmez. Bu yÃƒÂ¼zden Main.pas iÃƒÂ§indeki kÃƒÂ¼ÃƒÂ§ÃƒÂ¼k JS kodu,
   render edilmiÃ…Å¸ satÃ„Â±rda gerÃƒÂ§ek ikon olup olmadÃ„Â±Ã„Å¸Ã„Â±nÃ„Â± kontrol eder ve ikon
   yoksa satÃ„Â±ra "imageindex-minus-one" sÃ„Â±nÃ„Â±fÃ„Â±nÃ„Â± ekler.

   Bu bÃƒÂ¶lÃƒÂ¼m:
   1. Grup baÃ…Å¸lÃ„Â±klarÃ„Â±nÃ„Â± normal menÃƒÂ¼ satÃ„Â±rÃ„Â±ndan ayÃ„Â±rÃ„Â±r.
   2. Sol ikon alanÃ„Â±nÃ„Â± gizler.
   3. BaÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± daha kÃƒÂ¼ÃƒÂ§ÃƒÂ¼k, gri ve solda gÃƒÂ¶sterir.
   4. Ã„Â°sim veya sÃ„Â±ra deÃ„Å¸iÃ…Å¸se bile class tabanlÃ„Â± ÃƒÂ§alÃ„Â±Ã…Å¸Ã„Â±r.

   Harici kullanÃ„Â±mlar iÃƒÂ§in aynÃ„Â± gÃƒÂ¶rÃƒÂ¼nÃƒÂ¼mÃƒÂ¼ manuel vermek gerekirse Ã…Å¸u class'lar
   da desteklenir: menu-group, nav-title, tree-group-title,
   imageindex-minus-one, image-index-minus-one. */
.side-menu.theme-darkblue .menu-group > .x-treelist-row,
.side-menu.theme-darkblue .nav-title > .x-treelist-row,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row,
.side-menu.theme-darkblue [data-menu-group="true"] > .x-treelist-row,
.side-menu.theme-darkblue [data-menu-title="true"] > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.menu-group > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.nav-title > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.tree-group-title > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.imageindex-minus-one > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.image-index-minus-one > .x-treelist-row{
  height: 32px !important;
  margin: 12px 0 3px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.side-menu.theme-darkblue .menu-group .x-treelist-item-icon,
.side-menu.theme-darkblue .nav-title .x-treelist-item-icon,
.side-menu.theme-darkblue .tree-group-title .x-treelist-item-icon,
.side-menu.theme-darkblue .imageindex-minus-one .x-treelist-item-icon,
.side-menu.theme-darkblue .image-index-minus-one .x-treelist-item-icon,
.side-menu.theme-darkblue [data-menu-group="true"] .x-treelist-item-icon,
.side-menu.theme-darkblue [data-menu-title="true"] .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item.menu-group .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item.nav-title .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item.tree-group-title .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item.imageindex-minus-one .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item.image-index-minus-one .x-treelist-item-icon{
  display: none !important;
}

.side-menu.theme-darkblue .menu-group .x-treelist-item-text,
.side-menu.theme-darkblue .nav-title .x-treelist-item-text,
.side-menu.theme-darkblue .tree-group-title .x-treelist-item-text,
.side-menu.theme-darkblue .imageindex-minus-one .x-treelist-item-text,
.side-menu.theme-darkblue .image-index-minus-one .x-treelist-item-text,
.side-menu.theme-darkblue [data-menu-group="true"] .x-treelist-item-text,
.side-menu.theme-darkblue [data-menu-title="true"] .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item.menu-group .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item.nav-title .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item.tree-group-title .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item.imageindex-minus-one .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item.image-index-minus-one .x-treelist-item-text{
  margin-left: 0 !important;
  padding: 5px 0 !important;
  color: #8798ad !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 18px !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.side-menu.theme-darkblue .menu-group.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .nav-title.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .tree-group-title.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .imageindex-minus-one.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .image-index-minus-one.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .x-treelist-item.menu-group > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .x-treelist-item.nav-title > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .x-treelist-item.tree-group-title > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .x-treelist-item.imageindex-minus-one > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .x-treelist-item.image-index-minus-one > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .x-treelist-item.menu-group > .x-treelist-row-over,
.side-menu.theme-darkblue .x-treelist-item.nav-title > .x-treelist-row-over,
.side-menu.theme-darkblue .x-treelist-item.tree-group-title > .x-treelist-row-over,
.side-menu.theme-darkblue .x-treelist-item.imageindex-minus-one > .x-treelist-row-over,
.side-menu.theme-darkblue .x-treelist-item.image-index-minus-one > .x-treelist-row-over{
  height: 32px !important;
  margin: 12px 0 3px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.side-menu.theme-darkblue .menu-group > .x-treelist-row::before,
.side-menu.theme-darkblue .nav-title > .x-treelist-row::before,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row::before,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row::before,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row::before{
  display: none !important;
}

.side-menu.theme-darkblue .menu-group .x-treelist-item-text,
.side-menu.theme-darkblue .nav-title .x-treelist-item-text,
.side-menu.theme-darkblue .tree-group-title .x-treelist-item-text,
.side-menu.theme-darkblue .imageindex-minus-one .x-treelist-item-text,
.side-menu.theme-darkblue .image-index-minus-one .x-treelist-item-text{
  margin-left: 0 !important;
  color: #8798ad !important;
}

/* Grup baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± hover/selected kilidi
   ---------------------------------------------------------------------------
   Ext JS, mouse menÃƒÂ¼ baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â±nÃ„Â±n ÃƒÂ¼zerine geldiÃ„Å¸inde veya satÃ„Â±rÃ„Â± geÃƒÂ§ici olarak
   seÃƒÂ§ili kabul ettiÃ„Å¸inde x-treelist-row-over / x-treelist-item-over /
   x-treelist-row-selected gibi sÃ„Â±nÃ„Â±flar ekler. Normal menÃƒÂ¼ elemanlarÃ„Â± iÃƒÂ§in
   bu sÃ„Â±nÃ„Â±flar mavi arka plan ve sol vurgu ÃƒÂ§izgisi ÃƒÂ¼retir.

   Grup baÃ…Å¸lÃ„Â±klarÃ„Â± tÃ„Â±klanabilir menÃƒÂ¼ gibi davranmamalÃ„Â±. Bu yÃƒÂ¼zden aÃ…Å¸aÃ„Å¸Ã„Â±daki
   gÃƒÂ¼ÃƒÂ§lÃƒÂ¼ seÃƒÂ§iciler, grup baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± hover/selected olsa bile arka planÃ„Â±, sol ÃƒÂ§izgiyi
   ve gÃƒÂ¶lgeyi sÃ„Â±fÃ„Â±rlar. BÃƒÂ¶ylece "UYGULAMALAR" gibi baÃ…Å¸lÃ„Â±klar mouse over sonrasÃ„Â±
   mavi kutuya dÃƒÂ¶nÃƒÂ¼Ã…Å¸mez ve kalÃ„Â±cÃ„Â± olarak bozulmaz. */
.side-menu.theme-darkblue .menu-group.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .menu-group.x-treelist-item-over > .x-treelist-row,
.side-menu.theme-darkblue .menu-group > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .menu-group > .x-treelist-row.x-treelist-row-over,
.side-menu.theme-darkblue .menu-group > .x-treelist-row-over,
.side-menu.theme-darkblue .nav-title.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .nav-title.x-treelist-item-over > .x-treelist-row,
.side-menu.theme-darkblue .nav-title > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .nav-title > .x-treelist-row.x-treelist-row-over,
.side-menu.theme-darkblue .nav-title > .x-treelist-row-over,
.side-menu.theme-darkblue .tree-group-title.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .tree-group-title.x-treelist-item-over > .x-treelist-row,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row.x-treelist-row-over,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row-over,
.side-menu.theme-darkblue .imageindex-minus-one.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .imageindex-minus-one.x-treelist-item-over > .x-treelist-row,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row.x-treelist-row-over,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row-over,
.side-menu.theme-darkblue .image-index-minus-one.x-treelist-item-selected > .x-treelist-row,
.side-menu.theme-darkblue .image-index-minus-one.x-treelist-item-over > .x-treelist-row,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row.x-treelist-row-selected,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row.x-treelist-row-over,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row-over{
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Ext/uniGUI seÃƒÂ§ili satÃ„Â±r efektini bazen ::before ile sol Ã…Å¸erit olarak basar.
   Grup baÃ…Å¸lÃ„Â±klarÃ„Â±nda bu Ã…Å¸erit gÃƒÂ¶rÃƒÂ¼nmemeli; aksi halde baÃ…Å¸lÃ„Â±k normal menÃƒÂ¼
   seÃƒÂ§imi gibi algÃ„Â±lanÃ„Â±r. */
.side-menu.theme-darkblue .menu-group > .x-treelist-row::before,
.side-menu.theme-darkblue .menu-group > .x-treelist-row-over::before,
.side-menu.theme-darkblue .nav-title > .x-treelist-row::before,
.side-menu.theme-darkblue .nav-title > .x-treelist-row-over::before,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row::before,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row-over::before,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row::before,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row-over::before,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row::before,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row-over::before{
  display: none !important;
  content: none !important;
}

/* Hover/selected sÃ„Â±rasÃ„Â±nda ÃƒÂ¼stteki genel menÃƒÂ¼ kuralÃ„Â± yazÃ„Â±yÃ„Â± beyaza ve kalÃ„Â±na
   ÃƒÂ§evirebilir. Grup baÃ…Å¸lÃ„Â±klarÃ„Â±nda rengi ve tipografiyi tekrar sabitliyoruz. */
.side-menu.theme-darkblue .menu-group.x-treelist-item-selected .x-treelist-item-text,
.side-menu.theme-darkblue .menu-group.x-treelist-item-over .x-treelist-item-text,
.side-menu.theme-darkblue .menu-group > .x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .nav-title.x-treelist-item-selected .x-treelist-item-text,
.side-menu.theme-darkblue .nav-title.x-treelist-item-over .x-treelist-item-text,
.side-menu.theme-darkblue .nav-title > .x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .tree-group-title.x-treelist-item-selected .x-treelist-item-text,
.side-menu.theme-darkblue .tree-group-title.x-treelist-item-over .x-treelist-item-text,
.side-menu.theme-darkblue .tree-group-title > .x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .imageindex-minus-one.x-treelist-item-selected .x-treelist-item-text,
.side-menu.theme-darkblue .imageindex-minus-one.x-treelist-item-over .x-treelist-item-text,
.side-menu.theme-darkblue .imageindex-minus-one > .x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .image-index-minus-one.x-treelist-item-selected .x-treelist-item-text,
.side-menu.theme-darkblue .image-index-minus-one.x-treelist-item-over .x-treelist-item-text,
.side-menu.theme-darkblue .image-index-minus-one > .x-treelist-row-over .x-treelist-item-text{
  margin-left: 0 !important;
  color: #8798ad !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ORANGE */
.side-menu.theme-orange{
  --sidebar-bg:#452a06; --sidebar-bg2:#5a3607;
  --sidebar-text:#ffeedd; --sidebar-muted:#ffd6a6;
  --sidebar-hover:#ef6c00; --sidebar-hover-txt:#ffffff;
  --sidebar-sep:rgba(255,255,255,.12);
  --sidebar-select:rgba(251,140,0,.18);
  --sidebar-accent:#fb8c00;
}
.dash-scope.theme-orange{
  --page-bg:#fff7ef;                    /* sÃ„Â±cak aÃƒÂ§Ã„Â±k zemin */
}

/* ---------- Scoped UniEdit / form fields ----------
   Bu kurallar artÃ„Â±k global .x-form-* sÃ„Â±nÃ„Â±flarÃ„Â±na uygulanmaz. Sadece
   Main.pas iÃƒÂ§inde "modern-edit" class'Ã„Â± verilen edit/search bileÃ…Å¸enlerinde
   ÃƒÂ§alÃ„Â±Ã…Å¸Ã„Â±r. BÃƒÂ¶ylece grid filtreleri, pager alanlarÃ„Â±, comboboxlar ve diÃ„Å¸er
   standart uniGUI form bileÃ…Å¸enleri etkilenmez. */
.modern-edit .x-form-text-default,
.modern-edit .x-form-text,
.modern-edit .x-form-field,
.modern-edit .x-form-trigger-wrap-default,
.modern-edit .x-form-trigger-wrap,
.modern-edit .x-form-text-wrap,
.modern-edit .x-form-item-body-default .x-form-text {
  border-radius: 999px !important;
}

.modern-edit .x-form-text-default,
.modern-edit .x-form-text,
.modern-edit .x-form-field {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  color: #334155 !important;
  background: #edf4f8 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.modern-edit .x-form-trigger-wrap-default,
.modern-edit .x-form-trigger-wrap,
.modern-edit .x-form-text-wrap {
  min-height: 32px !important;
  height: 32px !important;
  background: #edf4f8 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.modern-edit .x-form-trigger-wrap-default .x-form-text,
.modern-edit .x-form-trigger-wrap .x-form-text {
  background: transparent !important;
  border: 0 !important;
}

.modern-edit .x-form-trigger-default,
.modern-edit .x-form-trigger {
  min-height: 32px !important;
  height: 32px !important;
  color: #6b7f99 !important;
  background: transparent !important;
  border: 0 !important;
}

.modern-edit .x-form-text-default::placeholder,
.modern-edit .x-form-text::placeholder,
.modern-edit .x-form-field::placeholder {
  color: #718198 !important;
  opacity: 1 !important;
}

.modern-edit .x-form-trigger-wrap-focus,
.modern-edit .x-form-text-default:focus,
.modern-edit .x-form-text:focus,
.modern-edit .x-form-field:focus {
  background: #ffffff !important;
  border-color: #c7d6e5 !important;
  box-shadow: 0 0 0 3px rgba(47, 134, 255, .10) !important;
  outline: none !important;
}



/* Modern combobox
   ---------------------------------------------------------------------------
   UniComboBox icin loginInput ile ayni sade form gorunumunu uygular.
   Sadece modern-combo veya modern-combobox class'i verilen comboboxlari etkiler;
   standart uniGUI combobox, grid filtreleri ve pager alanlari degismez. */
.modern-combo .x-form-trigger-wrap,
.modern-combo .x-form-trigger-wrap-default,
.modern-combo .x-form-text-wrap,
.modern-combo .x-form-text-wrap-default,
.modern-combobox .x-form-trigger-wrap,
.modern-combobox .x-form-trigger-wrap-default,
.modern-combobox .x-form-text-wrap,
.modern-combobox .x-form-text-wrap-default {
  min-height: 28px !important;
  height: 28px !important;
  border: 1px solid #d7dce5 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s, box-shadow .2s !important;
  overflow: hidden !important;
}

.modern-combo .x-form-trigger-wrap-focus,
.modern-combo .x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.modern-combo .x-form-text-wrap:focus-within,
.modern-combo .x-form-text-wrap-default:focus-within,
.modern-combobox .x-form-trigger-wrap-focus,
.modern-combobox .x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.modern-combobox .x-form-text-wrap:focus-within,
.modern-combobox .x-form-text-wrap-default:focus-within {
  border-color: #7ea6ff !important;
  box-shadow: 0 0 0 1px rgba(126,166,255,.25) !important;
}

.modern-combo .x-form-trigger-wrap .x-form-text-wrap,
.modern-combo .x-form-trigger-wrap-default .x-form-text-wrap,
.modern-combo .x-form-trigger-wrap .x-form-item-body,
.modern-combo .x-form-trigger-wrap-default .x-form-item-body,
.modern-combobox .x-form-trigger-wrap .x-form-text-wrap,
.modern-combobox .x-form-trigger-wrap-default .x-form-text-wrap,
.modern-combobox .x-form-trigger-wrap .x-form-item-body,
.modern-combobox .x-form-trigger-wrap-default .x-form-item-body {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-combo .x-form-trigger-wrap input.x-form-field,
.modern-combo .x-form-trigger-wrap-default input.x-form-field,
.modern-combo .x-form-trigger-wrap .x-form-text,
.modern-combo .x-form-trigger-wrap-default .x-form-text,
.modern-combo .x-form-trigger-wrap .x-form-text-default,
.modern-combo .x-form-trigger-wrap-default .x-form-text-default,
.modern-combobox .x-form-trigger-wrap input.x-form-field,
.modern-combobox .x-form-trigger-wrap-default input.x-form-field,
.modern-combobox .x-form-trigger-wrap .x-form-text,
.modern-combobox .x-form-trigger-wrap-default .x-form-text,
.modern-combobox .x-form-trigger-wrap .x-form-text-default,
.modern-combobox .x-form-trigger-wrap-default .x-form-text-default {
  height: 26px !important;
  min-height: 26px !important;
  padding: 4px 6px !important;
  color: #334155 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
}

.modern-combo .x-form-trigger,
.modern-combo .x-form-trigger-default,
.modern-combobox .x-form-trigger,
.modern-combobox .x-form-trigger-default {
  width: 24px !important;
  min-width: 24px !important;
  height: 26px !important;
  min-height: 26px !important;
  color: #6b7f99 !important;
  background: transparent !important;
  border: 0 !important;
}

.modern-combo .x-form-arrow-trigger::before,
.modern-combo .x-form-trigger-default::before,
.modern-combobox .x-form-arrow-trigger::before,
.modern-combobox .x-form-trigger-default::before {
  content: "\f107" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  color: #6b7f99 !important;
}

.modern-combo .x-form-empty-field,
.modern-combo .x-form-text::placeholder,
.modern-combo .x-form-field::placeholder,
.modern-combobox .x-form-empty-field,
.modern-combobox .x-form-text::placeholder,
.modern-combobox .x-form-field::placeholder {
  color: #718198 !important;
  opacity: 1 !important;
}


/* ---------- Scoped UniPageControl tab headers ----------
   Sadece "modern-pagecontrol" class'i verilen PageControl'un sekme basliklarini
   modernlestirir. Bilerek panel body, tab panel, grid, pager veya form alanlari
   hedeflenmez; bu sayede PageControl icindeki standart uniGUI bilesenleri
   kendi temasiyla calismaya devam eder. */
.modern-pagecontrol > .x-tab-bar,
.modern-pagecontrol .x-tab-bar {
  background: #f6f9fc !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 8px 12px 0 12px !important;
}

.modern-pagecontrol .x-tab-bar-strip,
.modern-pagecontrol .x-tab-bar-strip-default,
.modern-pagecontrol .x-tab-bar-strip-top,
.modern-pagecontrol .x-tab-bar-strip-default-top {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.modern-pagecontrol .x-tab {
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 4px 0 0 !important;
  padding: 0 14px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.modern-pagecontrol .x-tab-inner {
  color: #64748b !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  padding: 0 !important;
}

.modern-pagecontrol .x-tab-over,
.modern-pagecontrol .x-tab-focus {
  background: #edf4f8 !important;
  border-color: #d7e3ef !important;
}

.modern-pagecontrol .x-tab-over .x-tab-inner,
.modern-pagecontrol .x-tab-focus .x-tab-inner {
  color: #132236 !important;
}

.modern-pagecontrol .x-tab-active {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #c7d6e5 !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -2px 0 #2f86ff !important;
}

.modern-pagecontrol .x-tab-active .x-tab-inner {
  color: #132236 !important;
  font-weight: 700 !important;
}

/* ---------- Scoped UniDBGrid ----------
   Sadece "modern-grid" class'i verilen UniDBGrid icin calisir. Global .x-grid-*
   kullanmadigimiz icin diger gridler, lookup listeleri ve standart uniGUI
   tablolar etkilenmez.

   Tasarim hedefi:
   - Eski kabartmali Ext grid gorunumunu kaldirmak.
   - Grid baslik/filter alanlarina dokunmadan tablo govdesini modernlestirmek.
   - Satirlari okunakli ama kolon olcumlerini bozmayacak olcude ferah tutmak.
   - Secim/hover durumlarini pastel maviyle gostermek.
   - Alt pager'i ayni tasarim diline yaklastirmak. */
/* Modern grid panel title/header
   UniDBGrid'in Title/Caption alanini modern-grid temasi ile uyumlu hale getirir.
   Bu bolum sadece grid panelinin ust baslik seridini hedefler; kolon basliklari,
   filtre satiri, veri hucreleri ve pager kurallari etkilenmez. */
.modern-grid.x-panel .x-panel-header,
.modern-grid .x-panel-header,
.modern-grid.x-panel .x-panel-header-default,
.modern-grid .x-panel-header-default,
.modern-grid.x-panel .x-panel-header-default-top,
.modern-grid .x-panel-header-default-top {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #c7d6e5 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%) !important;
  background-image: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%) !important;
  box-shadow: none !important;
}

.modern-grid.x-panel .x-panel-header-body,
.modern-grid .x-panel-header-body,
.modern-grid.x-panel .x-panel-header-inner,
.modern-grid .x-panel-header-inner,
.modern-grid.x-panel .x-panel-header .x-box-inner,
.modern-grid .x-panel-header .x-box-inner {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modern-grid.x-panel .x-panel-header-title,
.modern-grid .x-panel-header-title,
.modern-grid.x-panel .x-title,
.modern-grid .x-title,
.modern-grid.x-panel .x-title-text,
.modern-grid .x-title-text,
.modern-grid.x-panel .x-title-text-default,
.modern-grid .x-title-text-default {
  color: #173a63 !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 38px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Modern grid header
   Sadece modern-grid verilen UniDBGrid'in kolon basliklarini govdeyle uyumlu
   hale getirir. Filtre/editor alanlarini hedeflemez. */
.modern-grid .x-grid-header-ct {
  background: #f6f9fc !important;
  background-image: none !important;
  border-top: 1px solid #c7d6e5 !important;
  border-bottom: 1px solid #c7d6e5 !important;
  box-shadow: none !important;
}

.modern-grid .x-column-header,
.modern-grid .x-column-header-inner {
  background: #f6f9fc !important;
  background-image: none !important;
  border-color: #d5e1ec !important;
  box-shadow: none !important;
}

.modern-grid .x-column-header {
  min-height: 34px !important;
  border-right: 1px solid #d5e1ec !important;
}

.modern-grid .x-column-header-inner {
  min-height: 34px !important;
  padding: 7px 10px !important;
}

.modern-grid .x-column-header-text,
.modern-grid .x-column-header-text-inner {
  color: #132236 !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
}
/* Modern grid outer side borders
   Sadece modern-grid verilen UniDBGrid'in dis sol/sag kenar cizgilerini geri
   verir. Baslik, filtre ve hucre olcumlerine dokunmaz. */
.modern-grid,
.modern-grid .x-panel-body,
.modern-grid .x-grid,
.modern-grid .x-grid-body,
.modern-grid .x-grid-view,
.modern-grid .x-grid-body-wrap,
.modern-grid .x-grid-scrollbar-clipper,
.modern-grid .x-grid-header-ct {
  border-left: 1px solid #c7d6e5 !important;
  border-right: 1px solid #c7d6e5 !important;
  box-sizing: border-box !important;
}

.modern-grid,
.modern-grid .x-grid-body,
.modern-grid .x-grid-view,
.modern-grid .x-grid-body-wrap {
  box-shadow: inset 1px 0 0 #b9cbe0, inset -1px 0 0 #b9cbe0 !important;
}
.modern-grid .x-grid-item,
.modern-grid .x-grid-row,
.modern-grid .x-grid-rowbody {
  background: #ffffff;
  color: #26364a !important;
  font-size: 13px !important;
}

.modern-grid .x-grid-cell {
  border-color: #d5e1ec !important;
  border-width: 0 0 1px 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

.modern-grid .x-grid-cell-inner {
  min-height: 36px !important;
  padding: 8px 10px !important;
  color: #26364a !important;
  font-size: 13px !important;
  line-height: 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DisplayMemo=True kolonlarinda metin dogrudan x-grid-cell-inner icine
   yazildigi icin nowrap/ellipsis baskisini govde hucrelerinde kaldiriyoruz.
   Kural yalniz modern-grid veri satirlarina uygulanir; header, filter, pager ve
   action column bu kapsama girmez. */
.modern-grid .x-grid-item .x-grid-cell:not(.x-action-col-cell):not(.x-grid-cell-actioncolumn):not(.x-grid-cell-action),
.modern-grid .x-grid-row .x-grid-cell:not(.x-action-col-cell):not(.x-grid-cell-actioncolumn):not(.x-grid-cell-action) {
  vertical-align: middle !important;
}

.modern-grid .x-grid-item .x-grid-cell:not(.x-action-col-cell):not(.x-grid-cell-actioncolumn):not(.x-grid-cell-action) .x-grid-cell-inner,
.modern-grid .x-grid-row .x-grid-cell:not(.x-action-col-cell):not(.x-grid-cell-actioncolumn):not(.x-grid-cell-action) .x-grid-cell-inner {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Modern grid centered body cells
   DisplayMemo satir kaydirma destegi icin veri hucrelerinin icini flex yaptik.
   ExtJS/uniGUI kolon Alignment=taCenter bilgisini bazen hucreye class, bazen
   inline text-align olarak yazar. Flex yerlesimde text-align tek basina yatay
   hizalamaya yetmedigi icin sadece modern-grid veri hucrelerinde center bilgisini
   justify-content:center'a ceviriyoruz. Header, filter, pager ve normal gridler
   bu kapsamin disinda kalir. */
.modern-grid .x-grid-item .x-grid-cell-align-center .x-grid-cell-inner,
.modern-grid .x-grid-row .x-grid-cell-align-center .x-grid-cell-inner,
.modern-grid .x-grid-item .x-grid-cell-inner-align-center,
.modern-grid .x-grid-row .x-grid-cell-inner-align-center,
.modern-grid .x-grid-item .x-grid-cell[style*="text-align: center"] .x-grid-cell-inner,
.modern-grid .x-grid-row .x-grid-cell[style*="text-align: center"] .x-grid-cell-inner,
.modern-grid .x-grid-item .x-grid-cell[style*="text-align:center"] .x-grid-cell-inner,
.modern-grid .x-grid-row .x-grid-cell[style*="text-align:center"] .x-grid-cell-inner,
.modern-grid .x-grid-item .x-grid-cell-inner[style*="text-align: center"],
.modern-grid .x-grid-row .x-grid-cell-inner[style*="text-align: center"],
.modern-grid .x-grid-item .x-grid-cell-inner[style*="text-align:center"],
.modern-grid .x-grid-row .x-grid-cell-inner[style*="text-align:center"] {
  justify-content: center !important;
  text-align: center !important;
}

.modern-grid .x-grid-row-over .x-grid-cell,
.modern-grid .x-grid-item-over .x-grid-cell {
  background: #f1f7fd;
}

.modern-grid .x-grid-row-selected .x-grid-cell,
.modern-grid .x-grid-item-selected .x-grid-cell {
  background: #eaf3ff;
}

.modern-grid .x-grid-row-focused .x-grid-cell-inner,
.modern-grid .x-grid-item-focused .x-grid-cell-inner {
  outline: 0 !important;
}

.modern-grid .x-grid-checkcolumn,
.modern-grid .x-grid-row-checker {
  border-radius: 5px !important;
}

.modern-grid .x-grid-empty {
  color: #64748b !important;
  padding: 22px !important;
  font-size: 13px !important;
}

/* Modern grid pager
   Yalnizca gridin ALTTA dock edilen paging toolbar bolumunu hedefler.
   Bilerek genel ".modern-grid .x-toolbar" kullanmiyoruz; cunku uniGUI filtre
   satiri, kolon basliklari veya editor toolbar'lari da ayni ExtJS toolbar
   siniflarini kullanabilir. Bu bolum sadece sayfalama cubugunun arka planini,
   butonlarini, sayfa inputunu ve bilgi metnini modern temaya yaklastirir. */
.modern-grid .x-docked-bottom,
.modern-grid .x-toolbar-docked-bottom,
.modern-grid .x-docked-bottom.x-toolbar,
.modern-grid .x-toolbar-docked-bottom.x-toolbar {
  min-height: 34px !important;
  padding: 3px 8px !important;
  border-top: 1px solid #c7d6e5 !important;
  border-right: 1px solid #c7d6e5 !important;
  border-bottom: 0 !important;
  border-left: 1px solid #c7d6e5 !important;
  background: #f6f9fc !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
}

.modern-grid .x-docked-bottom .x-toolbar-item,
.modern-grid .x-toolbar-docked-bottom .x-toolbar-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.modern-grid .x-docked-bottom .x-btn,
.modern-grid .x-toolbar-docked-bottom .x-btn,
.modern-grid .x-docked-bottom .x-btn-default-toolbar-small,
.modern-grid .x-toolbar-docked-bottom .x-btn-default-toolbar-small {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.modern-grid .x-docked-bottom .x-btn-over,
.modern-grid .x-toolbar-docked-bottom .x-btn-over,
.modern-grid .x-docked-bottom .x-btn-focus,
.modern-grid .x-toolbar-docked-bottom .x-btn-focus,
.modern-grid .x-docked-bottom .x-btn-pressed,
.modern-grid .x-toolbar-docked-bottom .x-btn-pressed {
  border-color: #c7d6e5 !important;
  background: #e8f1fb !important;
  background-image: none !important;
}

.modern-grid .x-docked-bottom .x-btn-disabled,
.modern-grid .x-toolbar-docked-bottom .x-btn-disabled {
  opacity: .42 !important;
}

.modern-grid .x-docked-bottom .x-btn-icon-el,
.modern-grid .x-toolbar-docked-bottom .x-btn-icon-el,
.modern-grid .x-docked-bottom .x-btn-glyph,
.modern-grid .x-toolbar-docked-bottom .x-btn-glyph {
  color: #2f86ff !important;
  font-size: 13px !important;
}

.modern-grid .x-docked-bottom .x-toolbar-text,
.modern-grid .x-toolbar-docked-bottom .x-toolbar-text,
.modern-grid .x-docked-bottom .x-form-display-field,
.modern-grid .x-toolbar-docked-bottom .x-form-display-field {
  color: #42526b !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.modern-grid .x-docked-bottom .x-form-text,
.modern-grid .x-toolbar-docked-bottom .x-form-text,
.modern-grid .x-docked-bottom .x-form-field,
.modern-grid .x-toolbar-docked-bottom .x-form-field {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid #c7d6e5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #132236 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 24px !important;
  text-align: center !important;
}

.modern-grid .x-docked-bottom .x-form-trigger-wrap,
.modern-grid .x-toolbar-docked-bottom .x-form-trigger-wrap,
.modern-grid .x-docked-bottom .x-form-text-wrap,
.modern-grid .x-toolbar-docked-bottom .x-form-text-wrap {
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-grid .x-docked-bottom .x-toolbar-separator,
.modern-grid .x-toolbar-docked-bottom .x-toolbar-separator {
  height: 18px !important;
  margin: 0 6px !important;
  border-color: #d5e1ec !important;
}
/* Modern grid pager info alignment
   Main.pas render sonrasinda pagingtoolbar icine modernGridPagingFill ekler
   ve displayItem'i en sona alir. Bu CSS o bilgi alanini sagda, okunakli ve
   grid temasi ile uyumlu gosterir. */
.modern-grid .x-docked-bottom #modernGridPagingFill,
.modern-grid .x-toolbar-docked-bottom #modernGridPagingFill,
.modern-grid .x-docked-bottom .modern-grid-paging-fill,
.modern-grid .x-toolbar-docked-bottom .modern-grid-paging-fill,
.modern-grid .x-docked-bottom .x-toolbar-fill,
.modern-grid .x-toolbar-docked-bottom .x-toolbar-fill {
  flex: 1 1 auto !important;
}

.modern-grid .x-docked-bottom #displayItem,
.modern-grid .x-toolbar-docked-bottom #displayItem,
.modern-grid .x-docked-bottom .modern-grid-display-info,
.modern-grid .x-toolbar-docked-bottom .modern-grid-display-info,
.modern-grid .x-docked-bottom .x-toolbar-text:last-child,
.modern-grid .x-toolbar-docked-bottom .x-toolbar-text:last-child {
  margin-left: auto !important;
  color: #42526b !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
}
/* Modern loading / screenmask
   uniGUI/ExtJS varsayilan ScreenMask ve LoadMask alanlari klasik "Loading..."
   metni ve eski loading gifi ile gelir. Bu genel blok ana uygulamadaki
   buton, grid, form ve ajax yuklenme maskelerini login ekranindaki modern
   cam yuzeyli spinner ile ayni hale getirir. */
@keyframes appLegalLoadingPulse {
  0%, 100% {
    box-shadow: 0 18px 45px rgba(19, 32, 51, .14);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 22px 58px rgba(27, 79, 138, .20);
    transform: scale(1.035);
  }
}

@keyframes appLegalLoadingRing {
  0%, 100% {
    opacity: .42;
    transform: scale(.92);
  }
  50% {
    opacity: .9;
    transform: scale(1.04);
  }
}

/* UniTreeMenu ImageIndex=-1 group headings
   ---------------------------------------------------------------------------
   Main.pas, ImageIndex < 0 olan menu basliklarinin kendi .x-treelist-row
   elemanina imageindex-minus-one-row class'i ekler. Bu CSS sadece o satiri
   hedefler; genis descendant selector kullanmaz. Bu sayede alt menu elemanlari
   ve ikonlu normal menu satirlari etkilenmez. */
.side-menu .x-treelist-row.imageindex-minus-one-row,
.side-menu .x-treelist-row.imageindex-minus-one-row.x-treelist-row-over,
.side-menu .x-treelist-item-selected > .x-treelist-row.imageindex-minus-one-row,
.side-menu .x-treelist-item-expanded > .x-treelist-row.imageindex-minus-one-row {
  height: 30px !important;
  min-height: 30px !important;
  margin: 10px 0 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.side-menu .x-treelist-row.imageindex-minus-one-row::before,
.side-menu .x-treelist-row.imageindex-minus-one-row.x-treelist-row-over::before,
.side-menu .x-treelist-item-selected > .x-treelist-row.imageindex-minus-one-row::before {
  display: none !important;
  content: none !important;
}

.side-menu .x-treelist-row.imageindex-minus-one-row .x-treelist-item-icon {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.side-menu .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu .x-treelist-row.imageindex-minus-one-row.x-treelist-row-over .x-treelist-item-text,
.side-menu .x-treelist-item-selected > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu .x-treelist-item-expanded > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 18px !important;
  margin-right: 0 !important;
  padding: 4px 0 !important;
  transform: none !important;
  color: var(--sidebar-muted, #9EADBF) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 18px !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Sidebar compact alignment and expander polish
   ---------------------------------------------------------------------------
   Genel sidebar yerlesimi oturduktan sonra menu satirlarini cok az sola alir
   ve alt menu acma okunu daha okunur hale getirir. Bu blok sadece .side-menu
   icinde calisir; grid, pagecontrol veya diger uniGUI bilesenlerine dokunmaz. */
.side-menu .x-treelist-item-icon {
  padding-left: 6px !important;
}

.side-menu .x-treelist-item-text {
  margin-left: 23px !important;
  padding-left: 8px !important;
}

.side-menu .x-treelist-item-expander {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -9px !important;
  padding: 0 !important;
  color: var(--sidebar-muted, #9EADBF) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  text-align: center !important;
  opacity: .95 !important;
}

.side-menu .x-treelist-row-over .x-treelist-item-expander,
.side-menu .x-treelist-item-selected > .x-treelist-row .x-treelist-item-expander {
  color: var(--sidebar-hover-txt, #ffffff) !important;
}

.side-menu .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu .x-treelist-row.imageindex-minus-one-row.x-treelist-row-over .x-treelist-item-text,
.side-menu .x-treelist-item-selected > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu .x-treelist-item-expanded > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text {
  margin-left: 12px !important;
  padding-left: 0 !important;
}

/* Darkblue sidebar compact alignment override
   ---------------------------------------------------------------------------
   Darkblue temasinda daha eski ve daha spesifik bir kural vardir:
   .side-menu.theme-darkblue .x-treelist-item-text { margin-left: 52px }
   Bu kural genel .side-menu hizalamasini ezer. Bu blok en sonda durur ve
   darkblue temasini blue ile ayni kompakt hizaya getirir. */
.side-menu.theme-darkblue .x-treelist-item-icon {
  padding-left: 2px !important;
}

.side-menu.theme-darkblue .x-treelist-item-text {
  margin-left: 18px !important;
  padding-left: 6px !important;
}

.side-menu.theme-darkblue .x-treelist-item-expander {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -9px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  text-align: center !important;
}

.side-menu.theme-darkblue .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-row.imageindex-minus-one-row.x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item-expanded > .x-treelist-row.imageindex-minus-one-row .x-treelist-item-text {
  margin-left: 8px !important;
  padding-left: 0 !important;
}



/* Darkblue submenu false-group reset
   ---------------------------------------------------------------------------
   Darkblue temasinin eski bolumunde .imageindex-minus-one .x-treelist-item-*
   seklinde descendant selector'lar kaldi. Bir ust menu ImageIndex=-1 oldugunda
   bu kurallar alt menu satirlarina da sizabiliyor ve alt menudeki ikonlari
   gizleyip yaziyi grup basligi gibi buyuk harfe cevirebiliyor.

   Blue temadaki saglam davranisi darkblue'a da tasimak icin burada sadece
   kendi satiri imageindex-minus-one-row OLMAYAN menu satirlarini normale
   donduruyoruz. Gercek grup basliklari yine yukaridaki row bazli kurallarla
   solda, kucuk ve ikonsuz gorunmeye devam eder. */
.side-menu.theme-darkblue .x-treelist-item > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-icon {
  display: inline-block !important;
  width: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding-left: 2px !important;
  color: var(--sidebar-muted, #9EADBF) !important;
  font-size: 16px !important;
  line-height: 40px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.side-menu.theme-darkblue .x-treelist-item > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-icon:before {
  color: var(--sidebar-muted, #9EADBF) !important;
}

.side-menu.theme-darkblue .x-treelist-item > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-text {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 18px !important;
  margin-right: 18px !important;
  padding: 8px 0 8px 6px !important;
  transform: none !important;
  color: var(--sidebar-muted, #9EADBF) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 24px !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.side-menu.theme-darkblue .x-treelist-row:not(.imageindex-minus-one-row).x-treelist-row-over .x-treelist-item-text,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-text {
  color: var(--sidebar-hover-txt, #ffffff) !important;
}

.side-menu.theme-darkblue .x-treelist-row:not(.imageindex-minus-one-row).x-treelist-row-over .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-row:not(.imageindex-minus-one-row).x-treelist-row-over .x-treelist-item-icon:before,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-icon,
.side-menu.theme-darkblue .x-treelist-item-selected > .x-treelist-row:not(.imageindex-minus-one-row) .x-treelist-item-icon:before {
  color: var(--sidebar-hover-txt, #ffffff) !important;
}

/* Modern edit clear trigger fix
   ------------------------------------------------------------
   UniEdit ClearButton aktif oldugunda ExtJS sag tarafta clear trigger alanini
   olusturur. Modern edit stilimiz trigger arka planlarini seffaf yaptigi icin
   varsayilan temizleme ikonu bazi temalarda gorunmez kalabiliyor. Bu blok
   sadece modern-edit class'i verilen editleri etkiler; grid filtreleri ve
   standart uniGUI editleri degismez. */
.modern-edit .x-form-clear-trigger,
.modern-edit .x-form-clear-trigger-default,
.modern-edit .x-form-trigger-clear,
.modern-edit .x-form-trigger-clear-default {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 32px !important;
  min-height: 32px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: #6b7f99 !important;
  cursor: pointer !important;
}

.modern-edit .x-form-clear-trigger::before,
.modern-edit .x-form-clear-trigger-default::before,
.modern-edit .x-form-trigger-clear::before,
.modern-edit .x-form-trigger-clear-default::before {
  content: "\f00d" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  color: #718198 !important;
  background: rgba(100, 116, 139, .10) !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
}

.modern-edit .x-form-clear-trigger:hover::before,
.modern-edit .x-form-clear-trigger-default:hover::before,
.modern-edit .x-form-trigger-clear:hover::before,
.modern-edit .x-form-trigger-clear-default:hover::before {
  color: #1f6fb2 !important;
  background: rgba(47, 134, 255, .14) !important;
}

.modern-edit .x-form-trigger-wrap .x-form-text,
.modern-edit .x-form-trigger-wrap-default .x-form-text {
  padding-right: 24px !important;
}

/* Modern edit compact clear cell fix
   ------------------------------------------------------------
   Clear ikonu gorunse bile ExtJS trigger hucreleri varsayilan genisligini
   koruyabiliyor. Bu son override sadece modern-edit icindeki clear/trigger
   hucrelerini x ikonuna yetecek kadar daraltir. */
.modern-edit .x-form-trigger-wrap .x-form-trigger,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger,
.modern-edit .x-form-trigger-wrap .x-form-trigger-default,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger-default,
.modern-edit .x-form-trigger-wrap .x-form-clear-trigger,
.modern-edit .x-form-trigger-wrap-default .x-form-clear-trigger,
.modern-edit .x-form-trigger-wrap .x-form-clear-trigger-default,
.modern-edit .x-form-trigger-wrap-default .x-form-clear-trigger-default,
.modern-edit .x-form-trigger-wrap .x-form-trigger-clear,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger-clear {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 20px !important;
  background-size: 0 0 !important;
}

.modern-edit .x-form-trigger-wrap .x-form-text,
.modern-edit .x-form-trigger-wrap-default .x-form-text,
.modern-edit .x-form-trigger-wrap .x-form-field,
.modern-edit .x-form-trigger-wrap-default .x-form-field {
  padding-right: 8px !important;
}

.modern-edit .x-form-clear-trigger::before,
.modern-edit .x-form-clear-trigger-default::before,
.modern-edit .x-form-trigger-clear::before,
.modern-edit .x-form-trigger-clear-default::before {
  width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  font-size: 8px !important;
}
/* Modern edit trigger layout final fix
   ------------------------------------------------------------
   ClearButton aktif editlerde ExtJS disarida trigger-wrap, iceride ayrica
   input elementi uretir. Input kendi beyaz kapsulunu cizince sag tarafta
   genis bir "temizle bolumu" varmis gibi gorunur. Cozum: trigger-wrap tek
   kapsul olur; ic input seffaflasir ve kalan alanin tamamini doldurur. */
.modern-edit .x-form-trigger-wrap,
.modern-edit .x-form-trigger-wrap-default {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 6px 0 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #edf4f8 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.modern-edit .x-form-trigger-wrap-focus,
.modern-edit .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
  background: #ffffff !important;
  border-color: #c7d6e5 !important;
  box-shadow: 0 0 0 3px rgba(47, 134, 255, .10) !important;
}

.modern-edit .x-form-trigger-wrap .x-form-text-wrap,
.modern-edit .x-form-trigger-wrap-default .x-form-text-wrap,
.modern-edit .x-form-trigger-wrap .x-form-item-body,
.modern-edit .x-form-trigger-wrap-default .x-form-item-body {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-edit .x-form-trigger-wrap input.x-form-field,
.modern-edit .x-form-trigger-wrap-default input.x-form-field,
.modern-edit .x-form-trigger-wrap .x-form-text,
.modern-edit .x-form-trigger-wrap-default .x-form-text,
.modern-edit .x-form-trigger-wrap .x-form-text-default,
.modern-edit .x-form-trigger-wrap-default .x-form-text-default {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.modern-edit .x-form-trigger-wrap .x-form-trigger,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger,
.modern-edit .x-form-trigger-wrap .x-form-trigger-default,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger-default,
.modern-edit .x-form-trigger-wrap .x-form-clear-trigger,
.modern-edit .x-form-trigger-wrap-default .x-form-clear-trigger,
.modern-edit .x-form-trigger-wrap .x-form-clear-trigger-default,
.modern-edit .x-form-trigger-wrap-default .x-form-clear-trigger-default,
.modern-edit .x-form-trigger-wrap .x-form-trigger-clear,
.modern-edit .x-form-trigger-wrap-default .x-form-trigger-clear {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

.modern-edit .x-form-clear-trigger::before,
.modern-edit .x-form-clear-trigger-default::before,
.modern-edit .x-form-trigger-clear::before,
.modern-edit .x-form-trigger-clear-default::before {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  line-height: 14px !important;
  font-size: 8px !important;
}
/* Scoped app loading / screenmask logo
   ---------------------------------------------------------------------------
   Bu blok yalnizca uniGUI'nin bekleme katmanlarini hedefler: ilk yukleme icin
   #loading/#loading-msg, islemler sirasindaki ScreenMask icin .x-mask-msg.
   Bilerek .x-window, .x-message-box, .x-panel veya genel button siniflarina
   dokunmaz; bu sayede ShowMessage ve standart popup/dialog cerceveleri bozulmaz. */
@keyframes appScopedLoadingRing {
  to { transform: rotate(360deg); }
}

@keyframes appScopedLoadingLogoBreath {
  0%, 100% { opacity: .96; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

#loading,
#loading-mask {
  background: rgba(232, 241, 250, .52) !important;
  backdrop-filter: blur(8px) !important;
}

#loading-msg,
#loading .loading-indicator {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
}

#loading-msg,
#loading .loading-indicator,
.x-mask-msg,
.x-mask-msg-default {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#loading-msg,
#loading .loading-indicator,
.x-mask-msg-inner,
.x-mask-msg-text {
  position: relative !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  text-indent: 0 !important;
}

.x-mask-msg::before,
.x-mask-msg::after,
.x-mask-msg-inner::before,
.x-mask-msg-inner::after {
  content: none !important;
  display: none !important;
}

#loading-msg::before,
#loading .loading-indicator::before,
.x-mask-msg-text::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  margin: -29px 0 0 -29px !important;
  border: 2px solid rgba(27, 79, 138, .13) !important;
  border-right-color: #1b4f8a !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: appScopedLoadingRing .95s linear infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

#loading-msg::after,
#loading .loading-indicator::after,
.x-mask-msg-text::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  margin: -29px 0 0 -29px !important;
  background-image: url("../avatarimage/dna_kriminal_logo_header.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center 52% !important;
  background-size: 56px 56px !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(33%) saturate(1480%) hue-rotate(179deg) brightness(82%) contrast(125%) !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}


/* Advanced filter panel
   ---------------------------------------------------------------------------
   Sadece filtre paneli verilen frame/container icin kullanilir. Standart uniGUI
   panel, messagebox, grid veya popup siniflarini hedeflemez. */
.advanced-filter-panel,
.advanced-filter-panel > .x-panel-body,
.advanced-filter-panel .x-panel-body,
.advanced-filter-panel .x-container {
  border: 1px dashed #9fb7d3 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%) !important;
  box-shadow: 0 10px 24px rgba(19, 32, 51, .06), inset 0 0 0 1px rgba(255,255,255,.72) !important;
  overflow: visible !important;
}

.advanced-filter-title,
.advanced-filter-title .x-label-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 100% !important;
  color: #132236 !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.advanced-filter-title i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: #2f86ff !important;
  background: #e8f1ff !important;
}
/* Sidebar micro toggle
   ---------------------------------------------------------------------------
   Main.pas icindeki hbSidebarMicro JS'i sadece solpanel/UniTreeMenu1 icin bu
   class'lari ekler. Kural kapsamÄ± .side-menu ile sÄ±nÄ±rlÄ±dÄ±r; baÅŸka panel,
   popup, grid veya standart uniGUI bileÅŸeni etkilenmez. */
.side-menu .hb-brand-wrap {
  position: relative !important;
  gap: 14px !important;
  transition: width .18s ease, padding .18s ease, gap .18s ease !important;
}

.side-menu .hb-sidebar-toggle {
  margin-left: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  color: rgba(242,246,251,.82) !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

.side-menu .hb-sidebar-toggle i {
  font-size: 14px !important;
  line-height: 1 !important;
}

.side-menu .hb-brand-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 92px) !important;
  margin-right: 12px !important;
  overflow: hidden !important;
  align-items: center !important;
  text-align: center !important;
}

.side-menu .hb-brand-title strong {
  display: -webkit-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.side-menu .hb-sidebar-toggle:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .hb-brand-wrap {
  width: 46px !important;
  min-width: 46px !important;
  padding: 8px 5px !important;
  gap: 0 !important;
  justify-content: center !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .hb-brand-title,
.side-menu.sidebar-micro:not(.sidebar-hover-open) .hb-sidebar-toggle {
  display: none !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .hb-brand-logo {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .x-treelist-item-text {
  display: none !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .x-treelist-item-icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  text-align: center !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .x-treelist-row {
  width: 46px !important;
  margin-left: 9px !important;
  margin-right: 9px !important;
}

.side-menu.sidebar-micro:not(.sidebar-hover-open) .x-treelist-item-expander {
  display: none !important;
}


/* Sidebar micro state hard override
   ---------------------------------------------------------------------------
   uniGUI/Ext hover sirasinda label HTML'ini yeniden cizse bile micro durumda
   ikon ve aciklama .sidebar-micro sinifindan uretilir. Bu blok sadece sol menu
   marka toggle'ini hedefler. */
.side-menu .hb-sidebar-toggle {
  position: relative !important;
}

.side-menu .hb-sidebar-toggle::after {
  content: "Men\00FC y\00FC  daralt" !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 100000 !important;
  display: none !important;
  width: max-content !important;
  max-width: 190px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  color: #f8fbff !important;
  background: rgba(15, 26, 42, .96) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.side-menu .hb-sidebar-toggle:hover::after {
  display: block !important;
}

.side-menu.sidebar-micro .hb-sidebar-toggle::after {
  content: "Men\00FC y\00FC  b\00FC y\00FC t/sabitle" !important;
}

.side-menu.sidebar-micro .hb-sidebar-toggle i::before {
  content: "\f08d" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}


/* Sidebar micro pin icon override
   ---------------------------------------------------------------------------
   FontAwesome'un mevcut fa-angles-left:before kuralini ezmek yerine micro
   durumda icteki i ikonunu gizleyip sabitle ikonunu butonun kendi ::before
   pseudo elementinden uretir. Sadece sol menu marka toggle'ini etkiler. */
.side-menu.sidebar-micro .hb-sidebar-toggle > i,
.side-menu.sidebar-micro .hb-sidebar-toggle i,
.side-menu.sidebar-micro .hb-sidebar-toggle .fas,
.side-menu.sidebar-micro .hb-sidebar-toggle .fa {
  display: none !important;
}

.side-menu.sidebar-micro .hb-sidebar-toggle::before {
  content: "\f08d" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: currentColor !important;
}


/* Sidebar micro only pin icon
   ---------------------------------------------------------------------------
   Micro modda toggle icindeki eski daralt ikonunu/yazisini tamamen susturur.
   Sadece .hb-sidebar-toggle::before ile uretilen sabitle ikonu gorunur kalir. */
.side-menu.sidebar-micro .hb-sidebar-toggle {
  font-size: 0 !important;
  line-height: 0 !important;
}

.side-menu.sidebar-micro .hb-sidebar-toggle *,
.side-menu.sidebar-micro .hb-sidebar-toggle *::before,
.side-menu.sidebar-micro .hb-sidebar-toggle *::after {
  display: none !important;
  content: "" !important;
}

.side-menu.sidebar-micro .hb-sidebar-toggle::before {
  content: "\f08d" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Toast Ã§erÃ§eveleri kaldÄ±rmak iÃ§in. */

/* 1) Toast katmanÄ± (en dÄ±ÅŸ) */
.x-layer.x-toast,
.x-toast {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) BazÄ± temalarda toast, window/panel gÃ¶vdesi ile gelir */
.x-toast .x-window,
.x-toast .x-window-default,
.x-toast .x-window-body,
.x-toast .x-window-body-default,
.x-toast .x-panel,
.x-toast .x-panel-default,
.x-toast .x-panel-body,
.x-toast .x-panel-body-default,
.x-toast .x-toast-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Ã‡erÃ§eve/frameli temalar iÃ§in */
.x-toast .x-panel-default-framed,
.x-toast .x-window-default-framed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) BazÄ± temalarda dekoratif pseudo-elementâ€™ler */
.x-toast:before,
.x-toast:after {
  display: none !important;
}


/* ButonlarÄ±n iÃ§indeki yazÄ±nÄ±n tam gÃ¶zÃ¼kmesi iÃ§in */
.x-btn-inner {
    line-height: normal !important;
}




/*boÅŸ editlerde alta kÄ±rmÄ±zÄ± Ã§izgi Ã§ek*/
.loginInput .x-form-text-wrap-default {
    border: 1px solid #d7dce5;
    border-radius: 4px;      /* Ã§ok yuvarlak deÄŸil */
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

/* Focus olduÄŸunda */
.loginInput .x-form-focus .x-form-text-wrap-default,
.loginInput .x-form-text-wrap-default:focus-within {
    border-color: #7ea6ff;
    box-shadow: 0 0 0 1px rgba(126,166,255,.25);
}

/* Hem focus hem hata varsa */
.loginInput.empty .x-form-focus .x-form-text-wrap-default,
.loginInput.empty .x-form-text-wrap-default:focus-within {
    border-color: #7ea6ff;
    box-shadow:
        inset 0 -2px 0 #D32F2F,
        0 0 0 1px rgba(126,166,255,.25);
}

/* Edit boÅŸken altÄ±nÄ±n kÄ±rmÄ±zÄ± Ã§izilmesi */
.requiredField .x-form-empty-field {
    border-bottom: 1px solid rgba(211,47,47,0.25);
}

/* Edit iÃ§indeki yazÄ±nÄ±n alt ve Ã¼stÃ¼nde boÅŸluk olmasÄ± iÃ§in */
.loginInput input.x-form-field {
    padding: 4px 6px !important;
}

/* Formun dÄ±ÅŸ Ã§erÃ§evesini Ã§ok incelt ve kÃ¶ÅŸeleri yuvarla */
.roundedForm {
    border-radius: 8px !important;
}

.roundedForm .x-window {
    border: none !important;
    box-shadow: none !important;
}

.roundedForm .x-window-default {
    border: 1px solid rgba(0,0,0,0.045) !important;
border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: #fff !important;
}

.roundedForm .x-window-header-default-top {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
}

.roundedForm .x-window-body-default,
.roundedForm .x-panel-body-default {
    border: none !important;
}

/* Uygulama fontu font dosyasÄ± files/fonts iÃ§inde */

@font-face {
    font-family: 'Nunito Sans';
    src: url('/files/fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('/files/fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-style: italic;
}

body,
.x-body,
.x-panel,
.x-window,
.x-btn,
.x-grid-cell,
.x-form-field,
.x-form-text,
.x-form-text-default,
.x-form-trigger-wrap,
.x-form-item-label,
.x-form-item-label-default,
.x-form-cb-label,
.x-field-label-cell,
.x-form-display-field,
.x-panel-header-text,
.x-tab-inner,
.x-column-header-text,
input,
textarea,
label {
    font-family: 'Nunito Sans', sans-serif !important;
}

/* Modern grid action column multi button fix
   ---------------------------------------------------------------------------
   Sadece modern-grid class'i verilen UniDBGrid action column hucrelerini
   hedefler. Birden fazla TUniGridActionButton eklendiginde ExtJS iconlari ayni
   hucre icinde yan yana gorunsun diye action hucre icini flex yapar. Normal
   veri hucreleri, header, filter ve pager etkilenmez. */
.modern-grid .x-action-col-cell,
.modern-grid .x-grid-cell-actioncolumn,
.modern-grid .x-grid-cell-action {
  overflow: visible !important;
}

.modern-grid .x-action-col-cell .x-grid-cell-inner,
.modern-grid .x-grid-cell-actioncolumn .x-grid-cell-inner,
.modern-grid .x-grid-cell-action .x-grid-cell-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 56px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  padding: 6px 4px !important;
  box-sizing: border-box !important;
}

.modern-grid .x-action-col-cell .x-grid-cell-inner > *,
.modern-grid .x-grid-cell-actioncolumn .x-grid-cell-inner > *,
.modern-grid .x-grid-cell-action .x-grid-cell-inner > *,
.modern-grid .x-action-col-cell .x-action-col-icon,
.modern-grid .x-grid-cell-actioncolumn .x-action-col-icon,
.modern-grid .x-grid-cell-action .x-action-col-icon,
.modern-grid .x-action-col-cell img,
.modern-grid .x-grid-cell-actioncolumn img,
.modern-grid .x-grid-cell-action img {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modern grid frame border correction
   Sol tarafta cift cizgi olusmamasi icin cerceve tek dis katmana tasinir.
   Ic ExtJS grid/body katmanlarindaki tekrar eden sol/sag border ve inset
   shadow temizlenir. Alt cizgi ve yuvarlatilmis kose formu korunur. */
.modern-grid.x-panel,
.modern-grid {
  border: 1px solid #c7d6e5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.modern-grid .x-panel-header,
.modern-grid .x-panel-header-default,
.modern-grid .x-panel-header-default-top {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #c7d6e5 !important;
  border-radius: 10px 10px 0 0 !important;
}

.modern-grid .x-panel-body,
.modern-grid .x-grid,
.modern-grid .x-grid-body,
.modern-grid .x-grid-view,
.modern-grid .x-grid-body-wrap,
.modern-grid .x-grid-scrollbar-clipper,
.modern-grid .x-grid-header-ct {
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.modern-grid .x-panel-body {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
}

.modern-grid .x-grid-body {
  border-bottom: 1px solid #c7d6e5 !important;
}


/* ---------- Scoped UniFileUploadButton ----------
   Sadece "modern-fileupload" veya "modern-upload" class'i verilen
   UniFileUploadButton icin calisir. Standart upload/file input, grid,
   panel ve normal butonlar etkilenmez.

   Kullanim onerisi:
   UniFileUploadButton1.ClientEvents.ExtEvents.Values['afterrender'] :=
     'function(sender){sender.addCls("modern-fileupload");}';
*/
.modern-fileupload,
.modern-upload,
.modern-fileupload.x-btn,
.modern-upload.x-btn,
.modern-fileupload .x-btn,
.modern-upload .x-btn,
.modern-fileupload .x-btn-default-small,
.modern-upload .x-btn-default-small,
.modern-fileupload .x-form-file-btn,
.modern-upload .x-form-file-btn {
  width: 100% !important;
  min-height: 54px !important;
  border: 1px dashed #9fb2c4 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%) !important;
  background-image: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.modern-fileupload.x-btn-over,
.modern-upload.x-btn-over,
.modern-fileupload.x-btn-focus,
.modern-upload.x-btn-focus,
.modern-fileupload:hover,
.modern-upload:hover,
.modern-fileupload .x-btn-over,
.modern-upload .x-btn-over,
.modern-fileupload .x-btn-focus,
.modern-upload .x-btn-focus,
.modern-fileupload .x-form-file-btn.x-btn-over,
.modern-upload .x-form-file-btn.x-btn-over {
  border-color: #2f86ff !important;
  background: linear-gradient(135deg, #f4f9ff 0%, #e6f1ff 100%) !important;
  background-image: linear-gradient(135deg, #f4f9ff 0%, #e6f1ff 100%) !important;
  box-shadow: 0 10px 24px rgba(47, 134, 255, .14) !important;
  transform: translateY(-1px) !important;
}

.modern-fileupload.x-btn-pressed,
.modern-upload.x-btn-pressed,
.modern-fileupload .x-btn-pressed,
.modern-upload .x-btn-pressed {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(47, 134, 255, .12) !important;
}

.modern-fileupload .x-btn-wrap,
.modern-upload .x-btn-wrap,
.modern-fileupload .x-btn-button,
.modern-upload .x-btn-button,
.modern-fileupload .x-btn-inner,
.modern-upload .x-btn-inner,
.modern-fileupload .x-btn-inner-default-small,
.modern-upload .x-btn-inner-default-small,
.modern-fileupload .x-form-file-btn .x-btn-inner,
.modern-upload .x-form-file-btn .x-btn-inner {
  height: 50px !important;
  line-height: 50px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modern-fileupload .x-btn-inner,
.modern-upload .x-btn-inner,
.modern-fileupload .x-btn-inner-default-small,
.modern-upload .x-btn-inner-default-small,
.modern-fileupload .x-form-file-btn .x-btn-inner,
.modern-upload .x-form-file-btn .x-btn-inner {
  color: #64748b !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
}

.modern-fileupload .x-btn-icon-el,
.modern-upload .x-btn-icon-el,
.modern-fileupload .x-btn-glyph,
.modern-upload .x-btn-glyph {
  color: #236da8 !important;
  opacity: .9 !important;
}

.modern-fileupload .x-form-file-input,
.modern-upload .x-form-file-input,
.modern-fileupload input[type="file"],
.modern-upload input[type="file"] {
  cursor: pointer !important;
}



/* Modern fileupload single border correction
   modern-fileupload class'i dis wrapper'a verildiginde icteki ExtJS x-btn
   katmani da border alabiliyor. Bu durum ozellikle alt kenarda farkli/kalin
   cizgi gibi gorunur. Cerceve sadece dis katmanda kalir; ic button katmanlari
   seffaf ve bordersiz olur. */
.modern-fileupload,
.modern-upload {
  border: 1px dashed #9fb2c4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modern-fileupload .x-btn,
.modern-upload .x-btn,
.modern-fileupload .x-btn-default-small,
.modern-upload .x-btn-default-small,
.modern-fileupload .x-form-file-btn,
.modern-upload .x-form-file-btn,
.modern-fileupload .x-btn-wrap,
.modern-upload .x-btn-wrap,
.modern-fileupload .x-btn-button,
.modern-upload .x-btn-button {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}


/* Modern grid row number nowrap correction
   RowNo/numberer kolonu, DisplayMemo icin verilen satir kaydirma kurallarindan
   etkilenirse 10, 11 gibi sayilar alt satira bolunur. Bu blok sadece row number
   hucrelerini tek satir ve ortali tutar. */
.modern-grid .x-grid-cell-row-numberer,
.modern-grid .x-grid-row-numberer,
.modern-grid .x-grid-cell-special {
  white-space: nowrap !important;
}

.modern-grid .x-grid-cell-row-numberer .x-grid-cell-inner,
.modern-grid .x-grid-row-numberer .x-grid-cell-inner,
.modern-grid .x-grid-cell-special .x-grid-cell-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  min-width: 28px !important;
}