/* ==========================================================
   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;
  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;
}

/* Compact filter edit
   ---------------------------------------------------------------------------
   A separate, compact alternative to modern-edit for grid/filter fields.
   It does not alter modern-edit and only affects controls carrying filter-edit.
*/
.filter-edit .x-form-text-default,
.filter-edit .x-form-text,
.filter-edit .x-form-field,
.filter-edit .x-form-trigger-wrap-default,
.filter-edit .x-form-trigger-wrap,
.filter-edit .x-form-text-wrap,
.filter-edit .x-form-item-body-default .x-form-text {
  border-radius: 3px !important;
}

.filter-edit .x-form-text-default,
.filter-edit .x-form-text,
.filter-edit .x-form-field {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  box-shadow: none !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.filter-edit .x-form-trigger-wrap-default,
.filter-edit .x-form-trigger-wrap,
.filter-edit .x-form-text-wrap {
  min-height: 24px !important;
  height: 24px !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.filter-edit .x-form-trigger-wrap-default .x-form-text,
.filter-edit .x-form-trigger-wrap .x-form-text {
  background: transparent !important;
  border: 0 !important;
}

.filter-edit .x-form-trigger-default,
.filter-edit .x-form-trigger {
  min-width: 22px !important;
  width: 22px !important;
  min-height: 24px !important;
  height: 24px !important;
  color: #9aa8b8 !important;
  background: transparent !important;
  border: 0 !important;
}

.filter-edit .x-form-text-default::placeholder,
.filter-edit .x-form-text::placeholder,
.filter-edit .x-form-field::placeholder,
.filter-edit .x-form-empty-field {
  color: #a3afbd !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.filter-edit .x-form-trigger-wrap-focus,
.filter-edit .x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.filter-edit .x-form-text-wrap:focus-within,
.filter-edit .x-form-text-default:focus,
.filter-edit .x-form-text:focus,
.filter-edit .x-form-field:focus {
  background: #ffffff !important;
  border-color: #a9c3df !important;
  box-shadow: 0 0 0 2px rgba(47, 134, 255, .08) !important;
  outline: none !important;
}


/* UniEdit direct-class compatibility
   uniGUI can attach filter-edit directly to the rendered input or wrapper.
   These selectors keep TUniEdit visually identical to filter comboboxes
   without changing modern-edit or standard uniGUI controls. */
.filter-edit.x-form-text-default,
.filter-edit.x-form-text,
.filter-edit.x-form-field {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.filter-edit.x-form-trigger-wrap-default,
.filter-edit.x-form-trigger-wrap,
.filter-edit.x-form-text-wrap {
  min-height: 24px !important;
  height: 24px !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.filter-edit.x-form-text-default::placeholder,
.filter-edit.x-form-text::placeholder,
.filter-edit.x-form-field::placeholder,
.filter-edit.x-form-empty-field {
  color: #a3afbd !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.filter-edit.x-form-trigger-wrap-focus,
.filter-edit.x-form-text-wrap:focus-within,
.filter-edit.x-form-text-default:focus,
.filter-edit.x-form-text:focus,
.filter-edit.x-form-field:focus {
  background: #ffffff !important;
  border-color: #a9c3df !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 2px rgba(47, 134, 255, .08) !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;
  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;
}

/* ---------- Main UniPageControl tab headers ----------
   modern-pagecontrol styles the main tab strip. The secondary
   inner-pagecontrol rules are declared afterwards with equal specificity,
   so an explicitly marked inner PageControl keeps its own compact style. */
.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;
}

/* ---------- Inner / secondary UniPageControl ----------
   Apply inner-pagecontrol only to secondary PageControls. tabPosition is set
   to bottom in the component's client configuration before it is rendered. */
.inner-pagecontrol .x-tab-bar {
  min-height: 31px !important;
  padding: 3px 8px 5px !important;
  background: #f8fafc !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid #d8e3ee !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.inner-pagecontrol .x-tab-bar-strip,
.inner-pagecontrol .x-tab-bar-strip-default,
.inner-pagecontrol .x-tab-bar-strip-bottom,
.inner-pagecontrol .x-tab-bar-strip-default-bottom {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.inner-pagecontrol .x-tab {
  height: 25px !important;
  min-height: 25px !important;
  margin: 0 3px 0 0 !important;
  padding: 0 10px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.inner-pagecontrol .x-tab-inner {
  padding: 0 !important;
  color: #75859a !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 25px !important;
  letter-spacing: 0 !important;
}

.inner-pagecontrol .x-tab-icon-el,
.inner-pagecontrol .x-tab-icon {
  width: 13px !important;
  height: 13px !important;
  font-size: 12px !important;
  line-height: 13px !important;
  opacity: .78 !important;
}

.inner-pagecontrol .x-tab-over,
.inner-pagecontrol .x-tab-focus {
  background: #edf3f8 !important;
  border-color: #d7e2ec !important;
}

.inner-pagecontrol .x-tab-over .x-tab-inner,
.inner-pagecontrol .x-tab-focus .x-tab-inner {
  color: #34465d !important;
}

.inner-pagecontrol .x-tab-active {
  background: #eef5ff !important;
  background-image: none !important;
  border-color: #c9daec !important;
  border-top-color: #2f86ff !important;
  border-bottom: 1px solid #c9daec !important;
  box-shadow: inset 0 2px 0 #2f86ff !important;
}

.inner-pagecontrol .x-tab-active .x-tab-inner {
  color: #1f4f85 !important;
  font-weight: 700 !important;
}

.inner-pagecontrol .x-tab-close-btn {
  width: 12px !important;
  height: 12px !important;
  margin-top: -6px !important;
  opacity: .62 !important;
  transform: scale(.82) !important;
}

.inner-pagecontrol .x-tab-close-btn:hover {
  opacity: 1 !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;
}

/* DrawColumnCell Attribs.Color compatibility
   Do not use !important on data-cell backgrounds. uniGUI writes Attribs.Color
   as an inline background color, which must remain above the theme default. */
.modern-grid .x-grid-cell {
  border-color: #d5e1ec !important;
  border-width: 0 0 1px 0 !important;
  background-color: transparent;
  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;
}

/* Hide the native initial-loading text. The ring and logo are parent
   pseudo-elements, so they remain visible and centered. */
#loading-msg > *,
#loading .loading-indicator > * {
  visibility: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !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/icer-modern-logo-loading.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. */
/* Scope the style to the component carrying this class.
   Nested controls remain native unless the same class is assigned to them. */
.advanced-filter-panel,
.advanced-filter-panel > .x-panel-body {
  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;
}

/* Custom toast: remove only the ExtJS outer frame.
   The .ugx-toast content, colors and internal layout remain untouched. */
.x-layer.x-toast,
.x-toast.x-layer,
.x-toast:has(.ugx-toast),
.x-toast.x-window:has(.ugx-toast),
.x-toast.x-window-default:has(.ugx-toast) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Remove ExtJS frame cells/wrappers only around the custom ugx toast. */
.x-toast:has(.ugx-toast) > .x-window-wrap,
.x-toast:has(.ugx-toast) > .x-window-bodyWrap,
.x-toast:has(.ugx-toast) .x-window-body,
.x-toast:has(.ugx-toast) .x-window-body-default,
.x-toast:has(.ugx-toast) .x-panel-body,
.x-toast:has(.ugx-toast) .x-panel-body-default {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ExtJS already animates the toast container. Disable the nested entrance
   animation to avoid two simultaneous translate/opacity animations. */
.x-toast .ugx-toast {
  animation: none !important;
}

/* Animate the progress indicator with transform instead of width.
   This avoids layout recalculation on every animation frame. */
@keyframes ugxToastProgressSmooth {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.x-toast .ugx-progress > div {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: ugxToastProgressSmooth !important;
  animation-timing-function: linear !important;
  animation-fill-mode: forwards !important;
  will-change: transform;
}


/* 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;
}


/* Filter edit final priority
   A control may already carry modern-edit from its DFM and receive filter-edit
   later with addCls(). In that case the compact filter appearance must win.
   advanced-filter-edit is included for existing forms that use the older name. */
.modern-edit.filter-edit .x-form-trigger-wrap,
.modern-edit.filter-edit .x-form-trigger-wrap-default,
.modern-edit.filter-edit .x-form-text-wrap,
.modern-edit.advanced-filter-edit .x-form-trigger-wrap,
.modern-edit.advanced-filter-edit .x-form-trigger-wrap-default,
.modern-edit.advanced-filter-edit .x-form-text-wrap {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.modern-edit.filter-edit input.x-form-field,
.modern-edit.filter-edit .x-form-text,
.modern-edit.filter-edit .x-form-text-default,
.modern-edit.advanced-filter-edit input.x-form-field,
.modern-edit.advanced-filter-edit .x-form-text,
.modern-edit.advanced-filter-edit .x-form-text-default {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.modern-edit.filter-edit .x-form-text-wrap,
.modern-edit.filter-edit .x-form-item-body,
.modern-edit.advanced-filter-edit .x-form-text-wrap,
.modern-edit.advanced-filter-edit .x-form-item-body {
  min-height: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modern-edit.filter-edit .x-form-trigger,
.modern-edit.filter-edit .x-form-trigger-default,
.modern-edit.filter-edit .x-form-clear-trigger,
.modern-edit.filter-edit .x-form-clear-trigger-default,
.modern-edit.advanced-filter-edit .x-form-trigger,
.modern-edit.advanced-filter-edit .x-form-trigger-default,
.modern-edit.advanced-filter-edit .x-form-clear-trigger,
.modern-edit.advanced-filter-edit .x-form-clear-trigger-default {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 20px !important;
  background: transparent !important;
  border: 0 !important;
}

.modern-edit.filter-edit .x-form-trigger-wrap-focus,
.modern-edit.filter-edit .x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.modern-edit.advanced-filter-edit .x-form-trigger-wrap-focus,
.modern-edit.advanced-filter-edit .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
  background: #ffffff !important;
  border-color: #a9c3df !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 2px rgba(47, 134, 255, .08) !important;
}


/* Compact filter ComboBox / DBLookupComboBox */
.filter-combo .x-form-trigger-wrap,
.filter-combo .x-form-trigger-wrap-default,
.filter-combobox .x-form-trigger-wrap,
.filter-combobox .x-form-trigger-wrap-default {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fafcfe !important;
  border: 1px solid #e8eef4 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.filter-combo .x-form-trigger-wrap-focus,
.filter-combo .x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.filter-combobox .x-form-trigger-wrap-focus,
.filter-combobox .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
  background: #ffffff !important;
  border-color: #a9c3df !important;
  box-shadow: 0 0 0 2px rgba(47, 134, 255, .08) !important;
}

.filter-combo .x-form-text-wrap,
.filter-combo .x-form-item-body,
.filter-combobox .x-form-text-wrap,
.filter-combobox .x-form-item-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.filter-combo input.x-form-field,
.filter-combo .x-form-text,
.filter-combo .x-form-text-default,
.filter-combobox input.x-form-field,
.filter-combobox .x-form-text,
.filter-combobox .x-form-text-default {
  width: 100% !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

/* Only picker triggers are targeted. ClearButton triggers remain unchanged. */
.filter-combo .x-form-arrow-trigger,
.filter-combo .x-form-arrow-trigger-default,
.filter-combo .x-form-trigger-picker,
.filter-combo .x-form-trigger-picker-default,
.filter-combobox .x-form-arrow-trigger,
.filter-combobox .x-form-arrow-trigger-default,
.filter-combobox .x-form-trigger-picker,
.filter-combobox .x-form-trigger-picker-default,
.modern-edit.advanced-filter-edit .x-form-arrow-trigger,
.modern-edit.advanced-filter-edit .x-form-arrow-trigger-default,
.modern-edit.advanced-filter-edit .x-form-trigger-picker,
.modern-edit.advanced-filter-edit .x-form-trigger-picker-default {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #6b7f99 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  cursor: pointer !important;
}

.filter-combo .x-form-arrow-trigger::before,
.filter-combo .x-form-arrow-trigger-default::before,
.filter-combo .x-form-trigger-picker::before,
.filter-combo .x-form-trigger-picker-default::before,
.filter-combobox .x-form-arrow-trigger::before,
.filter-combobox .x-form-arrow-trigger-default::before,
.filter-combobox .x-form-trigger-picker::before,
.filter-combobox .x-form-trigger-picker-default::before,
.modern-edit.advanced-filter-edit .x-form-arrow-trigger::before,
.modern-edit.advanced-filter-edit .x-form-arrow-trigger-default::before,
.modern-edit.advanced-filter-edit .x-form-trigger-picker::before,
.modern-edit.advanced-filter-edit .x-form-trigger-picker-default::before {
  content: "\f107" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: #6b7f99 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 16px !important;
}

/* Edit + FieldLabel vertical alignment
   ---------------------------------------------------------------------------
   ExtJS label hucreleri varsayilan ust padding/line-height degerini korurken
   filter-edit / advanced-filter-edit alanlari 24px'e iner. Yuksekligi sinifa
   gore belirleyip label ile input govdesini ayni dikey merkeze baglar. */
.modern-edit {
  --hb-edit-row-height: 32px;
}

.filter-edit,
.modern-edit.filter-edit,
.modern-edit.advanced-filter-edit {
  --hb-edit-row-height: 24px;
}

.modern-edit .x-form-item-label,
.modern-edit .x-form-item-label-default,
.modern-edit .x-field-label-cell,
.filter-edit .x-form-item-label,
.filter-edit .x-form-item-label-default,
.filter-edit .x-field-label-cell {
  height: var(--hb-edit-row-height) !important;
  min-height: var(--hb-edit-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

.modern-edit .x-form-item-label-inner,
.modern-edit .x-form-item-label-inner-default,
.filter-edit .x-form-item-label-inner,
.filter-edit .x-form-item-label-inner-default {
  display: flex !important;
  align-items: center !important;
  height: var(--hb-edit-row-height) !important;
  min-height: var(--hb-edit-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

.modern-edit .x-form-item-body,
.modern-edit .x-form-item-body-default,
.filter-edit .x-form-item-body,
.filter-edit .x-form-item-body-default {
  vertical-align: middle !important;
}